lazy load with jquery tooltip



well I am using Lazy Load for images so that could make images load only when they are required, by default it loads images based on user scrolls. That is fine with me if the images are displayed, but here I have a different scenario as the images are in jquery tooltip. If the mouse of over the link or not THE IMAGES LOADS but I don't want this to happen rather images should load only when the link is mouse over and then the image should load in the tooltip.

I used mouse over that only works if the placeholder image is mouseover (for lazy loading in src we put the placeholder image and the actual image goes into data-original).

So I was wondering if there is a way that when the link is mouse over then the image should load only in the tooltip not when the page is loading or when user is scrolling.
You can see a live example here in this test page http://bloghutsbeta....-slidernav.html
*the tooltips are only applied to the 'A' category names, in the current condition of live demo, lazyloading has not yet been applied, so you could better understand what I am talking about*
Posted On: Monday 19th of November 2012 09:41:54 PM Total Views:  157
View Complete with Replies

RELATED TOPICS OF JavaScript PROGRAMMING LANGUAGE




'lazy load' image pre-loading

Basically I want an effect like this: http://www.appelsiini.net/projects/l...ed_fadein.html Where the images on the page fade in as the user scrolls down. I implemented the code on a page, here: http://www.jamiewebster.co.uk/orca.html Now, I have a couple of issues with this. First issue, it works in FF but it doesn't seem to work in Chrome. Second issue, I can see the alt text of the images below just above the fold of the page before the image loads (I guess it depends on your monitor size on wether you'll see it or not, but its still a problem!) Thirdly, it seems that once the images have loaded, if you scroll back up you no longer have the fade effect and it only happens once (unless you refresh the page) - would be good if that effect could happen every time you scroll. Any ideas, or if there is better code out there
VIEWS ON THIS POST

85

Posted on:

Wednesday 17th October 2012
View Replies!

Make a lazy loader that loads in images when user scrolled to ...

anyone know how to do a custom lazy load \t You know for instance... lets say I got 500,000 images to load on a page... it's inside a dive... well I want to load the images when it's needed. So not all 500,000 images will load all at once. I want like 10 to load at a time.. this will make the div scrollable. so when the user scrolls down to the 8th image it will load 10 more images and so on. Does anyone know how to make their own function like this how do you detect if the user scrolled to the 8th image I have an idea.. I am pretty sure I can use a function.... that will send variables to a php script that will use the mysql limit. The javascript would send a value which is where to start loading from the 10th image in the database.. meaning start grabbing the images from the 11th image onward for a max of 10 total images to display. Can anyone give me some concept to this\t
VIEWS ON THIS POST

109

Posted on:

Saturday 10th November 2012
View Replies!

lazy load with jquery tooltip

well I am using Lazy Load for images so that could make images load only when they are required, by default it loads images based on user scrolls. That is fine with me if the images are displayed, but here I have a different scenario as the images are in jquery tooltip. If the mouse of over the link or not THE IMAGES LOADS but I don't want this to happen rather images should load only when the link is mouse over and then the image should load in the tooltip. I used mouse over that only works if the placeholder image is mouseover (for lazy loading in src we put the placeholder image and the actual image goes into data-original). So I was wondering if there is a way that when the link is mouse over then the image should load only in the tooltip not when the page is loading or when user is scrolling. You can see a live example here in this test page http://bloghutsbeta....-slidernav.html *the tooltips are only applied to the 'A' category names, in the current condition of live demo, lazyloading has not yet been applied, so you could better understand what I am talking about*
VIEWS ON THIS POST

234

Posted on:

Monday 12th November 2012
View Replies!

Problem loading images in ajax

I'm having difficulty loading images via Ajax on a site that I've been working on. I'm performing the ajax by using the Request.HTML object of the MooTools framework. Basically, I'm just passing some parameters to a php script which outputs some image tags and then I insert that HTML into a pre-defined content div. For some reason though, it seems that big images don't seem to load consistently when using this technique. Usually, they will just show up as broken images, but when I navigate to the url of the image that is 'broken', it displays just fine. Also, occasionally after navigating to the actual url of the image, my browser will cache the image and then it will display just fine when loading it through Ajax. Has anyone else encountered this problem
VIEWS ON THIS POST

140

Posted on:

Monday 19th November 2012
View Replies!

Show loading Animation before iframe is fully loaded

Hi to all, I have the following situation: I have an iframe and I want to display a loading animation to the user until the iframe is fully loaded, this is want I did: 1. I start the iframe with style:display:none 2. I have a div that wraps the iframe 3. When the iframe is fully loaded a method is called from the iframe 'removeDivs', I change the div to be invisble with style:display:none and I set the iframe to be visible with stle:display:"" 4. The problem: Because the div wraps the iframe, after changing the style of the iframe its stay invisible, the property I set doesn't affect.
VIEWS ON THIS POST

142

Posted on:

Monday 19th November 2012
View Replies!

Ajax: auto refreshing a xml file load

