Conflict with the jQuery script not executing on live site

Question

The problem could be because of .on() or another script conflicting. I have zero idea.

WORKING: Heres the script on jsFiddles http://jsfiddle.net/ZtpEU/70/
NOT-WORKING: Here's the live code: http://designobvio.us/test/middle.php

Both of these are the same code; however, on the live site the jquery script at the bottom of the page won't execute. Does anyone know where the conflict is being created? For i copied the script verbatim from fiddles after i created it.

HTML

<ul id="videos">
    <li><a href="#">shit swag people say</a></li>
    <li><a href="#">imdabest</a></li>
    <li><a href="#">jersey shore audition</a></li>
    <li><a href="#">rifle burs</a></li>
    <li><a href="#">mvc3: best combos dat ass</a></li>
    <li><a href="#">snacks</a></li>
</ul>

CSS

ul#videos > li > a
{
    opacity: .5;
    color: #222;
    text-decoration: none;
}

ul#videos:hover > li > a
{
    opacity: .3;
    text-shadow: 0px 0px 6px #bbb;
    color: #bbb;
} 

ul#videos > li:hover > a
{
    opacity: 1;
    text-shadow: none;
    color: #222;
}

Script

$("ul#videos li a").on('mouseenter', function() {
    $(this).animate({"padding-left": "50px"}, "normal");
});

$("ul#videos li a").on('mouseleave', function() {
    $(this).stop(true).animate({"padding-left": "0px"}, "slow");
});

When you alert `$`=> `alert($)` and `jQuery` => `alert(jQuery)` what do you get? — gdoron, May 13 '12 at 01:28
I can't find your jFiddle code in the live page (used ctrl+f "onMouse") o.O instead I found the flexslider in script.js looking somewhat suspicious.. — nuala, May 13 '12 at 01:28
If it doesn't execute then it means it a) doesn't get called when the page loads or b) it gets cancelled somewhere else. — frenchie, May 13 '12 at 01:29
I believe this line `` spoilts everything. Try to remove it. — VisioN, May 13 '12 at 01:29
@yoshi the jsfiddles was written seperatly in the link above the live code — Armeen Moon, May 13 '12 at 01:30
@VisioN I don't understand how does it spoils everything? i mean the rest of the jquery works? — Armeen Moon, May 13 '12 at 01:31
Are you wrapping your javascript into `$(function() { /* your code */ });`? I believe fiddler does something similar (i.e. waits for DOM ready) automatically. — Chopin, May 13 '12 at 01:31
@gdoron i'm so sorry I'm so novice to jquery I have no idea how to do that ughh.. sorry — Armeen Moon, May 13 '12 at 01:32
I'd just remove this over-optimization line; just load jquery and be done with it. If you're worried about load performance, just load it from google's CDN. — frenchie, May 13 '12 at 01:32
@MatthewHarwood The problem is that you have `SyntaxError: Unexpected token ILLEGAL`. And the code above may cause it. — VisioN, May 13 '12 at 01:32
possible duplicate of [Unexpected token ILLEGAL in webkit](http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit) — James Montagne, May 13 '12 at 01:38
@MatthewHarwood: well leave the new line to load your jquery, it'll avoid you from having other problems later. The document.write line prevents the browser from fully optimizing the javascript when the page loads. — frenchie, May 13 '12 at 01:39
what a weird bug. thanks everyone for your support Updating question with formal answer to why — Armeen Moon, May 13 '12 at 01:53
Did you try with the combined .on() function ? I added the fiddle example so that you can use it later. I also simplified the $selector; should be a little faster than the other implementation. Good luck — frenchie, May 13 '12 at 02:07

score 2 · Accepted Answer · answered May 13 '12 at 01:36

2

It looks like you have a non-printable character on line 59 of your live version. it is right after the semicolon but before the line-break. Copy/paste your JS into jsbeautifier or something to sanitize it. That fixed it for me:

$(document).ready(function () {
    alert('hello');
    $("ul#videos li a").on('mouseenter', function () {
        $(this).animate({
            "padding-left": "50px"
        }, "normal");
    });
    $("ul#videos li a").on('mouseleave', function () {
        $(this).stop(true).animate({
            "padding-left": "0px"
        }, "slow");
    });
});

answered May 13 '12 at 01:36

Jeff

846
8
13

Hey Jeff I accually noticed this only when I compiled it inside my script.js I didnt know what it was so i put it in the footer of the page. I still think that it's not working correctly updating code in 2 mins – Armeen Moon May 13 '12 at 01:40
I see its updated but you left off the http:// on jQuery so it is 404 now causing several errors of course. BTW, tested the above before I posted so I am about 99% sure it was just the syntax error due to bad character. Probably jsfiddle sanitizes it. I go back and forth between my Mac and Win 7 virtual machine for development and run into this funky character issue whenever I copy/paste between the two. – Jeff May 13 '12 at 01:49
@Jeff nice catch. I stared at this code for 5 minutes trying to figure out where the syntax error was, and gave up. – McGarnagle May 13 '12 at 21:33
@dbaseman thanks, I saw the error in the console log but couldn't find the issue until I took it into Notepad++ with all characters visible. – Jeff May 13 '12 at 21:37

score 2 · Answer 2 · answered May 13 '12 at 01:38

2

There is a strange whitespace character after your second to last

});

try deleting that line and recreating.

You should use something like jslint to catch stuff like this.

answered May 13 '12 at 01:38

Steve Ross

1,228
10
21

frenchie · Answer 3 · 2012-05-13T01:54:24.067

0

Just realized that your .on() function should be rewritten like this:

$("#videos li").on({

    mouseenter: function() {
         $(this).animate({"padding-left": "50px"}, "normal");
    },

    mouseleave: function() {
         $(this).stop(true).animate({"padding-left": "0px"}, "slow");

}}, 'a');

That way, there's only one handler for your markup and if you want to add other events later, you simply add them to the list.

Here's the jsfiddle for it

edited May 13 '12 at 01:54

answered May 13 '12 at 01:42

frenchie

51,731
109
304
510

Getting a compilation error with this. I'm pretty sure it's symantics. Whats that 'a' mean? – Armeen Moon May 13 '12 at 01:47
The 'a' means that you want these events (mouseenter/mouseleave) to apply to all the tags inside the $("ul#videos li") selector. Much better to have one .on() for all the events you need than to have all sorts of .on() functions for the same html. – frenchie May 13 '12 at 01:49
@frenchie, with respect, your answer is the proper--or at least more efficient way to perform this action but the issue was not in the jQuery event binding at all but invalid syntax due to an illegal character. Your answer does not address this, it only eliminates an additional call to jQuery. I did not choose to restructure his JS as that only distracts from the problem. If anything, Steve's answer is more terse and still answers the question, I just happened to post it a few minutes before he did. – Jeff May 13 '12 at 02:55

Conflict with the jQuery script not executing on live site

3 Answers3