Get position of links in a menu using jQuery

1

I'm trying to get the position of links from a menu and I'm not getting

<nav class="menu">      
    <ul class="nav">
        <!-- <span><a href=""><img src="cds.jgp" alt="Logo Cetec"></a></span> -->
        <li><a href="#home">Home</a></li>
        <li><a href="#servicos">Serviços</a></li>
        <li><a href="#empresa">Empresa</a></li>
        <li><a href="#clientes">Clientes</a></li>
        <li><a href="#social">Social</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#comentarios">Comentários</a></li>         
    </ul>
</nav>

Using jQuery

$('a').click(function(){ return false; });
$('.nav li a').click(function(){
    //$('.nav li a').removeClass('active');
    //$(this).addClass('active');
    var getlink = $(this).attr("href");
    var getpos  = $(getlink).position().top;        
    console.log(getpos);
    return false;
});

Only this message appears in the console

  

"Uncaught TypeError: Can not read property 'top' of undefined"

    
asked by anonymous 28.05.2014 / 09:19

2 answers

1

Friend, you are passing the contents of the href attribute to the jQuery selector, so it can not find the element.

What's happening:

var getlink = $(this).attr("href");

The variable getlink has in it for example: link and when you perform:

var getpos  = $(getlink).position().top; 

jQuery receives:

var getpos  = $('http://www.example.com').position().top; 

For this reason it can not find any element to receive the called function.

Just change to:

var getpos  = $(this).position().top; 

Fixed:

$('a').click(function(){ return false; });
$('.nav li a').click(function(){
    //$('.nav li a').removeClass('active');
    //$(this).addClass('active');
    var getlink = $(this).attr("href");
    var getpos  = $(this).position().top;        
    console.log(getpos);
    return false;
});

JSFiddle Example : link

    
28.05.2014 / 14:39
0

In the codes I submitted there is no use of JQuery UI, but only JQuery.

Making a correction to the script

Original:

$('a').click(function(){ return false; });
$('.nav li a').click(function(){
    //$('.nav li a').removeClass('active');
    //$(this).addClass('active');
    var getlink = $(this).attr("href");
    var getpos  = $(getlink).position().top;        
    console.log(getpos);
    return false;
});

Suggested fix:

$(function() {
    $('.nav li a').click(function(){
        var getpos  = $(this).offset();
        console.log(getpos);
        return false;
    });
});

I removed the excerpt

$('a').click(function(){ return false; });

The reason is that return "false" is already set to $ ('. nav li a') When applying to $ ('a'), all objects, even off the menu, will return false for the click () event

Use event handler

For the case of the target object to be within another object whose dimensions are larger, in order to obtain more precision on which object was actually clicked, use the event handler. Example:

$(function() {
    $('.nav li a').click(function(e){
        var getpos  = $(e.target).offset();
        console.log(getpos);
        return false;
    });
});

Read the documentation: link

    
28.05.2014 / 14:19