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.
Page 2 of 2 FirstFirst 12
Results 16 to 24 of 24
  1. #16
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    have a look at the curly braces surrounding the each loop (if you click on the fist one it becomes yellow, and you can see its partner in yellow at the bottom).

    Your "oop" alert is inside the each loop. So you run around the track three times, saying hello to Bill each time.

    Your "mope" alert is outside the loop. So once you have finished your three laps you say hello to Bob.

    The "alert interacting with the DOM" thing may be true in some other case, but here your code is doing exactly what you are telling it to do.

    I suspect that you want two loops, one to see the buttons getting made, the other to see the backgrounds getting added. I also suspect that you're going to keep getting frustrated because of the way that the page gets painted. If you're not preloading your images the javascript is going to run and then the images will get put into their backgrounds all in one hit, regardless of how many loops you make because javascript is fast and image loading is slow so the page does what it can while waiting for the images to arrive (at least this is the way I understand it).

    There are various ways to preload images but here's a simple one. Also note that the script goes at the end of the <body> section - not so important for this little snippet, but a good practice to get into...

    Code:
    <style>
    body{display:block; padding:0px; margin:0px; background-color:gray; overflow:auto;}
    .thumb{width:150px; height:150px; margin-left:8px; margin-top:0px; margin-bottom:8px; padding-bottom:0px; float:left; background-position: 50% 100%; background-size:cover; border:3px solid white;}
    img#preload { display: none; }
     </style>
     </head>
     
    <body>
    <img id="preload" src="http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png"/>
    <div id="thumb"></div>
    </div>
    </div>
     <script>
    $(document).ready(function() 
    {
    var manifest=												
    	{
    		1:{
            available:"n",
            filename:"rock_01_png___by_alzstock-d5r84up.png"
    		},
            
    		5:{
            available:"n",
    		filename:"rock_01_png___by_alzstock-d5r84up.png"
    		},
    		
    		7:{
            available:"n",
    		filename:"rock_01_png___by_alzstock-d5r84up.png"
    		}
    		}
    		
    		$.each(manifest, function(param1, param2) {
    		$("#thumb").append("<button type='button' id='btn"+param1+"' class='thumb' style='background-image:url()'></button>");		//the first parameters are 1,5,7
       		//the second parameters are contained in pairs inside the braces {}
    		alert("oop");
    		});
    		$.each(manifest, function(param1, param2) {	
    		$("#btn"+param1).css('background-image', 'url("http://th07.deviantart.net/fs70/150/i/2013/012/c/6/'+param2.filename+'")');
    		alert("mope");
    		});
    		});
    		</script>
      
    </body>
    Last edited by xelawho; 01-26-2014 at 03:52 PM.

  2. Users who have thanked xelawho for this post:

    pratto (01-27-2014)

  3. #17
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    xelawho -

    thanks for that. your version seems to behave the same as mine, with regard to painting the backgound images (even with the pre-loading statement). but, as i said, i am not using this for anything but a de-bugger, a learning tool.

    i guess my confusion was in the jquery definition for .each. it says it iterates thru each element. in my case (i.e. the jsfiddle code), i took that to mean that it would iterate thru $("#thumb").append ..., and when it was done iterating, it would go thru $("#"+param1).css ... and being that the alert("oop") was inside the .each function, its display would at least be consistent.

    i commented out the second alert (mope) in the fiddle, just to simplify the code. http://jsfiddle.net/VkaH6/23/

    and maybe it is consistent. maybe it is what you said, that the painting gets done all together, and can't be interrupted with an alert.

    i thank you for your help. i guess i will have to just consider it something i don't fully understand, and not worry about it.
    Last edited by pratto; 01-27-2014 at 04:19 AM. Reason: added fiddle

  4. #18
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by pratto View Post
    your version seems to behave the same as mine, with regard to painting the backgound images (even with the pre-loading statement).
    really? I'm looking at it in 3 different browsers and the images get loaded one by one in each, with the alert firing in between...

    .each does iterate over each element, but it depends on which elements you give to it. In your original code, you supply it with the manifest, so it will hit each of the manifest's top-level members (the 1,5,7 objects) once. It doesn't go bat**** on everything on the page.

    Iterating over collections is something that's worth getting your head around, imho. There are lots of different ways to do it in javascript - and it will save you a lot of repetition in your code if you do get the hang of it.

  5. #19
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    xelawho -

    aggravating. i tried it in firefox and it worked just like you said.
    in IE it painted the boxes one at a time, but started with the middle one.

    and in chrome (the one i use almost exclusively) it steps thru the boxes in the paint cycle, but doesn't paint them until the very end, when they all get painted together.

    i am using chrome : v32.0.1700.76 m

    IE : v11.0.9600.16476 update version 11.0.0 (KB2898785)

    Firefox : v26.0

    no two act the same. nor does a fiddle of your code :

    http://jsfiddle.net/pratto/8HR6F/8/

    it is aggravating. it is like studying a book and spending hours and days trying to figure out why something doesn't work, only to find out that the book had misprints in it. you still don't know how to do it, and you can't trust the book.

    are you by any chance using the same browsers that i am ?

  6. #20
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i replaced background-image with border and it works exactly as i expected it to (setting the borders 1 frame at a time), in all browsers.

    so the problem seems to be what you said, about the way the particular browser treats handling a background image. i think that is what you said.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <title>2test</title>
    <meta charset='utf-8'>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    
    <style>
    
    body{display:block; padding:0px; margin:0px; background-color:gray; overflow:auto;}
    .thumb{width:150px; height:150px; margin-left:8px; margin-top:0px; margin-bottom:8px; padding-bottom:0px; float:left; background-position: 50% 100%; background-size:cover; border:3px solid white;}
    .thumb2{width:150px; height:150px; margin-left:8px; margin-top:0px; margin-bottom:8px; padding-bottom:0px; float:right; background-position: 50% 100%; background-size:cover; border:3px solid white;}
    
     </style>
     
     </head>
     
    <body>
        
    <div id="thumb"></div>
    
    <script>
     $(document).ready(function() 
    {
    var manifest=												
    	{
    		1:{
            available:"n",
    		filename:"c.jpg",
    		},
            
    		5:{
            available:"n",
    		filename:"pic2.jpg",
    		},
    		
    		7:{
            available:"n",
    		filename:"pic3.jpg",
    		}
    		}
    		
    		$.each(manifest, function(param1, param2) {
    				
    		$("#thumb").append("<button type='button' id='"+param1+"' class='thumb'></button>");
    		alert("after "+ param1+" float left");
    		$("#"+param1).css('border', '2px solid green');
    		
    		param1++
    		
    		$("#thumb").append("<button type='button' id='"+param1+"' class='thumb2'></button>");
    		alert("after "+ param1+" float right");
    		$("#"+param1).css('border', '2px solid red');
    });
    	});
    		
    </script>	
    
    </body>
    
    </html>

  7. #21
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    the fiddle you posted in #19 works as expected - places the boxes then paints the backgrounds one by one for me in Chrome 32 and FF 26. JS fiddle doesn't like my old version of IE, so I don't know what happens there.

    I don't use JSFiddle much, but I have seen some people complain that code there doesn't always behave the same as it does on a real page.

    But yeah, there's all sorts of uncertainty when it comes to browser implementation - part of the fun I guess

  8. #22
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Why not just use the browser's debugging tools and add breakpoints inside the loop?

  9. #23
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    breakpoints doesn't seem to be any better than the alerts - it makes the 3 boxes 1 at a time, then BAM, paints all the boxes.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <title>3test</title>
    <meta charset='utf-8'>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="D:/JS Practice/jquery-1.9.1.min.js"></script>
    
    <style>
    
    body{display:block; padding:0px; margin:0px; background-color:gray; overflow:auto;}
    .thumb{width:150px; height:150px; margin-left:8px; margin-top:0px; margin-bottom:8px; padding-bottom:0px; float:left; background-position: 50% 100%; background-size:cover; border:3px solid white;}
    
     </style>
     
     <script>
     $(document).ready(function() 
    {
    var manifest=												
    	{
    		1:{
            available:"n",
    		filename:"c.jpg",
    		},
            
    		5:{
            available:"n",
    		filename:"pic2.jpg",
    		},
    		
    		7:{
            available:"n",
    		filename:"pic3.jpg",
    		}
    		}
    		
    		$.each(manifest, function(param1, param2) {
    																										// notes to myself -
    		$("#thumb").append("<button type='button' id='"+param1+"' class='thumb'></button>");		//the first parameters are 1,5,7
    		
    		$("#"+param1).css('background-image', 'url("D:/JS Practice/'+param2.filename+'")');   		//the second parameters are contained in pairs inside the braces {}
    																										//this statement says, for each first parameter id'd div,
    																										//the background image URL is the second parameter's value
    																										//that is associated with "filename"
    //		alert("oop");
    																											
    		});
    //		alert("mope");
    		});
    	
    		
    		</script>
     
     </head>
     
    <body>
            
    <div id="visiblePage">
    <div id="thumbBox">
    <div id="thumb"></div>
    </div>
    </div>
      
    </body>
    
    </html>
    but at least i learned a few things. like, the de-bugger doesn't seem to show the file if there are active alerts.

  10. #24
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Using alert does not allow you to interact with the page while debugger allows you to. Most of the time when you are debugging, you want to check the values of the variables, check the DOM, CSS, etc. You can do this using the debugger but not or difficult using alerts.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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