PDA

View Full Version : Resolved Edit to existing working code required



theremotedr
01-02-2017, 11:59 AM
Hi,
Here is the page in question, http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection

Currently this is how it works.
Customer visits the page.
Make's a choice from the "ITEM SELECTION" list,in this case say Flip Remote Key Pad.
The main Dr image has now been replaced with the item that was selected.
If you hover or click "pc/mobile phone use" the "CLICK FOR PRICE" you will see a pop up message etc etc.
You then go on to Click To Order.

If however you hover or click the "CLICK FOR PRICE" before making a selection nothing happens in respect of the pop up message,as you would expect.
Many people are doing this and then advising me that it does not work.

The edit to the existing code would be a pop up message saying "Please Make Selection First" etc

coothead
01-03-2017, 02:03 AM
Hi there theremotedr,


check out the attachment, to see if I have
understood your requirements correctly. ;)


coothead

theremotedr
01-03-2017, 10:52 AM
Morning,
That is correct.
Should i now just add the code to my other pages or did you want to do something after i reported back to you ?

coothead
01-03-2017, 11:47 AM
Hi there theremotedr,


as has already been suggested to you CSS and Javascript should be put in external files.

One reason for this is when you want to make code changes, like this one for instance,
instead of editing all of your pages' internal CSS and Javascript, it can be done in the
two files instead.

This would just leave you to make the HTML changes on every page.

Of course, this could also be simplified by using PHP includes for all the repeating blocks
of code which would then mean one edit for the appropriate change.

Until you decide to do this then these are the changes that you need to make...

1. CSS - change this...



style media="screen">


#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: 20em;
line-height: 3.5em;
margin: 0;
font-size: 0.8em;
font-weight: bold;
white-space: nowrap;
animation: marquee 12s linear infinite;
}

@keyframes marquee {
0% {margin-left: 100%;}
100% {margin-left: -20em;}
}
</style>


...to this...



style media="screen">
#content h1 {
position: relative;
}
#warning {
display: none;
position: absolute;
bottom:104%;
left: 50%;
width: 15.4em;
padding: 0.5em;
border:0.06em solid #000;
border-radius: 1em;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em #000;
font-size: 0.5em;
line-height: 1.2em;
}
@media screen and (max-width: 32em) {
#warning {
bottom:52%;
transform: translate(-50%,0);
}
}
#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: 20em;
line-height: 3.5em;
margin: 0;
font-size: 0.8em;
font-weight: bold;
white-space: nowrap;
animation: marquee 12s linear infinite;
}

@keyframes marquee {
0% {margin-left: 100%;}
100% {margin-left: -20em;}
}
</style>


2. HTML - change this...



<!-- content area -->
<section id="content">

<h1><img src="m-images/dr-logo.png" alt="Honda car key remote programming" id="mainImage" /></h1>
<h1><a id="btnOrder1" href="http://form.jotformeu.com/form/62115565434352" target="_self"><img src="m-images/order-logo.png" alt="order from the remote doctor website" class="buttonshadow"></a>
<a href="javascript:;" ><img src="m-images/price-logo.png" alt="remote doctor information button" class="tooltip border buttonshadow" ></a></h1>

</section>
<!-- #end content area -->


...to this...



<!-- content area -->
<section id="content" >

<h1><img src="m-images/dr-logo.png" alt="Honda car key remote programming" id="mainImage" /></h1>
<h1 >
<a id="btnOrder1" href="http://form.jotformeu.com/form/62115565434352" target="_self"><img src="m-images/order-logo.png" alt="order from the remote doctor website" class="buttonshadow"></a>
<a href="javascript:;">
<span id="warning">Warning message.<br><br>Please make an item selection first.</span>
<img src="m-images/price-logo.png" alt="remote doctor information button" class="tooltip border buttonshadow" >
</a>
</h1>

</section>
<!-- #end content area -->


3. Javascript - change this...



