Edit to existing working code required

Hi,
Here is the page in question, http://www.theremotedoctor.co.uk/acc...llto=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

Hi there theremotedr,

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

coothead

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 ?

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...

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>


---

coothead

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"

Hi there theremotedr,

check out the attachment. ;)

coothead

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/acc...llto=selection

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

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 ?

Hi there theremotedr,

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

Code:

---


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

---

...for your normal pages.

Add...

Code:

---


<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...

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.

Quote:

---

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