Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    waiting for a window.load value

    Hi,

    im attempting to read the height value of an element which doesnt have its height specified.

    If i get its value within document.ready then it intermittently returns the wrong value as im guessing the element has yet to be populated.

    I can get the correct value when using window.load but then need to pass this value to my code within document.ready. Is this possible? How else could i solve this. moving everything within a window.load doesnt work.

    Code:
    				$(document).ready(function() {
    		    	clearTimeout( timeout );
    		   		timeout = setTimeout( function() {
    				
    				  	
    				applyResult(loadMaindata, function() {
    
    				var imgWidth = $('.' + divID +'_col').width();
    				var imgHeight = $('.' + divID +'_col').height();
    
    				
    				console.log("image height "+ imgHeight)  // doesnt always get the correct value
    			 
    					    /* initiate plugin */
    					   	 $('.' + divID +'_pag').jPages({
    					        containerID : divID +"_gallery",
    					        perPage : rows,
    
    							        callback    : function( pages, items ){
    							            /* lazy load current images */
    								        items.showing.find("img").lazyload({event:"turnPage",effect:"fadeIn"}).trigger("turnPage");
    								        console.log("items "+ items.count)
    								        console.log("rows "+ rows)
    								        console.log("pages "+ pages.count)
    
    								        if (pages.count >1)
    			           					{
    				           				}
    				            				$('.' + divID +'_pag').css('display', 'block')	
    											
    					        		}
    					    	},$('.' + divID +'_gallery li').css('display', 'list-item'));
    
    
    				});
    
    				
    					}, 500 );
    
            
    
    
    
    		   		},function(){
    
    				 	clearTimeout( timeout );
    				 	
    			   
    					});
    Last edited by bolo77; 03-09-2013 at 04:17 PM. Reason: cutdown code

  • #2
    New Coder
    Join Date
    Dec 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    simplified example

    Code:
    	$(window).load(function() {
    					var imgHeight1 = $('.' + divID +'_col').height();
    					console.log(imgHeight1)  
    // correct height is returned.  How do i send this to the document.ready function below
    				});
    			
    				$(document).ready(function() {
                                    var imgHeight2 = $('.' + divID +'_col').height();
    // this returns the wrong height. can i get the height value from the .load  function and wait until i have this before processing anything else in the doc.ready function?
                                     });

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,455
    Thanks
    0
    Thanked 632 Times in 622 Posts
    Put your script at the bottom of the page and get rid of the unnecessary ready/load wrapper that is slowing down the loading of the page.

    That might not fix the problem but at least you'll have your JavaScript where it belongs and will be able to tell if there are additional things it needs other than the entire HTML in the page before the script can run - and if it doesn't work properly there because of not everything it needs being loaded yet then you will know that it has to wait for the load event to be triggered.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    solved

    i solved the problem by loading the first li tag with its content so i could get its height value and append it to the other li's tags. Next i hide the first li again and then continue with my normal load

    Now the browser always gets the correct height value for the li tags


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •