jquerycsssliderdisplayobject

jQuery - I need home page of slider to display when page originally loaded. Current code provided


Essentially, I want my website to have the same functionality as: http://jsfiddle.net/sg3s/rs2QK/ ; except, I want Target 1 (which will by my home page) to already be showing when you load the page the first time. At the moment my heading bar shows, but there is no content until I press one of the links. Accordingly, how do I edit the following code so that the home page shows when you first load the page?

(Also, how do I make it so you can only activate one link at a time i.e. not allow one animation to activate whilst another is activated).

CSS:

body, html {
height: 100%;
margin:0 auto;
width:100%;
background-color: #f1f1f1;
}

#wrapper {
    width:960px;
    height: 630px;
    margin:0 auto;
    font-family: Arial;
    color: #555;
    background-color: white;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    }

div.forMovingPanel {
    position: absolute;
    height: 100%;
    width: 100%;
    display:none;
    }

HTML:

<div id="wrapper">

    <div id="headingLogoBar">
           <ul>
                <li id="menuDisplayedHome"><a href="#target1" class="forMovingPanel">HOME</li>
                <li id="menuDisplayedAbout"><a href="#target2" class="forMovingPanel">ABOUT</a></li>        
                <li id="menuDisplayedPortfolio"><a href="#target3" class="forMovingPanel">PORTFOLIO</a></li>    
                <li id="menuDisplayedContact"><a href="#target4" class="forMovingPanel">CONTACT</a></li>
            </ul>
    </div>

    <div class="forMovingPanel" id="target1"></div>
    <div class="forMovingPanel" id="target2"></div>
    <div class="forMovingPanel" id="target3"></div>
    <div class="forMovingPanel" id="target4"></div>

</div>

jQuery:

<script>


    jQuery(function($) {

$('a.forMovingPanel').click(function() {
var $target = $($(this).attr('href')),
    $other = $target.siblings('.active');

if (!$target.hasClass('active')) {
    $other.each(function(index, self) {
        var $this = $(this);
        $this.removeClass('active').animate({
            left: $this.width()
        }, 500);
    });

    $target.addClass('active').show().css({
        left: -($target.width())
    }).animate({
        left: 0
    }, 500);
}
});

});

</script>

Solution

  • To only show one animation at a time:

    if ($(".panel").is(':animated')) return false;
    

    To show #target1 on load:

    <div class="panel active" id="target1" style="background:green;left:0;display:block;">Target 1</div>
    

    http://jsfiddle.net/rs2QK/3624/