Text for Flexi-Slideshow runs into third div column [Archive]

View Full Version : Text for Flexi-Slideshow runs into third div column

ddaba

12-31-2011, 11:05 PM

Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)

Flexi Slideshow inside middle column of a 3-column div.
Image float text truncated in the middle column only in IE8 (worked fine Firefox/Chrome) (http://www.fanninsentinel.com) so I added
clear:both;
overflow:visible;
under colleft div css
That made text extend from center column into right column in IE8 & Firefox.
This ONLY happens with slideshow code and not on any of the other pages with 3-column flexible divs.
Below is code that extends text into third column behind jpgs:

...typical stuff
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
}
/* column container */
.colmask {
position:relative;
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
clear:both; /*try to fix IE8 bug*/
overflow:visible; /*try to fix IE8 bug*/
float:left;
width:100%;
position:relative;
}
.col1 {
float:left;
position:relative;
padding:0 0 1em 0;
}

.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background:#eee;
}
.threecol .colmid {
right:25%;
background:#fff;
}
.threecol .colleft {
right:50%;
background:#f4f4f4;
}
.threecol .col1 {
width:46%;
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}

</style>
<title>Fannin Sentinel</title>
</head>

<body>
<div id="header" align="right">Subscribe: <a href="delivery.html">Home Delivery</a></div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">

<img src="images/FS logo2.jpg" alt="Fannin Sentinel logo" width="444" height="112" /></div>
<div class="col2">

<a href="http://blueridgemountains.com/"><img src="images/FCchamber.jpg" name="FCchamber" width="148" height="110" id="FCchamber" target="_blank"/></a></div>


<div class="col3" align="right"><a href="http://bestofblueridge.biz/"><img src="images/BRBAlogo.gif" width="140" height="110" target="_blank"/></a></div>
</div>
</div>
</div>
<div id="header" align="center">29 State Street, P.O. Box 799, Blue Ridge, Georgia 30513  706-258-3406<br /><br /></div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<script language="JavaScript1.2">

/******
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
********/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['images/RayTidman.jpg', 'http://www.FanninSentinel.com/features.html', '<p class="posted">Posted Dec. 22, 2011 9:32 p.m.</p><h2>Assisted living facility to come to county</h2><p>Dr. Ray Tidman confirmed</p>']

variableslide[1]=['images/TracySummers.jpg', 'http://www.FanninSentinel.com/features.html', '<p class="posted">Posted Dec. 22, 2011 9:32 p.m.</p><h2>Xtreme Teens returns</h2><p>Xtreme Teens—and its coordinator, Tracy Summers—is back.<br />Read <a href="http://www.fanninsentinel.com/features.html#xtreme">more</a>.</p>']

variableslide[2]=['images/BuddyFinch.jpg', 'http://www.FanninSentinel.com/government.html#McCaysville', '<p class="posted">Posted Dec. 22, 2011 9:32 p.m.</p><h2>McCaysville applies for water loan</h2><p>During the McCaysville City Council meeting Dec. 13<br />Read <a href="http://fanninsentinel.com/government.html#McCaysville">more</a>.</p>']

variableslide[3]=['images/FCSOAwards12-17-11Davenport.jpg', 'http://www.FanninSentinel.com/features.html#FCSO', '<p class="posted">Posted Dec. 22, 2011 9:32 p.m.</p><h2>Sheriff’s Christmas Party includes awards</h2><p>Sheriff Dane Kirby congratulated<br />Read <a href="http://fanninsentinel.com/features.html#FCSO">more</a>.</p>']

var slidewidth='580px' //set to width of LARGEST image in your slideshow
var slideheight='200px' //set to height of LARGEST image in your slideshow, plus any text description
var slidebgcolor='transparent'
var slidedelay=9000

////Do not edit pass this line//////
var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="5" style="float:left; margin:0 10px 0 0">'
//contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="5">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
//if (variableslide[currentslide][3]!="")
//contentcontainer+=variableslide[currentslide][3]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>
<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

<h2 align="center">VIDEO OF THE WEEK!</h2>
<p align="center">The Fannin Sentinel accepts submissions of videos <br />
three minutes or shorter regarding anything <br />
related to Fannin County.<br />
See our first video!</p>
<p align="center"><strong>Video of the Week:</strong> Rotary Mobile Minute<br />
<br />
<iframe width="420" height="315" align="center" src="http://www.youtube.com/embed/M050oSr_KhA" frameborder="3" allowfullscreen></iframe>
</p>
</div>
<div class="col2">
<ul>
<li><a href="features.html">Features</a><br />
 </li>
<li><a href="government.html">Government</a><br />
 </li>
<li><a href="schools.html">Schools</a><br />
 </li>
<li><a href="events.html">Events</a><br />
 </li>
<li><a href="photos.html">Photos</a></li>
</ul>
<p> </p>
<a href="mailto:fanninsentinel.gail@tds.net"><img src="images/AD.jpg" width="148" height="148" /></a>
</div>
<div class="col3">
<p align="right"><a href="mailto:fanninsentinel.gail@tds.net"><img src="images/AD.jpg" width="140" height="140" /></a></p>
<p align="right"><a href="http://georgiasentinel.com/" target="_blank"><img src="images/GeorgiaSentinel.jpg" width="150" height="117" alt="Click here to contact the Georgia Sentinel" /></a></p>
</div>
</div>
</div>
</div>
<div id="footer" align="center"><a href="weather.html"><img src="images/emergencyupdate.jpg" width="100%" height="200" /></a>
<p class="copyright" align="center">© 2011 Fannin Sentinel</p>
</div>

</body>
</html>

jscheuer1

01-01-2012, 03:56 PM

There are two major issues here:

You're shoehorning an element of fixed dimensions (the slideshow 580x200) into one of relative dimensions (the column - .threecol .col1 - height unspecified, width 46%).

The natural dimensions of the slideshow, were they unrestricted, would vary fairly widely due to the various amounts of text associated with each slide and the slide images' varying dimensions, both coupled with the column's varying physical width.

The way it is now, things get messed up whenever the actual physical width of col1 become narrower than - say 600px. At only 46% of the window, that can happen fairly easily. The video is the same thing, except it's only 420px wide, so the overall window, and thus col1 must get quite a bit narrower before that becomes a problem.

Here's what I would suggest - change the slideshow to the same width as the video, and increase its height to compensate - 250 seems about right. Change this section of the script as shown:

//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='420px' //set to width of LARGEST image in your slideshow
var slideheight='250px' //set to height of LARGEST image in your slideshow, plus any text description
var slidebgcolor='transparent'

But that will make it off center to the left in wider windows. To fix that, add this to the stylesheet:

#slidedom {
margin: 0 auto;
}

Not perfect, but about the best that you can do under the circumstances.

ddaba

01-01-2012, 08:07 PM

Thanks for your help!
There were so many variables, and I usually don't care about whether anything looks in IE, so this was rather frustrating, especially since I had great difficulty replicating it (one of my testers experienced the problem).
So my issues are not coming from the div and the slideshow, but from the div, slideshow, and video?
The changes make sense, but it's still unreadable in smaller windows.
Would it help if I put the video in a footer or made the side columns fixed? I'm pretty sure the youtube video will be the widest we'll use, but never having done it, I'm not sure.

jscheuer1

01-02-2012, 04:30 PM

Well it looked equally bad to me in Firefox, others. With this new setup slide content in the center can't bleed over into the left or be truncated by it until the window gets quite narrow. At which point the video will too. It's just less noticeable because there's nothing there in the left for it to cover/be covered by.

Anyways, you could instead set no width or height on the slideshow, then it would always fit, but the column would jump as the various amounts of content were switched into and out of it.

Then I thought, what if the script could determine the height needed for the show's tallest slide at any given width and adjust again if the window were resized?

So I rewrote the script a bit. It also no longer needs any of the version 4 tests (document.all, document.layers) it had before. No one uses those browsers today. They cannot render an ordinary page.

I mention that because you can also get rid of this version 4 (Netscape 4) bit of the markup:

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

I made it so it would center the slide content vertically within the height that's calculated, so to maximize that visually balancing effect I would further recommend that the header for the video have its top margin set to 0:

<h2 align="center" style="margin-top:0;">VIDEO OF THE WEEK!</h2>

And I replaced the <br /> tags in the variableslide texts with spaces as, with the width now variable, forced line breaks will at many of the widths look visually odd and arbitrary even if they have a logical reason. Better to let the text be fluid like the layout. Back up a copy of the current ones, just in case you cannot live with these.

Here's the updated script:

<script type="text/javascript">

/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
* modified 1/2012 to adapt to fluid layout widths
***********************************************/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['images/RayTidman.jpg', 'http://www.FanninSentinel.com/features.html', '<p class="posted">Posted Dec. 22, 2011 9:32 p.m.</p><h2>Assisted living facility to come to county</h2><p>Dr. Ray Tidman confirmed that an assisted living facility will be constructed near RiverStone Medical Center. During the Board of Commissioners meeting, Post 1 Commissioner Garnett Webb stated that the long-awaited assisted living facility would be coming to Fannin County “as early as next spring.” Webb said last week he had talked to Henning Construction Co.’s Chris Henning and Tidman about the project and was assured that ground would be broken this spring. Tidman said the partners in the venture are presently working on financing.</p>']

