Doctype killing JS in IE

nuBee

12-09-2011, 07:06 AM

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:
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:
<!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
} );
}
}

_Aerospace_Eng_

12-09-2011, 07:29 AM

nuBee

12-09-2011, 07:50 AM

Looks like it was a bug with jQuery 1.5 and IE9.

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

The IE9 error console says this

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

nuBee

12-09-2011, 03:55 PM

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.

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??

DanInMa

12-09-2011, 04:27 PM

nuBee

12-09-2011, 04:38 PM

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

$(#'score').html(points)

instead of

document.getElementById('score').innerHTML = "Score: "+ points;

, if you like.

you can declare them by doing this before your functions

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.

DanInMa

12-09-2011, 04:41 PM

nuBee

12-09-2011, 05:01 PM

this should do it:

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.

DanInMa

12-09-2011, 05:31 PM

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/