Hi,
I’m practicing Javascript trying to do some animations but I ran into problems.
I tried to fade a div doing something like this…
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id="fade" style="opacity:1; background-color:gray;" >Fadeing</div>
<script type = "text/javascript">
setInterval(function(){
var fadeIt = document.getElementById('fade');
fadeIt.style.opacity -=.1;},100);
</script>
</BODY>
</HTML>
… and it works fine the problem was when I tried to resize a dive using the same concept doing something like this…
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id="resize" style="background-color:white; width:500px;">Resizing</div>
<script type = "text/javascript">
setInterval(function(){
var resizeIt = document.getElementById('resize');
resizeIt.style.width -=50;},100);
</script>
</BODY>
</HTML>
… but it didn’t work.
Can someone explain why this didn’t work?
Thanks
Try jQuery, it already has all functions you need to do that and it works with all browsers (including old IE that doesn’t support opacity, jQuery uses “filter” for it). Then your first code would be like this:
$(‘#resize’).fadeOut(1000);
and your second code would look like this:
$(‘#resize’).animate({width: 0}, 1000);
As for why your second code didn’t work: you didn’t assign units to it. Correct code would be this:
var resizeIt = document.getElementById(‘resize’);
resizeIt.style.width = (parseInt(resizeIt.style.width) - 50) + ‘px’;},100);
Try jQuery, it already has all functions you need to do that and it works with all browsers (including old IE that doesn’t support opacity, jQuery uses “filter” for it). Then your first code would be like this:
$(‘#resize’).fadeOut(1000);
and your second code would look like this:
$(‘#resize’).animate({width: 0}, 1000);
As for why your second code didn’t work: you didn’t assign units to it. Correct code would be this:
setInterval(function(){
var resizeIt = document.getElementById(‘resize’);
resizeIt.style.width = (parseInt(resizeIt.style.width) - 50) + ‘px’;},100);
First of all thank you very much for your help.
I will eventually use jQuery but not until I have a better understanding of Javascript.
Would you be so kind and help me understand this a little bit more?
(parseInt(resizeIt.style.width) - 50) + ‘px’;}
Thanks
resizeIt.style.width is a string, not a number, initial value for it is “500px”. parseInt() is a function that converts it to a number, so “500px” changes to 500. Then -50 changes it to 450. After that adding string to it converts 450 (number) to “450” (string) and appends “px” to it, so it becomes “450px”.
Thanks a lot for the good explanation!
One last thing to make sure I understood this correct.
So, the only reason why we didn’t have to do this to the opacity value is because it is already an integer number and what makes WIDTH different from opacity is that it needs to be specified as pixels in order for the browser to understand it, in other words the original value thrown be the browser was 500px and in order for the browser to make the change requested be Javascript it needed a pixel value in return, is this correct?
Now how does it know to subtract 50pixels every second in the previews example for the opacity we used “-=50 “which subtracts 50 every interval but in this case you used (parseInt(resizeIt.style.width) - 50) + ‘px’; which to me it subtracts 50 and final value should be 450, unless the browser remembers (keeps track of the remaining number)the last value and then it subtracts using the remaining value?
Sorry if I’m not understanding this part.
Thank you very much!
Opacity: that is correct.
Width: not entirely correct. Just because initial value was in pixels, doesn’t mean new value has to be in pixels too. You can set any value that browser understands, such as 20%, 20em or 20px. If you want to get width in pixels regardless of what units are used to set it, use jQuery’s width() method or if you want it without jQuery, use clientWidth property (for example, element.clientWidth). There are many different variables that show width differently, clientWidth is the one you’ll usually need.
Animation: it gets current element width using element.style.width. It works only because you’ve set initial value via inline css in pixels, if you would set it in percentages your code wouldn’t work and you’ll gave to use clientWidth to get it. That would be the proper way of getting width, usually you shouldn’t be using style.width, but it works perfectly for your code.
Thanks a lot for all of your help!