PDA

View Full Version : Resolved DD Drop in slide show



theremotedr
01-03-2017, 11:54 AM
Hi,
This is the DD script ive followed http://www.dynamicdrive.com/dynamicindex14/dropitslide.htm
This is the page ive installed it on http://www.theremotedoctor.co.uk/index.html

Ive left the header blinking photo in place to show where i need the slideshow to operate.

Please could you take a look.

Many Thanks.

ddadmin
01-03-2017, 10:13 PM
Two critical issues I see:

1) You have an extranous </script> tag that shouldn't be there:


<script type="text/javascript" src="dropinslideshow.js">

/***********************************************
* Drop-in Slideshow Script- (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</script>

2) Secondly, the reference to dropinslideshow.js on your page is broken: http://www.theremotedoctor.co.uk/dropinslideshow.js Make sure to upload the file to that location.

theremotedr
01-03-2017, 10:28 PM
Evening,
js file now in correct location.

That extra </script> has been removed but i then see a syntax error at line 106 of which is the var start text below.

var m-images=new Array()
m-images[0]=["photo1.png", "", ""]
m-images[1]=["photo2.png", "http://www.theremotedoctor.co.uk/m-images/dr-header.png", ""]
m-images[2]=["photo3.png", "http://www.theremotedoctor.co.uk/m-images/honda-flip-remote-upgrade-special-offer.png", "_new"]

I will have you know i am not the brightest spark in the box.
Thanks

ddadmin
01-04-2017, 03:47 AM
I still see the extra </script> tag near the top of your head. Also, for your initialization code, it should be:



<script type="text/javascript">
//Define Image Array. Syntax: ["image_path", "url_destination", "url_target"]
var myimages=new Array()
myimages[0]=["photo1.png", "", ""]
myimages[1]=["photo2.png", "http://www.theremotedoctor.co.uk/m-images/dr-header.png", ""]
myimages[2]=["photo3.png", "http://www.theremotedoctor.co.uk/m-images/honda-flip-remote-upgrade-special-offer.png", "_new"]

//Create new drop-in slideshow
//Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)
new dropinslideshow(myimages, 200, 250, 3000)

</script>

theremotedr
01-04-2017, 09:49 AM
Morning,
I have now completed it,thanks very much.
One question please,
I need to make it look like my other header images,so can you point me in the direction of where i add the code so a shadow can be seen.
Then fully completed.

Thanks for the pointers.

coothead
01-04-2017, 09:51 AM
Hi there theremotedr,


I notice that the script is now nine years old.
It is not responsive like the rest of your site.
Do you have more than two images for the slider?
If so can I see them all?
Are you aware that this can now be done with CSS?



coothead

theremotedr
01-04-2017, 10:08 AM
Morning,

I am not aware about the css version so if it will be better then lets go for it.
It would only be applied to the page http://www.theremotedoctor.co.uk/index.html

These at present would be the images to use.
m-images/dr-header.png
m-images/honda-flip-remote-upgrade-special-offer.png
m-images/blue-key-remote-special-offer.png
m-images/suzuki-flip-remote-upgrade-special-offer.png

Should i need to add another say next week etc please provide a provision for me to add it to the code.

There is also no need to have it hyperlinked,i dont need to click the image to go anywhere or show the image etc.

Thank you.

coothead
01-04-2017, 12:30 PM
Hi there theremotedr,


check out the attachment which shows an example.

If it meets your requirements, I will put it in a atest page for you.


coothead

theremotedr
01-04-2017, 12:43 PM
Hi,

Looks great.

Cheers

coothead
01-04-2017, 05:37 PM
Hi there theremotedr,


I have corrected, tidied up a little, validated and added the CSS slider to your index.html file.

Check out the attachment.

If you need more than eight images let me know and I will give you the appropriate code.

The present code has a slide down of one second and five seconds of static display.

This, again, can be changed to suit your requirements.

Unfortunately, I am unable to test on mobile devices.

theremotedr
01-04-2017, 05:47 PM
Hi,
Thanks for that.
Was i supposed to do anything else ?
I replaced the index & css file but looking on the page i see all the images down the screen ?

Looks on on phone just pc ?
6020

coothead
01-04-2017, 07:07 PM
Hi there theremotedr,


you seem to be experiencing that old cache problem. :D

Get one of your digits to agitate the F5 function key.

Whilst testing with IE11, though, I did notice a problem with the
animation; it does not work with "top: 0" buts needs "top: 0%".

Change the @keyframes slide section with this...



/* this is for 4 images */
@keyframes slide {
0% {top: -100%; z-index:2;}
5% {top: 0%; z-index:2;}
25% {top: 0%; z-index:1;}
30% {top: 0%; z-index:1;}
30.1% {top: -100%; z-index:0;l}
}


