jQuery hide()/show() not working

StackOverflow https://stackoverflow.com/questions/22943395

  •  29-06-2023
  •  | 
  •  

سؤال

I am trying to create a simple lightbox and it works perfectly fine on Firefox and Chrome, but does not work on IE8. (Windows 7)

Here is my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>lightbox</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="lightbox.js"></script>
    <style>
        #divlight {
            background: none repeat scroll 0 0 #CCCCCC;
            border: 2px solid #000000;
            height: 600px;
            left: 150px;
            top: 10p;
            padding: 15px;
            position: absolute;
            width: 800px;
        }

        #closebox {
            bottom: 10px;
            position: absolute;
            right: 10px;
        }
    </style>
</head>
<body>
     <div id="divlight">
         <table id="innerbox">
            <tbody id="tdbody">
                <tr id="tbtop">
                    <div align="center"><td style="text-align: center;" colspan="3"
             rowspan="1"><h2>Measurment Guide</h2></td></div>
                </tr>
                <tr id="tbmid">
                  <td id="tbmid1">
                    <div height="220" width="350">
                        Test
                    </div></td>
                  <td id="tbmid2">1</td>
                  <td id="tbmid3">2</td>
                </tr>
                <tr id="tbbuttom">
                  <td colspan="3" rowspan="1">345</td>
                </tr>
              </tbody>

        </table>
        <div id="closebox">
            <button id="hide">Close (x)</button>
        </div>
    </div>

<div>
    <table class="table1" width="90%" border="1px solid grey">
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>

        </tr>
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>

        </tr>           
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>

        </tr>
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>

        </tr>
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>
        </tr>           
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>
        </tr>                           
    </table>    
</div><p></p>
   <button id="show">Light Box</button>


</body>
    </html>

And This is my jQuery code: i have renamed jquery-2.1.0.min.js to jquery.js. This code is in lightbox.js

$(function(){
    $('#divlight').hide();
    $('body').css('background', 'white');       
    $("#show").click(function(){
        $("#divlight").show();
        $("body").css("background", "grey");
    });
    $("#hide").click(function(){
        $("#divlight").hide();
        $("body").css("background", "white");
    });
    $("#toggle").click(function(){
        $("#divlight").toggle("normal");
    });
});

This is the IE developer tool error:

  Object doesn't support this property or method  jquery.js, line 2 character 29489

I had almost fixed it .. I dont know how.. now it gives me more pain than before... have a look at this in fire fox or chrome and then on IE...

http://www.aquireservices.com/music/lightbox.html

هل كانت مفيدة؟

المحلول

Sounds like an IE8 compatibility error with jQuery -

from jQuery site:

The 1.x branch, this time 1.11.0, adds support for the older versions of Internet Explorer (IE6, 7, and 8). The 2.x branch, today played by 2.1.0, adds support for non-traditional web environments like node.js and browser plugins for Chrome and Firefox.

try using 1.11.0 instead of 2.1.0

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top