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 to the CF scene
    Join Date
    Apr 2013
    Location
    Reading, Pennsylvania
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Automatic Line Break

    Hello! This is my first post here on CodingForums, and I hope that you can all help me out with this problem I'm having!

    So, I have a snippet here:
    Code:
    for(var z=0;z<12;z++){
    					var a=document.createElement("div");
    					a.className="app";
    					var d=Math.round(parseInt(window.getComputedStyle(main,null).getPropertyValue("width"))/parseInt(uiSettings.apps.per_row))-2;
    					a.style.width=d+"px";
    					a.style.height=d+"px";
    					a.style.margin=2+"px";
    					main.appendChild(a);
    				}
    What I'm doing is creating a "table" of HTML DIVs with the class name of "app". After every FOUR (4) DIVs, I want a line break.

    How can I use the modulo operator for this???

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    Code:
    // move this calculation outside the loop, since it is the same each time:
    var d = Math.round(
                parseInt(window.getComputedStyle(main,null).getPropertyValue("width") )
                /
                parseInt(uiSettings.apps.per_row)
            )-2;
    d += "px";
    for(var z=0;z<12;z++)
    {
    	var a=document.createElement("div");
    	a.className="app";
    	a.style.width=d;
    	a.style.height=d;
    	a.style.margin="2px";
    	main.appendChild(a);
    	if ( z % 4 == 3 ) { main.appendChild(document.createElement("br"); }
    }
    Last edited by Old Pedant; 04-21-2013 at 04:09 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    Oh, and caution: getComputedStyle doesn't work in all browsers.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    Of course, another way to do that, which makes the intent much more obvious *AND* makes more sense in view of how you calculated the value of d would be:
    Code:
    for ( var row = 1; row <= 3; ++row )
    {
        for ( var column = 1; column <= uiSettings.apps.per_row; ++column )
        {
    	var a=document.createElement("div");
    	a.className="app";
    	a.style.width=d;
    	a.style.height=d;
    	a.style.margin="2px";
    	main.appendChild(a);
        }
        main.appendChild(document.createElement("br"); 
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    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
    •