Urgent Help!!

**ak7861** · 10-05-2006, 02:23 AM

Hi,

Hopefully someone can help me here.

Without saying too much, I have a slide show script thats written in Javascript and some DHTML. I got it from a site:

Code:

<style type="text/css">
.slide {
   position: absolute;
   visibility : hidden;
}
#slide0 {
   visibility : visible;
}
 </style>
<script type="text/javascript">
//Browser check
var DHTML = (document.getElementById || document.all || document.layers);
if ( !DHTML ) alert('Your browser is not capable of displaying DHTML');
function getObj(name) {
	if (document.getElementById) {
		this.style = document.getElementById(name).style;
	} else
	if (document.all) {
		this.style = document.all[name].style;
	} else
	if (document.layers) {
		this.style = document.layers[name];
	}
}

//Switch elements visible or hidden
function visib(objName, flag) {
	x = new getObj(objName);
	x.style.visibility = (flag) ? 'visible' : 'hidden';
}

//Switch next element visible and previous hidden.
var curImg = 0; // index of the array entry
var lastImg = 0;

function changeSlide ( change ) {
	if (!DHTML) return;
	curImg += change;
	if ( curImg < 0 ) curImg = slides.length-1;
	else
		if ( curImg >= slides.length ) curImg = 0;

	visib(slides[lastImg], false);
	visib(slides[curImg], true);
	lastImg = curImg;
}
//Array containing all element names (== pictures)
slides = new Array(
	'slide0',
	'slide1',
	'slide2');

Then in the body I have it like such:

<a href="javascript:changeSlide(-1);" class="ftm_next">Previous</a> | <a href="javascript:changeSlide(1)" class="ftm_next">Next</a>
blah blah
blah blah blah
blah blah blah blah

Everything is fine, except for a few issues:

1. I want to make it look like MSN, and have it automatically slide instead of just using the next and forward buttons.
2. I want the auto slider function to stop if the person uses the previous/next link.
3. If its possible, I would like a fade in and fade out too.

The slide show will contain images in a table and some news text, pretty much like MSN.

Thanks in advance to all those JS gurus!

AK7861

**tech_support** · 10-05-2006, 07:35 AM

Like this?

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Previous | Next blah blah blah b</title>

<style type="text/css">
.slide {
   position: absolute;
   visibility : hidden;
}
#slide0 {
   visibility : visible;
}
 </style>
<script type="text/javascript">
//Browser check
var DHTML = (document.getElementById || document.all || document.layers);
if ( !DHTML ) alert('Your browser is not capable of displaying DHTML');
function getObj(name) {
	if (document.getElementById) {
		this.style = document.getElementById(name).style;
	} else
	if (document.all) {
		this.style = document.all[name].style;
	} else
	if (document.layers) {
		this.style = document.layers[name];
	}
}

//Switch elements visible or hidden
function visib(objName, flag) {
	x = new getObj(objName);
	x.style.visibility = (flag) ? 'visible' : 'hidden';
}

//Switch next element visible and previous hidden.
var curImg = 0; // index of the array entry
var lastImg = 0;

function changeSlide ( change ) {
	if (!DHTML) return;
	curImg += change;
	if ( curImg < 0 ) curImg = slides.length-1;
	else
		if ( curImg >= slides.length ) curImg = 0;

	visib(slides[lastImg], false);
	visib(slides[curImg], true);
	lastImg = curImg;
}

var sec = 1 //Auto-Slide Intervals
var stopped = 0
var auto = setInterval("changeSlide(1)",sec*1000)

function stopSlide()	{

	if (stopped==0)	{
	stopped==1
	clearInterval(auto)
	}
}
//Array containing all element names (== pictures)
slides = new Array(
	'slide0',
	'slide1',
	'slide2')
</script>
</head>

<body>
<a href="javascript:stopSlide();changeSlide(-1);" class="ftm_next">Previous</a>&nbsp;|&nbsp;<a href="javascript:stopSlide();changeSlide(1)" class="ftm_next">Next</a>
<span id="slide0" class="slide" style="width: 380px;">blah blah</span>
<span id="slide1" class="slide" style="width: 380px;">blah blah blah</span>
<span id="slide2" class="slide" style="width: 380px;">blah blah blah blah</span>
</body>

</html>

(The changes are in bold)

Sorry, will do fade in later.

Or do you want it to actually slide

Edit: Compatibility Issue with Internet Explorer.

**ak7861** · 10-05-2006, 07:57 AM

Thanks a bunch!! But it doesn't work for me on mozilla. Any idea?

**ak7861** · 10-05-2006, 07:59 AM

Oh, i got it to work for mozilla now. Just had to add a loder on the body tag. Thanks once again!!

Looking forward to the fade in and fade out!

**djr33** · 10-05-2006, 10:50 AM

NOTE: I hate off topic titles. "Urgent help" has nothing to do with your question. If you title it even something like the generic "help with script", it just makes it a bit clearer. Something like "help with slide show fading" would be great.

**ak7861** · 10-05-2006, 06:37 PM

No problem. Will try to remember that next time.

One more thing. Is there any way to get rid of that position: absolute value in the css and still get the same view for the slide show? Because its conflicting with my other css scripts.

Thanks.

**djr33** · 10-06-2006, 02:10 AM

Hmm... not sure. There must be a way to modify it. But not sure exactly how.
just getting rid of it is wrong because it does something. Either replacing it or modifying it would be best. I'd suggest modifying the location so it doesn't conflict.
Link to your page or post the source. What is the "conflict" with the other css?

**ak7861** · 10-07-2006, 02:31 AM

Actually it's not conflicting with the css, but the problem is since its kept "absolute" the tables surrounding it appear empty, until i add height. I guess if we change visible to hide, and hidden to block, it would solve the problem. Anyone can help me with that?