CODEWITHSUNDEEP
javascriptjquerycsshtml
squids
squids

Reputation: 37

Fade in, Fade out Divs

I'm trying to build a webpage that is essentially one page, but with four 'hidden' divs that will fade in and out of visibility when you click on menu buttons along the bottom.

I would like to put a 'close' button at the top of each of these divs so you can 'close' that div - but it would be great if the div still faded out on its own when a new menu item is clicked. So far I've created the div boxes and the links using css and html, but I'm an absolute newbie when it comes to javascript. Here's the code I have so far

HTML: 

<div class="menu">
    <a class="portfolio" href="http://www.google.com"> Portfolio </a> | <a  class="aboutme" href="http://www.google.com"> About Me </a> | <a class="education" href="http://www.google.com"> Education</a> | <a class="contact" href="http://www.google.com"> Contact</a>
</div>
<div>`

(NOTE: I only put google as the link target because I didn't know what else to put).

CSS:

.aboutmewindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.portfoliowindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.educationwindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.contactwindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}`

I've tried writing a little bit of the javascript on my own, but it's seriously out of my depth at this point. I'm going to keep going through tutorials though, so hopefully I'll get the hang of it.

Anyone have any suggestions? Or good tutorials?

Thanks!

Upvotes: 0

Views: 3944

Answers (3)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

you can try this its a simple example but without all your markup and code you can get the idea .. requires jQuery

http://jsfiddle.net/YnzRV/9/

$(function(){

    $("#main > .box").not(":first").hide();

    $(".menu").on("click", "a", function(){

        var $this = $(this),
            dataBox = $this.data("box");

        $("#main > .box").hide();
        $("."+dataBox).fadeIn(400);

        return false;
    });

});

if you check the jsfiddle you will see how i added data attributes that get passed through the click handler to tell it which div to show using the data attributes

Upvotes: 1

Graham Swan
Graham Swan

Reputation: 4828

This is a slightly outdated (August, 2012) tutorial showing you the HTML, CSS, and JavaScript required to fade elements in, fade them out, and fade them to a specific opacity.

http://www.mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/

You're essentially trying to learn about the following:

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

You can use fadeIn() or fadeOut().

Use it like this: 

$('selector').fadeIn(); // you can use time in ms, inside ()

Similarly, you can use fadeOut too. But keep in mind, that you have the latest version of jQuery linked to your web page.

Links:

http://jquery.com

Upvotes: 0

Related Questions