PDA

View Full Version : 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:



<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>&nbsp;|&nbsp;<a href="javascript: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>

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?



<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?

djr33
10-07-2006, 09:03 AM
Sorry, but this isn't my area. Perhaps someone else will be able to.

tech_support
10-09-2006, 03:30 AM
ak7861 says (via PM) that this doesn't work in Internet Explorer. Any clues?

tech_support
10-09-2006, 03:43 AM
I think I got it to work now. Can anyone else try? (It seemed to work on my Internet Explorer 7 RC1)

ak7861
10-09-2006, 05:08 AM
thanks!!! working perfect now..

tech_support
10-09-2006, 05:10 AM
Sure.

djr33
10-09-2006, 06:30 AM
Please don't send PMs to individuals. It just floods our inboxes. We do read the thread, and will help if we can. All sending PMs will do is slow it down because not everyone gets the info. Just post here.

tech_support
10-09-2006, 06:32 AM
So true. PM's every minute.

Every minute on my e-mail box:


Dear tech_support,

You have received a new private message at Dynamic Drive Forums from ak7861. Please click here to log in and read it:
http://www.dynamicdrive.com/forums/private.php

All the best,
Dynamic Drive Forums

djr33
10-09-2006, 06:35 AM
I have that feature turned off.
I also check my PMs AFTER I read through the posts relevant to me.

tech_support
10-09-2006, 07:01 AM
LOL. Now where's my OFF button?

ak7861
10-12-2006, 08:15 PM
Anyone for the fade affect?

tech_support
10-14-2006, 05:18 AM
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);
fadeIn(slides[curImg],0)
lastImg = curImg;
}

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

function stopSlide() {

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

function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
</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>