DD script causes other issue on page

[theremotedr]

Hi,
I have followed this slideshow http://www.dynamicdrive.com/dynamici...ationslide.htm

Its been applied to this page http://www.theremotedoctor.co.uk/Hon...slideshow.html

My issue is that the fields below the CONTACT DETAILS are to wide.
They should be this size,see here http://www.theremotedoctor.co.uk/skype-id.html#topnav

I have removed the slideshow code then the fields are the correct width,putting the code back makes them wider again.

Please advise if you can spot the reason as im stumped.

Many thanks.

[jscheuer1]

I don't know what's causing that. But apparently there is no rule for their width. As a result, other things on the page can affect that. If you specify the width (for example - to match the width I see on the page you like - add the below to the page's stylesheet):

nav#secondary-navigation li {
  width: 360px;
}

They will be that width. If that doesn't seem to work well in - say, varying window widths, try a percentage value instead of a pixel one, like:

nav#secondary-navigation li {
  width: 84.5%;
}

Whatever width you use, you may have to apply it to the h2 element above them as well to get them to line up with it.

[theremotedr]

Hi,
The px version makes the fields shorter and the h2 to the right.
The % version make the field longer and h2 to the right.

Funny thing is by changing the above it only affects this page as all the other pages dont change at all ?

I might look for something where the picture just replaces itself with another as opposed to a slide in from the left and see what happens.

[theremotedr]

I have now applied this http://www.dynamicdrive.com/dynamici...rightslide.htm
Please take a look now http://www.theremotedoctor.co.uk/Hon...slideshow.html

[theremotedr]

Exactly,two different scripts but the same issue ?

I received email quoting your reply BUT i do not see your reply on the site ???

[jscheuer1]

I refreshed and then saw that they looked different after all, so deleted my post. It's often unavoidable that adding content and/or scripts to a page will alter how things lay out. Often how things change and the way to fix them differs at least slightly depending upon what is added. CSS is usually the way to change how a page renders, a little tweaking of the elements involved and/or their container (parent) element is usually that's required. But sometimes, things just won't fit and wrapping happens. When you decide which slideshow you want to use, if you still need help, let us know.

[theremotedr]

Ok
I am ready.
Use this page please as i was installing this other script whilst leaving the other for a solution http://www.theremotedoctor.co.uk/z9.html

I notice it reads undefined below the image ?

[jscheuer1]

To get rid of undefined, you have to define the missing fields (link and description) even if as empty, ex -

Instead of just:

variableslide[0]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/advert-slideshow4.jpg"]

It should be:

variableslide[0]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/advert-slideshow4.jpg", "", ""]

Same thing for all of them. Fix that first as it might change the layout.

BTW, at least at the moment, this one looks different to me, the contact information is at the bottom centered and narrower below the slideshow, not to the slideshow's right as it was with the first one. Is that how it looks to you?

[theremotedr]

Hi
I have now edited each link with the extra code and undefined is now sorted.
The layout is the same as before.
I see the information to the bottom right of each photo in the slideshow,which is nearly center to my page.

[jscheuer1]

OK, this seems to work - first remove the id content from the section tag (remove red highlighted):

<!-- main content area -->   
<div class="wrapper" id="main"> 
    
<!-- content area -->    
<section id="content">

<!--SLIDESHOW BELOW-->
<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intac . . .

That section will no longer float nor be restricted as to width. Next, adjust the script as shown (change/addition red highlighted):

 . . . bleslide[6]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/2button-key-remote-slideshow.jpg", "", ""]
variableslide[7]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/frv-slideshow.jpg", "", ""]
variableslide[8]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/jazz-slideshow.jpg", "", ""]
variableslide[9]=["http://i670.photobucket.com/albums/vv62/ipbr21054/PROGRAMMING/dr-slideshow.jpg", "", ""]

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='650px; float: left' //set to width of LARGEST image in your slideshow
var slideheight='578px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#ffffff'

//configure the below varia . . .

That's slightly less than the widest images, but they will scale. By floating left, that brings the contact info back up next to the slideshow on its right. Looks good here, but if the window is too narrow, the contact info will still need to wrap. But it has to get pretty narrow for that to happen.