Grow your CSS skills. Land your dream job.

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");
    $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 …

    # 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:
    $(selector).click(function(event){
    // your code
    event.preventDefault();
    });

    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 @ 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 :)

    # 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.

    Thanks.

    # October 27, 2012 at 11:31 pm

    @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

    # 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.

    thanks.

    # 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***

    @neerukool

    # November 28, 2012 at 8:56 am

    @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?

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".