Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

in my wordpress plugin file I have this code that includes a javascript

function javascript_file-exmp() {
    $src = plugins_url('test.js', __FILE__);
    wp_register_script( 'links', $src );
    wp_enqueue_script( 'links' );
    wp_enqueue_script( 'jquery' );
    }
    add_action('init','javascript_file-exmp');

the test.js file is a little long.

if (!document.layers)
        document.write('<div id="divStayTopLeft" style="position:absolute">')


        <layer id="divStayTopLeft">

        <!--EDIT BELOW CODE TO YOUR OWN MENU-->
        <table border="1" width="130" cellspacing="0" cellpadding="0">
          <tr>
            <td width="100%" bgcolor="#FFFFCC">
              <p align="center"><b><font size="4">Menu</font></b></td>
          </tr>
          <tr>
            <td width="100%" bgcolor="#FFFFFF">
              <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
               <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
               <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
               <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
               <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
          </tr>
        </table>
        <!--END OF EDIT-->

        </layer>



        /*
        Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
        Script featured on/available at http://www.dynamicdrive.com/
        This notice must stay intact for use
        */

        //Enter "frombottom" or "fromtop"
        var verticalpos="frombottom"

        if (!document.layers)
        document.write('</div>')

        function JSFX_FloatTopDiv()
        {
            var startX = 3,
            startY = 150;
            var ns = (navigator.appName.indexOf("Netscape") != -1);
            var d = document;
            function ml(id)
            {
                var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
                if(d.layers)el.style=el;
                el.sP=function(x,y){this.style.left=x;this.style.top=y;};
                el.x = startX;
                if (verticalpos=="fromtop")
                el.y = startY;
                else{
                el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
                el.y -= startY;
                }
                return el;
            }
            window.stayTopLeft=function()
            {
                if (verticalpos=="fromtop"){
                var pY = ns ? pageYOffset : document.body.scrollTop;
                ftlObj.y += (pY + startY - ftlObj.y)/8;
                }
                else{
                var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
                ftlObj.y += (pY - startY - ftlObj.y)/8;
                }
                ftlObj.sP(ftlObj.x, ftlObj.y);

                setTimeout("stayTopLeft()", 10);
            }
            ftlObj = ml("divStayTopLeft");
            stayTopLeft();
        }
        JSFX_FloatTopDiv();

I am trying to include this test.js file but nothing happens on my blog. How do i go about including this file in the plugin? I understand it might be something to do with html tags or script tags. But which ones?

Thanks.

share|improve this question
    
In addition to m0r7if3r's comment, I don't think you should enqueue in init hook. Try wp_enqueue_scripts hook instead. –  Shane Feb 8 '12 at 21:01

3 Answers 3

up vote 1 down vote accepted

First you should use the wp_enqueue_scripts to load your scripts.

add_action( 'wp_enqueue_scripts' , 'javascript_file-exmp' );

Second, be sure to both register and then enqueue your script

Register:

wp_register_script( 'links', plugins_url( 'test.js', __FILE__ ), array( 'jquery' ), '1.0', true  );

1.0 is the version, used mainly to avoid caching on when you update it.

true controls whether the script can be called from the bottom of the page rather than in the <head> tag.

Enqueue

wp_enqueue_script( 'links' );

Lastly, as suggested above you should really separate your HTML from your javascript.

share|improve this answer

The function's name (javascript_file-exmp) is invalid, because it contains the - (minus) character which is the subtraction operator and thus your code throws syntax errors. And also the test.js file contains HTML code where only valid JavaScript is expected.

share|improve this answer

A .js file should ONLY contain javascript. You should also have you javascript separated from your HTML (...and from your php, from your perl, etc, everything gets its own little box) anyways as a matter of good coding practice.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.