Integrate javascript in wordpress

Question

This is the code

<head>
    <style>
        #divtoshow {position:absolute;display:none;}
        #onme {width:100%;height:100%;cursor:pointer}
    </style>
    <script type="text/javascript">
        var divName = 'divtoshow'; /*div that is to follow the mouse (must be position:absolute)*/
        var offX = 30;             /*X offset from mouse position*/
        var offY = 50;             /*Y offset from mouse position*/

        function mouseX(evt) {
            if (!evt) 
                evt = window.event; 
            if (evt.pageX)
                return evt.pageX; 
            else if (evt.clientX)
                return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); 
            else return 0;
        }
        function mouseY(evt) {
            if (!evt) 
                evt = window.event; 
            if (evt.pageY) 
                return evt.pageY; 
            else if (evt.clientY)
                return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
            else 
                return 0;
        }
        function follow(evt) {
            var obj = document.getElementById(divName).style;
            obj.left = (parseInt(mouseX(evt))-offX) + 'px';
            obj.top = (parseInt(mouseY(evt))-offY) + 'px'; 
        }

       document.onmousemove = follow;
    </script>
</head>

<body>
    <div id="divtoshow">
        <img src="http://www.rw-designer.com/cursor-preview/35050.png">
    </div>
    <br><br>
    <div id='onme' onMouseover='document.getElementById(divName).style.display="block"'>
        Mouse over this
    </div>
</body>

This code is for an object(image in my case) to follow mouse pointer. I have put the javascript in the tags but I want the html to be applied on the whole website instead of one page or post. How I can do this?

You could simply make an external script file as explained here. — TheOnlyError
– TheOnlyError, Commented Jun 25, 2015 at 11:01
@TheOnlyError the problem is not with JS , the problem is that where I should put the html so it can target the whole website.Actually I want the above effect on all pages instead of a div block. — StealthTrails
– StealthTrails, Commented Jun 25, 2015 at 12:05
I don't work with Wordpress so I'm not going to give you false adviace, but as doveyg said. Try asking it on there, they will be able to assist you better. — TheOnlyError
– TheOnlyError, Commented Jun 25, 2015 at 12:18

Domain · Accepted Answer · 2015-06-25 12:27:31Z

Try this:-

//For adding javascript and css
    add_action('wp_enqueue_scripts','wdm_test_script');
    function wdm_test_script(){ ?>
        <style>
            #divtoshow {position:absolute;display:none;}
            #onme {width:100%;height:100%;cursor:pointer}
            </style>
            <script type="text/javascript">
            var divName = 'divtoshow'; /*div that is to follow the mouse (must be position:absolute)*/
            var offX = 30;          /*X offset from mouse position*/
            var offY = 50;          /* Y offset from mouse position*/

            function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX)          return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
            function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

            function follow(evt) {
                var obj = document.getElementById(divName).style;
                obj.left = (parseInt(mouseX(evt))-offX) + 'px';
                obj.top = (parseInt(mouseY(evt))-offY) + 'px'; 
        }
           document.onmousemove = follow;
           </script>
    <?php }
//For adding content to all pages
    add_filter('the_content','wdm_demo_content',1,1);
    function wdm_demo_content($content){ 
        ob_start();
    ?>
        <div id="divtoshow"><img src="http://www.rw-designer.com/cursor-preview/35050.png"></div>
            <br><br>
            <div id='onme' onMouseover='document.getElementById(divName).style.display="block"'>Mouse over this</div>

    <?php
    $contents = ob_get_contents();
    ob_end_clean();
    return $contents.$content;
    }

can u please tell where I am supposed to place the above code ? :)
This code is working but I dont know why I can not position the image that is following the pointer
I have used the above code here olocally.com but I have a problem , the image the is following the pointer hides behind things i,e like mouse pointer it does not stays on the words rather words come on top of it . like here prntscr.com/7laeru how I can overcome this??

Collectives™ on Stack Overflow

Integrate javascript in wordpress

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related