Page 1 of 1

JS broken in IE. :(

Posted: Wed Jan 30, 2008 7:54 am
by Chalks
edit: apparently this forum doesn't like "javascript:whatever" in [ html ] tags. So, where it says "&#058" there should be a ":"

Code: Select all

<select name="option">  <option value="Select One" selected>-- Controls --</option>  <option value="Add New Link" onclick="javascript&#058;showdiv('AddNewLink')">Add New Link</option>  <option value="Remove Link" onclick="javascript&#058;showdiv('RemoveLink')">Remove  Link</option>  <option value="Add New Category" onclick="javascript&#058;showdiv('AddNewCat')">Add New Category</option>  <option value="Remove Category" onclick="javascript&#058;showdiv('RemoveCat')">Remove  Category</option></select>
This bit of code works just fine in Firefox. However, surprise surprise... it doesn't work in Internet Explorer. Here's the showdiv function:

Code: Select all

function showdiv(divtoshow){  hideAll('no');  // simply sets all div styles to hidden  if (document.getElementById)  {     document.getElementById(divtoshow).style.visibility = 'visible';  }  else  {    if (document.layers)    { // Netscape 4      document.divtoshow.visibility = 'visible';    }    else    { // IE 4      document.all.divtoshow.style.visibility = 'visible';    }  }}
Could anyone tell me how to get IE working? Thanks
If you want to see this code live, it's at http://www.chalksdesign.com/links

Re: JS broken in IE. :(

Posted: Wed Jan 30, 2008 10:35 am
by pickle
You don't need to put "javascript:" in the onclick attribute.

What have you tried? Where is it failing? Put alerts everwhere & debug that way.

jQuery would solve this problem very easily for you, as it takes care of cross-browser compatibility:

Code: Select all

<select name = "option"><option class = "click-option" id = "_AddNewLink">Add new link</option><option class = "click-option" id = "_RemoveLink">Remove link</option></select>

Code: Select all

$(document).ready(function(){    //whenever one of those "options" is clicked    $(".click-option").click(function(){        //determine the ID of the element to show        var id = $(this).attr('id').substring(1);        //set some CSS        $("#"+id).css("visibility","visible");    });});

Re: JS broken in IE. :(

Posted: Thu Feb 28, 2008 8:15 am
by Chalks
I know this is an old post, but I recently solved my problem. I could have used jquey as pickle suggested, but... I didn't want to take the time to learn how to use it (lazy is me). I found a fairly simple solution that works just fine though:

Code: Select all

<select name="option" onchange="ieDivShow(this.options[this.selectedIndex].value)">  <option value="SelectOne" selected>-- Controls --</option>  <option value="AddNewLink">Add New Link</option>  <option value="RemoveLink">Remove  Link</option>  <option value="AddNewCat">Add New Category</option>  <option value="RemoveCat">Remove  Category</option></select>
I removed the onclick events, and added an onchange event. Then, I added this small function to my js:

Code: Select all

function ieDivShow(indexValue){  if(indexValue!='SelectOne')    showdiv(indexValue);}
And that's it! My showdiv function never was broken, it was just calling the function that IE had problems with. Switching to an onchange event rather than an onclick event fixed it. :D