njomi_k
njomi_k

Reputation: 37

jQuery auto select div on page load

all. I have jQuery that slides div's horizontally on click on links. Problem is that on page load no link is clicked so no div is visible (only ul is visible). I would like to div with id "page1" be selected on page load. How to do that? I'm not posting any html, its few div's with id's page1 through page9, and ul with links referenced to div id.

jQuery:

jQuery(function($) {
    $('a.panel').click(function() { 
        var $page = $($(this).attr('href')), $other = $page.siblings('.active');
        if (!$page.hasClass('active')) { 
            $other.each(function(index, self) { 
                var $this = $(this);
                $this.removeClass('active').animate({ left: $this.width() }, 500);
            });
            $page.addClass('active').show().css({ left: -($page.width()) }).animate({ left: 0 }, 500);
        } 
     return false;
   });
});

Thanks

Upvotes: 1

Views: 1345

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337590

I'd suggest you find the first div in the page and display that. You've not shown your HTML so I can't give you the selector, but something like this should work:

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

Upvotes: 0

suppose you want to show 1st link in the a.panel that trigger a div to show

just use

$(docmuent).ready(function () {
    $('a.panel:nth(0)').click();
});

for 1st element use :nth(0)

for second :nth(1) as index starts from 0

Upvotes: 1

Related Questions