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 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Calgary, Alberta, Canada
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to output array data in a loop?

    I'm still fairly new to JavaScript, so I hope I am explaining this clearly:

    I have a series of array variables (i.e.:

    var mini1=["BEAR","large"];
    var mini2=["COUGAR","medium"];
    var mini3=["",""];

    I want a loop that looks for the first instance of "" in array position [0] of the series of mini variables.

    As soon as it finds this first instance, I want it to pass this value onto a variable called "lastmini" and then I want the loop to end.

    1. I am uncertain if I am ending the loop correctly as noted below.
    2. I don't know how to combine "mini" and the loop instance "i" and the array position "[0]" into a code that is understood by javascript.

    Code:
    for (var i=1;i<loopend;i++) {
      if ('mini' + [i][0] == "") {
        var lastmini=i;
        var loopend=i;
      }
    }
    The above code does not work as I do not know the proper syntax as per #2. Could someone please help me out. Thank you.
    Last edited by helpneeded22; 03-02-2013 at 10:01 PM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by helpneeded22 View Post
    I'm still fairly new to JavaScript, so I hope I am explaining this clearly:

    I have a series of array variables (i.e.:

    var mini1=["BEAR","large"];
    var mini2=["COUGAR","medium"];
    var mini3=["",""];

    I want a loop that looks for the first instance of "" in array position [0] of the series of mini variables.

    As soon as it finds this first instance, I want it to pass this value onto a variable called "lastmini" and then I want the loop to end.

    1. I am uncertain if I am ending the loop correctly as noted below.
    2. I don't know how to combine "mini" and the loop instance "i" and the array position "[0]" into a code that is understood by javascript.

    Code:
    for (var i=1;i<loopend;i++) {
      if ('mini' + i + [0] == "") {
        var lastmini=i;
        var loopend=i;
      }
    }
    The above code does not work as I do not know the proper syntax as per #2. Could someone please help me out. Thank you.
    I am unclear as to your requirements based upon your request as highlighted in the area in red above.

    How is this design to be used? What is the final purpose?
    Are you opposed to finding the position of the last element of the array by any other means?
    What do you want to do with a blank entry in a blank array?
    What value do you wish to pass? The position in the array or the blank "" entry?
    Where do you want it to go?

    Can you expand on your request or let us know what it is that you want to achieve
    and don't understand how?

  • #3
    New Coder
    Join Date
    Sep 2012
    Location
    Calgary, Alberta, Canada
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    How is this design to be used?
    Basically the page starts as a blank template with about 50 lines of:

    var mini1=["",""];
    .
    .
    .
    var mini50=["",""];

    When new information comes in about of the 50 "minis", then I edit the array (note the array actually has about 12 items, but I have shortened it to just 2 for this example).

    When I learn the first mini is a bear and its large, then I edit the line accordingly:

    var mini1=["BEAR","large"];

    And so on.

    Quote Originally Posted by jmrker View Post
    What is the final purpose?
    Ultimately it produces a gallery of "boxes of info". In the box, the name, info and a picture of the mini is displayed. I want to essentially tile the page with 4 boxes per row. I already have all the code I need for doing this part.

    Quote Originally Posted by jmrker View Post
    Are you opposed to finding the position of the last element of the array by any other means?
    Based on how I input the data, I don't believe there is a better way to find the last element, but if there is I would certainly like to hear it.

    Quote Originally Posted by jmrker View Post
    What do you want to do with a blank entry in a blank array?
    Nothing. The blank entry is basically just a placeholder until I type in the info later. When the script finds what the first element is that is blank, then it will not create any boxes from that point forward.

    Quote Originally Posted by jmrker View Post
    What value do you wish to pass? The position in the array or the blank "" entry? Where do you want it to go?
    Since I will have already defined what "mini1" is, I want the loop to check to see if position 1 [0] of the array attached to mini1 contains a blank value or not. If it does not, then it will continue the loop. If it does, then the "lastmini" variable will be set. I will then use this "lastmini" variable to populate the number of boxes needed in my gallery page.

    Quote Originally Posted by jmrker View Post
    Can you expand on your request or let us know what it is that you want to achieve and don't understand how?
    I want the code

    ('mini' + [i][0] == "")

    to check the first instance in the appropriate mini variable array. So for example, when the loop first starts, I want it to check "mini1[0]" to see if [0] contains "". If it does not, then I want it to continue and check the same for "mini2[0]" and so on.

    Ultimately, the code will produce a similar gallery as: http://www.pathfinderminis.com/gallery5.htm
    Last edited by helpneeded22; 03-02-2013 at 11:55 PM.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Seems like you could create that display a lot easier with this...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    var baseURL = "http://www.pathfinderminis.com/gallery5/";
    
    var mini = [  // // MINI ELEMENTS: name,rarity,size,newflag(yes/no),info,date,picture
       ["CAEDIMUS","Common","Small","no","Production Proof","August 3, 2012","caedimus"],
       ["PORTIOQUE","Common","Small","no","Production Proof","January 18, 2013","portioque"],
       ["MITE","Common","Small","no","Production Proof","August 3, 2012","mite"],
       ["GRUB SWARM","Common","Small","no","Actual Image","January 17, 2013","grubswarm"],
       ["BOGGARD","Common","Medium","no","Production Proof","November 2, 2012","boggard"],
       ["CLOCKWORK SOLDIER","Common","Medium","no","Production Proof","January 18, 2013","clockworksoldier"],
       ["TOWER GIRL","Common","Medium","no","Production Proof","January 18, 2013","towergirl"],
       ["SHADOW HOUND","Common","Medium","no","Production Proof","December 28, 2012","shadowhound"],
       ["XULGATH","Common","Medium","no","Production Proof","January 18, 2013","xulgath"],
       ["MEDIUM AIR ELEMENTAL","Common","Medium","no","Production Proof","January 25, 2013","mediumair"],
       ["MEDIUM EARTH ELEMENTAL","Common","Medium","no","Production Proof","January 4, 2013","mediumearth"],
       ["MEDIUM FIRE ELEMENTAL","Common","Medium","no","Production Proof","September 14, 2012","mediumfire"],
       ["HELL HOUND","Common","Medium","no","Production Proof","December 28, 2012","hellhound"],
       ["PALLID PATH CULTIST","Common","Medium","no","Production Proof","December 28, 2012","pallidcultist"],
       ["MEDIUM WATER ELEMENTAL","Common","Medium","no","Production Proof","November 9, 2012","mediumwater"],
       ["MUMMY CLERIC","Uncommon","Medium","no","Production Proof","September 28, 2012","mummycleric"],
       ["CAULBORN","Uncommon","Medium","no","Production Proof","October 13, 2012","caulborn"],
       ["CATFOLK ROGUE","Uncommon","Medium","no","Production Proof","November 2, 2012","catfolk"],
       ["CLERIC OF ZON-KUTHON","Uncommon","Medium","no","Production Proof","January 18, 2013","clericofzon"],
       ["CARYATID COLUMN","Uncommon","Medium","no","Production Proof","August 24, 2012","caryatidcolumn"],
       ["GRAY MAIDEN","Uncommon","Medium","no","Production Proof","October 20, 2012","graymaiden"],
       ["RAVENOUS OOZE","Uncommon","Medium","no","Production Proof","December 28, 2012","ravenousooze"],
       ["HOUND OF TINDALOS","Uncommon","Medium","no","Production Proof","October 27, 2012","houndsoftindalos"],
       ["MITE ON SPIDER","Uncommon","Medium","no","Preview Image","December 15, 2012","spidermite"],
       ["NIGHTGAUNT","Uncommon","Medium","no","Production Proof","October 27, 2012","nightgaunt"],
       ["SHRIEZYX","Uncommon","Medium","no","Production Proof","January 18, 2013","shriezyx"],
       ["SKELETAL CHAMPION","Uncommon","Medium","no","Production Proof","September 28, 2012","skeletalchampion"],
       ["NIGHT HAG","Uncommon","Medium","no","Production Proof","August 24, 2012","nighthag"],
       ["GUILTSPUR NAGA","Uncommon","Large","no","Production Proof","September 14, 2012","guiltspurnaga"],
       ["GUG","Uncommon","Large","no","Production Proof","August 10, 2012","gug"],
       ["HILL GIANT","Uncommon","Large","no","Production Proof","September 8, 2012","hillgiant"],
       ["FIRE GIANT","Uncommon","Large","no","Production Proof","January 4, 2013","firegiant"],
       ["GLASS GOLEM","Uncommon","Large","no","Production Proof","January 4, 2013","glassgolem"],
       ["IRON GOLEM","Uncommon","Large","no","Production Proof","September 21, 2012","irongolem"],
       ["WYVERN","Uncommon","Large","no","Production Proof","November 16, 2012","wyvern"],
       ["TROLL CHAMPION","Uncommon","Large","no","Production Proof","January 25, 2013","trollchampion"],
       ["WRATH DEMON","Uncommon","Large","no","Preview Image","December 15, 2012","wrathdemon"],
       ["LEM, HALFLING BARD","Rare","Small","no","Production Proof","January 25, 2013","lem"],
       ["AMIRI, HUMAN BARBARIAN","Rare","Medium","no","Production Proof","September 8, 2012","amiri"],
       ["ARDATHANATUS","Rare","Medium","no","Production Proof","January 18, 2013","ardath"],
       ["KORIAH AZMEREN","Rare","Medium","no","Production Proof","January 25, 2013","koriah"],
       ["NATALYA VANCASKERKIN","Rare","Medium","no","Promotional Image","December 7, 2012","natalya"],
       ["XIN","Rare","Medium","no","Production Proof","January 25, 2013","xin"],
       ["GRAY MAIDEN COMMANDER","Rare","Medium","no","Production Proof","January 25, 2013","graymaidencommander"],
       ["RUNELORD SORSHEN","Rare","Medium","no","Production Proof","January 25, 2013","sorshen"],
       ["SHEILA HEIDMARCH","Rare","Medium","no","Production Proof","January 18, 2013","sheila"],
       ["MESMALATU","Rare","Small","no","Production Proof","October 13, 2012","mesmalatu"],
       ["ALCHEMICAL GOLEM","Rare","Large","no","Production Proof","September 21, 2012","alchemicalgolem"],
       ["CLOCKWORK RELIQUARY","Rare","Large","no","Production Proof","December 21, 2012","clockworkrel"],
       ["DULLAHAN","Rare","Large","no","Actual Image","January 17, 2013","dullahan"],
       ["LARGE AIR ELEMENTAL","Rare","Large","no","Actual Image","November 9, 2012","largeair"],
       ["LARGE EARTH ELEMENTAL","Rare","Large","no","Production Proof","January 4, 2013","largeearth"],
       ["LARGE FIRE ELEMENTAL","Rare","Large","no","Production Proof","September 14, 2012","largefire"],
       ["LARGE WATER ELEMENTAL","Rare","Large","no","Production Proof","November 9, 2012","largewater"] // No comma after final entry
    ];  
    </script>
    
    <style type="text/css">
     .miniInfo { height:300px; }
     .miniName { background-color:#000; color:#fff; height:50px; }
     .miniRarity { background-color:#ccc; color:#000; }
     .miniImage { height:200px; border:1px solid black; }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    
    
    function getField(ptr,fld) { return mini[ptr][fld]; }
    function setField(ptr,fld,info) { mini[ptr][fld] = info; }
    
    function showInfo(ptr) {
      var tstr = '<th valign=TOP width=25%><div class="miniInfo">';
      tstr += '<div class="miniName">'+getField(ptr,0)+'</div>';
      tstr += '<div class="miniRarity">'+getField(ptr,1)+'<br><i>'+getField(ptr,4)+'</i></div>';
      tstr += '<div class="miniImage"><img src="'+baseURL+getField(ptr,6)+'.jpg" height="200px" width="200px"></div>';
      tstr += '</div></th>';
      return tstr;
    }
    
    var str = '<table border="0" cellspacing="10px" cellmargin="10px" bgcolor="#ffffff" width="800" align=center>';
    for (var i=0; i<mini.length; i++) { 
      str += showInfo(i); 
      if (i % 4 == 3) { str += '</tr><tr>'; }
    }
    str += '</table>';
    document.write(str);
    
    </script>
    
    </body>
    </html>
    Note: You can set and retrieve any field in the SINGLE mini array with the 'setFld()' function.
    Also note there is not a need for 54 individual arrays with this configuration.
    No need for a sentinel array to determine how many elements in the array ( mini.length)
    Last edited by jmrker; 03-03-2013 at 02:04 AM.

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    If all you want to do is find the suffix of the last element:
    Code:
    var mini1=["BEAR","large"];
    var mini2=["COUGAR","medium"];
    var mini3=["POSSUM","small"];
    
    for( var i=1; window['mini'+i]; i++ ) 
    ;
    
    alert( "Last element suffix = " + (--i) );
    This data would be far better stored as an array of arrays for example, then you wouldn't need to find how many elements were present.

  • #6
    New Coder
    Join Date
    Sep 2012
    Location
    Calgary, Alberta, Canada
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Seems like you could create that display a lot easier with this...
    I must say your Javascript-fu is really impressive! I really appreciate you posting that code. I have been looking it over, but it is very much beyond my experience and perhaps ability. I will take more time to break it down and experiment. I'm still sort of confused on the concept of combining all that data into a single array, but I will first focus my time on figuring that out. There are quite a few conditional statements I need that I am uncertain how to incorporate into that code.

    I did create my own code with my limited knowledge of javascript. It is not working and I just cannot figure out why. I first created the new page in HTML and it worked perfectly fine. Once I change it to javascript though, it does not work. Could you by any chance advise why the code is not working.

    Another oddity I have noticed, is that I have a conditional statement that determines the font color of my "rarity" value is not working at all.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>The XXX Pathfinder Miniatures</title>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
    <style type="text/css">
    
    .nocontainer {
        display: none;
    }
    
    .container {
        width: 860px;
    	height: 302px;
    	border-width: 1px;
    	border-color: black;  /* White - Invisible Border */
        border-style: solid;
    	margin: 0px 0px 20px 0px;
    }
    
    .miniframe {
        width: 203px;
    	height: 296px;
    	border-width: 2px;
    	border-color: #808080;  /* Gray - Main Frame Border */
        border-style: solid;
    	margin: 3px;
    	float: left;
    	background: white;  /* White - Main Frame Background */
    }
    
    .nominiframe {
        display: none;
    }
    
    .boxname_normal {
        width: 100%;
    	height: 20px;
    	background: #414141;  /* Dark Gray - Name Box Background */
    	float: top;
    	color: white;
    	font-weight: bold;
    	font-size: 0.875em;
    	text-align: center;
        font: "Calibri, Helvetica";
    	padding: 2px 0px 0px 0px;
    }
    
    .boxname_small {
        width: 100%;
    	height: 20px;
    	background: #414141;  /* Dark Gray - Name Box Background */
    	float: top;
    	color: white;
    	font-weight: bold;
    	font-size: 0.75em;
    	text-align: center;
        font: "Calibri, Helvetica";
    	padding: 2px 0px 0px 0px;
    }
    	
    .boxrarity {
        width: 100%;
    	height: 14px;
    	background: #C0C0C0;  /* Light Gray - Details Box */
    	float: top;
    }
    	
    .boxsize {
        width: 100%;
    	height: 15px;
    	background: #C0C0C0;  /* Light Gray - Details Box */
    	float: top;
    	border-bottom-style: solid;
    	border-bottom-color: #808080;  /* Gray - Main Frame Border */
    	border-width: 2px;
    	color: #414141;  /* Dark Gray - Same as Name Box */
    	font-style: italic;
    	font-size: 0.8em;
    	text-align: center;
        font: "Calibri, Helvetica";
    }
    
    .boximage {
        width: 100%;
    	height: 200px;
    	background: white;
    	float: top;
    	padding-top: 6px;	
    }
    
    .boxinfo_old {
        width: 100%;
    	height: 16px;
    	background: white;	
    	float: top;
    	margin: 1px 0px 0px 0px;	
    	color: black;
    	font-style: italic;
    	font-size: 0.8em;
    	text-align: center;
        font: "Calibri, Helvetica";
    }
    
    .boxinfo_new {
        width: 100%;
    	height: 16px;
    	background: yellow;  /* Yellow - New Background */
    	float: top;	
    	color: black;
    	font-style: italic;
    	font-size: 0.8em;
    	text-align: center;
        font: "Calibri, Helvetica";
    }
    
    /* Date Box - Old */	
    .boxinfo2_old {
        width: 100%;
    	height: 18px;
    	background: white;
    	float: top;	
    	color: black;
    	font-style: italic;
    	font-size: 0.75em;
    	text-align: center;
        font: "Calibri, Helvetica";
    }
    
    /* Date Box - New */	
    .boxinfo2_new {
        width: 100%;
    	height: 18px;
    	background: yellow;  /* Yellow - New Background */
    	float: top;
    	color: red;
    	font-style: italic;
    	font-size: 0.75em;
    	text-align: center;
        font: "Calibri, Helvetica";
    }
    
    /* Number Box - Replaces Date Box */
    .boxinfo2_num {
        width: 100%;
    	height: 18px;
    	background: gray;  /* DELETE */
    	float: top;	
    	color: #808080;  /* Gray - Match Main Frame Border */
    	font-style: normal;
    	font-size: 0.8em;
    	text-align: center;
        font: "Calibri, Helvetica";
    }
    
    .rarity_common {
    	font-weight: bold;
    	font-size: 0.8em;
    	text-align: center;
    	font: "Calibri, Helvetica";
    	color: #008000;
    }
    	
    .rarity_uncommon {
    	font-weight: bold;
    	font-size: 0.8em;
    	text-align: center;
        font: "Calibri, Helvetica";
    	color: #0000ff;
    }
    	
    .rarity_rare {
    	font-weight: bold;
    	font-size: 0.8em;
    	text-align: center;
        font: "Calibri, Helvetica";
    	color: #800080;
    }
    	
    .rarity_unique {
    	font-weight: bold;
    	font-size: 0.8em;
    	text-align: center;
        font: "Calibri, Helvetica";
    	color: #ffcc00;
    }
    
    .rarity_unknown {
    	font-weight: bold;
    	font-size: 0.8em;
    	text-align: center;
        font: "Calibri, Helvetica";
    	color: #808080; 
    }
    	
    .clear {
        clear:both;
    }
    	
    </style>
    
    <script type="text/javascript">
    // MINI ARRAYS: name,name_size (normal/small),rarity,size,newflag(yes/no),info,date,number,picture
    var mini1=["LEM","normal","Rare","Small","no","Mini Announced","July 7, 2012","0","lem"];
    var mini2=["LEX","normal","Common","Small","no","Mini Announced","July 7, 2012","0","unknown"];
    var mini3=["PIL","normal","Uncommon","Small","no","Mini Announced","July 7, 2012","0","unknown"];
    var mini4=["JINGO","normal","Unique","Small","no","Mini Announced","July 7, 2012","0","unknown"];
    var mini5=["","normal","Rare","Small","no","Mini Announced","July 7, 2012","0","unknown"];
    var maxminis=5; //Total number of minis
    var showmininumber="no"; //Change to "yes" to show mini numbers - replaces date on Info2
    </script>
    
    </head>
    <body>
    
    <!-- HEADER -->
    <p align="center">
        <a href="index.html">
        <img border="0" hspace="0" src="logo.gif" alt="">
        </a>
    </p>
    <p align="center">
        <font face="helvetica">
    	    <strong>Pathfinder Battles: The Shattered Star</strong><br>
    	    55 Miniatures<br>
    	    Release Date: January 2013<br>
    	</font>
    </p>
    
    <center>
    <script type="text/javascript">
    
    var loopend=maxminis;
    for (var i=1;i<loopend;i++) {
        var a = window["mini"+i];
        document.write(a[0] + "<br>");
    	if(a[0] == "") {
    		var loopend=i+1;
    	}
    }
    var lastmini=i-1;
    
    document.write('Here it is: ' + [lastmini] + "<br>");	// DELETE - FOR DEBUG
    
    // START Display Loop	
    for (var i=1;i<maxminis;i++) {
    	var a = window["mini"+i];
    	var boxnum=i+4-(Math.ceil((i)/4)*4);
    
        // Create New Container
        if(boxnum==1) { /* START New Container */
            document.write('<div class="container">');
        }
      
    	// Create Frame for Boxes
    	if(lastmini>=maxminis) {
    	    document.write('<div class="nominiframe">');
    	    document.write('</div>');
    	}
    	else { /* START Frame - end below */
    	    document.write('<div class="miniframe">');
      	
    	    // Create Name Box in Frame
    	    if(a[1]=="small") {
    		    document.write('<div class="boxname_small">');
    	    }
    	    else {
    		    document.write('<div class="boxname_normal">');
    	    }
    	    document.write(a[0]); //Mini Name
    	    document.write('</div>');
    		
    	    //Create Rarity Box in Frame
    	    if(a[2]=="Rare") {
    		    document.write('<div class="boxrarity rarity_rare">');
    	    }
    	    if(a[2]=="Uncommon") {
    		    document.write('<div class="boxrarity rarity_uncommon">');
    	    }
    	    if(a[2]=="Common") {
    		    document.write('<div class="boxrarity rarity_common">');
    	    }
    	    if(a[2]=="Unique") {
    		    document.write('<div class="boxrarity rarity_unique">');
    	    }
    	    else {
    		    document.write('<div class="boxrarity rarity_unknown">');
    	    }
    	    document.write(a[2]); //Rarity
    	    document.write('</div>');
        
    	    // Create Size Box in Frame
    	    document.write('<div class="boxsize">');
    	    document.write(a[3]); //Size
    	    document.write('</div>');
        
    	    // Create Image Box in Frame
    	    document.write('<div class="boximage">');
    	    document.write('<img border="0" hspace="0" src="gallery5/" '+ a[8] + '.jpg" alt="">'); //Image
    	    document.write('</div>');
    	  
    	    // Create Info1 Box in Frame
    	    if(a[4]=="yes") {
    		    document.write('<div class="boxinfo_new">');
    	    }
    	    else {
                document.write('<div class="boxinfo_old">');
    	    }
    	    document.write(a[5]);
    	    document.write('</div>');
    		
    	    //Create Info2 Box in Frame
    	    if(showmininumber=="yes") {
                document.write('<div class="boxinfo2_num">');
    	        document.write('(' + a[7] + ')');
    	    }
    	    else {
    		    if(a[4]=="yes") {
    		        document.write('<div class="boxinfo2_new">');
    		        document.write(a[6]);
    		    }
    		    else {
    		        document.write('<div class="boxinfo2_old">');
    		        document.write(a[6]);
    		    }
    	    }
    	    document.write('</div>');
    
        document.write('</div>'); /* END Frame */
        } /* END Frame - start above */
    	
        // End Container if 4th box
        if(boxnum==4) { /* END New Container */
            // Clear
            document.write('<div class="clear">');
    	    document.write('</div>');
        document.write('</div>');
        }
    		
    } // END Display Loop 	
    
    </script>
    </center>
    
    
    </body>
    </html>

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    You are overthinking jmrkr's code.

    All he did was take this:
    Code:
    var mini1=["LEM","normal","Rare","Small","no","Mini Announced","July 7, 2012","0","lem"];
    var mini2=["LEX","normal","Common","Small","no","Mini Announced","July 7, 2012","0","unknown"];
    var mini3=["PIL","normal","Uncommon","Small","no","Mini Announced","July 7, 2012","0","unknown"];
    var mini4=["JINGO","normal","Unique","Small","no","Mini Announced","July 7, 2012","0","unknown"];
    var mini5=["","normal","Rare","Small","no","Mini Announced","July 7, 2012","0","unknown"];
    and add on this:
    Code:
    var minis = [ mini1, mini2, mini3, mini4, mini5 ];
    And then you can easily do:
    Code:
    for ( var m = 0; m < minis.length; ++m )
    {
        var mini = minis[m];
        ... work on one mini at a time ...
    }
    But then you should soon realize that you have no reason to retain those names: mini1, mini2, etc.

    And so you just put the arrays referred to by each of mini1, mini2, etc., directly into the minis array!

    Thus:
    Code:
    minis = [
        ["LEM","normal","Rare","Small","no","Mini Announced","July 7, 2012","0","lem"],
        ["LEX","normal","Common","Small","no","Mini Announced","July 7, 2012","0","unknown"],
        ["PIL","normal","Uncommon","Small","no","Mini Announced","July 7, 2012","0","unknown"],
        ["JINGO","normal","Unique","Small","no","Mini Announced","July 7, 2012","0","unknown"],
        ["","normal","Rare","Small","no","Mini Announced","July 7, 2012","0","unknown"]
    ];
    and you can *STILL* use the same code:
    Code:
    for ( var m = 0; m < minis.length; ++m )
    {
        var mini = minis[m];
        ... work on one mini at a time ...
    }
    *MUCH* better than maintaining the separate mini1, mini2, etc., variables.

    Just an array *OF* arrays.
    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.

  • Users who have thanked Old Pedant for this post:

    helpneeded22 (03-09-2013)

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by Old Pedant View Post
    You are overthinking jmrkr's code.

    All he did was take this:

    ...

    *MUCH* better than maintaining the separate mini1, mini2, etc., variables.

    Just an array *OF* arrays.
    Thanks for explaining to him what I was recommending.
    It was pretty easy to change the mini array to the 'array of arrays' with the wordprocessor.
    Not much typing on my part, just a bunch of global deletes.

  • #9
    New Coder
    Join Date
    Sep 2012
    Location
    Calgary, Alberta, Canada
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    You are overthinking jmrkr's code.
    Thank you for breaking that down into detail like that. I have incorporated that into my code and I now have a working web page. (I had a few issues that were not working as well with how I was using IF statements).

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,618
    Thanks
    0
    Thanked 645 Times in 635 Posts
    It might be more readable if you made it an array of objects rather than an array of arrays. Then you could access the properties of each entry by name rather than having to remember which is in what position in the array.

    Code:
    var mini = [ 
       {name:"CAEDIMUS",rarity:"Common",size:"Small",newflag:"no",info:"Production Proof",date:"August 3, 2012",picture:"caedimus"},
       {name:"PORTIOQUE",rarity:"Common",size:"Small",newflag:"no",info:"Production Proof",date:"January 18, 2013",picture:"portioque"},
    ...

    Then you can refer to minis[m].size within the loop instead of minis[m][2] which is a more descriptive name for the field.
    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.

  • #11
    New Coder
    Join Date
    Feb 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I have a question that is non-related to OP.
    Code:
    var black=0;
    for(i=0;i<=15;i++){
    		for(j=0;j<=15;j++){
    			cell=document.getElementById("cell_"+i+"_"+j);
    			if(cell.style.backgroundColor=="#000"){black++;}
    
    }
    }
    Why doesnt that work? I want to count the number of black cells in html table 16x16 cells ? I tried cell.style.backgroundColor=="black" and =='#000' and =="#000" but none of this works... It never counts.. Its always 0.
    Last edited by bigbada; 03-10-2013 at 10:08 PM.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by bigbada View Post
    I have a question that is non-related to OP.
    Please do not hi-jack someone else's thread on a completely different topic.
    Prefer to start a new thread of your own.


    This works:-

    Code:
    <div id = "mydiv" style="background-color:black">Some Text </div>
    
    <script type = "text/javascript">
    
    var d = document.getElementById("mydiv");
    if (d.style.backgroundColor == "black") {
    alert ("Background is black");
    }
    
    </script>
    Note tht if the background is specified as "black" you must test for "black" and not #000000
    Last edited by Philip M; 03-10-2013 at 10:28 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,618
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by bigbada View Post
    I have a question that is non-related to OP.
    Code:
    var black=0;
    for(i=0;i<=15;i++){
    		for(j=0;j<=15;j++){
    			cell=document.getElementById("cell_"+i+"_"+j);
    			if(cell.style.backgroundColor=="#000"){black++;}
    
    }
    }
    Why doesnt that work? I want to count the number of black cells in html table 16x16 cells ? I tried cell.style.backgroundColor=="black" and =='#000' and =="#000" but none of this works... It never counts.. Its always 0.
    Most browsers return 'rgb(0,0,0)' when the background colour is black.

    Also you can only retrieve the colour that way if it is attached directly to the tag itself. You need to use a different method to retrieve information set using style tags at the top of the page or in an external stylesheet.
    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.

  • #14
    New Coder
    Join Date
    Sep 2012
    Location
    Calgary, Alberta, Canada
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    It might be more readable if you made it an array of objects rather than an array of arrays. Then you could access the properties of each entry by name rather than having to remember which is in what position in the array.

    Code:
    var mini = [ 
       {name:"CAEDIMUS",rarity:"Common",size:"Small",newflag:"no",info:"Production Proof",date:"August 3, 2012",picture:"caedimus"},
       {name:"PORTIOQUE",rarity:"Common",size:"Small",newflag:"no",info:"Production Proof",date:"January 18, 2013",picture:"portioque"},
    ...

    Then you can refer to minis[m].size within the loop instead of minis[m][2] which is a more descriptive name for the field.
    Thanks so much for this post. I really like this idea.

  • #15
    New Coder
    Join Date
    Sep 2012
    Location
    Calgary, Alberta, Canada
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    Then you can refer to minis[m].size within the loop instead of minis[m][2] which is a more descriptive name for the field.
    I have run into a small problem. My previous code to display an image was:
    Code:
    document.write('<img border="0" hspace="0" src="/gallery7/'+ a[8] + '.jpg">');
    I changed this to reference the array object instead, but the picture does not display.
    Code:
    document.write('<img border="0" hspace="0" src="/gallery7/' + minis[i].imagename + '.jpg">');
    Any idea why this does not work now?

    (In case it is needed, here is the full code) :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>The Skull & Shackles Pathfinder Miniatures</title>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
    
    <script type="text/javascript">
        // MINI ARRAYS: name,name_size (normal/small),rarity,size,newflag(yes/no),info,date,number,picture
        var minis=[
            {mininame:"SEA TROLL",namesize:"normal",rarity:"Unknown Rarity",minisize:"Large",newflag:"yes",info1:"Production Proof",info2:"March 8, 2013",mininumber:"0",imagename:"seatroll"},
            {mininame:"PIRATE",namesize:"normal",rarity:"Unknown Rarity",minisize:"Medium",newflag:"yes",info1:"Production Proof",info2:"March 8, 2013",mininumber:"0",imagename:"pirate1"},
            {mininame:"",namesize:"normal",rarity:"",minisize:"",newflag:"yes",info1:"Production Proof",info2:", 2013",mininumber:"0",imagename:""}
         ];
        var promomini=["BRINEBONES, SKELETAL DRAGON","normal","Rare","Gargantuan","yes","Preview Sample","March 8, 2013","0","brinebones"];
        var showmininumber="no"; //Change to "yes" to show mini numbers - replaces date on Info2
    </script>
    
    <style type="text/css">
    
    .nocontainer {
        display: none;
    }
    
    .container {
        width: 860px;
    	height: 307px;
    	border-width: 1px;
    	border-color: white;  /* White - Invisible Border */
        border-style: solid;
    	margin: 0px 0px 20px 0px;
    }
    
    .promoframe {
        width: 430px;
        height: 414px;
        border-width: 3px;
        border-color: #808080;  /* Gray - Main Frame Border */
        border-style: solid;
        margin: 3px;
        background: white;  /* White - Main Frame Background */
    }
    
    .miniframe {
        width: 203px;
    	height: 294px;
    	border-width: 3px;
    	border-color: #808080;  /* Gray - Main Frame Border */
        border-style: solid;
    	margin: 3px;
    	float: left;
    	background: white;  /* White - Main Frame Background */
    }
    
    .nominiframe {
        display: none;
    }
    
    .boxname_normal {
        width: 100%;
    	height: 20px;
    	background: #414141;  /* Dark Gray - Name Box Background */
    	float: top;
    	color: white;
    	font-weight: bold;
    	font-size: 0.875em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    	padding: 2px 0px 0px 0px;
    }
    
    .boxname_small {
        width: 100%;
    	height: 20px;
    	background: #414141;  /* Dark Gray - Name Box Background */
    	float: top;
    	color: white;
    	font-weight: bold;
    	font-size: 0.75em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    	padding: 2px 0px 0px 0px;
    }
    	
    .boxrarity {
        width: 100%;
    	height: 14px;
    	background: #C0C0C0;  /* Light Gray - Details Box */
    	float: top;
    }
    	
    .boxsize {
        width: 100%;
    	height: 15px;
    	background: #C0C0C0;  /* Light Gray - Details Box */
    	float: top;
    	border-bottom-style: solid;
    	border-bottom-color: #808080;  /* Gray - Main Frame Border */
    	border-width: 3px;
    	color: #414141;  /* Dark Gray - Same as Name Box */
    	font-style: italic;
    	font-size: 0.8em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    }
    
    .boximage {
        width: 100%;
    	height: 200px;
    	background: white;
    	float: top;
    	padding-top: 6px;	
    }
    
    .boxinfo_old {
        width: 100%;
    	height: 16px;
    	background: white;	
    	float: top;
    	margin: 1px 0px 0px 0px;	
    	color: black;
    	font-style: italic;
    	font-size: 0.8em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    }
    
    .boxinfo_new {
        width: 100%;
    	height: 16px;
    	background: yellow;  /* Yellow - New Background */
    	float: top;	
    	color: black;
    	font-style: italic;
    	font-size: 0.8em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    }
    
    /* Date Box - Old */	
    .boxinfo2_old {
        width: 100%;
    	height: 18px;
    	background: white;
    	float: top;	
    	color: black;
    	font-style: italic;
    	font-size: 0.75em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    }
    
    /* Date Box - New */	
    .boxinfo2_new {
        width: 100%;
    	height: 18px;
    	background: yellow;  /* Yellow - New Background */
    	float: top;
    	color: red;
    	font-style: italic;
    	font-size: 0.75em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    }
    
    /* Number Box - Replaces Date Box */
    .boxinfo2_num {
        width: 100%;
    	height: 18px;
    	float: top;
    	color: #808080;  /* Gray - Match Main Frame Border */
    	font-style: normal;
    	font-size: 0.8em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    }
    
    .promoboximage {
        width: 100%;
        height: 320px;
        background: white;
        float: top;
        padding-top: 6px;
    }
    
    .rarity_common {
    	font-weight: bold;
    	font-size: 0.8em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    	color: #008000;
    }
    	
    .rarity_uncommon {
    	font-weight: bold;
    	font-size: 0.8em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    	color: #0000ff;
    }
    	
    .rarity_rare {
    	font-weight: bold;
    	font-size: 0.8em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    	color: #800080;
    }
    	
    .rarity_unique {
    	font-weight: bold;
    	font-size: 0.8em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    	color: #ffcc00;
    }
    
    .rarity_unknown {
    	font-weight: bold;
    	font-size: 0.8em;
    	text-align: center;
        font-family: "Calibri", "Helvetica";
    	color: #808080;
    }
    	
    .clear {
        clear:both;
    }
    	
    </style>
    
    </head>
    
    <body>
    
    <!-- HEADER -->
    <p align="center">
        <a href="index.html">
        <img border="0" hspace="0" src="logo.gif" alt="">
        </a>
    </p>
    <p align="center">
        <font face="Times New Roman">
    	    <strong>Pathfinder Battles: Skull & Shackles</strong><br>
    	    55 Miniatures<br>
    	    Release Date: Summer 2013<br>
    	</font>
    </p>
    
    <center>
    
    <script type="text/javascript">
    
    // START Display Loop	
    for (var i=0;i<minis.length;i++) {
        var boxnum=i+5-(Math.ceil(((i)+1)/4)*4);
        // Create Container for Frames
        if (boxnum==1) {
            if (minis[i].mininame==" ") {
                document.write('<div class="nocontainer">');
            }
            else {
                document.write('<div class="container">');
            }
        }
        else {
        }
    	    // Create Frame for Boxes
    	    if (minis[i].mininame=="") {
                document.write('<div class="nominiframe">');
            }
            else {
                document.write('<div class="miniframe">');
            }
    
                // Create Name Box in Frame
                if (minis[i].namesize=="small") {
                    document.write('<div class="boxname_small">');
                }
                else {
                    document.write('<div class="boxname_normal">');
                }
                document.write(minis[i].mininame); //Mini Name
                document.write('</div>');
    
                //Create Rarity Box in Frame
                if (minis[i].rarity=="Rare") {
                    document.write('<div class="boxrarity rarity_rare">');
                }
                else if (minis[i].rarity=="Uncommon") {
                    document.write('<div class="boxrarity rarity_uncommon">');
                }
                else if (minis[i].rarity=="Common") {
                    document.write('<div class="boxrarity rarity_common">');
                }
                else if (minis[i].rarity=="Unique") {
                    document.write('<div class="boxrarity rarity_unique">');
                }
                else {
                    document.write('<div class="boxrarity rarity_unknown">');
                }
                document.write(minis[i].rarity); //Rarity
                document.write('</div>');
    
                // Create Size Box in Frame
                document.write('<div class="boxsize">');
                document.write(minis[i].minisize); //Size
                document.write('</div>');
    
                // Create Image Box in Frame
                document.write('<div class="boximage">');
                document.write('<img border="0" hspace="0" src="/gallery7/' + minis[i].imagename + '.jpg">'); //Image
                document.write('</div>');
    
                // Create Info1 Box in Frame
                if (minis[i].newflag=="yes") {
                    document.write('<div class="boxinfo_new">');
                }
                else {
                    document.write('<div class="boxinfo_old">');
                }
                document.write(minis[i].info1); //Info1
                document.write('</div>');
    
                //Create Info2 Box in Frame
                if (showmininumber=="yes") {
                    document.write('<div class="boxinfo2_num">');
                    document.write('(' + minis[i].mininumber + ')'); //Mini Number
                }
                else {
                    if (minis[i].newflag=="yes") {
                        document.write('<div class="boxinfo2_new">');
                    }
                    else {
                        document.write('<div class="boxinfo2_old">');
                    }
                    document.write(minis[i].info2); //Info2
                }
                document.write('</div>');
            document.write('</div>'); //End Frame for Boxes
        var endminis = i + 1;
        if (boxnum==4 || endminis==minis.length) {
            document.write('<div class="clear">');
            document.write('</div>');
        document.write('</div>');
        }
        else {
        }
    } /* END Display Loop */
    
    </script>
    </center>
    
    
    <!-- PROMO MINI DISPLAY -->
    <center>
    <script type="text/javascript">
    // Create Frame for Boxes
    if (promomini[0]==" ") {
        document.write('<div class="nominiframe">');
    }
    else {
        document.write('<div class="promoframe">');
    }
        // Create Name Box in Frame
        document.write('<div class="boxname_normal">');
        document.write(promomini[0]); //Mini Name
        document.write('</div>');
    
        //Create Rarity Box in Frame
        document.write('<div class="boxrarity rarity_unique">');
        document.write(promomini[2]); //Rarity - Unique
        document.write('</div>');
    
        // Create Size Box in Frame
        document.write('<div class="boxsize">');
        document.write(promomini[3]); //Size
        document.write('</div>');
    
        // Create Image Box in Frame
        document.write('<div class="promoboximage">');
        document.write('<img border="0" hspace="0" src="gallery7/'+ promomini[8] + '.jpg" alt="">'); //Image
        document.write('</div>');
    
        // Create Info1 Box in Frame
        if (promomini[4]=="yes") {
            document.write('<div class="boxinfo_new">');
        }
        else {
            document.write('<div class="boxinfo_old">');
        }
        document.write(promomini[5]); //Info1
        document.write('</div>');
    
        //Create Info2 Box in Frame
        if (showmininumber=="yes") {
            document.write('<div class="boxinfo2_num">');
            document.write('(' + promomini[7] + ')'); //Mini Number
        }
        else {
            if (promomini[4]=="yes") {
                document.write('<div class="boxinfo2_new">');
            }
            else {
                document.write('<div class="boxinfo2_old">');
            }
            document.write(promomini[6]); //Info2
        }
        document.write('</div>');
    document.write('</div>'); //End Frame for Boxes
    document.write('<div class="clear">');
    document.write('</div>');
    </script>
    </center>
    
    <p align="center">
        <a href="index.html">Home Page</a>
    </p>
    
    <p align="center">
        <font size="1" face="Tahoma">
        <em>Last Page Update: March 9,2013</em>
        </font>
    </p>
    
    </body>
    </html>
    Last edited by helpneeded22; 03-15-2013 at 08:59 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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