Featured Content Glider problems

[getjunk5]

1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Describe problem: content fails on reload.
If you go to the link below, and click MORE , the content loads as expected. However once a user hits reload or returns to the website, all the contents are shown at once.

http://getjunk5.001webs.com/1.html

The file being loaded :
http://getjunk5.001webs.com/1a.html

( if you go to the 2nd link, it loads as expected )



Thank you for your help in advance,
Brian.

[jscheuer1]

The object tag here is a poor choice because, although standard, support for it isn't all that good yet cross browser. I'd suggest iframe for this. Also, display is not a good property to use when hiding and revealing dynamic content. It often (as in this case) prevents scripts from being able to access in a meaningful way properties of the content that are required for proper functioning.

So, I'd recommend changing this:

<div id="A" style="display:none;"><br><br>

<object width=650 height=400  data="1a.html "></object>

</div>

to:

<div id="A" style="visibility:hidden;"><br><br>

<iframe src="1a.html" width="650" height="400" scrolling="auto" frameborder="0"></iframe>
</div>

And changing the code of your hide_show.js file from:

function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}

to:

function HideContent(d) {
document.getElementById(d).style.visibility = "hidden";
}
function ShowContent(d) {
document.getElementById(d).style.visibility = "visible";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.visibility == "hidden") { document.getElementById(d).style.visibility = "visible"; }
else { document.getElementById(d).style.visibility = "hidden"; }
}

[getjunk5]

Thank you for the quick response. I have made the corrections, and they work very well. Once again thank you for your exceptional advice.
Brian.

** edit **

I have noticed a slight issue with the new code. Would it be possible if the hidden content to not take up any room in the page until "MORE" is clicked on? My purpose is to save space, and only show things when/if needed. Thank you in advance,
Brian.

[jscheuer1]

OK, well what you want to do is position it outside the flow of the page, that would be absolute. And, since you aren't using the HideContent or ShowContent functions, we can get rid of them. So we would be left with (modified and formatted to my current style of formatting):

function ReverseDisplay(d){
	d = document.getElementById(d).style;
	if(d.visibility === 'hidden'){
		d.visibility = 'visible';
		d.position = 'static';
	}
	else{
		d.visibility = 'hidden';
		d.position = 'absolute';
	}
}

All that remains is to add the absolute position to the element in the markup:

<div id="A" style="visibility:hidden;position:absolute;"><br><br>

<iframe src="1a.html" width="650" height="400" scrolling="auto" frameborder="0"></iframe>
</div>

[getjunk5]

Thanks, the fix worked perfectly.