The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

  • # September 14, 2011 at 9:24 am

    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");
  • ");
    var $magicLine = $("#magic-line");
    .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();
    left: leftPos,
    width: newWidth
    });}, function() {
    left: $"origLeft"),
    width: $"origWidth")

    $("#example-one li a").click(function() {
    .css("left", $(".current_page_item a")
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());


    Can anyone help me please …

    # October 21, 2012 at 4:27 pm

    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.

    # October 22, 2012 at 1:04 am

    All you need to do is this:
    // your code

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

    # October 26, 2012 at 10:49 am

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

    im testing it @ 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 :)

    # October 27, 2012 at 12:39 pm

    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.


    # October 27, 2012 at 11:31 pm


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

    []( “”)

    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

    # November 27, 2012 at 8:06 am

    hey @neerukool

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

    big hug Phil.

    # November 27, 2012 at 12:16 pm

    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.


    # November 28, 2012 at 7:42 am

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

    ***its all browsers***


    # November 28, 2012 at 8:56 am


    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?

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed