CODEWITHSUNDEEP
jqueryinternet-explorerhideshow
user645607
user645607

Reputation: 225

JQUERY; show/hide isnt firing in IE, works on other browsers

okay below is part of the code im using for this site. its supposed to be where you click on the image and it "shows" a div that was hidden before. Then when you click another picture it hides the currently opened div and shows the new one. it works in every browser except IE (of course.) and im not sure what i did wrong with script, help please?

<div class="content">
<table width="100%" border="0">
<tr>
  <td align="center">
    <a id="1" href="#"><img src="..." width="100" height="92" alt="1" /></a>
    <a id="2" href="#"><img src="..." width="100" height="70" alt="2" /></a>
    <a id="3" href="#"><img src="..." width="100" height="112" alt="3" /></a>
    <a id="4" href="#"><img src="..." width="100" height="65" alt="4" /></a> 
    <a id="5" href="#"><img src="..." width="100" height="141" alt="5" /></a>
    </td>
  </tr>
</table>
</div>

<div id="frame1">
  <button>close</button>
  <iframe src="..." width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
</iframe>
</div>
<div id="frame2">
  <button>close</button>
  <iframe src="..." width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
  </iframe>
</div>
<div id="frame3">
  <button>close</button>
  <iframe src="..." width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
</iframe>
</div>

etc...

<script>
//controller for first site
$("a#1").click(function () {
    $("#frame2,#frame3,#frame4,#frame5").hide("fast");
    $("#frame1").show("slow");
});
//controller for second site
$("a#2").click(function () {
    $("#frame1,#frame3,#frame4,#frame5").hide("fast");
    $("#frame2").show("slow");
});
//controller for third site
$("a#3").click(function () {
    $("#frame1,#frame2,#frame4,#frame5").hide("fast");
    $("#frame3").show("slow");
});
//controller for fourth site
$("a#4").click(function () {
    $("#frame1,#frame2,#frame3,#frame5").hide("fast");
    $("#frame4").show("slow");
});
//controller for fifth site
$("a#5").click(function () {
    $("#frame1,#frame2,#frame3,#frame4").hide("fast");
    $("#frame5").show("slow");
});
//button close frames
$("button").click(function () {
    $("#frame1,#frame2,#frame3,#frame4,#frame5").hide("fast");
});
</script>

and of course the css of the frame divs had to be "display:none;" for it to work.

Upvotes: 1

Views: 3437

Answers (5)

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

I think you should try giving your links ID values that don't start with numbers. Numbers aren't valid to start out ID and NAME attributes, but they can be used after the initial character.

Also, may I suggest that you write out your code something like:

$('div.content a[href="#"]').click(function(){
    // I'm assuming that you'll be changing the ID of the link,
    // so we'll use the IMG instead
    var num = $(this).find('img').attr('alt');

    $('iframe').not('#iframe'+num).hide('fast')
               .end().filter('#iframe'+num).show('slow');
});

This way, you only have this small chunk of code that takes care of all that repeated code that handles the IFRAME show/hide behavior. Just tweak it as you would please.

Upvotes: 0

Robin Maben
Robin Maben

Reputation: 23054

$(document).ready(function() {
  $("a#1").click(function () {
    $('div[id~="frame"]').css({"display":"none"}); //hides all divs with id containing "frame"
    $("#frame1").show("slow");
  });
});

Note: Your is not a good practice.

The ID and NAME elements must start with a letter i.e. upper case A to Z or lower case a to z; a number is not allowed. After the first letter any number of letters (a to z, A to Z), digits (0 to 9), hyphens (-), underscores (_), colons (:) and periods (.) are allowed.

Upvotes: 2

Bart Vangeneugden
Bart Vangeneugden

Reputation: 3446

Have you put your jQuery code in a document ready block? Kind of like so: 

$(document).ready(function() {
$("a#1").click(function () {
    $("#frame2,#frame3,#frame4,#frame5").hide("fast");
    $("#frame1").show("slow");
});
});

I had that problem aswell when Firefox was able to load my javascript files before executing. IE had a bit more problems with that.

Edit: try using a textual ID for your links. e.g:

<a id="link1" href="...">link text</a>

ID's aren't meant to start with numbers, so IE could give problems on this.

Upvotes: 0

Karthik
Karthik

Reputation: 522

Just give a try with following code, but not sure,

$("a#1").live('click', function(event) {//hide and show}

Upvotes: 0

relaxxx
relaxxx

Reputation: 7824

I remember having similar problem... Hiding ALL and then showing one fixed the problem for me... so just give a try with

//controller for first site
$("a#1").click(function () {
    $("#frame1,#frame2,#frame3,#frame4,#frame5").hide("fast");
    $("#frame1").show("slow");
});

and try to use other identifier then enumeration

Upvotes: 0

Related Questions