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...
Code:
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...
Code:
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...
Code:
<!-- 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...
Code:
<!-- 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...
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)").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...
Code:
<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...
Code:
<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...
Code:
<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>
Edit to existing working code required
Reply With Quote
Bookmarks