/* this is for 5 images */
/*
@keyframes slide {
0% {top: -100%; z-index:2;}
4% {top: 0%; z-index:2;}
20% {top: 0%; z-index:1;}
24% {top: 0%; z-index:1;}
24.1% {top: -100%; z-index:0;}
}
*/
/* this is for 6 images */
/*
@keyframes slide {
0% {top: -100%; z-index:2;}
3.33% {top: 0%; z-index:2;}
16.66%{top: 0%; z-index:1;}
20% {top: 0%; z-index:1;}
20.1% {top: -100%; z-index:0;}
}
*/
/* this is for 7 images */
/*
@keyframes slide {
0% {top: -100%; z-index:2;}
2.86% {top: 0%; z-index:2;}
14.3% {top: 0%; z-index:1;}
17.16%{top: 0%; z-index:1;}
17.2% {top: -100%; z-index:0;}
}
*/
/* this is for 8 images */
/*
@keyframes slide {
0% {top: -100%; z-index:2;}
2.5% {top: 0%; z-index:2;}
12.5% {top: 0%; z-index:1;}
15% {top: 0%; z-index:1;}
15.1% {top: -100%; z-index:0;}
}
*/

theremotedr
01-04-2017, 07:36 PM
Hi,
Ive pressed F5 i dont know how many times before i replied.
I made the changes as mentioned above.
F5 then 10 times but still no animation.
I have checked on iphone & Fire Fox and both work fine.

Tomorrow i will flush out Chrome and it should be ok then.

Many thanks for you help.
On a side not,
Whilst ive now cleaned ALL my pages ive 2 requests from you if i may.

Ive managed to kill the video player here, http://www.theremotedoctor.co.uk/flip_remote_upgrade.html?scrollto=selection

Ive also noticed that the Google Language Thing is all Italic now where before i could make it what i required etc.
Please could you take a quick look for me.

Thanks for showing me how to clean up the pages,it took me about 8 hours in total.
But i also got to see how the pages were organised on the site & in the code much better.

6021

coothead
01-04-2017, 08:28 PM
Hi there theremotedr,


It is weird that the F5 function key is being ignored by Chrome.

No problem, there's more than one way to skin a cat. :D

Try this routine...


Open your Chrome browser
To the top right below the "X" you will find three vertical dots.
Click on them.
Click "More tools".
Click "Clear browsing data".
Check "Cached images and files".
Click "Clear browsing data".
Take a short break ;).



coothead

theremotedr
01-04-2017, 08:52 PM
I've read you can also Shift + F5 also CTRL+F5
Tomorrow will check it out.
A few things on my list to finish tomorrow & job done.

Thanks for the time spent helping with this.

coothead
01-04-2017, 08:53 PM
Hi there theremotedr,


now, I can provide a solution to your video problem.

You need to add this...



<script src="js/scripts/player.js"></script>



coothead

...at the bottom of the document for all pages that have a video.

coothead
01-04-2017, 09:01 PM
Hi there theremotedr,


I am not seeing your "Italic" problem in any of my browsers.


coothead

theremotedr
01-04-2017, 09:12 PM
Thanks.
Will add video code tomorrow and report back.

Strange you don't see the Google font issue.
Did you see my screen shot ?

