Grow your CSS skills. Land your dream job.

jquery script strange issue

  • # June 24, 2012 at 3:09 pm

    First of all, this is the jsfiddle

    Everything works fine on jsfiddle, but when I try to add it on my website I get this:
    SyntaxError: Unexpected token ILLEGAL
    Why is this happpening?

    # June 24, 2012 at 4:57 pm

    For some odd reason, when you copy code from jsFiddle – this is just recently – it adds an invisible character to the end of the copied string. When I paste it into my editor, sometimes it shows up as a “?” and other times it is completely invisible. When I switch my editor to hex mode, I see it adds the following: E2 80 8B which is the unicode character for a zero-width space (ref). I don’t know why it gets added to the end, but it does.

    The easiest fix is to go to the end of your code and hit backspace until the last semi-colon disappears, you should notice that you press the backspace one time in there without the cursor moving.

    Edit: The problem has been reported, but won’t be fixed until they move into jsFiddle beta.

    # June 24, 2012 at 5:35 pm

    mottie is correct, and this bug has been occurring for quite awhile now. jsfiddle inserts a hidden character (​) to the end of its js pane.

    to be safe ive been deleting and retyping the last line of any jsfiddle code i want to paste.

    # June 26, 2012 at 5:49 pm

    Thanks , it works.
    Also now I have a new challenge, it sounds like this :
    How can I , for example when a user click on a link the menu fades out like it is now when you close it ( click on x button) ? of course without affecting the link target, functionality .

    # June 27, 2012 at 1:44 am

    First off, don’t bind a click function inside of another click function. It just keeps adding more and more events the more you click on it.

    I think the easiest solution would be to bind to all of the links inside the header and close (fadeOut) the header after the click. In this example, only the link with the class close would get a return false, preventing a window location change. All other links would execute. Here is an updated demo, and the code:

    $("#header").hide();

    $("#header").find("a").on("click", function() {
    $(this).parents("#header").fadeOut("slow");
    return $(this).hasClass('close') ? false : true;
    });

    $("a#toggle").click(function() {
    $("#header").fadeToggle("slow", "linear");
    });​
    # July 1, 2012 at 3:08 pm

    Have another question! :)
    How can I , instead of finding a#toggle to append it on header div and then after it’s clicked to dissapear ?
    Thanks

    # July 1, 2012 at 3:17 pm

    I’m confused… the a#toggle is the search link that you click to open the header. So, putting it inside of the header would make it impossible to open the header.

    # July 1, 2012 at 4:09 pm

    Ah yes, sorry.
    What I want is to append the

     Click me! 

    on the body with jquery because I don’t have acces to html markup.
    So, when a user clicks on “Click me!” to show the header div.

    # July 1, 2012 at 7:47 pm

    Try this demo:

    $("#header").hide();
    $('body').prepend('Search');

    $("#header").find("a").on("click", function() {
    $(this).parents("#header").fadeOut("slow");
    return $(this).hasClass('close') ? false : true;
    });

    $("a#toggle").click(function() {
    $("#header").fadeToggle("slow", "linear");
    });​
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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