Hi all, I have the following php script: getElementsByTagName( "event" ); foreach( $events as $event) { $hours = $event->getElementsByTagName( "hour" ); $hour = $hours->item(0)->nodeValue; $minutes = $event->getElementsByTagName( "minute" ); $minute = $minutes->item(0)->nodeValue; . . . > events.xml contains schedules and info for events. If an event is taking place now the php script will show a div with information. This chapter is done and working, the trouble comes with the xml load part. If the load of the xml document is done only once (when the page is first time loaded), I will need to refresh the php script so it looks for more times and info ..but the user will see the page reloading all the time. I need the php script to look for the events' times in the xml file at all times, so I guess I have to do an auto refreshing of the $doc->load( 'events.xml' ); how can I do that\t
VIEWS ON THIS POST

136

Posted on:

Monday 19th November 2012
View Replies!

save and load font and background setting using cookies

hi i am new to javascript and i try to play around with it but i am stuck at the moment lol hope that someone can help me check my code and tell me what is wrong with it in the page the user can change the background color and the font family so when they open the website, the background and the font they selected is load back function changeBackgroundColor(elem, dropper) { document.getElementById(elem).style.backgroundColor = dropper.options[dropper.selectedIndex].value; } function changeFontFamily(elem, dropper) { document.getElementById(elem).style.fontFamily = dropper.options[dropper.selectedIndex].value; } var expDays = 100; var exp = new Date(); exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) { endstr = document.cookie.length; } return unescape(document.cookie.substring(offset, endstr)); } function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) argv[2] : null; var path = (argc > 3) argv[3] : null; var domain = (argc > 4) argv[4] : null; var secure = (argc > 5) argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) "" : ("; expires=" + expires.toGMTString())) + ((path == null) "" : ("; path=" + path)) + ((domain == null) "" : ("; domain=" + domain)) + ((secure == true) "; secure" : ""); } function cookieForms() { var mode = cookieForms.arguments[0]; for(f=1; f
VIEWS ON THIS POST

125

Posted on:

Monday 19th November 2012
View Replies!

Downsizing image load time

I'm looking for a way to downsize the load of images on a page. My current template provides the user with a tab based option set for different items that can be ordered, the entire set is currently set as 1 form (i.e the quantity input fields), but on page load only 1 tab is displayed at a time on the page containing 4 or 5 images. The user has the ability to click on a tab, which inturn displays a new set of product options. There are a total of 10 tabs and thus 40-50 total images that need to load on the page. Each image requires an individual / unique call to my image server for loading. I would like to set the code to ONLY load the images when a tab is clicked, rather than preloading and hiding all the other images that are found within the other tabbed sections. Does anyone know of a way to call for image loads ONLY when the tab is clicked, rather than loading all images on initial page load. By doing so, I'll be able to minimize the need to make up to 50 image server calls when the page is initially loaded. And load images when needed.
VIEWS ON THIS POST

70

Posted on:

Monday 19th November 2012
View Replies!

Defer until load complete?

My script resizes images (yes, client side! No, I dont have access to do it server side!) When a topic is posted with alot of images, The script sometimes resizes before all the images load, resulting in images loading after that which are not resized. How can I ensure the script waits until ALL pics are loaded before resizing Or can I get the script to resize each image as It loads or something I just want to ensure they are ALL resized in the quickest way possible.
VIEWS ON THIS POST

83

Posted on:

Monday 19th November 2012
View Replies!

loading page objects

is there a script that will load the all the page objects before the next page is connected to. i have a flash menu and i want it to load up on to the server and then not have to be reloaded every time a new page is entered/accessed.
VIEWS ON THIS POST

165

Posted on:

Monday 19th November 2012
View Replies!

file upload

I am fixing an e-mailing system using php and mysql and have hit a stumbling block. i have recently had to take on someone elses work and have fixed most of the problems they had created. I need to upload images and then display them on the newsletters that will be sent out. the forms for entering the text and images must not be reloaded when the image is uploaded as all the entered information is not carried across to the new page. the code i am having trouble with is the upload side the page continues to be reloaded and all information is lost. is there anyone who has successfully got this to work who could point me in the right direction. is Ext.Ajax.request the best way for this or XMLHTTPRequest
VIEWS ON THIS POST

162

Posted on:

Monday 19th November 2012
View Replies!

preloading images

Good evening, I have a webpage that changes the image when you mousover another image and I was wondering if I could preload the images to make it faster. it takes about 2.5 seconds to change the image. Should I set my meta tags to cache The page is at http://www.ribbb.com/images/catologimages/poolcues/viking/2007/g60-g69/g60-g69.html I am not trying to sight advertise I just needed some input.
VIEWS ON THIS POST

161

Posted on:

Monday 19th November 2012
View Replies!

Showing Chat Msgs without reloading

I saw a chat prog on the Internet The web page shows the messages quickly without reloading the web-page... Can anybody do that or teach me how to do that
VIEWS ON THIS POST

285

Posted on:

Monday 19th November 2012
View Replies!

Delay loading advertisements

Is there ANY method to delay the loading of 3rd party javascript advertisements until the rest of the page has finished loading When my ad server gets sluggish, it delays the output of my site, which is killer. And yes, I already know about using position:absolute to place the JS code at the bottom of the page and absolutely position the ad where I want it. Unfortunately that's really hard to do with my layout, however.
VIEWS ON THIS POST

86

Posted on:

Monday 19th November 2012
View Replies!

Problem using onload

Hi , I was trying to achieve a functionality for drop down box to remember its selected value if the page reloads. I saw some code on this forum using onload method. Title of the thread is "Javascript generated drop down menu " within the last two weeks. Problem is I dont have access to the head or body section. What I do is I create a string which has the javascript and html script and pass that to the control to be displayed in the browser. There is a globaldhtmlcode property where you can write your own code. I tried using window.onload = functionName; but no luck. Can the same functionality be achieved using cookies Any ideas
VIEWS ON THIS POST

199

Posted on:

Monday 19th November 2012
View Replies!

Help: Only last loaded javascript runs

I am having a problem getting two javascript snippets to run on a single html document. Whichever one is loaded last (further down in the html doc) runs fine. I am not any kind of javascript expert and would appreciate any help here.
VIEWS ON THIS POST

183

Posted on:

Monday 19th November 2012
View Replies!

on page load function doesn't work

I have changed my JS to this $(document).ready(function () { // prepare the data var source = { datatype: "json", datafields: [ { name: 'product_id'}, { name: 'link'}, { name: 'photo'}, { name: 'unit_price'}, { name: 'qty'}, ], url: 'get_order.php' }; $("#jqxgrid").jqxGrid( { source: source, theme: 'classic', columns: [ { text: 'Row#', datafield: 'product_id', width: 250}, { text: 'Link', datafield: 'link', width: 150 }, { text: 'Photo', datafield: 'photo', width: 180 }, { text: 'Unit Price', datafield: 'unit_price', width: 200 }, { text: 'qty', datafield: 'qty', width: 120 } ] }); }); and my php to $adminquery ="SELECT * FROM admin1"; $adminresult=mysql_query ($adminquery); $result = mysql_query($adminquery) or die("SQL Error 1: " . mysql_error()); while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $order[] = array( 'product_id' => $row['product_id'], 'link' => $row['link'], 'photo' => $row['photo'], 'unit_price' => $row['unit_price'], 'qty' => $row['qty'] ); } the result is [{"product_id":"1","link":"1","photo":"upload\/img9.jpg","unit_price":"1","qty":"1"},{"product_id":"2","link":"","photo":"","unit_price":"0","qty":"0"},{"product_id":"1","link":"1","photo":"upload\/img9.jpg","unit_price":"1","qty":"1"},{"product_id":"2","link":"","photo":"","unit_price":"0","qty":"0"}, In a blank page, how can I pass the array to the index.php where the grid script is This post has been edited by smaboud: 24 May 2012 - 01:43 AM Reason for edit:: please use [CODE] [/CODE] tags when posting code
VIEWS ON THIS POST

66

Posted on:

Monday 19th November 2012
View Replies!

Declaring DOCTYPE breaks my font loader

I used the google font api to show a font in IE9. It works until I declare a DOCTYPE at the start of the page. Searching on msdn and google gave nothing that worked. The code is basically verbatim from the Google information site. WebFontConfig = { google: { families: [ 'Josefin+Sans:600:latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol 'https' : 'http') + '://>/ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); .wf-loading h1 { font-family: sans; font-weight: 600; } .wf-inactive h1 { font-family: sans; font-weight: 600; } .wf-active h1 { font-family: 'Josefin Sans', sans-serif; font-weight: 600; } Josefin Sans
VIEWS ON THIS POST

154

Posted on:

Monday 19th November 2012
View Replies!

Delay loading of code

I have some ads on my website that slow its loading. Someone gave me some code to delay the loading so that it puts a placeholder in place, loads the page and then substitutes that placeholder with the correct javascript ad. Firstly, I am using this code in place of where my advert was: Then, right at the end of the footer after my Google Analytics tag, I am using this code: window.onload = function () { document.getElementById ('load_top1'). appendChild (document.getElementById ('load_top_footer')); document.getElementById ('load_top_footer'). style.display =''; } When I load my webpage, I can see the 300x250 placeholder there, but the advert never shows. Have I put my code in the wrong area or something Or is the code wrong Any alternative solution to achieve my goal
VIEWS ON THIS POST

99

Posted on:

Monday 19th November 2012
View Replies!

Cached Images loaded again in Lazyload

well I am using lazyload here http://bloghutsbeta....sting-2_04.html the lazyload is used as a combination with the quicksand jquery. And as quicksand requires a callback so a callback function for lazyload is also added to the quicksand (as if you click buttons like Bicycle, Motorcycle etc, then quicksand requires callback function) here is the callback function: $("img").lazyload({ effect : "fadeIn" }); }); Now my problem is that even when all of the images are cached you click e-g on cricket button then it again loads the images, its kind of annoying for users as they load the images and when they click on buttons it loads images again and again as you click on buttons. So, I was thinking what could be solution to it *Please don't tell me to use other jquery instead of lazyload or quicksand as that is not an option for me*
VIEWS ON THIS POST

211

Posted on:

Monday 19th November 2012
View Replies!