JavaScript - Change Position: Fixed To Position:absolute

I'm new to javascript and am not sure why this works in firefox and not chrome.
I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically.

if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome

Code:

<script type="text/javascript" >
	
	
window.onscroll = function() 
{
	if( window.XMLHttpRequest ) { 
		
			
			var x = 0 -document.documentElement.scrollTop;
			var toP = String(x);
			var toPP = toP + "px";
			
			document.getElementById('fire').style.position = 'fixed'; 
			document.getElementById('fire').style.top = toPP;
				
	}
}
	</script>

I have created a lightbox for user display on my site. The lightbox is triggered by an onclick link. Works great but I would like to make one switch to it.

I would like the lightbox to appear position:fixed; top:10px; onclick. Then if the user scrolls I would like the lightbox to appear position:absolute; top:10px;

You can see an example of this here on ESPN's website http://search.espn.go.com/first-take/videos/6. If you click any video it appears position fixed onclick but then position absolute on scroll. This is what I have so far. It shows it all position fixed onclick as I desire, but stays that way on scroll.

PHP Code:

<a href = "javascript:void(0)" 
    onclick = "document.getElementById('light<?php echo $count;?>').style.display='block';
    document.getElementById('light<?php echo $count;?>').style.position = 'fixed';
    document.getElementById('light<?php echo $count;?>').style.top = '10px';
    document.getElementById('fade<?php echo $count;?>').style.display='block'">
    
    ... [link] ...

</a>

PHP Code:

<div id="light<?php echo $count;?>" class="log-lightbox-content-wrapper">
    ... [lightbox content] ...
</div>

PHP Code:

<style>
.log-lightbox-content-wrapper {display: none; position:absolute; top: -45px; left: 50%; margin-left: -456px; width: 900px; padding: 16px;background-color: white;z-index:1002; overflow: auto; border-color:#666; border-radius:5px; border-style:solid; border-width:5px; min-height:600px; height: auto !important; height:600px;}
</style> 


Progress: http://instride.info/admin - Click tab that says log - Then click any log post to view light box

Hi,
Im having a weird issue...
I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable...

And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float

[it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...]

Code:

<script language="javascript" type="text/javascript">
        var floating_header = function() {

            this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];

            this.getXY = function(o) {
                var y = 0;
                var x = 0;
                while (o != null) {
                    y += o.offsetTop;
                    x += o.offsetLeft;
                    o = o.offsetParent;
                }
                return { "x": x, "y": y };
            }

            this.setheader = function() {
                if (window.header == undefined) {
                    floating_header();
                }
                var screenpos = this.scrollTop;
                var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
                if (screenpos > window.theady - 100 && screenpos < theady_max) {
                    window.header.style.position = 'absolute';
                    window.header.style.top = this.offsetTop;
                    window.header.style.display = 'block';
                    window.headerOffsetTop = this.offsetTop;
                }
                else {
                    if (screenpos != undefined && window.header != undefined) {
                        window.header.style.position = '';
                        window.header.style.top = '';
                        window.headerOffsetTop = undefined;
                        window.header = undefined;
                    }
                    else {
                        if (window.headerOffsetTop) {
                            window.header.style.position = 'absolute';
                            window.header.style.top = window.headerOffsetTop;
                            window.header.style.display = 'block';
                        }
                    }
                }
            }
            document.getElementById("divcn").onscroll = this.setheader;
            this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
            this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
        };
        floating_header();        
    </script>

I'm trying to find a script that will scroll text past fixed position sandbag divs.

I want the text to flow around an image as it scrolls.

It's easy to do the wrap around the image part. I can't seem to find anything that will continue wrapping the content of your site around the fixed background as you scroll though.

Did that make sense?

Hello everyone, I just stumbled across this forum and thought maybe someone here could help me with a few coding alterations.

I would like to position the rss feed selection fields on this feed output so I can scroll the feed with the selection fields remaining stationary.

Code:

<link rel="icon" type="image/png" href="rss_include/feed-icon-red.png">
<style language='text/css'>
  @import url('rss_include/style.css');
</style>

<script language="javascript">
    var XMLHttpRequestObject = false;
	var img = new Image();
	img.src = "rss_include/loading.gif";
    
    if ( window.XMLHttpRequest )
        XMLHttpRequestObject = new XMLHttpRequest();
    else if (window.ActiveXObject)
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

	function changeOptions()
	{
		LoadFeed();
	}
	
	function LoadFeed(value, initial)
	{		
        if ( XMLHttpRequestObject )
        {
            var dsource = "rss_include/ajax.php?loadfeed"; 

			if (value)
				dsource += "=" + value;
			else
			{
				var val = document.getElementById("rss_feed").value;
				if ( val == "" )
					document.getElementById("rss_feed").selectedIndex += 1;

				dsource += "=" + document.getElementById("rss_feed").value;
			}

			dsource += "&fulltext=" + document.getElementById("showtext").checked;
			dsource += "&showimages=" + document.getElementById("showimages").checked;
			
            XMLHttpRequestObject.open("GET",dsource);
            XMLHttpRequestObject.onreadystatechange = function()
            {
				if ( XMLHttpRequestObject.readyState != 4 )
				{
					document.getElementById("rss_div").innerHTML = "<center><img class=\"loading\" src=\"" + img.src + "\"></center>";	
				}
				
                if ( XMLHttpRequestObject.readyState == 4 && 
                        XMLHttpRequestObject.status == 200 )
                {
					document.getElementById("rss_div").innerHTML = XMLHttpRequestObject.responseText;
                }
            }
            XMLHttpRequestObject.send(null);
        }		
	}