variableslide[1]=['images/TracySummers.jpg', 'http://www.FanninSentinel.com/features.html', '<p class="posted">Posted Dec. 22, 2011 9:32 p.m.</p><h2>Xtreme Teens returns</h2><p>Xtreme Teens—and its coordinator, Tracy Summers—is back. The program, which was terminated Sept. 30, has a new lease on life and a new focus. “They restored funding, but the funding is for alcohol, whereas, in the past, it was for drugs and alcohol,” he said. Read <a href="http://www.fanninsentinel.com/features.html#xtreme">more</a>.</p>']

variableslide[2]=['images/BuddyFinch.jpg', 'http://www.FanninSentinel.com/government.html#McCaysville', '<p class="posted">Posted Dec. 22, 2011 9:32 p.m.</p><h2>McCaysville applies for water loan</h2><p>During the McCaysville City Council meeting Dec. 13, council members approved a loan application to the Georgia Environmental Finance Authority (GEFA) for the water system. “This will be a big help for McCaysville and the outlying communities,” explained Mayor James “Buddy” Finch to Mayor-elect Thomas Seabolt. He added that McCaysville’s water system extends all the way south to Highway 2. Read <a href="http://fanninsentinel.com/government.html#McCaysville">more</a>.</p>']

variableslide[3]=['images/FCSOAwards12-17-11Davenport.jpg', 'http://www.FanninSentinel.com/features.html#FCSO', '<p class="posted">Posted Dec. 22, 2011 9:32 p.m.</p><h2>Sheriff’s Christmas Party includes awards</h2><p>Sheriff Dane Kirby congratulated Deputy Larry Davenport on earning the award for Court Services Officer of the Year. Kirby said Davenport never complains, is always dependable, and is always willing to go the extra mile. The Fannin County Sheriff’s Office awarded staff for their service during its annual Christmas Party Dec. 17 at the Powerhouse. “The Sheriff’s Office voted on these people. They selected their own,” Sheriff Dane Kirby said. Read <a href="http://fanninsentinel.com/features.html#FCSO">more</a>.</p>']

//configure background color of the slideshow
var slidebgcolor='transparent'

//delay between image rotations (in miliseconds)
var slidedelay=9000

////Do not edit pass this line////////////////
var slidewidth='auto'
var slideheight='auto'

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(notimer){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="5" style="float:left; margin:0 10px 0 0">'
//contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="5">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
//if (variableslide[currentslide][3]!="")
//contentcontainer+=variableslide[currentslide][3]

if (document.getElementById)
crossrotateobj.innerHTML=contentcontainer
if(rotateimages.started){
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
}
if(notimer === true){return;}
setTimeout("rotateimages()",slidedelay)
}

if (document.getElementById)
document.write('<table style="border-collapse:collapse;margin:0;padding:0;"><tr><td id="slidedom" '+
'style="margin:0;padding:0;vertical-align: middle;width:'+
slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+';"></td></tr></table>')

if (document.getElementById){
crossrotateobj = document.getElementById("slidedom");
crossrotateobj.style.visibility = 'hidden';
rotateimages.findHeight = function(w){
var h = 0, c = 0;
if(rotateimages.started){crossrotateobj.style.height = 'auto';}
for(var i = 0; i < variableslide.length; ++i){
if(rotateimages.started){
rotateimages(true);
h = Math.max(h, crossrotateobj.offsetHeight);
} else {
(function(i){
variableslide['im' + i] = new Image();
variableslide['im' + i].onload = variableslide['im' + i].onerror = function(){
currentslide = i;
rotateimages(true);
h = Math.max(h, crossrotateobj.offsetHeight);
if(++c === variableslide.length){
crossrotateobj.style.height = h + 'px';
crossrotateobj.style.visibility = 'visible';
rotateimages.started = true;
currentslide = 0;
rotateimages();
}
};
variableslide['im' + i].src = variableslide[i][0];
})(i);
}
}
if(rotateimages.started){crossrotateobj.style.height = h + 'px';}
}
rotateimages.findHeight(crossrotateobj.parentNode.offsetWidth);
onresize = function(){rotateimages.findHeight(crossrotateobj.parentNode.offsetWidth);};
}

</script>