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

Question

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.

you should really be using classes instead of such a long list of IDs — JohnP, Mar 29 '11 at 07:31

Robin Maben · Answer 1 · 2011-03-29T08:28:44.467

$(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.

score 0 · Answer 2 · answered Mar 29 '11 at 07:28

0

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

answered Mar 29 '11 at 07:28

relaxxx

7,566
8
37
64

@user645607 try to look at similar [post](http://stackoverflow.com/questions/513735/jquery-hide-show-div-problem-internet-explorer) – relaxxx Mar 29 '11 at 07:40

Bart Vangeneugden · Answer 3 · 2011-03-29T08:11:50.047

0

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.

edited Mar 29 '11 at 08:11

answered Mar 29 '11 at 07:31

Bart Vangeneugden

3,436
4
33
52

AH i cant believe i forgot that. But it still didn't work when i fixed it. – user645607 Mar 29 '11 at 07:35
Have you checked if the "click" block is even reached? By simply putting a 'alert()' function in it? This could help determine if it's your "a#1" expression failing, or the hide() function failing – Bart Vangeneugden Mar 29 '11 at 07:40

score 0 · Answer 4 · answered Mar 29 '11 at 07:38

0

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

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

answered Mar 29 '11 at 07:38

Karthik

522
3
13

score 0 · Answer 5 · edited May 23 '17 at 11:51

0

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.

edited May 23 '17 at 11:51

Community

1
1

answered Mar 29 '11 at 09:25

Richard Neil Ilagan

14,627
5
48
66

that's a little complicated for me to use lol im kinda new to jquery. and thanks ill try it. – user645607 Apr 01 '11 at 17:05
Don't worry, that's just a suggestion from me. I think your bigger problem is that you're using ID values that start with numbers --- do something about that first. :D – Richard Neil Ilagan Apr 02 '11 at 10:21

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

5 Answers5