</script>

<?php

require_once("rss_include/config.php");

function LoadFile($xml_file)
{
	$xml = null;
	if ( !file_exists($xml_file) || !($xml = simplexml_load_file($xml_file)) )
	{
		echo '</select>';
		echo "Error opening XML feeds file: $xml_file<br>";
		return;
	}
	
	return $xml;
}

function ShowFeedOptions($xml_file)
{	
	echo '<select id="rss_feed" onChange="LoadFeed(this.value)" title="GuyWMustang.com RSS Reader">';
	
	$xml = LoadFile($xml_file);
	if ( $xml == null )
		return;
	
	$url = array();
	foreach($xml->feeds->category as $category)
	{
		echo "<option value=\"\">" . $category['name'] . "</option>";
		
		foreach($category->feed as $feed)
		{
			if ( $feed['name'] != "" )
			{
				// Add a spacing to the feeds
				$name = "&nbsp;&nbsp;&nbsp;&nbsp;" . $feed['name'];
				$url = str_replace("&", "%26", $feed['url']);
				$url = str_replace("http://", "", htmlspecialchars($url));
				echo "<option value=\"$url\">" . $name . "</option>";
			}
		}
	}
	
	echo '</select>';
	
	$options = array();
	$rss = $xml->options[0];

	if ( strcasecmp($rss['fulltext'],"true") == 0 )
		array_push($options, "true");
	else
		array_push($options, "false");
		
	if ( strcasecmp($rss['images'],"true") == 0 )
		array_push($options, "true");
	else
		array_push($options, "false");

	return $options;
}

function SetOptions($options)
{
	if ( sizeOf($options) == 2 )
	{
		echo "<script>document.getElementById(\"showtext\").checked = " . $options[0] . ";</script>";
		echo "<script>document.getElementById(\"showimages\").checked = " . $options[1] . ";</script>";
	}
}

if ( isset($_GET['links']) )
{
	$xml = LoadFile($xml_file);
	if ( $xml == null )
		return;

	// end the link editing
	return;
}

?>
<div class="container" id="container_div">
	<a name="top"></a>
		<div class="header_div">
			<div style="display:run-in;float:left;">
			<font class="graytext">RSS Feed:</font>
			<?php $options = ShowFeedOptions($feeds_xml); ?>
			
			<input type="checkbox" id="showtext" onChange="changeOptions(this)" checked><font class="graytext">Show Full Article Text</font>
			<input type="checkbox" id="showimages" onChange="changeOptions(this)" checked><font class="graytext">Show Images</font>
			</div>
			
			<?php SetOptions($options); ?>
		</div>
	<div class="rss" id="rss_div">
		<script>LoadFeed(document.getElementById('rss_feed').value, true);</script>
	</div>
	<!-- <p style="padding:0px;margin-right:2px;margin:0px;" align="center"><a class="top" href="#top">Top</a></p> -->
</div>

<-- CSS BELOW -->


Code:

body
{
	overflow: auto;
	font-family: arial;
}
div.header_div
{
	position: relative;
	/*background-color: #EFEFEF;*/
	width: 100%;
	overflow: auto;
	margin: auto;
}
div.container
{
	/*border: 1px solid black;
	background-color: #EFEFEF;*/
	position: relative;
	margin: auto;
	display: block;
	overflow: auto;
	/* SPECIFY HEIGHT & WIDTH AS DESIRED */
	height: 90%;
	width: 80%;
}
div.rss
{
	width: 99%;
	margin: 2px;
	background-color: tan;
	position: relative;
	/*border: 1px solid black;*/
}
img.loading
{
	position: relative;
	margin-top: 50px;
}
a.rss_link,a.rss_link:active
{
	display: inline;
	color: blue;
}
a.rss_link:hover
{
	color: #BBBBFF;
}
a.rss_link:visited
{
	color: black;
}
a.top,a.top:active {
	text-decoration: none;
	font-size: 10pt;
	display: inline;
	color: black;
}
a.top:hover {
	text-decoration: underline;
	color: brown;
	display: inline;
}
font.graytext
{
	font-size: 10pt;
	color: #444444;
}
font.rss_title
{
	font-size: 12pt;
	font-weight: bold;
	text-decoration: underline;
}
font.rss_date
{
	font-size: 9pt;
	font-weight: normal;
	color: black;
	display: block;
}
font.rss_description
{
	font-size: 12pt;
	color: blue;
}
select
{
	color: black;
	font-size: 10pt;
	background-color: #EAEAEA;
}

any help would be greatly appreciated.....thanks