magic line doesn’t stop when click on the link , coz the page refresh after clicking

[tareq]

i want to make this magic line stop after clicking on the link, but it doesn’t , the page refresh when i click the link , if i put (href=”#”) , it works , but it dont work on the real link , here is my code

$(document).ready(function() {



var $el, leftPos,newWidth,$mainNav = $("#example-one");

$mainNav.append("
");

var $magicLine = $("#magic-line");

$magicLine

.width($(".current_page_item").width())

.css("left", $(".current_page_item a").position().left)

.data("origLeft", $magicLine.position().left)

.data("origWidth", $magicLine.width());

$("#example-one li a").hover(function(){

$el = $(this);

leftPos = $el.position().left;

newWidth = $el.parent().width();

$magicLine.stop().animate({

left: leftPos,

width: newWidth

});}, function() {

$magicLine.stop().animate({

left: $magicLine.data("origLeft"),

width: $magicLine.data("origWidth")

});

});



$("#example-one li a").click(function() {

$(this)

.parent().siblings()

.removeClass("current_page_item");

$(this)

.parent()

.addClass("current_page_item");

$magicLine

.width($(".current_page_item").width())

.css("left", $(".current_page_item a")

.position().left)

.data("origLeft", $magicLine.position().left)

.data("origWidth", $magicLine.width());

});



});

Can anyone help me please …

[Robbiegod]

hmm, did you try adding javascript: return false; to the links in the menu? This might be the fix you need…I’m going to try it too since i am struggling with the same thing.

[neerukool]

All you need to do is this:
$(selector).click(function(event){
// your code
event.preventDefault();
});

This will prevent anchor tag from performing it’s default task.

[philipsacht]

dear neerukool i have been trying to implement this code of yours in my MagicLine code.

im testing it @ Codepen.io on the following link [_”MAGICLINE LINK TEST”_](http://codepen.io/philipsacht/pen/pDHLw)

i cant get it to work, i was thinking maybe you could check my pen?

(i have posted a clean link without your code implemented)

looking forward to your response :)

[neerukool]

Hi @tareq,

since the pure effect of page jump wont be seen in codepen, test if the following code modification helps:
change code of this line —-> $(“#menu li a”).click(function(event){

after .data(“origWidth”, $magicLine.width()); put the following line:
—-> event.preventDefault();

try implementing in an actual environment and send test link if possible. we wont be able to check it properly in codepen.

Thanks.

[philipsacht]

@neerukool

i implemented it in a real environment on the following website:

[Reklameblade.dk](http://www.reklameblade.dk/ “Reklameblade.dk”)

the site uses joomla cms, eventhough i work in dreamweaver alone. if it makes any difference
—-

i’ve added/changed the code in the sections as written, but now the menues don’t link only the button stays at the category clicked on… hmm

[philipsacht]

hey @neerukool

im still in big trouble with this issue. do you maybe have short time in the near future?

big hug Phil.

[neerukool]

Hey @philipsacht,

sorry i was offline for couple of weeks..

Can you remove the event code from the web-page
(remove word ‘event’ from line 174 & remove line 182 – event.preventDefault() – altogether.)

will quickly try to action this asap. also let me know if the issue is in a specific browser or all browsers.

thanks.

[philipsacht]

absolutely NO problem. im just so glad you are responding now. i will try and make the changes right now!

***its all browsers***

@neerukool

[philipsacht]

@neerukool

i’ve made the changes and now we’re back to standard without the magicline script staying on active menu and therfore not indicating which navigation-point you are in…. hmm. im sure its an obvious “mistake” or easy fix when we find the problem.

what else can i do atm?

[Author]

Posts