ultimate fade-in show align within text

[johnner69]

1) Script Title: Ultimate Fade-in slideshow (v 1.51)

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

3) Describe problem:
I would like to know how to position the slideshow so that is acts like a right aligned image would (with body text wrapping around it)? I am still learning css and the site is done with css and divs, i just need a little direction to get it right?

thanks

john

[jscheuer1]

Wrap the slide show call in the body with a div tag and float it right. However, float right acts a little differently than align=right. So, although some browsers may be fine doing it that way with no other considerations, it is best to:

• Set the dimensions of the wrapping division to those of the slide show.
• Have it come after the text that you want to wrap around it in the source code.
• Have an element beneath all of that set to clear:right.

Example:

Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.
Lot's of text here to wrap around the show.

<div style="width:140px;height:225px;float:right;">
<script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
</script>
</div>
<div style="clear:right;"></div>

[johnner69]

hi John Thanks for your reply and suggestion...

I tried that and it seems to still not work.

	<div id="maintextarea">
		&nbsp;<br>
		 Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		Lot's of text here to wrap around the show.
		<div style="width:379px;height:354px;float:right;">
<script type="text/javascript">

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 379, 354, 3, 3700, 0, "R")

</script>
</div>
<div style="clear:right;"></div>

now i wonder if could be my maintext area div causing it not to work right. I have this (and need it)

#maintextarea {
	position:absolute;
	left:0px;
	top:265px;
	width:900px;
	z-index:0;
}

thanks

john

[jscheuer1]

You're right (no pun intended). I was rushing, so didn't test. I should have. Part of the advice I gave you applies to float:left and not to float right as we are doing here. Please accept my apologies. The part where I was in error was in the position of the right float in the code:

Have it come after the text that you want to wrap around it in the source code.

That was wrong. With a right float, it should come before. Here is my working code:

<div style="width:250px;border:1px solid #000;">
<div style="width:140px;height:225px;float:right;padding:5px;">
<script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
</script>
</div>
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 
Lot's of text here to wrap around the show. 

<div style="clear:right;"></div>
</div>

Which you can also see if you 'view source' this demo:

http://home.comcast.net/~jscheuer1/s...loat_right.htm

Again, please accept my apologies.

[johnner69]

fantastic thanks. no need to apologise i appreciate your help!

it works. now i just have to add a bit more padding around the image and figure out how to center the images in the window... off to search the forums..

thanks again

john

[jscheuer1]

I'm not sure what you mean about centering, but if you mean the images and the wrapped text, just add margin:0 auto; here (requires a valid URL DOCTYPE as used on the demo I linked to in my previous post in some browsers - notably IE):

<div style="width:250px;border:1px solid #000;margin:0 auto;">
<div style="width:140px;height:225px;float:right;padding:5px;">
<script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
</script>
</div>
Lot's of text here to wrap around the show. 
Lot's of text here to  . . .

The padding for the images - the show actually, is controlled by the style (from the above code block):

<div style="width:140px;height:225px;float:right;padding:5px;">

If, on the other hand, you mean that you have images of various sizes and you want to center them within the display area of the show, that would require either a modification of the script, or the use of another script:

http://www.dynamicdrive.com/dynamici...army/index.htm

, the 'Swiss Army Slide Show' script, which already incorporates that ability, and that can be made to look like Ultimate Fade via its configuration.

[johnner69]

thanks!!