PDA

View Full Version : LI Random Class - not more than once! Attach href to class?



KyleVA
05-19-2009, 08:22 PM
I was helped here with the following 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?

adios
05-19-2009, 08:53 PM
Say what?
This should be:

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

What does 'link to a different location' mean?

KyleVA
05-19-2009, 09:04 PM
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.

KyleVA
05-19-2009, 09:35 PM
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.

adios
05-19-2009, 09:37 PM
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? :confused:



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!

KyleVA
05-19-2009, 09:55 PM
Dang,

all three list items goto the same random URL.

Hmm..

adios
05-19-2009, 10:01 PM
So ... post what you've got so we can paste & go. :thumbsup:

Absolute urls please!

KyleVA
05-19-2009, 10:07 PM
<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>

adios
05-19-2009, 10:35 PM
<!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>

KyleVA
05-19-2009, 10:41 PM
Thanks, you're a life saver.

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

adios
05-19-2009, 11:11 PM
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:


<!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.