Swiss Army Slideshow: how to modify alignment

[Yiren]

1) Script Title: Swiss Army Slideshow

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

3) Describe problem: I would like to use the show #1 but make the description on the same line as the control buttons:

Image
description buttons

Someone has posted a similar questions (same layout but with fewer buttons) before and I tried to use the modified code and I could not get the result I want. Can anyone help? Any help is greatly appreciated!

Yiren

desperately late for deadline

[jscheuer1]

Sorry about the deadline, not really my problem though. Anyways, when I first wrote this script, I didn't include as many style hooks in it as I now believe that I should have. There are a number of other things I would like to add/fix/change before I release an official update.

However, I have just recently completed a version that has all (or at least most) of the additional style hooks that I think it should have. These new hooks allow it to be styled just about any way one might like.

Here is a demo using those hooks to get the layout I think you are describing:

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

You may use your browser's view source to see the code.

The new script that includes these hooks is here:

http://home.comcast.net/~jscheuer1/side/files/swiss.js

Right click on the link and choose, 'save' or 'save as' to get it.

Using the new style hooks available in the script, virtually any arrangement of the various elements is possible. Here is a list of the hooks:

Style Hooks:

#outer$ - outer division containing the show images.
#master$ - division directly nested in #outer$, contains the two divisions that hold the tables that hold the images.
#canvas$_0 - one of the two divisions that holds a table that holds the images.
#canvas$_1 - the other of the two divisions that holds a table that holds the images.
#desc$ - outer division containing the descriptions (holds the description prefix text, if used, and the below description span).
#imgdsc$ - span that holds the descriptions.
#counter$ - outer division holding the counter.
#thecnt$ - span updated with actual image counter.
#controls$ - outer division for the controls, if using images for buttons, this is actually a table.
#prev$ - input button for previous image.
#gostp$ - input button that starts or stops the slide show (a toggle).
#next$ - input button for next image.
#goto$ - text input for jumpto feature.
#go$ - input button "GO" button for jumpto feature.

You will notice the use of the # and of the $ character. The # character is literal for use in a stylesheet, as these are all id names. The $ character is a stand-in for the numeral representing which show. If you have only one show on a particular page, this will be 0. If you have two shows, the first will be 0 and the second will be 1. Three shows would be numbered 0, 1, and 2. I think you get the general idea.

If you any questions, feel free to ask.

[Nano]

Hello
I don't see any effect on my html page with the above updated script.
I've red the code on your example page - http://home.comcast.net/~jscheuer1/s...iss_update.htm - up and down and can't really see that I'm doing anything wrong in my html.
The original script and the updated one is showing the same regardless of the style hooks in my css.
I have named the style hook div's according to the above explanation.

Have I missed something?

Nano

[jscheuer1]

Hello
I don't see any effect on my html page with the above updated script.
I've red the code on your example page - http://home.comcast.net/~jscheuer1/s...iss_update.htm - up and down and can't really see that I'm doing anything wrong in my html.
The original script and the updated one is showing the same regardless of the style hooks in my css.
I have named the style hook div's according to the above explanation.

Have I missed something?

Nano

Please post a link to the page on your site that contains the problematic code so we can check it out.

[Nano]

I spent some hours to figure this out. And I did. The thing is that the new style hooks only work on show 1 (show0) and I was using show 2 (show1). So, as soon as I changed to the right numbers everything worked allright.
Here's the result: http://www.meisel.no/swiss/index.html

Anyways, feel free to comment on this. Thanks!

Nano

[Nano]

I'm having some trouble with my styled #desc0 element -
e.g. position: absolute; top: 238px;.

I have nested div's and the second one from top has a 40px top-margin.
In IE (only) the top-margin is disregarded. The result is that the #desc0 is 40px higher up on the page.

Here is a link to what I'm talking about: http://www.meisel.no/jobber.html
The #desc0 has a 10px blue border at the top.

I hope somebody can help me. I've tried several workarounds for this.
Thank you.

Best regards
Nano

[jscheuer1]

You have two divisions with an id of outer0 - one hard coded into the page, and the other generated by the script. That could very well have something to do with it. However, if even after replacing the id for the hard coded one with a unique id and style(s) (if any), you still have problems, you can always add a conditional comment to allow for one or more additional styles for IE, ex:

		<link rel="stylesheet" type="text/css" href="mmstyle.css" media="screen">
<!--[if IE]>
<style type="text/css">
#desc0 {
top:278px;
}
</style>
<![endif]-->
<script type="text/javascript">

var preload_ctrl_images=true;

var previmg='images/portfolio/left.gif';
var stopimg='st . . .

[Nano]

Thank you so much.

Nano