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 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Calgary, Alberta, Canada
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Can I do this with JS? (See description)

    Currently I maintain a website which displays miniatures manufactured for gaming (roleplaying games): www.pathfinderminis.com

    I would like to add a page that allows users to select only certain miniatures to display based on criteria the user selects. (i.e. a user could select "elves" as a race, "male" as a gender, and "warrior" as a class type.) Some values, like "class" may have multiple entries (warrior, cleric, barbarian), so if there was a match with only one of these values it would include it in the queried result.

    I am just slowly wrapping my head around object-oriented programming, and to my understanding this would require such. Can javascript do what I have described, or would my time be better spent learning PHP to do this?
    Last edited by helpneeded22; 03-30-2013 at 05:47 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    PHP is the way to go if you have a significant number of figures.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    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.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,495
    Thanks
    3
    Thanked 500 Times in 487 Posts
    as far as I can see you have about 300 models all defined by arrays

    javascript should be able to cope with that

    your current use of document.write will need to go but there are better alternatives

    I will have a look to see what can be done

    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">
    <link type="text/css" rel="stylesheet" href="http://www.pathfinderminis.com/pmstyles.css">
    <script type="text/javascript">
        // MINI ARRAYS: name,name_size (normal/small),rarity,size,newflag(yes/no),info,date,number,picture
        var minis=[
            {keywords:'dick,harry,',mininame:"LIRIANNE",namesize:"normal",rarity:"Rare",minisize:"Medium",newflag:"yes",info1:"Production Proof",info2:"March 29, 2013",mininumber:"0",imagename:"lirianne"},
            {keywords:'tom,harry,',mininame:"TSADOK GOLDTOOTH",namesize:"normal",rarity:"Uncommon",minisize:"Medium",newflag:"yes",info1:"Production Proof",info2:"March 29, 2013",mininumber:"0",imagename:"tsadok"},
            {keywords:'tom,dick,',mininame:"KERDAK BONEFIST",namesize:"normal",rarity:"Rare",minisize:"Medium",newflag:"yes",info1:"Production Proof",info2:"March 29, 2013",mininumber:"0",imagename:"kerdak"},
            {keywords:'harry,',mininame:"GRINDYLOW",namesize:"normal",rarity:"Common",minisize:"Small",newflag:"no",info1:"Production Proof",info2:"March 22, 2013",mininumber:"0",imagename:"grindylow"},
            {keywords:'tom,dick,harry,',mininame:"BRINEBROOD QUEEN",namesize:"normal",rarity:"Rare",minisize:"Small",newflag:"no",info1:"Production Proof",info2:"March 22, 2013",mininumber:"0",imagename:"brinebroodqueen"},
            {keywords:'tom,',mininame:"THE WHALE",namesize:"normal",rarity:"Rare",minisize:"Large",newflag:"no",info1:"Production Proof",info2:"March 22, 2013",mininumber:"0",imagename:"thewhale"},
            {keywords:'dick,harry,',mininame:"SELISSA",namesize:"normal",rarity:"Uncommon",minisize:"Medium",newflag:"no",info1:"Production Proof",info2:"March 15, 2013",mininumber:"0",imagename:"selissa"},
            {keywords:'tom,harry,',mininame:"SHIMERAE",namesize:"normal",rarity:"Uncommon",minisize:"Large",newflag:"no",info1:"Production Proof",info2:"March 15, 2013",mininumber:"0",imagename:"shimerae"},
            {keywords:'tom,dick,',mininame:"ARRONAX ENDYMION",namesize:"normal",rarity:"Uncommon",minisize:"Medium",newflag:"no",info1:"Production Proof",info2:"March 15, 2013",mininumber:"0",imagename:"arronax"},
            {keywords:'harry,',mininame:"SEA TROLL",namesize:"normal",rarity:"Unknown Rarity",minisize:"Large",newflag:"no",info1:"Production Proof",info2:"March 8, 2013",mininumber:"0",imagename:"seatroll"},
            {keywords:'tom,dick,',mininame:"PIRATE",namesize:"normal",rarity:"Unknown Rarity",minisize:"Medium",newflag:"no",info1:"Production Proof",info2:"March 8, 2013",mininumber:"0",imagename:"pirate1"},
            {keywords:'dick,harry,',mininame:"",namesize:"normal",rarity:"",minisize:"",newflag:"no",info1:"Production Proof",info2:", 2013",mininumber:"0",imagename:""}
        ];
        var showmininumber="no"; //Change to "yes" to show mini numbers - replaces date on Info2
    
    function zxcSelect(kw){
     for (var ary=[],z0=0;z0<minis.length;z0++){
      if (minis[z0].keywords.match(kw+',')){
       ary.push(minis[z0]);
      }
     }
    document.Show.Show0.value=ary.length;
     zxcDisplay(ary);
    }
    
    </script>
    
    <script type="text/javascript">
    function zxcDisplay(ary){
     var html=''
    // START Display Loop
     for (var i=0;i<ary.length;i++) {
    	    // Create Frame for Boxes
    	    if (ary[i].mininame=="") {
                html+=('<div class="nominiframe">');
            }
            else {
                html+=('<div class="miniframe">');
            }
    
                // Create Name Box in Frame
                if (ary[i].namesize=="small") {
                    html+=('<div class="boxname_small">');
                }
                else {
                    html+=('<div class="boxname_normal">');
                }
                html+=(ary[i].mininame); //Mini Name
                html+=('</div>');
    
                //Create Rarity Box in Frame
                if (ary[i].rarity=="Rare") {
                    html+=('<div class="boxrarity rarity_rare">');
                }
                else if (ary[i].rarity=="Uncommon") {
                    html+=('<div class="boxrarity rarity_uncommon">');
                }
                else if (ary[i].rarity=="Common") {
                    html+=('<div class="boxrarity rarity_common">');
                }
                else if (ary[i].rarity=="Unique") {
                    html+=('<div class="boxrarity rarity_unique">');
                }
                else {
                    html+=('<div class="boxrarity rarity_unknown">');
                }
                html+=(ary[i].rarity); //Rarity
                html+=('</div>');
    
                // Create Size Box in Frame
                html+=('<div class="boxsize">');
                html+=(ary[i].minisize); //Size
                html+=('</div>');
    
                // Create Image Box in Frame
                html+=('<div class="boximage">');
                html+=('<img border="0" hspace="0" src="http://www.pathfinderminis.com/gallery7/' + ary[i].imagename + '.jpg">'); //Image
                html+=('</div>');
    
                // Create Info1 Box in Frame
                if (ary[i].newflag=="yes") {
                    html+=('<div class="boxinfo_new">');
                }
                else {
                    html+=('<div class="boxinfo_old">');
                }
                html+=(ary[i].info1); //Info1
                html+=('</div>');
    
                //Create Info2 Box in Frame
                if (showmininumber=="yes") {
                    html+=('<div class="boxinfo2_num">');
                    html+=('(' + ary[i].mininumber + ')'); //Mini Number
                }
                else {
                    if (ary[i].newflag=="yes") {
                        html+=('<div class="boxinfo2_new">');
                    }
                    else {
                        html+=('<div class="boxinfo2_old">');
                    }
                    html+=(ary[i].info2); //Info2
                }
                html+=('</div>');
            html+=('</div>'); //End Frame for Boxes
    
     } /* END Display Loop */
     document.getElementById('display').innerHTML=html;
    }
    </script>
    <style type="text/css">
    
    .promoframe {
        width: 430px;
        height: 418px;
        border-width: 3px;
        border-color: #808080;  /* Gray - Main Frame Border */
        border-style: solid;
        margin: 3px;
        background: white;  /* White - Main Frame Background */
    }
    
    .promoboximage {
        width: 100%;
        height: 320px;
        background: white;
        float: left;
        padding-top: 6px;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <!-- HEADER -->
    <p align="center">
        <a href="index.html">
        <img border="0" hspace="0" src="http://www.pathfinderminis.com/logo.gif" alt="">
        </a>
    </p>
    <p align="center">
        <font face="Times New Roman">
          <select onchange="zxcSelect(this.value);" >
           <option value="" >Select Key Word</option>
           <option value="tom" >tom</option>
           <option value="dick" >dick</option>
           <option value="harry" >harry</option>
          </select>
    	</font>
    </p>
    
    <center>
    <div id="display" style="width:800px;" ></div>
    </center>
    
    
    <!-- PROMO MINI DISPLAY -->
    <center>
    </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 29,2013</em>
        </font>
    </p>
    
    </body>
    </html>
    Last edited by vwphillips; 03-30-2013 at 09:08 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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