Results 1 to 8 of 8

Thread: Swiss Army Slideshow: how to modify alignment

  1. #1
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Swiss Army Slideshow: how to modify alignment

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 12-02-2007 at 05:01 AM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2007
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Nano View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2007
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Nov 2007
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Margin trouble

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    		<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 . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Nano (08-06-2008)

  9. #8
    Join Date
    Nov 2007
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much.

    Nano

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •