Forums

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("<li id='magic-line'></li>");
  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"

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

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?

treehouse : what would you like to learn today?

Forums

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

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