<script type="text/javascript">
var url = 'http://form.jotformeu.com/form/62115565434352?partNumber=';

function replaceMainImage(imgSrc, partNumber, myContent) {
$('#content a').get(0).search = 'partNumber=' + partNumber;
$('#mainImage').attr('src', imgSrc)
$('#mainImage').addClass('img-border');
$('#mainImage').addClass('shareable-class');
$('html, body').animate({
scrollTop: $("#mainImage").offset().top
}, 1000);
$('.tooltip').tooltipster('destroy');
$('.tooltip').tooltipster({ trigger: 'hover',
autoclose: 'false',
timer: '700',
animation: 'fade',
delay: 200,
//multiple: true,
restoration: 'current',
position: 'top',
contentAsHTML: true,
maxWidth: 300,
content: myContent,
}).hover(function() {
$(this).tooltipster('show');
}, function() {
$(this).tooltipster('hide');
}).on('click', function() {
$(this).tooltipster('show');
});
} $(document).ready(function() {
$('.tooltip').tooltipster();
$('.sub-menu').hide(); $("li:has(ul)").click(function() {
$("ul", this).slideDown();
});
});
$(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
});
});


document.oncontextmenu = function(e){
var target = (typeof e !="undefined")? e.target: event.srcElement
if (target.tagName == "IMG" || (target.tagName == 'A' && target.firstChild.tagName == 'IMG'))
return false

}

</script>


...to this...



<script type="text/javascript">
var url = 'http://form.jotformeu.com/form/62115565434352?partNumber=';

function replaceMainImage(imgSrc, partNumber, myContent) {

replaceMainImage.called=true;

$('#content a').get(0).search = 'partNumber=' + partNumber;
$('#mainImage').attr('src', imgSrc)
$('#mainImage').addClass('img-border');
$('#mainImage').addClass('shareable-class');
$('html, body').animate({
scrollTop: $("#mainImage").offset().top
}, 1000);
$('.tooltip').tooltipster('destroy');
$('.tooltip').tooltipster({ trigger: 'hover',
autoclose: 'false',
timer: '700',
animation: 'fade',
delay: 200,
//multiple: true,
restoration: 'current',
position: 'top',
contentAsHTML: true,
maxWidth: 300,
content: myContent,
}).hover(function() {
$(this).tooltipster('show');
}, function() {
$(this).tooltipster('hide');
}).on('click', function() {
$(this).tooltipster('show');
});
} $(document).ready(function() {
$('.tooltip').tooltipster();
$('.sub-menu').hide(); $("li:has(ul)").click(function() {
$("ul", this).slideDown();
});
});
$(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
});
});


document.oncontextmenu = function(e){
var target = (typeof e !="undefined")? e.target: event.srcElement
if (target.tagName == "IMG" || (target.tagName == 'A' && target.firstChild.tagName == 'IMG'))
return false

}

</script>


...and this...



<script>
(function() {
'use strict';

var h=document.getElementsByTagName('h2');

if(document.body.offsetWidth>=480) { /* adjust this value to suit */
for(var c=0;c<h.length;c++) {
if(h[c].id==='selection'){
h[c].id='noselection';
}
}
}
}());
</script>


...to this...



<script>
(function() {
'use strict';

var h=document.getElementsByTagName('h2'),
i=document.getElementsByTagName('img'),
w=document.getElementById('warning'),
c;

if(document.body.offsetWidth>=480) { /* adjust this value to suit */
for(c=0;c<h.length;c++) {
if(h[c].id==='selection'){
h[c].id='noselection';
}
}
}

for(c=0;c<i.length;c++){
if(i[c].className.match('tooltip')){
i[c].addEventListener('click',showWarning,false);
i[c].addEventListener('mouseover',showWarning,false);
i[c].addEventListener('mouseup',hideWarning,false);
i[c].addEventListener('mouseout',hideWarning,false);
}
}
function showWarning() {
if(!replaceMainImage.called) {
w.style.display='block';
}
}
function hideWarning() {
w.style.display='none';
}
}());
</script>




coothead

theremotedr
01-03-2017, 12:05 PM
When i mean to my other pages, i did mean alter the html.
I am more than happy to put in separate files,as this would also make it easier for me "and others"

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


check out the attachment. ;)


coothead

theremotedr
01-03-2017, 04:26 PM
Hi,
You timed that just right as ive just changed all the Html & now added the files supplied,thanks.

The stop scroll was for a selected few pages,does your code apply it to all of the pages ?
I have applied the code to this page so far but this was one page where the scroll should work.
http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection

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


sorry about that, I forgot that the "stopScroll" was not for all pages. :eek:

Check out the attachment for updated files and information - (added neonlights ). ;)



coothead

theremotedr
01-03-2017, 05:09 PM
ALSO,
I assume that i now delete the old javascript from the bottom of each page now that we have it in a separate file.

ALSO,
I have changed the color code in the latestChanges css file but made no impact on the page ?

coothead
01-03-2017, 05:38 PM
Hi there theremotedr,


the bottom of the page should look like this...



<script src="js/mainimage/replaceMainImage.js"></script>
<script src="js/warning/warning.js"></script>
</body>
</html>

...for your normal pages.

Add...



<script src="js/warning/stopScroll.js"></script>
..to the bottom, for your "Special Offer" pages.

Note:-

The "replaceMainImage.js" file is a replacement for this code...



<script type="text/javascript">
var url = 'http://form.jotformeu.com/form/62115565434352?partNumber=';

function replaceMainImage(imgSrc, partNumber, myContent) {
$('#content a').get(0).search = 'partNumber=' + partNumber;
$('#mainImage').attr('src', imgSrc)
$('#mainImage').addClass('img-border');
$('#mainImage').addClass('shareable-class');
$('html, body').animate({
scrollTop: $("#mainImage").offset().top
}, 1000);
$('.tooltip').tooltipster('destroy');
$('.tooltip').tooltipster({
trigger: 'hover',
autoclose: 'false',
timer: '700',
animation: 'fade',
delay: 200,
//multiple: true,
restoration: 'current',
position: 'top',
contentAsHTML: true,
maxWidth: 300,
content: myContent,
}).hover(function() {
$(this).tooltipster('show');
}, function() {
$(this).tooltipster('hide');
}).on('click', function() {
$(this).tooltipster('show');
});
} $(document).ready(function() {
$('.tooltip').tooltipster();
$('.sub-menu').hide();
$("li:has(ul)").on({ /* start code for Honda fly out menu pc */
mouseover:function() {
$("ul", this).slideDown();
},
onmouseleave:function(){
$("ul", this).slideUp();
}
}); /* end code for Honda fly out menu pc */
});
$(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
});
});


document.oncontextmenu = function(e){
var target = (typeof e !="undefined")? e.target: event.srcElement
if (target.tagName == "IMG" || (target.tagName == 'A' && target.firstChild.tagName == 'IMG'))
return false

}

</script>

...which should be removed.


I have changed the color code in the latestChanges css file but made no impact on the page ?

A link to the page in question will allow me to assess your problem.


coothead

theremotedr
01-03-2017, 05:54 PM
Ok
So i can keep on track,
Here is the page "actually all my pages" http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection
You will see i have changed,border & background colour,also width.

The files you sent in post #8 have been applied now.

I also notice that the warning message triggers on hover as well as click,is there a minor item to change as its always click.

coothead
01-03-2017, 06:32 PM
Hi there theremotedr,


remove these two lines from the script...



i[c].addEventListener('mouseover',showWarning,false);
i[c].addEventListener('mouseup',hideWarning,false);

You have changed the background-color: #fff; to background-color: #TT0000;. :eek:

You have not replaced the inline Neon Lights Text script yet.


coothead

theremotedr
01-03-2017, 06:51 PM
Those 2 lines have now been removed.
TT was a slip of the finger,now replaced with FF
Neon now done,please check line 322 here http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection for correct placement.
No change on site yet,maybe cache slow ?

How are things looking at your end.

coothead
01-03-2017, 07:25 PM
Hi there theremotedr,


your problem is that you are not replacing the old with the new. :eek:

Lines #272 to #323 should look like this...



<h2>
<span id="neonlight0" style="color: rgb(0, 0, 0);">F</span><span id="neonlight1" style="color: rgb(0, 0, 0);">A</span>
<span id="neonlight2" style="color: rgb(0, 0, 0);">S</span><span id="neonlight3" style="color: rgb(0, 0, 0);">T</span>
<span id="neonlight4" style="color: rgb(0, 0, 0);"> </span><span id="neonlight5" style="color: rgb(0, 0, 0);">U</span>
<span id="neonlight6" style="color: rgb(0, 0, 0);">K</span><span id="neonlight7" style="color: rgb(0, 0, 0);"> </span>
<span id="neonlight8" style="color: rgb(0, 0, 0);">P</span><span id="neonlight9" style="color: rgb(0, 0, 0);">O</span>
<span id="neonlight10" style="color: rgb(0, 0, 0);">S</span><span id="neonlight11" style="color: rgb(0, 0, 0);">T</span>
<span id="neonlight12" style="color: rgb(0, 153, 255);"> </span><span id="neonlight13" style="color: rgb(0, 153, 255);">W</span>
<span id="neonlight14" style="color: rgb(0, 153, 255);">-</span><span id="neonlight15" style="color: rgb(0, 153, 255);">S</span>
<span id="neonlight16" style="color: rgb(0, 153, 255);">-</span><span id="neonlight17" style="color: rgb(0, 153, 255);">M</span>
<script src="js/neon/neonlights.js"></script>
</h2>

You can even put all the spans on one line if you prefer. :D

Note:-

I see that you have this at the bottom of the page, three line above the </body>...



<script type="text/javascript"></script>

...you can remove that too. ;)



coothead

theremotedr
01-03-2017, 07:49 PM
Got it,
Neon now done on that page http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection
Thats great news for me as im now struggling to manage.
I need to change the code for the other pages.
Two things if i may ask please.
On the same link as supplied in this post.
I have deleted all the javascript etc on each page as we now have them in a separate file.
Towards the end of my code it now looks like this,please advise if removing the old for this new looks ok for you.

<!-- fire ups - read this file! -->
<script src="js/tooltip/main.js"></script>
<script src="js/tooltip/jquery.tooltipster.min.js"></script>
<script src="js/mainimage/replaceMainImage.js"></script>
<script src="js/warning/warning.js"></script>
</body>
</html>


Could you pop over to the http://www.dynamicdrive.com/forums/showthread.php?80851-DD-Drop-in-slide-show and take a look please.

thanks very much for your help.
It really helps me with my slow ability to pick this up,most people would have given up by now.

Cheers.

theremotedr
01-03-2017, 08:19 PM
Hi,
I have noticed an issue.
Please look here , http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection
Using the code below generates a double " FAST UK POST W-S-M" message.

<h2>
<span id="neonlight0" style="color: rgb(0, 0, 0);">F</span><span id="neonlight1" style="color: rgb(0, 0, 0);">A</span>
<span id="neonlight2" style="color: rgb(0, 0, 0);">S</span><span id="neonlight3" style="color: rgb(0, 0, 0);">T</span>
<span id="neonlight4" style="color: rgb(0, 0, 0);"> </span><span id="neonlight5" style="color: rgb(0, 0, 0);">U</span>
<span id="neonlight6" style="color: rgb(0, 0, 0);">K</span><span id="neonlight7" style="color: rgb(0, 0, 0);"> </span>
<span id="neonlight8" style="color: rgb(0, 0, 0);">P</span><span id="neonlight9" style="color: rgb(0, 0, 0);">O</span>
<span id="neonlight10" style="color: rgb(0, 0, 0);">S</span><span id="neonlight11" style="color: rgb(0, 0, 0);">T</span>
<span id="neonlight12" style="color: rgb(0, 153, 255);"> </span><span id="neonlight13" style="color: rgb(0, 153, 255);">W</span>
<span id="neonlight14" style="color: rgb(0, 153, 255);">-</span><span id="neonlight15" style="color: rgb(0, 153, 255);">S</span>
<span id="neonlight16" style="color: rgb(0, 153, 255);">-</span><span id="neonlight17" style="color: rgb(0, 153, 255);">M</span>
<script src="js/neon/neonlights.js"></script>
</h2>

