Log in

View Full Version : Vertical Slideshow - embedding javascript in my webpage


ailinalin
11-28-2007, 02:54 AM
hihi,

i've been trying to insert this javascript that i got from dynamicdrive to my webpage. how can i embed the script so that the slideshow only runs in a specific table in my webpage? :confused:


<script type="text/javascript">
/*
Vertical Pausing Slideshow - freely adapted from:
Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Modified by jscheuer1 for continuous content slideshow. Credit MUST stay intact for use
visit http://www.dynamicdrive.com/forums
*/

//Specify the marquee's width (in pixels)
var marqueewidth="240px"
//Specify the marquee's height
var marqueeheight="180px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//Specify initial pause before scrolling in milliseconds
var initPause=1000
//Specify start with Full(1)or Empty(0) Marquee
var full=1
//Pause marquee onMousever (0=no 1=yes)?
var pauseit=1
//Specify images' border
imgBorder=1

var photos=new Array();
//Specify images, optional link, optional target:
photos[0]=['CE_slides/Slide1.JPG', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[1]=['CE_slides/Slide2.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[2]=['CE_slides/Slide3.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[3]=['Slide4.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[4]=['Slide5.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[5]=['Slide6.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[6]=['Slide7.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[7]=['Slide8.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[8]=['Slide9.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[9]=['Slide10.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[10]=['Slide11.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[11]=['Slide12.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[12]=['Slide13.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[13]=['Slide14.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[14]=['Slide15.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[15]=['Slide16.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[16]=['Slide17.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[17]=['Slide18.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[18]=['Slide19.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[19]=['Slide20.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[20]=['Slide21.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[21]=['Slide22.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[22]=['Slide23.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[23]=['Slide24.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[24]=['Slide25.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[25]=['Slide26.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[26]=['Slide27.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[27]=['Slide28.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[28]=['Slide29.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[29]=['Slide30.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[30]=['Slide31.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link
photos[31]=['Slide32.jpg', 'staff_guide_for_CE_portal.ppt'] //Image w/link

////NO NEED TO EDIT BELOW THIS LINE////////////
var preload=new Array()
for (var i_tem = 0; i_tem < photos.length; i_tem++){
preload[i_tem]=new Image()
preload[i_tem].src=photos[i_tem][0]
}

var actualheight=marqueecontent=''
var copyspeed=marqueespeed
var pausespeed=(pauseit)? 0 : copyspeed
var iedom=document.all||document.getElementById
var cross_marquee, cross_marquee2, ns_marquee

for (var i_tem = 0; i_tem < photos.length; i_tem++){
if (typeof photos[i_tem][1]!=='undefined'){
marqueecontent+='<a href="'+photos[i_tem][1]+'"'
marqueecontent+=typeof photos[i_tem][2]!=='undefined'? ' target="'+photos[i_tem][2]+'"' : ''
marqueecontent+='>'
}
marqueecontent+='<img src="'+photos[i_tem][0]+'" border="'+imgBorder+'"><br>'
marqueecontent+=typeof photos[i_tem][1]!=='undefined'? '</a>' : ''
}
if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="overflow:hidden;"><div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;"><table align="center"><tr><td height="'+marqueeheight+'" align="center" valign="middle">Loading . . .</td></tr></table>')
write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div></div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}

function populate(){
if (document.all)
for (var i_tem = 0; i_tem < preload.length; i_tem++)
if (typeof preload[i_tem].complete=='boolean'&&!preload[i_tem].complete){
setTimeout("populate();", 2000)
return;
}
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee2=document.getElementById? document.getElementById("iemarquee2") : document.all.iemarquee2
cross_marquee.style.top=(full==1)? '0px' : parseInt(marqueeheight)+0+"px"
cross_marquee2.innerHTML=cross_marquee.innerHTML=marqueecontent
actualheight=cross_marquee.offsetHeight
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+0)+"px" //indicates following #1
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
setTimeout('lefttime=setInterval("scrollmarquee()",20)',initPause)
}
window.onload=populate

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)<(actualheight*(-1)))
cross_marquee.style.top=(parseInt(cross_marquee2.style.top)+actualheight)+"px"
if (parseInt(cross_marquee2.style.top)<(actualheight*(-1)))
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight)+"px"
cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px"
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
}

else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}

</script>
djr33
11-28-2007, 03:55 AM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question; and post a link to the page on your site that contains the problematic script so we can check it out.
This has also been moved to the proper forum.

To place a slideshow, gallery, or any other specific area Javascript on a page, there are several methods:
You can specific the name of a div (or other area, but usually div) in the script. The directions will tell you if this is the case, and remember to name that region accordingly.
Or, you simply place part of the script in that region.
The script itself, at least the majority, will go in the <head> section of the page (95% of the time).
ailinalin
11-28-2007, 05:12 AM
apologies. this is where i got my coding from.

http://www.dynamicdrive.com/forums/archive/index.php/t-11787.html

don't really understand what you said though... sorry i am unable to provide the link to my page as it is protected. here's the code...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>OIC~RP Staff</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#76CD4C" text="#000000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" id="whole">
<tr>
<td height="100"><p align="center">
<img border="0" src="images/student_header.jpg" width="738" height="99"></p></td>
</tr>
<tr>
<td height="19"> <table width="760" height="35" border="0" cellpadding="0" cellspacing="0" id="links">
<tr>
<td width="50" height="0" background="Shuhui%20Site%201/index/sides.jpg">&nbsp;</td>
<td width="110" background="images/back_button.JPG"> <div align="center"><font size="2"><strong><font color="#FFFFFF" face="Arial, Helvetica, sans-serif"><a href="Default.htm" style="text-decoration:none">Home</a></font></strong></font></div></td>
<td width="110" background="images/back_button.JPG"> <div align="center"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><strong><a href="about_oic_our_business.htm" style="text-decoration:none">About
OIC</a></strong></font> </div></td>
<td width="110" background="images/back_button.JPG"> <div align="center"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><strong><a href="partners_sponsorships_schemes.htm" style="text-decoration:none">Partners</a></strong></font></div></td>
<td width="110" background="images/front_button.jpg"> <div align="center"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><strong>RP
Staff </strong></font></div></td>
<td width="110" background="images/back_button.JPG"> <div align="center"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><strong><a href="rp_students.htm" style="text-decoration:none">RP
Students</a></strong></font> </div></td>
<td width="110" background="images/back_button.JPG"> <div align="center"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><strong><a href="other_resources.htm" style="text-decoration:none">Other
Resources</a></strong></font></div></td>
<td width="50" background="Shuhui%20Site%201/index/sides.jpg">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td height="0" valign="top" bgcolor="#ADEC8C">
<table width="760" height="332" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="160" height="332" valign="top">
<table width="160" border="0" cellpadding="5" cellspacing="0" id="sidebuttons" align="top">
<tr>
<td height="20" valign="top"> <p>&nbsp;</p></td>
</tr>
<tr>
<td height="30">
<div align="right"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><strong>
<a href="rp_staff_ias.htm" style="text-decoration: none">IAS</a></strong></font></div></td>
</tr>
<tr>
<td height="20">&nbsp;</td>
</tr>
<tr>
<td height="30" valign="middle">
<p align="right"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><strong><a href="rp_staff_aas.htm" style="text-decoration:none">AAS</a></strong></font></td>
</tr>
<tr>
<td height="30" valign="middle">
&nbsp;</td>
</tr>
<tr>
<td height="30">
<div align="right">
<p align="right"><strong>
<font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">
<a href="rp_staff_career_coach.htm" style="text-decoration: none">Career Coaching</a></font></strong></div></td>
</tr>
<tr>
<td height="30">
&nbsp;</td>
</tr>
<tr>
<td height="30" background="images/side_buttons.jpg">
<p align="right"><strong>
<font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">
CE</font></strong></td>
</tr>
</table>
</td>
<td height="332" valign="top">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="10" id="table1">
<tr>
<td>
<div align="center">
&nbsp;</div>
<div align="center">
<strong><font face="Broadway" color="#800000">
Training Guide to CE Portal - For Staff</font></strong></div>
<div align="center">
&nbsp;</div>
<div align="center">
<table border="0" width="50%" cellpadding="0">
<tr>
<td>
under construction...
<script type="text/javascript">
/*
Vertical Pausing Slideshow - freely adapted from:
Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Modified by jscheuer1 for continuous content slideshow. Credit MUST stay intact for use
visit http://www.dynamicdrive.com/forums
*/

//Specify the marquee's width (in pixels)
var marqueewidth="240px"
//Specify the marquee's height
var marqueeheight="180px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//Specify initial pause before scrolling in milliseconds
var initPause=1000
//Specify start with Full(1)or Empty(0) Marquee
var full=1
//Pause marquee onMousever (0=no 1=yes)?
var pauseit=1
//Specify images' border
imgBorder=1

var photos=new Array();
//Specify images, optional link, optional target:
photos[0]=['CE_slides/Slide1.JPG', 'staff_guide_for_CE_portal.ppt']
photos[1]=['CE_slides/Slide2.jpg', 'staff_guide_for_CE_portal.ppt']
photos[2]=['CE_slides/Slide3.jpg', 'staff_guide_for_CE_portal.ppt']


////NO NEED TO EDIT BELOW THIS LINE////////////
var preload=new Array()
for (var i_tem = 0; i_tem < photos.length; i_tem++){
preload[i_tem]=new Image()
preload[i_tem].src=photos[i_tem][0]
}

var actualheight=marqueecontent=''
var copyspeed=marqueespeed
var pausespeed=(pauseit)? 0 : copyspeed
var iedom=document.all||document.getElementById
var cross_marquee, cross_marquee2, ns_marquee

for (var i_tem = 0; i_tem < photos.length; i_tem++){
if (typeof photos[i_tem][1]!=='undefined'){
marqueecontent+='<a href="'+photos[i_tem][1]+'"'
marqueecontent+=typeof photos[i_tem][2]!=='undefined'? ' target="'+photos[i_tem][2]+'"' : ''
marqueecontent+='>'
}
marqueecontent+='<img src="'+photos[i_tem][0]+'" border="'+imgBorder+'"><br>'
marqueecontent+=typeof photos[i_tem][1]!=='undefined'? '</a>' : ''
}
if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="overflow:hidden;"><div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;"><table align="center"><tr><td height="'+marqueeheight+'" align="center" valign="middle">Loading . . .</td></tr></table>')
write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div></div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}

function populate(){
if (document.all)
for (var i_tem = 0; i_tem < preload.length; i_tem++)
if (typeof preload[i_tem].complete=='boolean'&&!preload[i_tem].complete){
setTimeout("populate();", 2000)
return;
}
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee2=document.getElementById? document.getElementById("iemarquee2") : document.all.iemarquee2
cross_marquee.style.top=(full==1)? '0px' : parseInt(marqueeheight)+0+"px"
cross_marquee2.innerHTML=cross_marquee.innerHTML=marqueecontent
actualheight=cross_marquee.offsetHeight
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+0)+"px" //indicates following #1
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
setTimeout('lefttime=setInterval("scrollmarquee()",20)',initPause)
}
window.onload=populate

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)<(actualheight*(-1)))
cross_marquee.style.top=(parseInt(cross_marquee2.style.top)+actualheight)+"px"
if (parseInt(cross_marquee2.style.top)<(actualheight*(-1)))
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight)+"px"
cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px"
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
}

else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}

</script>


</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div></td>
</tr>
</table>

</td>
</tr>
</table>
<p>&nbsp;</p>

</body>
</html>
ailinalin
11-29-2007, 01:39 AM
would appreciate if anyone could help me on this! :(