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).
Related
In the source version site slick slider work and arrows there is DOM.
http://spotlight.devbucket.me/www/index.html
But in production site slick slider is init, it's seen in chrome inspector. No arrows in DOM, not work slider.
http://spotlight.devbucket.me/
All files the same in all versions.
I'm confused - where is the mistake?
Please help me, and sorry for my English.
My PhoneGap application uses slide in and slide out animations using entirely CSS animations.
You can find the project I based my app on here.
As you can see from the demo the slide transition is quite smooth, but as soon as I add images, after the new page is loaded it flickers/blinks for a fraction of second. The interesting thing is that all the UI elements are shown on screen and then the flickers occurs. More, sometimes the page scrolling becomes buggy and it doesn't let me scroll to the bottom of the page where my images are.
I cached the images using CSS to improve image load but again no luck.
I also found on different blogs about a similar issue on JQ mobile and tried adding without luck:
webkit-backface-visibility: hidden;
You don't know how much I appreciate your help I spent my whole Saturday trying to figure this out.
After some hours of fiddling I realized that the issue was because of the scrolling mechanism and fixed header which are poorly supported by -webkit browser. I am now using iscroll 5 and the issue disappeared.
it is due to you JS files
if you load the more js file on html page then it will take time you will find the filck in phonegap application
when you develop application in phonegap then try to use single page architecture to develop application that must be the better option
even i am suffer this problem.
I have been redesigning my WP portfolio website of late and have been playing with a neat little aesthetic jQuery plugin, BlackAndWhite, Which turns all of the images in my gallery view black and white and makes them recolor on hover using the HTML5 canvas.
I noticed one bug with the plugin is that if it runs before the images have finished loading, it will sometimes only grey-scale half of an image. So I have been using another tiny plugin to only run the script after I'm certain that the images have finished loading. see waitforimages.js
The initialization script is the following:
jQuery(document).ready(function(){
jQuery('.bwWrapper').waitForImages(function(){
jQuery(this).BlackAndWhite({
hoverEffect : true // default true
});
});
});
where bwWrapper is the wrapper around each img.
Now this works really nicely on most computers and browsers that I have tested thus far. Everything works the way it should. However, when I opened the site on my android, I noticed that only 50% of the images recolored. When I refresh the page, again only 50% go black and white, though it is different ones each time. Making the site fully responsive to mobile is still on my to-do list, but I have noticed this fairly blatant, yet difficult to explain bug.
Any idea what might be causing this?
You don't need to preload the images because the plug in aleady do it. Try to download the last version of the script on github https://github.com/GianlucaGuarini/jQuery.BlackAndWhite and if you still have problems send me a private mail with a link so I can check what could be the problem.
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; }
I've developed a JS-heavy site using the Mootools library and have hit a bump in the road. There is a scrolling div on the page that contains 500+ images and I'm trying to implement a lazyload feature so the page doesn't load all 500+ images at once.
I found David Walsh's lazyload class but it doesn't work in webkit browsers (he says this is because of WebKit bug #6656).
I also found this class and it appears to work but doesn't really. It still loads all images on the page but hides the images outside of the viewport and fades them in when scrolled into view.
There seem to be a number of jQuery lazyload classes that work really well (in all browsers), but I'm already weeks into the development of this site and can't really justify switching for this or using two libraries.
Anyone know if there is a Mootools lazyload class out there that works in webkit browsers? If not, have any recommendations? Do I have to resort to using jQuery alongside Mootools?
This issue is holding development up a bit.
You could wrap the images inside of a noscript tag. Browsers won't load images inside of there if you have Javascript enabled. The nice thing about it is that it degrades well for non-JS browsers. I describe in more detail here:
http://experimentsbykevin.tumblr.com/post/754769738/lazy-image-loading