JavaScript from Null: Chapter 4

hi Jeff

What happen to the function fadeOut when the opacity comes to zero. Does it loop endlessly?

thank you for your time and effort… it is greatly appreciated.

kudos, thanks and happy new year.

Ya.. great series.. looking forward for more :)

http://smashingwebs.com/

can wait for the next one, thanks!

Jeff, you’re doing well and I can see it might be necessary to do some calculations with JS, but mostly a webdesigner needs things like finding elements in the DOM and doing something with it.

I’d like to know the basic syntax of (1) getting the objects and (2) telling JS what to do with it.

Great tut Jeff, but one thing I was curious about.

Wouldn’t it be better( user friendly ) if you do this.

function fadeOut( elemId, time ){
var elem = document.getElementById( elemId );

setInterval( function(){
elem.style.opacity -= .02;
}, speed / 50 );

}

instead of doing getElementById every time you want to fadeOut a new element.

Really loving this series, great work!

Hi Jeff,

Thank you again for this great series, really learning a lot. I was wondering if/are you going to get into asset preloading…this is something that I’d love your input on.

Cheers.

Thank you once again Jeff, I am learning more about Javascript with your videos than with any other online tutorial, which either moves too slow or too fast at some point. I truly appreciate your efforts, and your decision to provide them free of charge. I really hope you’ll keep doing these, at your own pace of course, until we’ve all created a super framework of our own ;)

If I ever build a js framework, I’ll call it jWay out of respect! (Hey it actually sounds quite cool, doesn’t it?)

Keep doing them, I’ll keep wathcing them. That’s a promise.
My regards!

These were great to follow !!
Will there be a 5th part ? ^_^

thanks for this great series.. And hope to get more such posts..

Hay Jeff awesome Tutorials I am learning a lot. I was wondering if you are going to get into JSON and AJAX in this series?

Thanx Jeff for this excellent tutorial, no one could have done it in a better way then you did!

I have 2 things that I couldn’t figure out yet:

1- I tried to stop the function from continuing with decreasing the value of the opacity by using :

################################
while(elem.style.opacity !== 0) {
setInterval(function() {
elem.style.opacity -= 0.05;
}, speed);
}
################################

But the browser keeps crashing (Chrome and FF)!

2- I tried to do the opposite thing which is fading in an element using the same technique:

################################
var box = document.getElementById(“box”);

function fadeIn(elem, speed) {
if( !elem.style.opacity ) {
elem.style.opacity = 0;
}
setInterval(function() {
elem.style.opacity += 0.5;
}, speed);
}

fadeIn(box, 30);
################################

But nothing happened! I tried the console to log what’s happening and it logged the value of the opacity… the strange thing that the value didn’t increase by “0.5″ every 30 ms, instead it was keeping the “0.5″ value without changing!

I hope you understand the problems, I tried to explain them in the best way I can (taking that English is not my first language ^^)!

Hey Jeff. Have a Question.

When I write

var myArr = ['one', 'two', 'three', 'four'];
console.log(myArr);

myArr.push(‘five’);
console.log(myArr);

Ideally I expect the output to be

["one", "two", "three", "four"]
["one", "two", "three", "four", "five"]

But instead, it gives me

["one", "two", "three", "four", "five"]
["one", "two", "three", "four", "five"]

How does the value of the 1st console.log(myArr) also has the element “five”?

Looking forward to the answer. Thanks.

Hey Jeff, great tutorial, helped me learn a lot.

Why not put the getElementById bit in the function itself? Saved me time.

Hi,
Thank you for this great tutorial jeffrey its easy to learn from your tutorials.
I have completed chapter 3 and now i am working on chapter 4 but i am a bit confused on the Reducing your “global footprint” by creating an object part.

This is what you have shown in screen cast

var myObj = {
var1 : ‘something’,
var2 : ‘somethingelse’,
another : function(){
alert(‘Hello! world’);
}
};
alert(myObj.another());

But when i save it open it in firefox it shows me 2 alert box first is Hello! world an second is undefined.I made a change to this code

var myObj = {
var1 : ‘something’,
var2 : ‘somethingelse’,
another : function(){
alert(‘Hello! world’);
}
};
myObj.another();

This shows only one alert box but how is this possible? Your screen cast video shows only one alert box for the first code.
Awaiting for your reply

Thank You.

Great tutorial!

I have some problem when im trying to implement this into a eventListener. Im already spawning the element on a eventListener. But I wanna add another function where I can fade the element in.

var hiddenElement = document.getElementById(‘hiddenElement’);

hiddenElement.addEventListener(‘click’, fadeIn, false);

function fadeIn() {
setInterval(function() {
hiddenElement.style.opacity += .08;
}, 1000 );
}

Any help would be appreciated :)