PDA

View Full Version : Help with BookFlip Slideshow



AnGeLiC
04-17-2006, 03:06 PM
Script Name: BookFlip Slideshow
http://www.dynamicdrive.com/dynamicindex14/bookflip.htm


If someone could help me center this on the page, I would appreciate it. =) I've tried many things and still the slideshow will not center on the website. Thank you for your help. =)

Twey
04-17-2006, 03:10 PM
Another one who hasn't read the stickies.

AnGeLiC
04-17-2006, 03:15 PM
It's there? =/

Twey
04-17-2006, 03:57 PM
Of course, sorry. There was a flood of posts in which people hadn't read the stickies. Setting margin-left to 40% on the Book element is a fairly good approximation.

AnGeLiC
04-17-2006, 04:44 PM
Where exactly could I put that? I'm not real sure I see what you mean..lol.

Twey
04-17-2006, 05:05 PM
In your stylesheet, use:
#Book { margin-left: 40%; }

jscheuer1
04-17-2006, 05:06 PM
If you are using a DOCTYPE* (most HTML editors do so by default), this type of thing works well:


<div id="Book" style="position:relative;width:404px;height:152px;margin:0 auto;">
<img src="placeholder.gif" width="404" height="152" />
</div>

The above uses the existing id="Book" division's style to center the slideshow. Notice that the width and height properties of the division are set to the width and height attributes of the placeholder image. These must be calculated using the formula listed on the demo page:


placeholder width: 2*book image width+4

placeholder height: book image height+2

*EXAMPLE DOCTYPE:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

It must be the very first thing on your page before the (also shown) opening <html> or <HTML> tag. As I said, most HTML editors put one of these in automatically.

AnGeLiC
04-17-2006, 05:30 PM
I'm still not quite sure. I apologize. I'm conversing between you guys and the guy actually doing it..lol. If there's anyway I could send you the code we have, so you can show us how to center it? It would be greatly appreciated. =)

jscheuer1
04-17-2006, 05:56 PM
I'd suggest having 'the guy' log on here and look at the posts. You can give him this address:

http://www.dynamicdrive.com/forums/showthread.php?t=9027
(http://www.dynamicdrive.com/forums/showthread.php?t=9027)

Or you could post a link to your page.

Or as a last resort, post the code, put code tags:




code goes here



around your code in messages here so that it looks like so:


code goes here

AnGeLiC
04-17-2006, 06:12 PM
"The guy" is John, btw. :P

And here's the link: http://www.chitchatterschat.com/shemmy/shemmy1.html

jscheuer1
04-17-2006, 07:01 PM
The page is a bit of a mess but, I'm not inclined to go into all of the potential and actual problems it has. Your slideshow would have been centered already if the instructions on the demo page for the dimensions of the placeholder image had been followed. I admit that they aren't the clearest, but I didn't write them and they do state that the width should be 2* +4, you have have 1* +4 and that the height should be +2, you have +4. Anyways, use this:


<div id="Book" style="position:relative">
<img src="http://www.chitchatterschat.com/shemmy/placeholder.gif" width="604" height="227"></div>

BTW, only the one at the end of the script, after the closing </script> tag means anything. The one here:


/***********************************************
* Book Flip slideshow script- Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
Create a div with transparent place holder in your html
<div id="Book" style="position:relative">
<img src="placeholder.gif" width="304" height="229">
</div>
width = 2*book image width +4 height = book image height+2

Insert onload in body tag
<body onload="ImageBook()">
*********************************************************/

is just a comment - instructions for folks using the script and its markup.

AnGeLiC
04-17-2006, 07:18 PM
That fixed it! =) Thank you very much.