Nivo Slider Display Problem in IE - javascript

I am using Nivo Slider, and am experiencing the "stacking" problem -- with all of the images initially loading on top of each other. I have tried the workaround for this problem described at http://nivo.dev7studios.com/support/ but this results in the images not displaying at all in IE. I have also tried the workaround of including "display:none" in the style tag but this has the same effect in IE. You can see the code, currently without the workaround, at http://www.rooftopdrinker.com. Any advice would be appreciated.

I believe something about IE's box model confuses the Nivo code.
Adding this CSS rule seems to fix it:
#slider { height: 355px; }

Related

Fixed position + JavaScript issue with Safari

I'm having a problem with some JavaScript that makes the rollover menu on the right (aligning with the tick mark) work on an Elementor site I'm working on. I had a another dev work on the JavaScript, and I didn't notice this error right away. Now I can't get ahold of him.
The right nav looks perfect and it does exactly what it needs to do in Chrome and Firefox. But I see now that the right nav and tick link does not work in Safari.
Elementor support was kind enough to take a look at it and they said, "...your page has custom CSS for the fixed layout menu and also I found a console error regarding a snippet for the dividers. It seems there is custom code applied to the Elemtor dividers to style the fixed layout menu. This is more a Safari and the custom code/CSS is applied to the page issue.
Despite there being a known issue with the position: fixed CSS rule not working as intended in Safari, I have seen people find a workaround to it. However, the fixed layout menu has many custom CSS and custom code applied. I wasn't able to find an immediate workaround for the many customizations you have.
The only solution I found was to remove the custom CSS position fixed which will depend much on the needs and requirements of the site."
Can anyone point me in the right direction for a fix? Have you come across this problem before with your sites?
Thanks in advance for any help.
The site is here:
[http://farallon-dev.com]

Can't seem to target img via CSS within Nivo Slider

I'm revamping an old/existing website and creating a mobile version in the process. If you view the site in mobile (or via mobile dev tool emulator), you'll see that the main image slider div is responsive, but for some reason, the images inside are not, despite being targeted like this:
#slider img {
max-width: 100vw;
}
I have a feeling this has to do with the way Nivo Slider chooses (randomly I presume) slides, and hide/shows them? Don't have much experience with the plugin, so any help would be appreciated.
Cheers.
Sorry to answer my own question, but this turned out to be an issue of out-of-date scripts. I grabbed the latest Nivo Slider script from GitHub, threw it in, and everything is working fine. Apparently responsiveness was built into the plugin sometime between the script I had and the latest (3.2).

Scrollbar doesn't show up in Chrome on OS X

So I have a site built using the Kentico CMS. On page load, sometimes the scroll bars will not show up in Chrome on Mac. They do show up in Safari, reliably. I previously had this issue with Safari, and added
html {
overflow-y: scroll;
}
to my css, and that seemed to fix it. It's not working for Chrome, however.
I did notice that if I open up the dev console and then close it, it gains a scroll bar. If I change the CSS of an element to be width 99%, rather than 100%, it gains a scroll bar. However, this only works if I change the CSS that targets that element. If I change it just for that element (either with javascript or by modifying the element.style through the console), it does not gain a scroll bar.
There are no JavaScript errors upon opening the console.
My thought was to try to change the CSS itself with JavaScript, but I'm not positive how to do that.
Does anyone have any other ideas? Or how I could accomplish my plan?
I unfortunately can't reduce the problem any further. It seems to be the interaction of the whole site, including Kentico, so it doesn't seem possible to get a jsfiddle or anything.
I have solved the issue. This was caused by the following css:
html {
overflow-y: inherit;
}
I do not know why this caused the problem. I commented out this line, and the issue was resolved.

Skrollr cutoff on iPad

I am using Skrollr plugin and it's working fine on desktop.
On iPad though, the height of my document is cutoff. I have tried to remove all skrollr data attributes, but the issue persists, I noticed that just by activating the plugin I get this issue.
I tried to enable/disable the forceHeight option but the issue persists. Any idea?
Many thanks
I had this issue, too, but I fixed it by adding an empty data-top and data-bottom to the #skrollr-body div. (Though depending on how strict your HTML cleaners are, you may need to add data-top="" or data-bottom="")
<body>
<div id="skrollr-body" data-top data-bottom>
Your content here.
</div>
</body>
I'm still looking into the explanation of why this fix works, but I believe it has something to do with setting keyframes. By making sure your #skrollr-body has keyframes for top and bottom, it ensures both are seen in the viewport.
More details here: https://github.com/Prinzhorn/skrollr/issues/576

jquery carousel not functioning properly in Chrome or any webkit browser

I made a infinite carousel from scratch into a plugin with jquery. It works fine in Firefox but it works partially in Chrome, i.e. elements disappear as I slide the carousel.
Please view my codes here (it was too long to paste it): http://jsfiddle.net/HkTks/2/
Compare the carousel with Firefox and Chrome.
Why is Chrome behaving like that?
Many thanks​
Well, this may be a webkit bug. Looks like somehow the anchor element accidentally inherited absolute positioning rather than relative.
Seeing the style of .iconList a to include position: relative; and removing top:0 seemed to fix it for me.
Here's the updated fiddle: http://jsfiddle.net/HkTks/4/

Categories