Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Doctype killing JS in IE

    I was roughing out a feature I want to add to my site in notepad with no doctype declared.

    I got it just how I wanted, then realized it didn't work in IE. I added a doctype, it validates at xhtml strict, but it killed IE, while it started adding round corners in IE which wasn't working with no doctype...but now my JS isn't working...

    So I lost functionality of the JS while adding the round corner style that wasnt working when the JS was mostly working...

    FF works fine every damn way of course....

    I uploaded it to http://pugetsoundtraining.com/Portfolio/spriteTest.html

    Also when it was functioning, the lower set of icons background wasn't showing.

    You can load that link ^^ in FF to see exactly what I'm going for....it works in ff

    css:
    Code:
    body {
      margin: 0px;
      font-family: "Georgia", serif;
    } 
    /* Give headings their own font */ 
    h1, h2, h3, h4 {
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }
     
    /* Main content area */ 
    #content {
    position:absolute;
    top:70px;
    left:500px;
      text-align: center;
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
     
    /* Header/footer boxes */ 
    .wideBox {
      clear: both;
      text-align: center;
      border: 1px solid #333;
    }
     
    .wideBox h1 {
      font-weight: bold;
      margin: 0px;
      color: #666;
      font-size: .5em;
    } 
    /* Slots for final card positions */ 
    #cardSlots {
      margin: 50px auto 0 auto;
      background: #ddf;
    } 
    /* The initial pile of unsorted cards */ 
    #cardPile {
     // margin: 0 auto;
     background: #ffd;
    }
     
    #cardSlots, #cardPile {
      width: 250px;
      height: 120px;
      border: 3px solid #333;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;   
      -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
      -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
      box-shadow: 0 0 .3em rgba(0, 0, 0, .8); 
    }
     
    /* Individual cards and slots */ 
    #cardSlots div, #cardPile div */
      float: left;
      -moz-width:35px;
      -moz-height:35px;
      width: 35px;
      height: 35px;
      border: 2px solid #333;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      margin: 5 5 5 5px;
     // background: #fff;
    } 
    #cardSlots div:first-child, #cardPile div:first-child {
      margin-left: 0px;
    }
    #cardSlots div.hovered {
      background: #aaa;
    }
    #cardSlots div {
      border-style: dashed;
    } 
    #cardPile div {
      background: #666;
      color: #fff;
      font-size: 5px;
      text-shadow: 0 0 3px #000;
    }   
    #cardPile div.ui-draggable-dragging {
      -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
      -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
      box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
      opacity:0.5;
      filter:alpha(opacity=50); /* For IE8 and earlier */
    }
     
    #card1.ui-draggable{background:url(iconSprite2.png) 0px 0px no-repeat;}
    #card2.ui-draggable{background:url(iconSprite2.png) -36px 0px no-repeat; }
    #card3.ui-draggable{background:url(iconSprite2.png) -73px 0px no-repeat; }
    #card4.ui-draggable{background:url(iconSprite2.png) -108px 0px no-repeat; }
    #card5.ui-draggable{background:url(iconSprite2.png) -143px 0px no-repeat; }
    #card6.ui-draggable{background:url(iconSprite2.png) -178px 0px no-repeat; }
    #card7.ui-draggable{background:url(iconSprite2.png) -213px 0px no-repeat; }
    #card7.ui-draggable{background:url(iconSprite2.png) -250px 0px no-repeat; }
    #card8.ui-draggable{background:url(iconSprite2.png) -285px 0px no-repeat; }
    #card9.ui-draggable{background:url(iconSprite2.png) -319px 0px no-repeat; }
    #card10.ui-draggable{background:url(iconSprite2.png) -353px 0px no-repeat; }
     
    /* "You did it!" message */
    #successMessage {
      position: absolute;
      left: 580px;
      top: 250px;
      width: 0;
      height: 0;
      z-index: 100;
      background: #dfd;
      border: 2px solid #333;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
      -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
      box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
      padding: 20px;
    }
    
    #displayCardNum {
    	height:400px;
    	width:500px;
    	position:absolute;
    	top:80px;
    	right:25px;
    }
    #score {
    	width:200px;
    	font-size:25px;
    	height:50px; 
    	position:absolute;
    	top:300px;
    	right:300px;
    }
    #status {
    	width:300px;
    	font-size:25px;
    	height:50px; 
    	position:absolute;
    	top:150px;
    	right:200px;
    }
    html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<title>XHTML 1.0 Strict validated</title>
    	<meta http-equiv="content-type" 
    		content="text/html;charset=utf-8" />
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
    <script type="text/javascript" src="game.js"></script>
     
    <script type="text/javascript"> 
    </script>
    </head>
    
    
    <body>
    <div id="content">
      <div id="cardPile"> </div>
      <div id="cardSlots"> </div>
     
      <div id="successMessage">
        <h2>You did it!</h2> 
        <button onclick="init()">Play Again</button>
      </div>
    
      <div id="reset">
        <h2>Reset</h2>
        <button onclick="init()">Reset?</button>
      </div>
    </div>
    <div id="displayCardNum">Error Msg: </div>
    <div id="score">Score: <span id="myTextToShow"></span>
     </div>
    <div id="status"></div>
      <p>
        <a href="http://validator.w3.org/check?uri=referer"><img
          src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
      </p>
      
    </body>
    </html>
    javascript:
    var correctCards = 0;
    var points = 0;
    $( init );

    function init() {
    // Hide the success message
    $('#successMessage').hide();
    $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
    } );

    //Card Game Below
    // Reset the game
    correctCards = 0;
    points=0;
    document.getElementById('score').innerHTML = "Score: "+ points;
    var status;

    $('#cardPile').html( '' );
    $('#cardSlots').html( '' );

    // Create the pile of shuffled cards
    var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
    numbers.sort( function() { return Math.random() - .5 } );

    for ( var i=0; i<10; i++ ) {
    $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
    containment: '#content',
    stack: '#cardPile div',
    cursor: 'move',
    revert: true
    } );
    }

    //Create sprite background offset for card slots
    var pos = [ '0px 0px', '-36px 0px', '-73px 0px', '-108px 0px', '-143px 0px', '-178px 0px', '-250px 0px', '-285px 0px', '-319px 0px', '-353px 0px' ];

    // Create the card slots
    var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
    for ( var i=1; i<=10; i++ ) {
    $('<div style="background:url(iconSpriteGrey.png)' + pos[i-1] +' no-repeat;>"' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
    accept: '#cardPile div',
    hoverClass: 'hovered',
    drop: handleCardDrop
    } );
    }
    }

    //Handle the card drop
    function handleCardDrop( event, ui ) {
    var slotNumber = $(this).data( 'number' );
    var cardNumber = ui.draggable.data( 'number' );

    // If the card was dropped to the correct slot,
    // change the card colour, position it directly
    // on top of the slot, and prevent it being dragged
    // again

    if ( slotNumber == cardNumber ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
    win();
    //alert('you just dropped ' + cardNumber + " in the correct spot, slot number: " + slotNumber);
    }
    else if(slotNumber != cardNumber){
    updateCards();
    fail();
    };

    function updateCards() {
    document.getElementById('displayCardNum').innerHTML = "Sorry but you tried to place a<b> " + cardNumber + " </b>into a<b> " + slotNumber + "</b> socket";}

    function win() {
    points+=5;
    status=' Win 5 points!';
    showScore();
    $('#status').fadeIn("slow");
    $('#status').fadeOut("slow");
    }

    function fail() {
    points-=3;
    status=' lose 3 points!';
    showScore();
    $('#status').fadeIn("slow");
    $('#status').fadeOut("slow");
    }
    function showScore() {

    if(points < 0) {points = 0;}
    document.getElementById('score').innerHTML = "Score: "+ points;
    document.getElementById('status').innerHTML="Status: <b>" + status + "</b>";

    }
    // If all the cards have been placed correctly then display a message
    // and reset the cards for another go

    if ( correctCards == 10 ) {

    $('#successMessage').show();
    $('#successMessage').animate( {
    left: '380px',
    top: '200px',
    width: '400px',
    height: '100px',
    opacity: 1
    } );
    }
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Looks like it was a bug with jQuery 1.5 and IE9.

    http://bugs.jquery.com/ticket/8052

    The IE9 error console says this

    Code:
    Object doesn't support property or method 'getElementsByTagName'
    update your version of jQuery and see if that works.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Looks like it was a bug with jQuery 1.5 and IE9.

    http://bugs.jquery.com/ticket/8052

    The IE9 error console says this

    Code:
    Object doesn't support property or method 'getElementsByTagName'
    update your version of jQuery and see if that works.
    Wow that fixed it...I even read down that page at one point and didn't catch it..........

    Thanks a lot!!

    So frustrating when it's something obscure making your stuff explode...

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Does anyone have any ideas why my code would be working properly in IE on my local computer, but the same file when uploaded to my host it doesn't adjust/display one of the variables correctly......?

    I have 3 functions, win(), fail(), which both adjust 2 variables then call a 3rd function showScore() which displays those variables to the screen.

    Code:
    function win() {
    points+=5;
    status=' Win 5 points!';
    showScore();
    $('#status').fadeIn("slow");
    $('#status').fadeOut("slow");
    }
    
    function fail() {
    points-=3;
    status=' lose 3 points!';
    showScore();
    $('#status').fadeIn("slow");
    $('#status').fadeOut("slow");
    }
    
    function showScore() {
    if(points < 0) {points = 0;}
    document.getElementById('score').innerHTML = "Score: "+ points;
    document.getElementById('status').innerHTML="Status: <b>" + status + "</b>";
    }
    The above variable "status" should switch between 2 strings, "Win 5 points" or "Lose 3 points" it works locally in IE but not on the web host....works every way with FF.

    The fadeIn() and fadeOut() events trigger, it flashes "Status: " But doesnt show the variable of status..........................................Any ideas? All the other scores and stuff update correctly so I dont think it's a problem with innerHTML or why would the other innerHTML's work??

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    if you want more than one function to manipulate the same variables, you will have to make them global by declaring the variables outside of those functions. ( you probably get 0 for points everytime too, I would guess.

    also you may not be aware, but you can use

    Code:
    $(#'score').html(points)
    instead of

    Code:
    document.getElementById('score').innerHTML = "Score: "+ points;
    , if you like.

    you can declare them by doing this before your functions

    Code:
    var status;
    var points = 0;
    Last edited by DanInMa; 12-09-2011 at 05:30 PM.

  • Users who have thanked DanInMa for this post:

    nuBee (12-09-2011)

  • #6
    New Coder
    Join Date
    May 2011
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    if you want more than one function to manipulate the same variables, you will have to make them global by declaring the variables outside of those functions. ( you probably get 0 for points everytime too, I would guess.

    also you may not be aware, but you can use

    Code:
    $(#'score').html(points)
    instead of

    Code:
    document.getElementById('score').innerHTML = "Score: "+ points;
    , if you like.

    you can declare them by doing this before your functions

    Code:
    var status;
    var points = 0;
    Ahha! Thanks for the heads up with the jquery .html, I just started using jquery and that's awesome.

    I did declare the variables as global but the status wasn't far enough at the top. Moving it up and changing it from var status; to var status = ''; seems to have worked perfectly! Thanks a lot.

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    this should do it:

    Code:
    var status;
    var points = 0;
    
    function win() {
    points+=5;
    status=' Win 5 points!';
    showScore();
    }
    
    function fail() {
    points-=3;
    status=' lose 3 points!';
    showScore();
    }
    
    function showScore() {
    if(points < 0) {points = 0;}
    $('score').html("Score: "+ points);
    $('status').html("Status: <b>" + status + "</b>");
    $('#status').fadeIn("slow", function(){
    $('#status').fadeOut("slow");
    })
    }

  • Users who have thanked DanInMa for this post:

    nuBee (12-09-2011)

  • #8
    New Coder
    Join Date
    May 2011
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    this should do it:

    Code:
    var status;
    var points = 0;
    
    function win() {
    points+=5;
    status=' Win 5 points!';
    showScore();
    }
    
    function fail() {
    points-=3;
    status=' lose 3 points!';
    showScore();
    }
    
    function showScore() {
    if(points < 0) {points = 0;}
    $('score').html("Score: "+ points);
    $('status').html("Status: <b>" + status + "</b>");
    $('#status').fadeIn("slow", function(){
    $('#status').fadeOut("slow");
    })
    }

    Actually thanks a lot for that example that cleans things up nicely I didn't even think of calling the fadeOut from the fadeIn even though I've used a callback elsewhere and knew it was possible. I was having trouble getting the .html() to work but pasting this in works perfectly, cheers!

    One thing that drives me nuts at the jquery documentation is every darn example they give (almost) uses .click() for the example to trigger things and almost always I want things to fire from something different from a .click() and it's sometimes not clear how to manipulate it. Definitely have a lot more reading to do but never ever saw a link to .html until you mentioned it.

  • #9
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    yeah, using a callback on the fade makes it alot smoother.

    take a look at this in regards to your other comment : http://api.jquery.com/category/events/


  •  

    Posting Permissions

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