Javascript working on and off - HTML Forums

jim255 · 10-24-2009, 06:40 AM

Hi guys, im using this javascript code on my page which works fine -

<script type="text/javascript">

function goThere(){
sel=document.forms[0].getElementsByTagName('select');
for(c=0;c<sel.length;c++) {
sel[c].onchange=function() {
if(this.value!='') {
location.href=this.value;
}
}
}
}

if(window.addEventListener){
window.addEventListener('load',goThere,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',goThere);
}
}
</script>

However when I add this html it doesnt function in the same way, in fact it doesnt work at all -

<div id="a"><li><a href = "http://www.michaellynchlogistics.co.uk/contact.htm"><font face="Trebuchet MS" size="2">Contact us</font></a></li></div><div id="b"><li><a href = "http://www.michaellynchlogistics.co.uk/services.htm"><font face="Trebuchet MS" size="2">Services</font></a></li></div><div id="d"><li><a href = "http://www.michaellynchlogistics.co.uk/about%20us.htm"><font face="Trebuchet MS" size="2">About Us</font></a></li></div><div id="c"><li><a href = "http://www.michaellynchlogistics.co.uk/about%20us.htm"><font face="Trebuchet MS" size="2">About Us</font></a></li></div>
</div>

When I take out this code it works fine again, so im guessing its this code thats the problem. I need to know how I can include this and get it to work still

thanks

coothead · 10-24-2009, 09:27 AM

Hi there jim255,

your HTML snippet is incorrect and poor coding.

The font element is deprecated and does not belong to this century.

Also note that you should avoid spaces in file names, so use about_us.html or aboutUs.html instead of about us.html.

Taking all this on board, your code should look something like this...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
ul a {
    font-family:'trebuchet ms',sans-serif;
    font-size:13px;
 }
</style>

<script type="text/javascript">

function goThere(){
   sel=document.forms[0].getElementsByTagName('select');
for(c=0;c<sel.length;c++) {
sel[c].onchange=function() { 
if(this.value!='') {
   location.href=this.value;
    }
   }
  }
 }

if(window.addEventListener){
   window.addEventListener('load',goThere,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',goThere);
  }
 }
</script>

</head>
<body>

<ul>
 <li><a href="http://www.michaellynchlogistics.co.uk/contact.html">Contact us</a></li>
 <li><a href="http://www.michaellynchlogistics.co.uk/services.html">Services</a></li>
 <li><a href="http://www.michaellynchlogistics.co.uk/about_us.html">About us</a></li>
</ul>

<form action="#">
<div>

<select>
 <option value="">---options---</option>
 <option value="http://www.google.com">Front</option>
 <option value="page2.html">Middle</option>
 <option value="page3.html">Last</option>
</select>

<select>
 <option value="">---options---</option>
 <option value="http://www.yahoo.com">yahoo</option>
 <option value="http://www.htmlforums.com">HTML Forums</option>
 <option value="http://www.bbc.co.uk">The BBC</option>
</select>

</div>
</form>

</body>
</html>

jim255 · 10-24-2009, 02:12 PM

ive tried the new code and it works better than my one. Thanks for that.
One thing though, when i go to make a div for each of the list items like such -

<div id="first"><li><a href="http://www.michaellynchlogistics.co.uk/contact.html">Contact us</a></li></div>

i get back to square one and it doesnt work. I want to make a div for each list component to position them where i want but it doesnt seem to work when i do this. Is there anything i can do to make this work

thanks

coothead · 10-24-2009, 02:25 PM

Hi there jim255,

this...

Code:

<div id="first"><li>....  ...</li></div>

is incorrect coding.

You must use...

Code:

<ul><li>....  ...</li></ul>

To position elements use margin and padding.

How to you want the links to be positioned?

jim255 · 10-25-2009, 05:56 AM

I would like them positioned so that they look like this on the page -

first one second one third one fourth one

so that they are all in line with each other horizontally, and also how can I position them to where i want along that horizontal line?

thanks

coothead · 10-25-2009, 06:18 AM

Hi there jim255,

there are a variety of methods for achieving this.

Here is basic one for you to try...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
ul {
    margin:0;
    padding:10px 0;
    list-style-type:none;
    text-align:center;
 }
ul li {
    display:inline;

    margin:0 40px;
 }
ul a {
    padding:4px 10px;
    border:1px solid #999;
    font-family:'trebuchet ms',sans-serif;
    font-size:16px;
    color:#000;
    text-decoration:none;
 }
ul a:hover {
    border-color:#000;
    color:#fff;
    background-color:#666;
 }
</style>

<script type="text/javascript">

function goThere(){
   sel=document.forms[0].getElementsByTagName('select');
for(c=0;c<sel.length;c++) {
sel[c].onchange=function() { 
if(this.value!='') {
   location.href=this.value;
    }
   }
  }
 }

if(window.addEventListener){
   window.addEventListener('load',goThere,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',goThere);
  }
 }
</script>

</head>
<body>

<ul>
 <li><a href="http://www.michaellynchlogistics.co.uk/contact.html">Contact us</a></li>
 <li><a href="http://www.michaellynchlogistics.co.uk/services.html">Services</a></li>
 <li><a href="http://www.michaellynchlogistics.co.uk/about_us.html">About us</a></li>
</ul>

<form action="#">
<div>

<select>
 <option value="">---options---</option>
 <option value="http://www.google.com">Front</option>
 <option value="page2.html">Middle</option>
 <option value="page3.html">Last</option>
</select>

<select>
 <option value="">---options---</option>
 <option value="http://www.yahoo.com">yahoo</option>
 <option value="http://www.htmlforums.com">HTML Forums</option>
 <option value="http://www.bbc.co.uk">The BBC</option>
</select>

</div>
</form>

</body>
</html>

jim255 · 10-25-2009, 12:11 PM

thanks, the code works fine now the only thing is what do i have to adjust to move the links to the left or the right.
I dont mean make them closer or further apart but in moving them left or right on the page.

thanks