...

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



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

all three list items goto the same random URL.

Hmm..

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

Absolute urls please!

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum