CODEWITHSUNDEEP
jqueryjquery-selectors
ChrisWAO
ChrisWAO

Reputation: 3

jQuery Click on next element

I have a problem with programming jQuery and I hope that you can help me even if a speak english like an alien %).

I'm doing a site with horizontal scrolling, you can see it here http://www.kinetics.ru/index_kin.html I have a menu at the left and two buttons PREV and NEXT at the bottom. Menu is working correctly, but I need to let the bottom buttons work. By clicking for example on NEXT I need that code made a click on next menu btn after the one that have style 'on'.

The code is:

<div class="menu">
        <ul class="nav">
           <li id="main"><a href="#about"><img src="img/menu/about.png" /></a></li>
           <li><a href="#uslugi"><img src="img/menu/uslugi.png"/></a></li>
           <li><a href="#portfolio"><img src="img/menu/portfolio.png"/></a></li>
           <li><a href="#clients"><img src="img/menu/clients.png"/></a></li>
           <li><a href="#contacts"><img src="img/menu/contacts.png"/></a></li>
        </ul>
    </div>
...
<div class="bottomNav" style="position: absolute; z-index: 11">
<div style="height: 26px; width:98px; margin:-75px 0 0 500px; position: fixed" class="back"><img src="img/back.png"</div>
<div style="height: 26px; width:114px; margin:-25px 0 0 600px; position: fixed" id="next"><img src="img/forward.png"</div>

And my not working jQuery code for next btn:

$('bottomNav, #next img').click(function(){
    if ($('ul.nav').find('img').hasClass('on')){
        $('ul.nav').next().click();
    }
});

Also I've tried to do like this:

    $('bottomNav, #next img').click(function(){
    $('ul.nav img').click(function(){
        if ($(this).hasClass('on')){
            $(this).next().click();}
    });
});

P.S. Sorry for my noobish question. I just got a task at work to make a site and nobody cares that a designer is NOT the same as web-designer. I have no possibility to learn first, I have to learn and do at same time.

Upvotes: 0

Views: 10230

Answers (2)

ChrisWAO
ChrisWAO

Reputation: 3

Solved! Thank you again! Your code was really helpfull. I have modified it a little bit for my needs and also changed in line

var $activeLi = $activeImg.closest('li');

closest('li') to parents('li'), cause it wasn't working like that.

So now code looks like this:

$('#prev').click(function () {
    var $prevLi = getActiveLi().prev();
    if ($prevLi.length > 0){$prevLi.find('img').click();}
});

$('#next').click(function () {
    var $nextLi = getActiveLi().next();
    if ($nextLi.length > 0){$nextLi.find('img').click();}
});

function getActiveLi() {
var $activeImg = $('.menu .nav img.on');
var $activeLi = $activeImg.parents('li');
return $activeLi;
};

Also i guess, that i have understood why firebug was showing so big disaster in code... i have forgot to close the tag :)))

Anyway...MANY THANKS TO YOU!

P.S. third day reading a giant book about jQuery :)

Upvotes: 0

iappwebdev
iappwebdev

Reputation: 5910

You have to review jQuery selectors and as well your HTML code, it's terribly wrong. Firebug says:

enter image description here

I modified your code in proper way:

<div class="bottomNav" style="position: absolute; z-index: 11">
    <div id="prev" style="height: 26px; width:98px; margin:-75px 0 0 500px; position: fixed">
        <img src="img/back.png" />
    </div>
    <div id="next" style="height: 26px; width:114px; margin:-25px 0 0 600px; position: fixed" >
        <img src="img/forward.png" />
    </div>
</div>

JavaScript (It's pretty simple and I didn't test it, but it should give you an idea).

$('#prev').click(function () {
    var $activeLi = getActiveLi();
    var $prevLi = $parentLi.prev();

    if ($prevLi.length > 0) {
        $prevLi.find('a').click();
    }
});

$('#next').click(function () {
    var $activeLi = getActiveLi();
    var $nextLi = $parentLi.next();

    if ($nextLi.length > 0) {
        $nextLi.find('a').click();
    }
}); 

function getActiveLi() {
    var $activeImg = $('.menu .nav img.on');
    var $activeLi = $activeImg.closest('li');

    return $activeLi;
};

But beeing seriously: before continuing developing your web site you seriously should put some effort in learnin hot to use jQuery and how to structure HTML...

Upvotes: 1

Related Questions