Content Slider Issue with Flash-Iframes

**rnmihayden** · 06-04-2009, 07:27 AM

1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.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.

Code:

<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:

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>

<!--#include virtual="/include/inc_css_main2.txt" -->

<!--#include virtual="/include/inc_header_js.txt" -->

<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>

**rnmihayden** · 06-09-2009, 08:37 PM

Only a one word change, in flash you have the option of wmode equaling window, transparent, or opaque. Choose transparent and this problem goes away in FF.

Thread: Content Slider Issue with Flash-Iframes

Thread Tools

Search Thread

Content Slider Issue with Flash-Iframes

Ok, made a little progress

Resolved!!!

Bookmarks

Bookmarks

Posting Permissions