It either changed when I was cleaning the page or when we changed the font for the headers.
I will look for the post where I carried it out.

theremotedr
01-04-2017, 09:19 PM
Here it is I think.
6022

coothead
01-04-2017, 09:54 PM
Hi there theremotedr,



I have traced the font displayed in your image to this site...


Lucida Handwriting (http://fontsgeek.com/fonts/Lucida-Handwriting-Italic)

Searching your loaded CSS, gave me this information...

basic-style.css



/* typography */
body{
color:#000099; /* background colour around the remote doctor header pc & ios */
font-family:'Lucida Handwriting', 'Droid Serif', Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.4em;
font-weight:normal;
}


h1, h2, h3, h4, h5, h6{
font-weight:normal;
font-family:'Lucida Handwriting', 'Droid Serif', Arial, Helvetica, sans-serif;
line-height:1.5em;
margin:.45em 0;
padding:0;
text-align:center;
}

/* links */
a,
a:visited,
a:active{font-family:'Lucida Handwriting', 'Droid Serif', Arial, Helvetica, sans-serif;}



As I don't have "Lucida Handwriting" in my "Windows Fonts",
I would, of course, never see it in any of your pages.


coothead

theremotedr
01-04-2017, 10:06 PM
Ok
Another way if possible because Lucida is the font used for Tab headers, things for sale etc.
Have this Italic font on its own so we control the font used for it.
What do you think ?

coothead
01-04-2017, 10:43 PM
Hi there theremotedr,



What do you think ?
Personally, I prefer to keep everything simple...



font-family: verdana, arial, helvetica, sans-serif;


...and I would make them italic or bold wherever necessary.

If you don't want to use basics then you have to take the @font-face route.

When visitors come to your site it's because you "have been supplying spare
replacement vehicle car keys & fobs for many years" not because you are
using the "Lucida Handwriting" font.

Arty-farty fonts will be at the very bottom of their list of requirements.


coothead

theremotedr
01-04-2017, 10:59 PM
Ha ha well put.

You might have swung it in your favour or leave it as is.

coothead
01-04-2017, 11:13 PM
Hi there theremotedr,


it is very easy to lose sight of what your site is about.

You are looking at with very different eyes to those of your visitors.

You are now concerned with making it look right to your eyes but
you don't have any real idea what will look right to your visitors.

Your main priority should always be to make certain that the real
content is easily obtainable and understandable to your first time
visitors and potential customers.

You can make a site that looks heavenly and perfect to your eyes
but you wont be buying any fobs, cases, keys or remotes from it. :D



coothead

theremotedr
01-04-2017, 11:27 PM
You are correct.
The Italic question was mainly for it looking out of sync with the site.
Just wanted things to look the same etc.

Quick question.
The text colour on the warning message, if I remember correctly I didn't see a font colour option
In its css for it to be changed from black to white etc or was there the option ?

coothead
01-04-2017, 11:35 PM
Hi there theremotedr,


you can add "color: #fff;" here...



#warning {
display: none;
position: absolute;
bottom:104%;
left: 50%;
width: 17.4em;
padding: 0.5em;
border:0.06em solid #000000;
border-radius: 1em;
background-color: #CB2027;
box-shadow: 0.4em 0.4em 0.4em #000;
font-size: 0.5em;
line-height: 1.2em;
}



coothead

theremotedr
01-05-2017, 08:19 AM
Hi there theremotedr,


you seem to be experiencing that old cache problem. :D

Get one of your digits to agitate the F5 function key.

Whilst testing with IE11, though, I did notice a problem with the
animation; it does not work with "top: 0" buts needs "top: 0%".

Change the @keyframes slide section with this...



/* this is for 4 images */
@keyframes slide {
0% {top: -100%; z-index:2;}
5% {top: 0%; z-index:2;}
25% {top: 0%; z-index:1;}
30% {top: 0%; z-index:1;}
30.1% {top: -100%; z-index:0;l}
}


