jquery script strange issue

[dynamyc]

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?

[Mottie]

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.

[dfogge]

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.

[dynamyc]

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 .

[Mottie]

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

});​

[dynamyc]

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

[Mottie]

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.

[dynamyc]

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.

[Mottie]

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

});​

[Author]

Posts