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
    29,411
    Thanks
    85
    Thanked 4,907 Times in 4,868 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 03:09 AM.
    Be yourself. No one else is as qualified.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,411
    Thanks
    85
    Thanked 4,907 Times in 4,868 Posts
    Oh, and caution: getComputedStyle doesn't work in all browsers.
    Be yourself. No one else is as qualified.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,411
    Thanks
    85
    Thanked 4,907 Times in 4,868 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"); 
    }
    Be yourself. No one else is as qualified.


  •  

    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
    •