/* this is for 5 images */
/*
@keyframes slide {
0% {top: -100%; z-index:2;}
4% {top: 0%; z-index:2;}
20% {top: 0%; z-index:1;}
24% {top: 0%; z-index:1;}
24.1% {top: -100%; z-index:0;}
}
*/
/* this is for 6 images */
/*
@keyframes slide {
0% {top: -100%; z-index:2;}
3.33% {top: 0%; z-index:2;}
16.66%{top: 0%; z-index:1;}
20% {top: 0%; z-index:1;}
20.1% {top: -100%; z-index:0;}
}
*/
/* this is for 7 images */
/*
@keyframes slide {
0% {top: -100%; z-index:2;}
2.86% {top: 0%; z-index:2;}
14.3% {top: 0%; z-index:1;}
17.16%{top: 0%; z-index:1;}
17.2% {top: -100%; z-index:0;}
}
*/
/* this is for 8 images */
/*
@keyframes slide {
0% {top: -100%; z-index:2;}
2.5% {top: 0%; z-index:2;}
12.5% {top: 0%; z-index:1;}
15% {top: 0%; z-index:1;}
15.1% {top: -100%; z-index:0;}
}
*/



Morning,

Index page still the same this morning,
F5 yet again did nothing to change the update.

Ctrl & F5 worked straight away,it ignored the cached file i assume and loaded a new once within a split second.
Now animation works as it should.

theremotedr
01-05-2017, 11:26 AM
Morning,
Coothead,
Did something change with respect to the scrolling text as shown here http://www.theremotedoctor.co.uk/acchonda.html?scrollto=selection
I mean the text below Return To Menu was cutting off way before it finished.
Within the page itself i change the figure to width 50em,see below, but the best i can get it is cutting off at the word Remote towards then end.

#marquee {
height: 2.5em;
border-radius: 1em;
border: 0px solid #5d0e13;
box-shadow: 0.25em 0.25em 0.5em #000;
overflow: hidden;
background-color: #66c2f1;
}

#marquee p {
width: 50em;
line-height: 3.5em;
margin: 0;
font-size: 0.8em;
font-weight: bold;
white-space: nowrap;
animation: marquee 12s linear infinite;

coothead
01-05-2017, 12:08 PM
Hi there theremotedr,


you need to adjust the animation to match the set "p" width...



@keyframes marquee {
0% {margin-left: 100%;}
100% {margin-left: -50em;}
}



coothead

theremotedr
01-05-2017, 12:30 PM
Thats typical of me,
Now this one has been changed and fine.

what is this for that i touched ?

#marquee p {
width: 50em;

coothead
01-05-2017, 06:04 PM
Hi there theremotedr,


does this help...



coothead

theremotedr
01-05-2017, 06:47 PM
Evening,
Im just sorting out the scrolling marquee so the text isnt cut off etc.
Im confused about the speed that it cycles.
I assume the below is the speed part of the code ?

animation: marquee 12s linear infinite;

If so why do i have pages with the 12s as shown above but one slow & the other fast.
Check these 2 pages please.
Slow http://www.theremotedoctor.co.uk/accford.html?scrollto=selection
Fast http://www.theremotedoctor.co.uk/acchonda.html?scrollto=selection

coothead
01-05-2017, 07:57 PM
Hi there theremote,


When I first provided the code, it was tailored for text of a specific length - ( the "p" width ).

Different lengths, obviously, will require different values for the "p" width.

The "keyframes's" margin-left value at 100% must match the "p" width, negatively.

As for the animation time setting, it also needs to be adjusted according to the "p" width.

The reason for this is that increases in "p" width have a corresponding increase in it's speed.

To slow it's movement requires an increase in time.

The bottom line is that the marquees need to be tailor made.



coothead

theremotedr
01-05-2017, 09:06 PM
Ok Thanks very much.
Would you mind taking a look at this please http://www.dynamicdrive.com/forums/showthread.php?80855-Video-player-set-up&p=320270#post320270

coothead
01-05-2017, 09:16 PM
I did, before coming here. :D


coothead