PDA

View Full Version : IFrame Scroller with fixed position



Khoji
08-06-2007, 01:06 PM
1) Script Title: IFrame Scroller

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/iframe-scroller.htm

3) Doctype: 4.01 strict

4) Describe problem:

I need to used the IFrame scroller with a fixed position. To achieve this I'm packing it in a wrapper DIV with the following settings:


div.newsTickerWrapper {
/* background-color:white; */
margin: auto;
display: block;
position: fixed;
bottom: 23px;
}

div.newsTickerHead {
background-color:blue;
}

div.newsTickerHead #tickerText {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-weight:bold;
color: white;
font-size: 9px;
text-align:center;

}

<.....snip.....>


<div class="newsTickerWrapper">

<div class="newsTickerHead">
<p id="tickerText">
Today's Hot News
</p></div>

<script type="text/javascript">

/***********************************************
* IFRAME Scroller script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//specify path to your external page:
var iframesrc="external.htm"

//You may change most attributes of iframe tag below, such as width and height:
document.write('<iframe id="datamain" src="'+iframesrc+'" width="100%" height="80px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>')

</script>

</div>

This works fine in FireFox and other real browsers. In Internet Explorer (so far I'm only testing in IE7), however, the IFrame becomes invisible as soon as the position attribute is changed to fixed. At first I thought this might be because of IE's funky handling of z-index but this doesn't appear to be the case, I can't switch it on with z-index in any combination. If I switch off the fixed position attribute in IE the IFrame scroller immediately becomes visible again.

Any suggestions? :confused:

Khoji
08-06-2007, 01:16 PM
Notes:

The effect is as though the wrapper div had been set to "display:none;" -- header text in the newsTickerHead div is visible but it is shrunk to the width of the text, as though the IFrame wasn't there at all.

I disabled the background color of the wrapper to make sure that it wasn't just covering the IFrame.

jscheuer1
08-06-2007, 01:49 PM
Fixed positioning is new to IE 7. They didn't even have it in IE 6. In my limited experience with it in IE 7, it does tend to act unpredictably when used in involved markup like you are talking about. To troubleshoot it, a link to your problem page would be a big help. But, there may be no way. You may need to go to another type of scroller and/or use absolute positioning and javascript to 'float' it around the spot that you want, rather than fix it there for IE 7. For IE 6, some alternative to fixed positioning is required.

Khoji
08-06-2007, 02:15 PM
Hi John,

Thanks! In the meantime I figured it out -- the problem was that Internet Exploder requires an absolute width for the IFrame, otherwise it refuses to display it/ignores it.

I know about the problems with fixed positioning in earlier versions of Exploder -- I'm going to use comments that switch to alternative css files with dumb versions of the layout for everything prior to Exploder 7. I'm sick and tired of wasting countless hours on fixing things for Microsoft's broken browsers.