jQuery won't run on development site, but works on online code editors. Can't find conflict

Question

I am having an issue with jQuery where I can get it to work on different testing environments, but not on my development site. I can't seem to find the conflict or what would be causing it.

How it should work: When you hover over the icons, it changes the visible div above. I have it working here: http://codepen.io/redbranchmedia/pen/dkiCB and here: http://jsfiddle.net/nXzFX/

HTML:

<div class="outercontainer">
<div class="slidecontainer slide1">
    <div class="innercontainer">
        <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
        <div class="prodpara"><h2>Talemetry</h2><p>is a cloud software solution that provides recruiters with all the tools they need to find, attract &amp; engage top talent. Talemetry works with your Applicant Tracking System and recruiting service providers to deliver a complete talent acquisition solution to support today’s recruiting challenges.</p>
        </div>
        <div class="ctabutton"> 
            <p class="ctatext">Put the Power of Talent Generation to Work At Your Work.</p>
            <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
            <h3 class="ctaaction">Let's Talk >></h3>
        </div>
    </div>
</div>
<div class="slidecontainer slide2 hiddenslide">
    <div class="innercontainer">
        <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
        <div class="prodpara"><h2>Source &amp; CRM</h2><p>Search across all sources of hire, find and rank candidates for immediate job openings, all while building talent networks for the future.</p>
        </div>
        <div class="ctabutton"> 
            <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
            <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
            <h3 class="ctaaction">Request a Demo >></h3>
        </div>
    </div>
</div>
<div class="slidecontainer slide3 hiddenslide">
    <div class="innercontainer">
        <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
        <div class="prodpara"><h2>Job Broadcast</h2><p>Post, manage, and compare the effectiveness of job postings across hundreds of job boards and social media sites all from one system.</p>
        </div>
        <div class="ctabutton"> 
            <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
            <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
            <h3 class="ctaaction">Request a Demo >></h3>
        </div>
    </div>
</div>
<div class="slidecontainer slide4 hiddenslide">
    <div class="innercontainer">
        <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
        <div class="prodpara"><h2>Career Sites</h2><p>Promote jobs and strengthen your employer brand by building career sites using a simple Content Management System.</p>
        </div>
        <div class="ctabutton"> 
            <p class="ctatext">Deliver your employer brand every- where with Talemetry Career Sites.</p>
            <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
            <h3 class="ctaaction">Request a Demo >></h3>
        </div>
    </div>
</div>
<div class="slidecontainer slide5 hiddenslide">
    <div class="innercontainer">
        <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
        <div class="prodpara"><h2>Apply</h2><p>Capture more of the best applicants by creating a simple, integrated, and social and mobile-ready application process.</p>
        </div>
        <div class="ctabutton"> 
            <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
            <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
            <h3 class="ctaaction">Request a Demo >></h3>
        </div>
    </div>
</div>

<div class="iconcontainer">
    <div class="icon icon1" data-slide="slide1">
        <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/talemetry_icon2.png">
        <p>Talemetry</p>
    </div>
    <div class="icon icon2" data-slide="slide2">
        <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/source_and_crm.png">
        <p>Source &amp; CRM</p>
    </div>
    <div class="icon icon3" data-slide="slide3">
        <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/job_broadcast.png">
        <p>Job Broadcast</p>
    </div>
    <div class="icon icon4" data-slide="slide4">
        <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/career_sites.png">
        <p>Career Sites</p>
    </div>
    <div class="icon icon5" data-slide="slide5">
        <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/apply.png">
        <p>Apply</p>
    </div>

</div>

CSS:

.outercontainer {
    width:100%;
}

.slidecontainer {
    width:100%;
    height:285px;
}

.slidecontainer.hiddenslide {
    display:none;
}

.slidecontainer.slide1 {
background-color:#b7be10;
}

.slidecontainer.slide2 {
background-color:#374bb5;
}

.slidecontainer.slide3 {
background-color:#ef123e;
}

.slidecontainer.slide4 {
background-color:#efae00;
}

.slidecontainer.slide5 {
background-color:#9d5bb6;
}

.slidecontainer .innercontainer {
    max-width:940px;
}

img.productimg {
    float:right;
}

.prodpara > H2 {
    font-size:30px;
    color:#fff;
}

.prodpara > p {
    font-size:18px;
    color:#fff;
}

.ctabutton p.ctatext {
    font-size:15px;
}

p.ctaline {
    font-size:;
}

h3.ctaaction {
    font-size:20px;
}

.iconcontainer {
    max-width:940px;
    width:100%;
    margin:0 auto;
}

