Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #34346
    tareq
    Member

    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 …

    #112347
    Robbiegod
    Member

    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.

    #112380
    neerukool
    Participant

    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.

    #112702
    philipsacht
    Member

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

    #112761
    neerukool
    Participant

    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.

    #112797
    philipsacht
    Member

    @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

    #115596
    philipsacht
    Member

    hey @neerukool

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

    big hug Phil.

    #115629
    neerukool
    Participant

    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.

    #115745
    philipsacht
    Member

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

    ***its all browsers***


    @neerukool

    #115761
    philipsacht
    Member

    @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)
  • The forum ‘JavaScript’ is closed to new topics and replies.