Results 1 to 4 of 4

Thread: Vertical Slideshow - embedding javascript in my webpage

  1. #1
    Join Date
    Nov 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Vertical Slideshow - embedding javascript in my webpage

    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?

    Code:
    <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>
    Last edited by ailinalin; 11-28-2007 at 07:59 AM.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread 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).
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Nov 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Vertical conveyor belt slide show

    apologies. this is where i got my coding from.

    http://www.dynamicdrive.com/forums/a...p/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...

    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>

  4. #4
    Join Date
    Nov 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    would appreciate if anyone could help me on this!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •