SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [basic question] JQuery not working in IE

    Hi,
    Just started to experiment with JQuery. I have some basic functions to animate something, but they only seem to work in FF, Safari, Opera... and of course not in IE.
    I don't know what I'm doing wrong, yet.
    Can someone help?

    Code JavaScript:
     
    <html>
    <head>
    <title>test</title>
     
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script> 
     
    <script type="text/javascript">
     
    $(document).ready(function() {
     
    $('#one').mouseover(function() {
    $('#two').hide('slow');
    });
     
    $('#one').mouseout(function() {
    $('#two').show('slow');
    });
     
    $("#two").click(function(){
      $("#three").animate({ 
        marginLeft: "+=50px",
      }, 500 ).animate({ 
        marginTop: "+=100px",
      }, 300 ).animate({ 
        marginLeft: "+=50px",
      }, 500 );  
    });
     
    $('#three').draggable();
     
    });
     
    </script>
     
     
     
    <style>
    body { font-family: Verdana, Arial; font-size: 3.5mm;; }
     
    li { display: block; float: left;
    width: 50px; margin: 5px; padding: 15px;
    border: solid 2px #000000; background-color: #FFEBCD; text-align: center; 
    }
     
     
    </style>
     
    </head>
    <body>
     
    <ul>
    <li id="one">hover </li>
    <li id="two">click </li>
    <li id="three">drag </li>
    </ul>
     
    </body>
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The second library is wrong, use: http://ajax.googleapis.com/ajax/libs...uery-ui.min.js

  3. #3
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but still not working... :s

    I uploaded the page here:
    http://bulevardi.be/testjquery/sitepoint.html

  4. #4
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does adding a DTD help?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    Offline the document works correctly.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't change anything here.
    Which version of IE are you using? I'm using IE 6.0

  6. #6
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooh IE6 ... remove the commas after the px values
    Code:
    $("#two").click(function(){
      $("#three").animate({ 
        marginLeft: "+=50px"
      }, 500 ).animate({ 
        marginTop: "+=100px"
      }, 300 ).animate({ 
        marginLeft: "+=50px"
      }, 500 );  
    });

  7. #7
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great!

    Works fine !
    Thanks a lot.


    I see also that if you want to change multple styles, you just put the comma in between


    $("#two").click(function(){
    $("#three").animate({
    marginLeft: "+=50px", marginTop: "+=100px"
    }, 500 );
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •