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
Related
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've created a website using SUPERSCROLLORAMA plugin. I wasn't aware of the problems with parallax scrolling on iPad and iPhone. I've found out a little bit to late, and I'm thinking about the ways to solve this.
If I understand correctly, events are disabled on this devices while scrolling. So will I be able to make website act as it should, if I disable the native scrolling and implement another one, via JavaScript plugin?
I've already disabled the original scrolling using Alnitak's answer from this question. I've tried to find some plugins to activate scrolling again, but the problem is, it has to be binded to the document since animations are fired there... Do you know the plugin that will do the trick? Is my solution even correct, or there is no solution for my case, I need to rewrite the script from scratch?
You can use parallax scrolling plugin that works on mobile browsers (iOS too).
Have a look at Skrollr. It doesn't depend on any other library, it has optional mobile js file and is very easy to use. Just read the documentation.
I have recently used a JQuery plugin called cycle to create slides of general HTML content in my homepage (www.inspirastudios.com). Everything looked OK in Firefox and Chrome but while browsing the site with a client I got the ugly surprise of Internet Explorer 7 rendering my slides within an ugly gray background. Do you know:
how to solve this, or
any decent javascript slideshow/carousel/slider library that supports general HTML (not only images), previous and next slide activation buttons?
Nivo slider has all the features that you are looking for. http://nivo.dev7studios.com/
You might be facing the following problem: jquery cycle IE7 transparent png problem
I have a big problem with the layout of a webpage designed for iPad and normal PC displays.
I want to have this layout:
http://img227.imageshack.us/img227/9978/layoutw.png
I already have this layout designed with HTML / CSS and it works in every common webbrowser (Firefox, Safari, Chrome - IEx is not relevant for me):
http://ud05_188.ud05.udmedia.de/spotlight/webpage.html
But now I integrate some jQuery mobile stuff and the layout is broken.
You can see here the website: http://ud05_188.ud05.udmedia.de/spotlight/jquery.html
They div areas are overlapping and it seems that the jquerymobile JavaScript file is the problem.
So how can I identify where the problem is located? What's going wrong here?
Thank you in advance for your help!
Best Regards Tim
I didn't yet look into multi-box layouts with JQM, but what I can already suggest is:
See if it can be done with JQM settings. JQM might have special attributes for your controls. Or you might need extra wrapping divs.
Add margins/paddings to your CSS. Adding rounded corners often produces extra width for elements.
And if you manage to figure it out, please post it here as an answer to your own question.
I'm trying to use a link to open an overlay instead of in a separate popup window. This overlay should consist of a semi-transparent div layer that blocks the whole screen from being clicked on. I also aim to disable scrolling at this point. Not matter where you are on the main page, when the link is clicked, the overlay should be in the center of the screen's X and Y origins. Inside of this overlay div, should be an iframe configured such that 3 sizes of content can be loaded.
Shadowbox is a nice script for inline "popups". It can work with any of the usual JS libraries if you use any (jQuery, Prototype, etc) or on its own, has a pretty comprehensive skinning system so you can adapt the looks without having to go into the source code itself.
It is also the only such script (there are dozens) I've tried that would work reliably across all usual browsers.
It won't disable scrolling for you (you can still see the normal page background scroll by through the dark overlay), but the "popup" will in any case stay fixed on the screen.
http://onehackoranother.com/projects/jquery/boxy/
jQuery.boxy is another nice, lightweight modal dialog plugin.
You might want to check out an old JS lib I wrote, called SubModal.
Easy to understand and modify. Go to town ;)
Once you've modded it, use Minify in combination with gzip on your server. The lib size will be teeny tiny.
I usually use ThickBox for this. It works really well and degrades nicely if the user does not have JS turned on.
It does use jQuery, but you can load it from Google: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js and maybe get the benefit of caching.
Grab the javascript ext library. It has functionality for overlays that are modal.
ThickBox (no longer developed) led me to this library which seems to work very well:
http://fancybox.net