Resolved Content Slider Issue with Flash-Iframes [Archive]

rnmihayden

06-04-2009, 07:27 AM

1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm

3) Describe problem: On Firefox, the page only shows the flash file once. It disappears afterwards. Using the back, forward, or 2 button to navigate back to it comes up as blank. I am using iframes for 4 options. Option 2 is has the flash file embedded. URL is: http://pascolibraries.org/slideshow.html. Firefox version is 3.0.10 The code is beneath.

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />
<link rel="stylesheet" type="text/css" href="cssbuttonstoggler.css" />

<script type="text/javascript" src="featuredcontentglider.js">

/***********************************************
* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script type="text/javascript">

featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "right left", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: false, //Auto rotate contents (true/false)?
autorotateconfig: [6000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

<table>
<tr>
<td width="768px">

<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent">
<iframe src="http://www.wikipedia.com" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" width="768" height="305"></iframe>
</div>

<div class="glidecontent">
<iframe src="http://pascolibraries.org/mbookriver.shtml" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" width="768" height="305"></iframe>
</div>

<div class="glidecontent">
<iframe src="http://cnn.com" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" width="768" height="305"></iframe>
</div>

<div class="glidecontent">
<iframe src="http://huffingtonpost.com" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" width="768" height="305"></iframe>
</div>

</div>

<div id="p-select" class="cssbuttonstoggler">
<a href="#" class="toc"><span>1</span></a> <a href="#" class="toc"><span>2</span></a> <a href="#" class="toc"><span>3</span> <a href="#" class="toc"><span>4</span>
<a href="#" class="prev"><span>Back</span></a> <a href="#" class="next"><span>Foward</span></a>
</div>

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

rnmihayden

06-04-2009, 02:10 PM

by creating a second file http://pascolibraries.org/slideshow.shtml. I have removed the iframes and just used images for the other three files. Now the issue is that once the swf file loads, it stays on top of all other content when I scroll in IE & FF. Also, whenever the page loads in FF, the swf files loads on the right side of the screen even though it's the third option, not the first.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Pasco County Library Cooperative</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<META name="description" content="The Quick Categories page is separated by Adult, Teen, and Kids.">

<META name="keywords" content="Pasco county, pasco county library system, pasco county library cooperative, pasco county library co-op, history, animals, subject, subject search, world history, babysitting, biography, humor, auto repair, en espanol, movies, board books, arts, crafts, comics, drawing, cooking, dating, relationships, anime, fairy tales, men's health, women's health, sports, self help, vampires, jokes, spongebob, technology, magic treehouse, world history, homework help, travel, test prep, sports">

<script type="text/javascript" src="javascript/plug_flash.js"></script>

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />
<link rel="stylesheet" type="text/css" href="cssbuttonstoggler.css" />

<script type="text/javascript" src="featuredcontentglider.js">

/***********************************************
* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script type="text/javascript">

featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "right left", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: false, //Auto rotate contents (true/false)?
autorotateconfig: [6000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>





<link rel="shortcut icon" href="/images/ala3.ico">

<script type="text/javascript" src="flashobject.js"></script>

<link rel="stylesheet" type="text/css" href="css/shadowbox.css">

</head>

<table>
<tr>
<td width="768px">

<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">
<img src="egovtblog.jpg" border="0" alt="blog">
</td>
</tr>
</table>
</div>

<div class="glidecontent">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">
<img src="images\abh2.jpg" border="0" alt="blog">
</td>
</tr>
</table>
</div>

<div class="glidecontent">
<table>
<tr>
<td height="300" background="images/bckgrnd_wg.png" bgcolor="#FFFFFF">
<div align="center">
<script type="text/javascript">
var flashVars="";
flashVars+="xmlfeed=180k.xml"; // Path to xml file or PHP script
flashVars+="&lightBox=false"; // Path to xml file or PHP script
flashVars+="&myBckgrnd=0xFFFFFF"; // Image Reflection Background (for realistic reflection)
flashVars+="&superGlass=false"; // Transparent reflection switch (for specific background): true or false
flashVars+="&myBckGrndImage=images/bckgrnd_wg.png"; // Path to load specific image background
flashVars+="&myColor=0x3333CC"; // Image border color: Hex number
flashVars+="&myTextColor=0xFFFFFF"; // Tooltip text color: Hex number
flashVars+="&mySubTextColor=0x000000"; // Description text color: Hex number
flashVars+="&myArrowColor=0xFFFFFF"; // Scrollbar arrow color: Hex number
flashVars+="&myScrollColor=0x3333CC"; // Scrollbar color: Hex number
flashVars+="&myLoadBarColor=0x3333CC"; // Load bar color: Hex number
flashVars+="&myAlpha=0.0"; // Image border transparency ratio (0 (invisible) to 1 (max opacity))
flashVars+="&Border=square"; // Image border aspect "rounded" or "square"
flashVars+="&Tooltip=true"; // Tooltip switch
flashVars+="&descText=true"; // Description text under front image
flashVars+="&Scrollbar=permanent"; // Scrollbar behavior ("true" = autoHidden, "permanent" = always on, "false" = no scrollbar)
flashVars+="&myStep=80"; // Images pitch
flashVars+="&myOffset=40"; // Front image pitch
flashVars+="&scaleDown=75"; // Inactive images Scale in %
flashVars+="&scaleUp=100"; // Active images Scale in %
flashVars+="&MaskScene=false"; // Scene side mask switch
flashVars+="&shownPicture=7"; // Image shown at start
flashVars+="&U_Flow=true"; // U Flow switch: Linear run or U run for images
flashVars+="&descText=true"; // Description text below front image switch: true or false
flashVars+="&scrollbar_Y=280"; // Y coord of scrollbar: int number
flashVars+="&rollOverAnim=false"; // Rollover navigation switch: true or false
flashVars+="&easeTime=0.6"; // Ease transition time (s): Float number
flashVars+="&clips2move=8"; // Number of clips to animate: Int number
flashVars+="&crossdomain=http://static.flickr.com/crossdomain.xml"; // Load specific crossdomain.xml to load image from other domain

RunFlash("pictureflow-H180.swf", "768", "300", "#ffffff", "window", "PictureFlow", flashVars);
</script>
<noscript>
<span class="Style1">You should have Javascript active to see this page</span>
</noscript>
</div></td>
</tr>
</table>
</div>

<div class="glidecontent">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">
<img src="egovtblog.jpg" border="0" alt="blog">
</td>
</tr>
</table>
</div>

</div>

<div id="p-select" class="cssbuttonstoggler">
<a href="#" class="toc"><span>1</span></a> <a href="#" class="toc"><span>2</span></a> <a href="#" class="toc"><span>3</span> <a href="#" class="toc"><span>4</span>
<a href="#" class="prev"><span>Back</span></a> <a href="#" class="next"><span>Foward</span></a>
</div>

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