JavaScript - Need Image(s) To Appear Until Div Is Scrolled To The Bottom

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

I have been at this for days now.

THe problem is these scripts dont work well accross all browsers.

I like how this script works but it opens a full window. And wont let me add table.
http://www.dynamicdrive.com/dynamicindex4/logo_dev.htm

But I can not get it to work with a table. The links I want to open a new window without scrolling, sizeable and toolbar.

<table border="0" align="right" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
<a href="unsaved:///Contact Us" onClick="MyWindow=window.open('https://domain.com/contactus.html"><img src="https://domain.com/images.gif" alt="Contact Us" border="0"></a>
</td>
</tr>
<tr>

<td>
<center>
<font face="Arial" size="3" color="#0000FF">call US</font>
</a>
</center>
</td>
</tr>
<tr>
<td>
<center></a>or<a href="mailto:sales@domain.com"> Email Us</a>
</center>
</td>
</tr>

</table>


Please help!

trying to find a example of when you hover over a image, text appears on the bottom

so it could be a picture of a dog, whne you put your mouse over it, text will show in the picture (ie* transparent background for text so it's readable)


anywhre where I can find a example of this????

Hi there!
I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image.

Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up.

So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position.

Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen.

Here is an example: http://synaxis.pcriot.com/

When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there.
And this does happen on every browser that I have tested, Firefox, IE, and Chrome.

So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful.

Thank You



Here is a link to the original code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

And modified code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

The modified code is at the very bottom of the script.

Original Code:
Code:

/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Modified Code

Code:

/** 
* @private 
*/
var removeElement = function(id) {
	var Node = document.getElementById(id);
	Node.parentNode.removeChild(Node);
}

/** 
* @private 
*/
var getDocHeight = function() {
	var db = document.body;
	var ddE = document.documentElement;
    return Math.max(
        db.scrollHeight, db.offsetHeight, db.clientHeight, 
        ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight
    );
}
/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Hi all,

I'd like to put all my js files at bottom, before the </body>, for Speeding Up my Site.

I moved this type of code:
Code:

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

from head to bottom, before the end tag of body.
But it doesn't work. Why? Is it possible?

Furthermore Validator W3C passed these pages.

Thank you very much