13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

including java script in a wordpress page

by LastingLifeSuccess
8 replies
Hey Warriors,

How do I include this piece of javascript inside a page in a wordpress website?

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

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (Dynamic Drive DHTML(dynamic html) & JavaScript code library)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at Dynamic Drive DHTML(dynamic html) & JavaScript code library for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="650px"
//Specify the slider's height
var sliderheight="130px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/1.jpg" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/4.jpg" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/5.jpg" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/6.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/7.jpg" border=1></a>'
leftrightslide[5]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/2.jpg" border=1></a>'
leftrightslide[6]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/8.jpg" border=1></a>'
leftrightslide[7]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/9.jpg" border=1></a>'
leftrightslide[8]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/3.jpg" border=1></a>'
leftrightslide[9]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/10.jpg" border=1></a>'
leftrightslide1[0]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/12.jpg" border=1></a>'
leftrightslide[11]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/13.jpg" border=1></a>'
leftrightslide[12]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/11.jpg" border=1></a>'
leftrightslide[13]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/14.jpg" border=1></a>'
leftrightslide[14]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/15.jpg" border=1></a>'
leftrightslide[15]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/16.jpg" border=1></a>'
leftrightslide[16]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/17.jpg" border=1></a>'
leftrightslide[17]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/18.jpg" border=1></a>'
leftrightslide[18]='<a href="http://"><img src="http://emeraldcitywindowtinting.com/images/19.jpg" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imageg ap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftr ightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+" px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slideme nu2
ns_slide2=document.ns_slidemenu.document.ns_slidem enu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style. left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style .left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.styl e.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style .left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshow gap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshow gap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';hei ght:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';hei ght:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
#including #java #page #script #wordpress
  • Profile picture of the author JohnMcCabe
    Here you go, Rebecca...

    1. Open a text editor like Notepad. Do not use a word processor like MS Word, as it screws up the formatting.

    2. Copy and paste your script into a new document. Make whatever changes you need to make to the settings.

    3. Save the file as a plain text file with a .php extension. For this post, I called it 'scriptname.php'.

    4. Upload the new text file to the template folder in your WP install.

    5. Add this line at the place in the template you want the script to operate:

    Code:
    <?php include (TEMPLATEPATH . '/scriptname.php'); ?>
    Be sure you change scriptname to the name you give the script.

    That's it. When the page is called, WP will insert the contents of the file at the point you placed that line of code.

    If you want to change any parameters in the script, just change them in the scriptname.php file and they'll take effect immediately on any page that you put that line of code on...
    {{ DiscussionBoard.errors[1789605].message }}
  • Profile picture of the author LastingLifeSuccess
    Thank you so much for the response!

    I've done the steps and it's still not working. I'm wondering.... I put the code:

    <?php include (TEMPLATEPATH . '/scriptname.php'); ?>

    in the page I want to include the javascript and maybe that's why it's not working. I need the javascript to be in only 2 pages in my wordpress site and not all of them.

    How do I get the javascript to show up just in specific pages?

    Thanks!!!
    Signature
    "How To Make $4,000-$8,000 Finder's Fees Snooping Around Public Records"
    {{ DiscussionBoard.errors[1789682].message }}
    • Profile picture of the author JohnMcCabe
      Rebecca, if you put that php call in the code for the page itself rather than the template, that is indeed why it's not working.

      The instructions I gave you were for adding that code to the template itself, which would run the script on every page that used that template.

      The easiest fix is to use a plugin called exec-php (WordPress › Exec-PHP WordPress Plugins). That would allow you to run the command in specific pages, rather than at the template level.
      {{ DiscussionBoard.errors[1791828].message }}
      • Profile picture of the author LastingLifeSuccess
        Originally Posted by JohnMcCabe View Post

        Rebecca, if you put that php call in the code for the page itself rather than the template, that is indeed why it's not working.

        The instructions I gave you were for adding that code to the template itself, which would run the script on every page that used that template.

        The easiest fix is to use a plugin called exec-php (WordPress › Exec-PHP WordPress Plugins). That would allow you to run the command in specific pages, rather than at the template level.
        So, I tried that and now I'm thinking maybe I didn't create the scriptname.php file correctly because nothing is showing up. I've attached the file to this post.... would you let me know if it looks like is should/shouldn't be working.

        Thanks!!!!!!!
        Signature
        "How To Make $4,000-$8,000 Finder's Fees Snooping Around Public Records"
        {{ DiscussionBoard.errors[1801758].message }}
        • Profile picture of the author JohnMcCabe
          Rebecca, I'm not seeing a problem in the file itself.

          One possibility is if the file extensions don't match, i.e., your php command is calling filmscriptname.php and the actual filename is filmscriptname.txt (like the attached file).

          If that doesn't work, PM me the url of the page you're working on and I'll take a look at it...
          {{ DiscussionBoard.errors[1802164].message }}
  • Profile picture of the author steve m
    It should be scriptname.js, rather then script name.php? If you have any more problems I'll add it for you if you want, just shoot me a pm...

    Steve M
    Signature
    ccleaner
    {{ DiscussionBoard.errors[1802179].message }}
  • Profile picture of the author Istvan Horvath
    ^^ what he said... I wouldn't mess with .php and the PHP include - because this is a js file.

    Here is what I would do:
    1. Create a Page template (see the Codex) for the Pages that would call for the js file
    (Simply, save your page.php from the theme as whatever.php and put those lines from the Codex on the top BEFORE anything else.
    OK, here is the code:
    <?php
    /*
    Template Name: My Whatever Template
    */
    ?>
    2. Take what you posted in the OP and save it in a file called "tabber.js"

    3. CUT the first line and the last line out and keep it handy for later!

    4. Upload the tabber.js file to your server - to make it simple into the active theme directory.

    5. In the custom Page template that you created minutes earlier paste the lines that you cut in step 3:
    <script type="text/javascript" src="tabber.js"></script>

    6. Modify it like:
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/tabber.js"></script>

    7. Create your Page using the new template.

    HTH
    Signature

    {{ DiscussionBoard.errors[1802259].message }}
    • Profile picture of the author JohnMcCabe
      Istvan, thanks for the post...

      I misread what she was trying to do, gave her directions for that, and then tried to save what she'd already done.

      Sometimes you just have to throw the soup out and start over...
      {{ DiscussionBoard.errors[1802544].message }}

Trending Topics