If i put the old code back "shown below" it looks fine,please check here http://www.theremotedoctor.co.uk/accbmw.html?scrollto=selection

<h2>
<script language="JavaScript1.2">

/*
Neon Lights Text
By JavaScript Kit (http://javascriptkit.com)
For this script, TOS, and 100s more DHTML scripts,
Visit http://www.dynamicdrive.com
*/

var message="FAST UK POST W-S-M"
var neonbasecolor="#0099FF"
var neontextcolor="#000000"
var flashspeed=40 //in milliseconds

///No need to edit below this line/////

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()


</script>
</h2>

Please advise.

styxlawyer
01-03-2017, 09:22 PM
The first four obvious errors are:

At line line 243 you have a spurious </section> tag which has no matching start tag.

At line 250 you have a spurious </h2> tag which has no matching start tag.

At line 271 you have a spurious <br /> tag which is not allowed inside a pair of <ul>...</ul> tags.

At line 272 you have put your neon-highlight <h2>...</h2> block which is not allowed inside a pair of <ul>...</ul> tags.

Fixing these might help.

theremotedr
01-03-2017, 09:44 PM
Hi,
I have sorted the error at 243 & 250 but do not see what you refer to in 271 & 272

coothead
01-03-2017, 09:45 PM
Hi there theremotedr,


check out the attachment which shows how your accaudi.html page should look after
moving the javascript, tidying up the code a little, but not fully, and validating. :D

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


I notice that you keep increasing the width of the warning message. :eek:

The width that you have now expanded it to makes it too wide for mobile devices. :eek:


coothead

theremotedr
01-03-2017, 09:57 PM
Yes i see what you mean.
I suppose its a matter of getting it right to help me & other people.
I am a touch worried at obviously making errors along the way and not seeing them.

I will look at a page or two now.

theremotedr
01-03-2017, 10:03 PM
Hmmmm
I was checking against a iphone.
I will leave it as you have advise,17.4 i think it was.

Thanks

coothead
01-03-2017, 10:10 PM
Hi there theremotedr,


I forgot to remove this...


<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5598ff1c3fab29fd" async></script>
<!--above is for mobiles-->
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5598ff1c3fab29fd" async></script>


...from lines #31 to #35 of the accaudi.html file.

It is no longer required there. :D


coothead

theremotedr
01-03-2017, 10:14 PM
Ok,
Doing it now.
Im also cleaning up Bmw page.

did you see me note above above the drop in slide show ive also managed to install wrongly :confused:

coothead
01-03-2017, 10:27 PM
Hi there theremotedr,



did you see me note above above the drop in slide show ive also managed to install wrongly :confused:

Sorry, but I do not understand any of that. :confused:



coothead

theremotedr
01-03-2017, 10:34 PM
Are you sure ha ha ha

This http://www.dynamicdrive.com/forums/showthread.php?80851-DD-Drop-in-slide-show

Thanks

theremotedr
01-04-2017, 12:28 PM
Hi there theremotedr,


check out the attachment which shows how your accaudi.html page should look after
moving the javascript, tidying up the code a little, but not fully, and validating. :D



Up until 2am this morning cleaning up some pages.
So far i have done all pages under the header tabs of,
Home.
Site Help.
Contact.
Accessories.
Fobs & Cases.
Keys & Remotes

Thanks for the pointer.