in fullPage.js when setting options for normal scrolling, for example:
autoScrolling: false,
easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)'
and scroll by an anchor link the defined css easing will not work.
Instead it is a linear/ease transition.
Is this a bug or simply not possible? Any ideas?
JSFiddle
and scroll by an anchor link the defined css easing will not work. Instead it is a linear/ease transition.
When using autoScrolling:false fullpage.js is not using css3 to scroll but the jQuery scrollTop property. As it is just scrolling a normal site with a scroll bar.
Use the easing option instead.
Related
I'm trying to embed some contents into a HTML5 device mockup. The library that I use for mockup is https://github.com/pixelsign/html5-device-mockups.
I created a button inside 'screen' div but I can not reach to it.
If you inspect this page's elements, you can see that 'screen' div is not reachable with mouse click. I've tried to changed z-index property but it didn't help.
The .screen div has its property pointer-events set to none in general.scss
Removing the property and rebuilding the CSS should work.
Note: I do not know why this property was set to none in the first place. Removing it might have some side effects.
I have a dropdown menu which works fine in all modern browsers, but there are some weird things happening in IE9. The dropdown appears transparent or invisible in some way, but its box-shadow is visible. In addition, hovering fails when you mouse off the parent list item.
I am referring to the main navigation bar at the top:
http://gratefulglass.viussandbox.co/
I placed a red border on the submenu's containing element, to illustrate that the menu appears to be positioned correctly.
Any suggestions would be greatly appreciated.
The issue is with the filter CSS properties you're setting on the <ul> and <a> tags in your code. IE9 will render the gradient backgrounds for you, but that causes it to set the hasLayout flag on the element internally, which causes the renderer to treat that element as if it had overflow: hidden; and you can't override that by simply setting overflow: visible; as it's not actually a CSS rule, but rather the way the internal rendering engine will treat the element when processing it. If you remove the filters with filter: none; in an override, or simply don't set them, then you should see everything work correctly again.
Check this links:
1,
2
Sorry, but cant put more links:
http:// && joseph.randomnetworks.com/2006/08/16/css-opacity-in-internet-explorer-ie/
http:// && www.webdeveloper.com/forum/showthread.php?163100-Opacity-hover-not-working-in-IE
Some properties behave different or are not persistent depending the browser.
But there is always a way to make it work.
Best way to make it work, javascript.
I have an element that happens to have both -webkit-overflow-scrolling: touch and background-color: black so the "handle" that shows scroll position is very difficult to see. Are there -webkit CSS style rules that can alter the appearance (specifically the color) of that "handle" or am I stuck with the near-black coloring?
You can use the normal scrollbar styles, ex: ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb to alter the div that scrolls.
However, if the -webkit-overflow-scrolling is set to 'touch', the black default scrollbar will show up as well as your custom scrollbar.
But, if -webkit-overflow-scrolling is set to 'auto', it only your custom scrollbar shows. Not the most profound answer, but it's a start I think.
I've tried positioning the header 'relative' with a high z-index and the content with position relative as well but the drop down hides as soon as I mouse over above where the content starts in IE 7. It's on this page - http://www.legrandconfectionary.com/truffle-flavors/ I thought it has something to do with tool-tip on the truffles but it's happening on every page. Help is greatly appreciated.
I'm going to go out on a limb and say it's related to your tooltip plugin's divs which are left behind after you've no longer hovered over them. You can't see them, but they are there. Try adding this to your CSS file:
.tooltip { z-index: 50; }
Theoretically this will prevent the tooltip from being rendered on top of the UL element making up the drop-down menu. I have a feeling that IE 7 is bubbling the mouseover event onto the hidden tooltip (which probably stops the bubbling at itself) thus cancelling the mouseover event on your UL. Which your nav relies on since IE7 doesn't support :hover on LI elements.
EDIT: After reviewing further I am no longer convinced that it is the div which is created by the tooltip plugin, but I am convinced that what I stated about the plugin cancelling the bubble on the mouseover event. I believe your tooltip plugin is the culprit. Try disabling it and then check if the behavior persists.
I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I was going for a tooltip effect that when you hover a link, the tooltip appears, but fades in using only CSS3.
I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's initally positioned left:-999px;.
So basically, what am I doing wrong/is what I was going for possible? (Note I don't want to do anything with JS/JQuery, was just curious to see if I could do it in CSS)
You can see and play with it here.
You need to set the tool tip to not even be shown normally.
#one a.tooltip span {
//display:block;
display:none;
....
}
Edit: It seem that rather then set display to none, just position to absolute.
Edit2: it seems I was beaten to it.
Your span is still in the document flow.
You can remove it by setting its display to none, as the comment above suggests, or setting its position to absolute, which seems to be what you were getting at to hide it off the left edge of the screen.