Include Javascripts in your web page
JavaScript is a powerful scripting language, which comes in really handy for adding interactive content to your web page. A frequently asked question on our forum is 'How do I add javascript to my page?'
Unfortunately there is no generic answer to this question. Each javascript requires a different approach.
However in this tutorial I will try to give you some guidelines that might make it easier to understand where to insert specific pieces of JavaScript.
Note that when you've found a javascript on the Internet, it usually comes with instructions how to integrate it into your website, so it's important to read these instructions before adding a specific script.
Lets take a look at some examples:
Fading Ticker Tape Script
This script is available on http://www.dynamicdrive.com/dynamicindex2/tickertape.htm
JavaScript is a powerful scripting language, which comes in really handy for adding interactive content to your web page. A frequently asked question on our forum is 'How do I add javascript to my page?'
Unfortunately there is no generic answer to this question. Each javascript requires a different approach.
However in this tutorial I will try to give you some guidelines that might make it easier to understand where to insert specific pieces of JavaScript.
Note that when you've found a javascript on the Internet, it usually comes with instructions how to integrate it into your website, so it's important to read these instructions before adding a specific script.
Lets take a look at some examples:
Fading Ticker Tape Script
This script is available on http://www.dynamicdrive.com/dynamicindex2/tickertape.htm
Step 2: The second step inserts the code that displays the actual ticker tape.
In Quick 'n Easy Web Builder we will use a HTML object to insert this code. Place the HTML object on the position where your want the ticker to appear. Menu->Insert->HTML
In Quick 'n Easy Web Builder we will use a HTML object to insert this code. Place the HTML object on the position where your want the ticker to appear. Menu->Insert->HTML
Step 3: Finally add the code into the <body> tag:
Select Menu->Page->Page HTML and click the 'Inside <body> tag' tab and enter this code:
onload="if (ie||ns6||ns4) {regenerate2();updatecontent()}"
Select Menu->Page->Page HTML and click the 'Inside <body> tag' tab and enter this code:
onload="if (ie||ns6||ns4) {regenerate2();updatecontent()}"
Notes:
Changing the messages: The messages and their corresponding link are contained inside the array news[0], news[1] etc of the code in Step 2.
Make sure the size of the HTML object is the same as the the dimensions of the ticker as specified in the style sheet. You can edit the "width" and height" in the style sheet of Step 1 to modify the size.
Add the weather to your website.
This script is available on http://weather.weatherbug.com/weather-stickers.html
Step 1: Select the style of the Weather widget, in this demo I've selected 180x150.
Step 2: Fill in your details like email address and Location.
Step 3: Click the 'Get Code' button, a new window will be displayed with HTML code for your website.
Step 4: Insert a HTML object to your page"
Menu->Insert->HTML and paste the HTML code in the property window.
Finally make sure the size of the HTML box is the same size as the style you've selected in step 1. In this case 180x150.
Changing the messages: The messages and their corresponding link are contained inside the array news[0], news[1] etc of the code in Step 2.
Make sure the size of the HTML object is the same as the the dimensions of the ticker as specified in the style sheet. You can edit the "width" and height" in the style sheet of Step 1 to modify the size.
Add the weather to your website.
This script is available on http://weather.weatherbug.com/weather-stickers.html
Step 1: Select the style of the Weather widget, in this demo I've selected 180x150.
Step 2: Fill in your details like email address and Location.
Step 3: Click the 'Get Code' button, a new window will be displayed with HTML code for your website.
Step 4: Insert a HTML object to your page"
Menu->Insert->HTML and paste the HTML code in the property window.
Finally make sure the size of the HTML box is the same size as the style you've selected in step 1. In this case 180x150.
Initializing...
Step 1: The first step is to insert some code into the <head> section of your page. This code represents the style of the ticker. In Quick 'n Easy Web Builder we select:
Menu->Page->Page HTML and click the 'Between <head><head> tags' tab and enter the header code.
Menu->Page->Page HTML and click the 'Between <head><head> tags' tab and enter the header code.
Adding a MP3 player to your website.
This script is available on http://www.jeroenwijering.com/?item=JW_MP3_Player
Step 1: Download the files from the website.
Step 2: Unzip files file to your local drive. For example to c:\jw_mp3_player\
Step 3: Add the following code to the <head> section of the page through
Menu->Page->Page HTML and click the 'Between Head Tag' tab.
<script type="text/javascript" src="swfobject.js"></script>
Step 4: Add the MP3 Player to your page using the HTML object.
Menu->Insert->HTML and enter this code:
<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
var s2 = new SWFObject("mp3player.swf", "playlist", "240", "135", "7");
s2.addVariable("file","playlist.xml");
s2.addVariable("backcolor","0x00000");
s2.addVariable("frontcolor","0xEECCDD");
s2.addVariable("lightcolor","0xCC0066");
s2.addVariable("displayheight","0");
s2.write("player1");
</script>
Step 5: Now lets make sure all MP3 Player files will be published to your website.
Add a File Publisher object (Menu->Insert->Advanced->File Publisher) to your page and add the following files:
mp3player.swf
playlist.xml
song1.mp3
song2.mp3
swfobject.js
Note that these files are included in the zip file you've extracted to c:\jw_mp3_player\ in Step 2!
Step 6: To add your own songs you should edit the playlist.xml file and replace the song1.mp3 and song2.mp2 entries in the File Publisher with your own songs.Consult the documentation of JW MP3 PLAYER for more details.
Related tutorials:
Adding HTML or Javascript to a web page.
This script is available on http://www.jeroenwijering.com/?item=JW_MP3_Player
Step 1: Download the files from the website.
Step 2: Unzip files file to your local drive. For example to c:\jw_mp3_player\
Step 3: Add the following code to the <head> section of the page through
Menu->Page->Page HTML and click the 'Between Head Tag' tab.
<script type="text/javascript" src="swfobject.js"></script>
Step 4: Add the MP3 Player to your page using the HTML object.
Menu->Insert->HTML and enter this code:
<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
var s2 = new SWFObject("mp3player.swf", "playlist", "240", "135", "7");
s2.addVariable("file","playlist.xml");
s2.addVariable("backcolor","0x00000");
s2.addVariable("frontcolor","0xEECCDD");
s2.addVariable("lightcolor","0xCC0066");
s2.addVariable("displayheight","0");
s2.write("player1");
</script>
Step 5: Now lets make sure all MP3 Player files will be published to your website.
Add a File Publisher object (Menu->Insert->Advanced->File Publisher) to your page and add the following files:
mp3player.swf
playlist.xml
song1.mp3
song2.mp3
swfobject.js
Note that these files are included in the zip file you've extracted to c:\jw_mp3_player\ in Step 2!
Step 6: To add your own songs you should edit the playlist.xml file and replace the song1.mp3 and song2.mp2 entries in the File Publisher with your own songs.Consult the documentation of JW MP3 PLAYER for more details.
Related tutorials:
Adding HTML or Javascript to a web page.
