Closed Thread Icon

Topic awaiting preservation: Have no clue whats wrong with this code! Help! Pages that link to <a href="https://ozoneasylum.com/backlink?for=25056" title="Pages that link to Topic awaiting preservation: Have no clue whats wrong with this code! Help!" rel="nofollow" >Topic awaiting preservation: Have no clue whats wrong with this code! Help!\

 
Author Thread
ub3r_n00b
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2005

posted posted 02-19-2005 23:20

Hey guys, I have no clue whats going on with this code. I know that there is something wrong with the Resize() function because when I comment it out, window.onload works, but when i un-comment it, window.onload does not work. Not too sure whats going on here. I tried before just to have a function that had a setTimeout with a function that had an argument in it, but for some reason after the intial case, it would mess up. I am just trying to decrease the width of a Div over a short span of time.

This is my code, any help would be great thanks!

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Random</title>
<style type="text/css">

.xClose {
width:11px;
height:11px;
background-image:url('x.gif');
background-repeat:no-repeat;
background-position:top left;
margin-left:5px;
margin-top:5px;
cursor:hand;
}
#container {
width:100px;
height:600px;
background:#EBEBEB;
}
</style>
<script type="text/javascript">
function myLib() {
alert('word');
}

function Resize(){
var self = this;
this.o = document.createElement('DIV');
this.o.class = 'xClose';
el = document.getElementById('container');
el.appendChild(this.o);
this.changeIt = function(){
w = parseInt(this.o.parentNode.style.height);
if(w>16){
w = w-2;
this.o.parentNode.style.height = w + 'px';
}
}
}

function makeItSmaller() {
newX.changeHeight();
id = window.setTimeout('makeItSmaller()', 100);
}

function startIt() {
var newX = new Resize();
el = document.getElementById('container');
el.appendChild(newX);
makeItSmaller();
}

window.onload = myLib;

</script>
</head>
<body>
<div id="container"></div>
</body>
</html>





-Preet

shingebis
Nervous Wreck (II) Inmate

From: UK
Insane since: Aug 2004

posted posted 02-20-2005 13:18
code:
this.o.class = 'xClose';



This should be className rather than class; they chose that name in the DOM spec so that it wouldn't collide with the 'class' keyword in languages such as Java.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 02-20-2005 13:48

ub3r_n00b: Hello and welcome in the Asylum.

To set the class you could also do :

code:
this.o.setAttribute( 'class', 'xClose' );


I haven't tried the code in a browser, but it's likely that the line

code:
w = parseInt(this.o.parentNode.style.height);

might be replaced by

code:
w = parseInt(this.o.parentNode.offsetHeight);


Isn't there also a problem since in the startIt( ) function you instanciante a new Resize() object and append it to the container, and in the "constructor" of the Resize object you already append a DIV to the container. I think you shouldn't append newX to the container. Oh and the makeItSmaller( ) function suggest that you should put the newX in the global scope by putting a :

code:
var newX;

outside of all function.

Also in the "constructor" of the Resize object, you declare a method called changeIt( ), but try to use the method changeHeight( ) in makeItSmaller( ).

All in all, I think you should really double read your scripts and the messages of error of the browsers.

Hope that helps.

shingebis: doh! I never searched to know the reason of the className attribute name. Thanks.



(Edited by poi on 02-20-2005 14:49)

ub3r_n00b
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2005

posted posted 02-21-2005 04:47

Thanks! Totally hate stupid mistakes that I am oblivious to when I double check my code :P. You guys are the best.

-Preet

BillyRayPreachersSon
Bipolar (III) Inmate

From: London
Insane since: Jul 2004

posted posted 02-21-2005 12:10

Don't forget the second ",10" parameter when using parseInt:

code:
w = parseInt(this.o.parentNode.offsetHeight, 10);



You might get unexpected results otherwise (parseInt defaults to using octal for some values, unless you explicitly specify base 10).

Dan

(Edited by BillyRayPreachersSon on 02-21-2005 12:14)

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 02-21-2005 12:58

We already mentionned that detail in another thread, but let's remind that the parseInt( ) function converts a string into a number. The resulting number is in octal if the numeral value contained in the string begins with a 0 ... which indicates a number is in octal. But there's no way to meet this situation with the very script above.

« BackwardsOnwards »

Show Forum Drop Down Menu