Multi-Part Content script

**xektor** · 07-26-2006, 08:03 AM

1) Script Title:
Multi-Part Content script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...artcontent.htm

3) Describe problem:
I'm not very good in scripting, but anyway I tried to modify this script according to my needs. I needed the back and forward buttons to be in the middle of the page and the two to be next to one another (to create "one" image).

First of all, it was a problem to put these two buttons in the middle of the page, but I achieved this by changing one of the tags to: <div id="formnavigation" style="width:980px; display:none"> The problem with this is that it would work only on screen resolutions similar to mine. If anyone could help me with this that would be great.

And the second problem is that the two images still have some blank space between one another, which I don't want. I put the images in a table so that I can arrange them, but this doesn't work when I use the Multi-Part Content script. And the two buttons are rollovers from Dreamweaver.

If you need my code, here is it:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>САПИ-Ко ООД</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<style type="text/css">
/*specify height of broken up content */
.multiparts{
height: 510px;
}

</style>

<script type="text/javascript">

/***********************************************
* Multi-Part Content script- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.multiparts, #formnavigation{display:none;}')
document.write('</style>')
}

var curpart=0

function getElementbyClass(classname){
partscollect=new Array()

var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function cycleforward(){
partscollect[curpart].style.display="none"
curpart=(curpart<partscollect.length-1)? curpart+1 : 0
partscollect[curpart].style.display="block"
}

function cycleback(){
partscollect[curpart].style.display="none"
curpart=(curpart>0)? curpart-1 : partscollect.length-1
partscollect[curpart].style.display="block"
}


function onloadfunct(){
getElementbyClass("multiparts")
partscollect[0].style.display="block"
document.getElementById("formnavigation").style.display="block"
}

if (window.addEventListener)
window.addEventListener("load", onloadfunct, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunct)
else if (document.getElementById)
window.onload=onloadfunct

</script>


</head>

<body bgcolor="#2766AB" onLoad="MM_preloadImages('arrow-on-left.gif','arrow-on-right.gif')">
<p><font color="#000000" face="Arial, Helvetica, sans-serif"> </font> </p>
<div class="multiparts" style="display: block">
<table width="1" height="1" border="2" align="center" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" valign="middle">
  <tr> 
    <td width="1" height="1" align="center" valign="middle"><div align="center"><img src="images/avren/slide_1.jpg" ></div></td>
  </tr>
</table>
</div>

<div class="multiparts">
<table width="1" height="1" border="2" align="center" valign="middle" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF">
  <tr> 
    <td width="1" height="1" align="center" valign="middle"><div align="center"><img src="images/avren/slide_2.jpg" ></div></td>
  </tr>
</table>
</div>

<div class="multiparts">
<table width="1" height="1" border="2" align="center" valign="middle" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF">
  <tr> 
    <td width="1" height="1" align="center" valign="middle"><div align="center"><img src="images/avren/slide_3.jpg" ></div></td>
  </tr>
</table>
</div>

<div class="multiparts">
<table width="1" height="1" border="2" align="center" valign="middle" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF">
  <tr> 
    <td width="1" height="1" align="center" valign="middle"><div align="center"><img src="images/avren/slide_4.jpg" ></div></td>
  </tr>
</table>
</div>

<div class="multiparts">
<table width="1" height="1" border="2" align="center" valign="middle" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF">
  <tr> 
    <td width="1" height="1" align="center" valign="middle"><div align="center"><img src="images/avren/slide_5.jpg" ></div></td>
  </tr>
</table>
<p>&nbsp;</p></div>

<div id="formnavigation" style="width:980px; display:none"> 
  <table width="100%" height="100%" align="center" bordercolor="#FFFFFF">
    <tr> 
      <td width="100%" height="100%" align="center" valign="middle"> 
    <tr> 
      <td width="100%" align="center" valign="middle"><div align="center"><font color="#000000" face="Arial, Helvetica, sans-serif"> 
          <a id="backbutton" href="javascript:cycleback()"  style="float:center" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','arrow-on-left.gif',1)"><img src="arrow-off-left.gif" alt="Предишна" name="Image1" width="76" height="76" border="0"></a> 
          <a id="forwardbutton" href="javascript:cycleforward()" style="float:center"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','arrow-on-right.gif',1)"><img src="arrow-off-right.gif" alt="Следваща" name="Image2" width="91" height="76" border="0"></a></font><font color="#000000" face="Arial, Helvetica, sans-serif"></font></div></td> </tr> 
      </td>
    </tr>
    <div align="center"></div>
  </table>
  
</div><br>
</body>
</html>

Thank you in advance,
Valeri

**Twey** · 07-26-2006, 08:44 AM

Images are inline, so a <div style="text-align: center;"> should center them. Remove the padding and margins from them to eliminate the space between them.

**xektor** · 07-26-2006, 10:15 AM

With your help I resolved the first problem. The images, however, still have some space. I think I use neither padding nor margins, but maybe you mean something else. Could you please elaborate a bit on that? If you could correct the wrong part of the code it would be great.

Thanks again.

**Twey** · 07-26-2006, 09:43 PM

By default, the images will have padding and/or margins. Try:

Code:

<div style="text-align: center;" class="arrowdiv">

and

Code:

<style type="text/css">
.arrowdiv img {
  padding: 0;
  margin: 0;
}
</style>

... in your head.

**xektor** · 07-27-2006, 12:20 PM

Thanks, I figured it out

Thread: Multi-Part Content script

Thread Tools

Search Thread

Multi-Part Content script

Bookmarks

Bookmarks

Posting Permissions