.iconcontainer .icon {
    float:left;
    width:90px;
    text-align: center;
}

.iconcontainer .icon p {
    color:#585858;
    font-size: 14px;
}

JavaScript:

    <script type="text/javascript">
$('.iconcontainer .icon').on(
{
    mouseenter: function()
    {
        $('.outercontainer .slidecontainer').addClass('hiddenslide');
        var show_slide = $(this).attr('data-slide');
        $('.' + show_slide).removeClass('hiddenslide');
    }
});
</script>

I can't get it to work on my development site here (where I want it): http://talemetry.redbranchmedia.com/

I also set it up on a test page because I thought maybe the slider was interfering: http://talemetry.redbranchmedia.com/testing-page/

Unfortunately, it isn't working anywhere on the development site, but it is working on the JSFiddle and CodePen sites.

I've tried numerous things including: Calling different versions of jQuery from the Google Developer Libraries Calling in jQuery internally on the site Replacing the " $ " in my script with "jQuery" (the theme authors seem to have done this) and much, much more.

I'm at a loss for what's causing the conflict and preventing this from running. I appreciate any help.

I didn't have enough characters to insert my PHP code, so here are the links to those: Header PHP: http://pastebin.com/V5KVRiSf Body PHP: http://pastebin.com/UVtAmzmH Footer PHP: http://pastebin.com/uQp92bVN — jphogan, Aug 08 '13 at 18:46
Probably just aren't waiting till the element exists to run the code. Can't confirm without seeing errors (sorry, i won't follow that link) — Kevin B, Aug 08 '13 at 18:47

score 3 · Accepted Answer · answered Aug 08 '13 at 18:51

3

JSFiddle and CodePen both generally wait for the dom ready event to run your code.

If your code is working on these sites, I'd suggest wrapping your code in a $(document).ready() block, ie:


$(document).ready(function(){
  $('.iconcontainer .icon').on(
  {
    mouseenter: function()
    {
        $('.outercontainer .slidecontainer').addClass('hiddenslide');
        var show_slide = $(this).attr('data-slide');
        $('.' + show_slide).removeClass('hiddenslide');
    }
  });
});

answered Aug 08 '13 at 18:51

quoo

6,237
1
19
36

Thanks for taking the time to answer. Unfortunately, this didn't work. I also put tried it in the footer (where it is at this exact moment) and that didn't help either. I'd love to hear any other ideas. Thanks! – jphogan Aug 08 '13 at 19:09
I take that back. Your script is working. I had to change the first "$" to "jQuery" and add "$" in the parentheses after the function call per this post I found here: http://stackoverflow.com/questions/10807200/jquery-uncaught-typeerror-property-of-object-object-window-is-not-a-funct Thanks! – jphogan Aug 08 '13 at 19:21

score 2 · Answer 2 · answered Aug 08 '13 at 18:51

2

Try encasing in DOM ready handler

$(function () {
    $('.iconcontainer .icon').on({
        mouseenter: function () {
            $('.outercontainer .slidecontainer').addClass('hiddenslide');
            var show_slide = $(this).attr('data-slide');
            $('.' + show_slide).removeClass('hiddenslide');
        }
    });
});

Your script is declared before the body and the elements are not yet available in the DOM . So event is bound to an empty jQuery Object. Encasing your code inside DOM handler makes sure the elements are available in the DOM before any events are bound. If not you can move the script to just before the closing tag of body.

answered Aug 08 '13 at 18:51

Sushanth --

55,259
9
66
105

Thank you for your answer. Unfortunately, this didn't work. I tried it in the header and footer right before the closing body tag. (that's where it sits at this moment if you want to take a look). I tried both your script and the other, but with no luck. I'd love to hear any other ideas you might have. Thanks! – jphogan Aug 08 '13 at 19:10
Also check that your console was throwing some errors. Try fixing them first if you want the code to work. Also I don't see jQuery being included on the page. That should be the first library that should be included if you are using any of the jQuery plugins – Sushanth -- Aug 08 '13 at 19:11
Thanks so much for pointing that out. (I should've double-checked). I found this post after your last comment which showed me that I had a syntax error due to starting that script with "$" rather than jQuery http://stackoverflow.com/questions/10807200/jquery-uncaught-typeerror-property-of-object-object-window-is-not-a-funct – jphogan Aug 08 '13 at 19:19
@jphogan.. Glad to have helped :) – Sushanth -- Aug 08 '13 at 19:31

jQuery won't run on development site, but works on online code editors. Can't find conflict

2 Answers2