PDA

View Full Version : Resolved DD script causes other issue on page



theremotedr
04-27-2015, 05:11 PM
Hi,
I have followed this slideshow http://www.dynamicdrive.com/dynamicindex14/presentationslide.htm

Its been applied to this page http://www.theremotedoctor.co.uk/Honda_programming_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
04-27-2015, 07:09 PM
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
04-27-2015, 07:20 PM
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
04-27-2015, 07:42 PM
I have now applied this http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm
Please take a look now http://www.theremotedoctor.co.uk/Honda_programming_slideshow.html

theremotedr
04-27-2015, 08:52 PM
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
04-27-2015, 09:12 PM
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
04-27-2015, 09:24 PM
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
04-28-2015, 12:35 AM
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
04-28-2015, 07:26 AM
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
04-28-2015, 03:54 PM
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.

theremotedr
04-28-2015, 06:27 PM
Hi,
Thats good & looks neat.
I am also working on another & not wanting to start a new post as its the same issue.
Please can you work your magic here.
This is the test page http://www.theremotedoctor.co.uk/zzz.html

Contact details needs to be aligned correctly like the other page http://www.theremotedoctor.co.uk/z9.html

Can we get rid on the horizontal scroll bar,not sure how its arrived but i have been trying to sort this myself.

Thanks for your time with this task.

jscheuer1
04-28-2015, 11:45 PM
Looks like - find this:


<div id="divMain" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:1500px;height:231px;">


Make it:


<div id="divMain" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:650px;height:600px;float:left;">

theremotedr
04-29-2015, 06:13 AM
Thats better now its starting to match the other pages.
Just need this looking at after this newly added code.
The issue is the gap between the slideshow image and the black footer.
Look at the 2 pages for example.

http://www.theremotedoctor.co.uk/zzz.html

http://www.theremotedoctor.co.uk/crv.html

If you toggle between the 2 pages you will see the fotter rise up then lower down.

Many thanks.

jscheuer1
04-29-2015, 04:15 PM
That's dictated most likely by a difference in height of one or more pf the middle elements (including borders, margins, drop shadows, etc.). Unless you make everything the same height in there, the pages will be different. Sometimes, even with the same content, if the markup and/or styles differ, this cannot be easily done. Why do they have to have their footers at the exact same place anyway? I mean on most sites, some pages are taller, some shorter, the footers end up in different places.

That said, on http://www.theremotedoctor.co.uk/zzz.html the main difference seems to be that the page is wider and gets a horizontal scrollbar. Try changing the divMain as i already suggested - might fix that.

theremotedr
04-29-2015, 04:24 PM
Hi,
Horizontal scroll bar was sorted.
The footer being the same is because i thought when skipping from page to pay it would look nice if the content changed as opposed to the footer jumping up down up down etc