Executing javascript in wordpress

Question

I am trying to execute a single JavaScript function on my wordpress site. The idea is to cause a image to appear in the viewport div when someone mouses over a link (nav .home a). I cannot get this to work for the life of me.

Here is the HTML: I placed this in my header head between stylesheet and meta tags

<script type="text/javascript" src="/scriptfile.js"></script>

Then I ran the script in the viewport div:

<div class="viewport">
<script type="text/javascript">
<!--
preview();
//--></script>
</div>

here is the file (scriptfile.js):

function preview()
{
  var hoverhome = 'url("images/Screen2.png") no-repeat';
  var empty = '';

  $(document).ready(function()
  {

//home
$('nav .home a').mouseover(function(){
      $('.viewport').css('background-image', 'url(' + hoverhome + ')');
});
$('nav .home a').onmouseout(function(){
  $('.viewport').css('background-image', 'url(' + empty + ')');
}); 
  }
}

your $(document).ready(function(){...}); should be outside the preview function — Devin Crossman
– Devin Crossman, Commented May 30, 2013 at 18:37
You don't need JavaScript to change the background image of your div. Use pure CSS for this instead. See :hover w3schools.com/cssref/sel_hover.asp — Justin
– Justin, Commented May 30, 2013 at 18:52
I thought of that at first, but I am changing the css of a different element on hover. Would I structure this by placing the two elements in the same class? — Chris
– Chris, Commented May 30, 2013 at 19:17

Noël Widmer · Accepted Answer · 2013-05-30 18:40:00Z

1

Primary issue: It looks like as if you are trying to store this "url(url("images/Screen2.png") no-repeat)" in your elements' css. Try doin' this:

$('.viewport').css('background-image', hoverhome);

Minor issue: Be clear that you should not use a relative path in a theme in wordpress! Use this php function to get the theme root:

get_theme_root();

and from there navigate to your javascript file.

This may solve your issue, it occured several times to me

answered May 30, 2013 at 18:40

Noël Widmer

4,58210 gold badges50 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dKen · Accepted Answer · 2013-05-30 18:33:08Z

0

I'm not sure if you can call

$(document).ready(function() { }

AFTER the page has already loaded. Try mixing your code up a bit:

$(document).ready(function()
{
        var hoverhome = 'url("images/Screen2.png") no-repeat';
        var empty = '';

        //home
        $('nav .home a').mouseover(function()
        {
           $('.viewport').css('background-image', 'url(' + hoverhome + ')');
        });
        $('nav .home a').onmouseout(function()
        {
            $('.viewport').css('background-image', 'url(' + empty + ')');
        }); 

}

I don't think you need to put the function in there as long as .nav exists when the page loads. You can remove that completely.

I think the problem is that jQuery sets everything up when the page loads, so calling the .ready() method AFTERWARDS has no effect.

answered May 30, 2013 at 18:33

dKen

3,1471 gold badge30 silver badges39 bronze badges

3 Comments

Chris Over a year ago

So I have tried both answers (and combinations of the two, to no avail. I have changed my header call to: <script type="text/javascript" src="<?php get_theme_root(); ? >scriptfile.js"></script> And combinations of the 2 answers for the JS, but still nothing showing up on mouseover.

Chris Over a year ago

I get a ReferenceError: preview is not defined

dKen Over a year ago

Righto, I don't think you need the Preview() function at all for this, as long as the .viewport element exists in the HTML. Remove the line that says preview(); because there's no longer a function called preview, and just try what I've put above. Let me know how you get on. If it still doesn't work, I'll open a JSFiddle.

Collectives™ on Stack Overflow

Executing javascript in wordpress

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related