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 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts

    LI Random Class - not more than once! Attach href to class?

    I was helped here with the following code:

    Code:
    <html>
    <head>
    <style type="text/css">
    .burmedBox1 {background-image:url(image1.jpg);}
    .burmedBox2 {background-image:url(image2.jpg);}
    .burmedBox3 {background-image:url(image3.jpg);}
    .burmedBox4 {background-image:url(image4.jpg);}
    .burmedBox5 {background-image:url(image5.jpg);}
    </style>
    <script type = "text/javascript">
    function burmedSwap()
    {
       var liClass = ['burmedBox1','burmedBox2','burmedBox3','burmedBox4','burmedBox5'];
       function randOrd(){return(Math.round(Math.random())-0.5);}
       liClass.sort(randOrd);
       for(var i=0;i<=2;i++) 
       {document.getElementById('burmedBox' + (i+1)).className = liClass[i];}
    }
    onload = burmedSwap;
    </script>
    </head>
    <body>
    <ul>
        <li id="burmedBox1">&nbsp;</li>
        <li id="burmedBox2">&nbsp;</li>
        <li id="burmedBox3">&nbsp;</li>
    </ul>
    </body>
    </html>
    The code assigns a random class to the list items which loops the backgrounds - but prevents from allowing the same class to be assigned twice on the same page load.

    My problem is, I'm trying to have each class link to a different location.. For example, li.burmedBox1 would goes to burmedBox1.html, li.burmedBox2 goes to burmedBox2.html and so on. But I'm having a hard time figuring out how to attach a href to each respective class. Any ideas?
    Last edited by KyleVA; 05-19-2009 at 08:04 PM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Say what?
    This should be:

    .burmedBox1 {background-image:url(image1.jpg);}

    What does 'link to a different location' mean?

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Okay, the script assigns one of the following classes to the list items in the body (#burmedBox1, li#burmedBox2, li#burmedBox3): burmedBox1, burmedBox2, burmedBox3, burmedBox4, burmedBox5.

    It randomly assigns one of those classes, but I need the script to accordingly assign a HREF with each class. For example, whatever div is assigned the class burmedBox1 - it needs to also have a href assigned to it that goes to burmedBox1.html

    If this isn't clear let me know and I'll have another attempt at explaining it.

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Just a thought:

    In each list item I could have an anchor link -

    <li><a href="" onClick="function()"></a></li>

    I'm trying to figure out the syntax for a function to have it check the parent element's class (assigned by the Javascript) and depending on what class the list item has assigned - your active window will go to the specified location for that particular class.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Still missing it.

    whatever div is assigned the class burmedBox1 - it needs to also have a href assigned to it
    A div doesn't have an 'href' - are you trying to make it a link?

    Code:
    var hrefs = {
     burmedBox1 : 'some_href.html' ,
     burmedBox2 : 'some_href.html' ,
     burmedBox3 : 'some_href.html' ,
     burmedBox4 : 'some_href.html' ,
     burmedBox5 : 'some_href.html' 
    }
    
    function burmedSwap()
    {
       var el, classname = '';
       var liClass = ['burmedBox1','burmedBox2','burmedBox3','burmedBox4','burmedBox5'];
       function randOrd(){return(Math.round(Math.random())-0.5);}
       liClass.sort(randOrd);
       for(var i=0;i<liClass.length;i++) 
       {
        el = document.getElementById('burmedBox' + (i+1));
        classname = liClass[i];
        if (el && classname)
        {
           el.className = classname;
           el.onclick = function(){window.location = hrefs[classname];};
        }
      }
    }
    onload = burmedSwap;
    </script>
    </head>
    <body>
    <ul>
        <li id="burmedBox1">&nbsp;</li>
        <li id="burmedBox2">&nbsp;</li>
        <li id="burmedBox3">&nbsp;</li>
    </ul>
    </body>
    </html>

    ...untested!

  • #6
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Dang,

    all three list items goto the same random URL.

    Hmm..

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    So ... post what you've got so we can paste & go.

    Absolute urls please!

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Code:
    <script type = "text/javascript">
    var hrefs = {
     burmedBox1 : 'http://www.aprons.com' ,
     burmedBox2 : 'http://www.leadedeyeware.com' ,
     burmedBox3 : 'http://www.repair.com' ,
     burmedBox4 : 'http://www.sponges.com' ,
     burmedBox5 : 'http://www.storage.com' 
    }
    
    function burmedSwap()
    {
       var el, classname = '';
       var liClass = ['burmedBox1','burmedBox2','burmedBox3','burmedBox4','burmedBox5'];
       function randOrd(){return(Math.round(Math.random())-0.5);}
       liClass.sort(randOrd);
       for(var i=0;i<liClass.length;i++) 
       {
        el = document.getElementById('burmedBox' + (i+1));
        classname = liClass[i];
        if (el && classname)
        {
           el.className = classname;
           el.onclick = function(){window.location = hrefs[classname];};
        }
      }
    }
    onload = burmedSwap;
    </script>
    Last edited by KyleVA; 05-19-2009 at 09:31 PM.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <base href="http://www.burmed.com/" />
    <style type="text/css">
    li {
    width:100px;
    height:100px;
    border:1px black solid;
    cursor:pointer;
    }
    </style>
    <script type="text/javascript">
    
    var hrefs = {
     burmedBox1 : 'burmedBox1 href' ,
     burmedBox2 : 'burmedBox2 href' ,
     burmedBox3 : 'burmedBox3 href' ,
     burmedBox4 : 'burmedBox4 href' ,
     burmedBox5 : 'burmedBox5 href' 
    }
    
    function burmedSwap()
    {
       var el, classname = '';
       var liClass = ['burmedBox1','burmedBox2','burmedBox3','burmedBox4','burmedBox5'];
       function randOrd(){return(Math.round(Math.random())-0.5);}
       liClass.sort(randOrd);
       for (var i = 0; i < liClass.length; i++) 
       {
        el = document.getElementById('burmedBox' + (i+1));
        classname = liClass[i];
        if (el && classname)
        {
           el.className = classname;
           el.onclick = function(){alert('link: ' + hrefs[this.className]);}; //demo, remove
           el.innerHTML = classname; //demo, remove
           //el.onclick = function(){window.location = hrefs[this.className]; //real deal, uncomment
        }
      }
    }
    onload = burmedSwap;
    
    </script>
    </head>
    <body>
    <ul>
        <li id="burmedBox1"></li>
        <li id="burmedBox2"></li>
        <li id="burmedBox3"></li>
        <li id="burmedBox4"></li>
        <li id="burmedBox5"></li>
    </ul>
    </body>
    </html>

  • #10
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks, you're a life saver.

    For some reason I couldn't solve it for the life of me.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    No problem.

    Thought about this a bit, and maybe you'd rather have a default setup, for the no-js crowd. Never hurts. Try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <base href="http://www.burmed.com/" />
    <style type="text/css">
    li a {
    display: block;
    }
    .default1 {background-image:url(image1d.jpg);}
    .default2 {background-image:url(image2d.jpg);}
    .default3 {background-image:url(image3d.jpg);}
    .default4 {background-image:url(image4d.jpg);}
    .default5 {background-image:url(image5d.jpg);}
    .burmedBox1 {background-image:url(image1.jpg);}
    .burmedBox2 {background-image:url(image2.jpg);}
    .burmedBox3 {background-image:url(image3.jpg);}
    .burmedBox4 {background-image:url(image4.jpg);}
    .burmedBox5 {background-image:url(image5.jpg);}
    </style>
    <script type="text/javascript">
    
    var hrefs = {
     burmedBox1 : 'javascript:alert("burmedBox1")' ,
     burmedBox2 : 'javascript:alert("burmedBox2")' ,
     burmedBox3 : 'javascript:alert("burmedBox3")' ,
     burmedBox4 : 'javascript:alert("burmedBox4")' ,
     burmedBox5 : 'javascript:alert("burmedBox5")' 
    }
    
    function burmedSwap()
    {
       var el, classname = '';
       var liClass = ['burmedBox1','burmedBox2','burmedBox3','burmedBox4','burmedBox5'];
       function randOrd(){return(Math.round(Math.random())-0.5);}
       liClass.sort(randOrd);
       for (var i = 0; i < liClass.length; i++) 
       {
        el = document.getElementById('burmedBox' + (i+1));
        classname = liClass[i];
        if (el && classname)
        {
           el.className = classname;
           el.getElementsByTagName('a')[0].href = hrefs[el.className];
           el.getElementsByTagName('a')[0].innerHTML = classname;//demo, remove
        }
      }
    }
    
    //window.onload = burmedSwap;
    
    </script>
    </head>
    <body>
    <ul>
        <li id="burmedBox1" class="default1"><a href="default_href_1">default1</a></li>
        <li id="burmedBox2" class="default2"><a href="default_href_2">default2</a></li>
        <li id="burmedBox3" class="default3"><a href="default_href_3">default3</a></li>
        <li id="burmedBox4" class="default4"><a href="default_href_4">default4</a></li>
        <li id="burmedBox5" class="default5"><a href="default_href_5">default5</a></li>
    </ul>
    </body>
    </html>
    Uncomment the onload handler to compare. The no-js version gives the user the links in sequence, without the shuffle. Didn't test it with real urls and bgs, so, no guarantees.


  •  

    Posting Permissions

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