scoop_hk
10-18-2007, 11:30 AM
1) Script Title: Swiss Army Slideshow IE vertical centering
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm
3) Describe problem:
New problem is that the images no longer center vertically in their table cells - i thought they had but now that the page is fractionally longer they don't. The cells just stay the right height in FF, NN7, Safari but in IE6 & IE7 the cells are taller than they should be and the images cling to the top. I even changed the document type to see if that would help with a vertical float but no luck.
I have 4 slide shows on my index page - no buttons and no fade on the first image thanks to your previous wonderful help.
this is in the body same for each of the 4 slide shows:
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" height="420">
<tr height="210">
<td align="center" valign="middle" bgcolor="#650460" width="50%" height="210"><div align="center">
<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides, 393, 210, 6000)
start_it(0);
</script>
</div>
this is in the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>The Learning Journey - Homepage</title>
<link href="css/tlji2.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
/* All Styles Optional */
* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:;
}
div#show4 table td {
background-image:;
}
div#show3 table input, div#show4 table input {
outline-style:none;
}
</style>
<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->
<script type="text/javascript">
//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;
//And configure the image buttons' images here:
var previmg='';
var stopimg='';
var playimg='';
var nextimg='';
var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["images/main3/ELearning/001.jpg", ""];
slides[1] = ["images/main3/ELearning/002.jpg", ""];
slides[2] = ["images/main3/ELearning/003.jpg", ""];
slides[3] = ["images/main3/ELearning/004.jpg", ""];
slides[4] = ["images/main3/ELearning/005.jpg", ""];
slides[5] = ["images/main3/ELearning/006.jpg", ""];
slides[6] = ["images/main3/ELearning/007.jpg", ""];
slides.no_controls=1;
slides.no_added_linebreaks=1;
slides.nofade=1;
slides.manual_start=1;
slides.pause=1; //use for pause onmouseover
//above slide show uses only the defaults
var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own.
slides2[0] = ["images/main3/gameplay/001.jpg", ""];
slides2[1] = ["images/main3/gameplay/002.jpg", ""];
slides2[2] = ["images/main3/gameplay/003.jpg", ""];
//optional properties for these images:
slides2.no_controls=1;
slides2.no_added_linebreaks=1;
slides2.nofade=1;
slides2.manual_start=1;
slides2.pause=1; //use for pause onmouseover
var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["images/main3/puzzleplay/001.jpg","", "", "", ""];
slides3[1] = ["images/main3/puzzleplay/002.jpg", ""];
slides3[2] = ["images/main3/puzzleplay/003.jpg", "", ""];
//optional properties for these images:
slides3.no_controls=1;
slides3.no_added_linebreaks=1;
slides3.nofade=1;
slides3.manual_start=1;
slides3.pause=1; //use for pause onmouseover
var slides4=[]; //FOURTH SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides4[0] = ["images/main3/inspirational/001.jpg", ""];
slides4[1] = ["images/main3/inspirational/002.jpg", ""];
slides4[2] = ["images/main3/inspirational/003.jpg", ""];
slides4[3] = ["images/main3/inspirational/004.jpg", ""];
//optional properties for these images:
slides4.no_controls=1;
slides4.no_added_linebreaks=1;
slides4.nofade=1;
slides4.manual_start=1;
slides4.pause=1; //use for pause onmouseover
can it be controlled in here?:
//Notes:
//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls
//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"
function start_it(num,d){
if(!d){
setTimeout(function(){start_it(num,1);},iss[num].delay);
return;
}
if(document.createElement){
if (typeof document.getElementById('canvas'+num+'_0').style.opacity=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.opacity=.99;
document.getElementById('canvas'+num+'_1').style.opacity=.1;
}
else if(typeof document.getElementById('canvas'+num+'_0').style.filter=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.filter="alpha(opacity=100)";
document.getElementById('canvas'+num+'_1').style.filter="alpha(opacity=10)";
}
}
iss[num].gostop();
thank you! client thinks i should be adjusting the image size! which would throw the entire page balance off.... help.... thank you!
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm
3) Describe problem:
New problem is that the images no longer center vertically in their table cells - i thought they had but now that the page is fractionally longer they don't. The cells just stay the right height in FF, NN7, Safari but in IE6 & IE7 the cells are taller than they should be and the images cling to the top. I even changed the document type to see if that would help with a vertical float but no luck.
I have 4 slide shows on my index page - no buttons and no fade on the first image thanks to your previous wonderful help.
this is in the body same for each of the 4 slide shows:
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" height="420">
<tr height="210">
<td align="center" valign="middle" bgcolor="#650460" width="50%" height="210"><div align="center">
<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides, 393, 210, 6000)
start_it(0);
</script>
</div>
this is in the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>The Learning Journey - Homepage</title>
<link href="css/tlji2.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
/* All Styles Optional */
* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:;
}
div#show4 table td {
background-image:;
}
div#show3 table input, div#show4 table input {
outline-style:none;
}
</style>
<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->
<script type="text/javascript">
//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;
//And configure the image buttons' images here:
var previmg='';
var stopimg='';
var playimg='';
var nextimg='';
var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["images/main3/ELearning/001.jpg", ""];
slides[1] = ["images/main3/ELearning/002.jpg", ""];
slides[2] = ["images/main3/ELearning/003.jpg", ""];
slides[3] = ["images/main3/ELearning/004.jpg", ""];
slides[4] = ["images/main3/ELearning/005.jpg", ""];
slides[5] = ["images/main3/ELearning/006.jpg", ""];
slides[6] = ["images/main3/ELearning/007.jpg", ""];
slides.no_controls=1;
slides.no_added_linebreaks=1;
slides.nofade=1;
slides.manual_start=1;
slides.pause=1; //use for pause onmouseover
//above slide show uses only the defaults
var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own.
slides2[0] = ["images/main3/gameplay/001.jpg", ""];
slides2[1] = ["images/main3/gameplay/002.jpg", ""];
slides2[2] = ["images/main3/gameplay/003.jpg", ""];
//optional properties for these images:
slides2.no_controls=1;
slides2.no_added_linebreaks=1;
slides2.nofade=1;
slides2.manual_start=1;
slides2.pause=1; //use for pause onmouseover
var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["images/main3/puzzleplay/001.jpg","", "", "", ""];
slides3[1] = ["images/main3/puzzleplay/002.jpg", ""];
slides3[2] = ["images/main3/puzzleplay/003.jpg", "", ""];
//optional properties for these images:
slides3.no_controls=1;
slides3.no_added_linebreaks=1;
slides3.nofade=1;
slides3.manual_start=1;
slides3.pause=1; //use for pause onmouseover
var slides4=[]; //FOURTH SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides4[0] = ["images/main3/inspirational/001.jpg", ""];
slides4[1] = ["images/main3/inspirational/002.jpg", ""];
slides4[2] = ["images/main3/inspirational/003.jpg", ""];
slides4[3] = ["images/main3/inspirational/004.jpg", ""];
//optional properties for these images:
slides4.no_controls=1;
slides4.no_added_linebreaks=1;
slides4.nofade=1;
slides4.manual_start=1;
slides4.pause=1; //use for pause onmouseover
can it be controlled in here?:
//Notes:
//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls
//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"
function start_it(num,d){
if(!d){
setTimeout(function(){start_it(num,1);},iss[num].delay);
return;
}
if(document.createElement){
if (typeof document.getElementById('canvas'+num+'_0').style.opacity=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.opacity=.99;
document.getElementById('canvas'+num+'_1').style.opacity=.1;
}
else if(typeof document.getElementById('canvas'+num+'_0').style.filter=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.filter="alpha(opacity=100)";
document.getElementById('canvas'+num+'_1').style.filter="alpha(opacity=10)";
}
}
iss[num].gostop();
thank you! client thinks i should be adjusting the image size! which would throw the entire page balance off.... help.... thank you!