javascript tutorials?

David · 08-19-2013, 01:52 PM

I've recently been getting into building websites, I know enough about HTML and CSS, so I decided to follow some javascript tutorials. I've already completed the ones on w3schools. Now for some more advanced stuffz?

-David

mort96 · (This post was last modified: 08-19-2013, 03:47 PM by mort96.)

the way I've learned JS is to simply start playing around with the language. Try to make simple games. Try making more advanced games. Set yourself goals. Once you discover a pattern, try making an application (game?) using that pattern.

Of corse, Google is insanely handy.

David · 08-19-2013, 07:19 PM

(08-19-2013, 03:47 PM)mort96 Wrote: the way I've learned JS is to simply start playing around with the language. Try to make simple games. Try making more advanced games. Set yourself goals. Once you discover a pattern, try making an application (game?) using that pattern.

Of corse, Google is insanely handy.

ty

Billman555555 · 08-20-2013, 01:48 AM

I learned my JS off of W3Schools and stealing/borrowing; mort/googles code.
BEST WAY EVAH!!!

David · 08-20-2013, 09:14 AM

(08-20-2013, 01:48 AM)Billman555555 Wrote: I learned my JS off of W3Schools and stealing/borrowing; mort/googles code.
BEST WAY EVAH!!!

Ive completed the w3s tuts, and I dont feel very smart now.

I just gotta practice a lil.

mort96 · 08-20-2013, 09:43 AM

W3Schools may be useful, but before relying too much on them, make sure to read W3Fools.

David · 08-20-2013, 10:35 AM

OK now, I was messin' round with javascript, HTML and CSS and I created a fancy menu that appears if you mouse-over some text, and dissapears if you leave the div with your mouse, now there is one problem: If you hover over a link it also dissapears.

HTML and a part of the java-script (forum bug: cannot write it without the dash here.):

Code:
<!DOCTYPE HTML>

<html>

<head>

<title>Test</title>

<link rel="stylesheet" href="style.css" type="text/css">

<script src="javascript\fadeEffects.js"></script>

<script>    

    function fadeInMenu() {

        fadeIn('menu')

        document.getElementById('menu').style.visibility='visible';

    }

    function fadeOutMenu() {

        if(document.getElementById('menu').style.opacity == 1)

        {

            fadeOut('menu')

        }

    }

</script>

</head>

<body>

<div id="container">

    <div id="menu" onmouseout="fadeOutMenu()"> Menu </br></br> <a href="http://google.nl/">Google</a></div>

    <div id="header"> <h1>THIS IS THE HEADER</h1> </div>

    <div id="content"> <a onmouseOver="fadeInMenu()">Menu</a> </div>

</div>

</body>

</html>

The CSS (I doubt if you need it, but I'll post is anyway):

Code:
#header

{

    width:990px;

    height:200px;

    background:linear-gradient(45deg, rgb(0, 255, 255), rgb(0, 0, 255));

    color:rgb(175,255,255);

    padding-left:10px;

}

#content

{

    margin-top:50px;

    width:960px;

    height:500px;

    background-color:lightblue;

    padding:20px;

}

#menu

{

    width:100px;

    height:539px;

    position:absolute;

    border:1px solid rgb(100,255,255);

    background:linear-gradient(-135deg, lightblue, blue);

    margin-top:250px;

    visibility:hidden;

    float:left;

    text-align:center;

}

#container

{

    margin-left:auto;

    margin-right:auto;

    width:1050px;

}

a

{

    color:red;

}

h1

{

    font-size:90px;

    padding-top:50px;

}

This is the code for fading in and out, I did not write it though:

Code:
// fadeEffects.js written By AdamKhoury.com

/*

  USAGE IS SIMPLE: fadeIn(elementID); fadeOut(elementID);

*/

var fade_in_from = 0;

var fade_out_from = 10;

function fadeIn(element){

    var target = document.getElementById(element);

    target.style.display = "block";

    var newSetting = fade_in_from / 10;

    target.style.opacity = newSetting;

    // opacity ranges from 0 to 1

    fade_in_from++;

    if(fade_in_from == 10){

        target.style.opacity = 1;

        clearTimeout(loopTimer);

        fade_in_from = 0;

        return false;

    }

    var loopTimer = setTimeout('fadeIn(\''+element+'\')',50);

}

function fadeOut(element){

    var target = document.getElementById(element);

    var newSetting = fade_out_from / 10;

    target.style.opacity = newSetting;

    fade_out_from--;

    if(fade_out_from == 0){

        target.style.opacity = 0;

        target.style.display = "none";

        clearTimeout(loopTimer);

        fade_out_from = 10;

        return false;

    }

    var loopTimer = setTimeout('fadeOut(\''+element+'\')',50);

}

If anybody can help me, please do Big Grin

.

The ORE MyBB forums are being retired. Please use the new discussion board. View more information regarding the migration.