0

I'm using canvas for this. I have a picture and when a user clicks one of the elements I've specified, it highlights the part of the image that's described by that element.

        $(function() { 
        $("#monsterTop").click(function() {
            $("#container").css("position", "relative");
            $("#highlight").css("position", "absolute")
                            .css("width", "413px")
                            .css("height", "32px")
                            .css ("top", "0px")
                            .css("left", "0px")
                            .css("background", "rgba(255, 0, 0, 0.4)"); 
               });
          });

And here's the relevant html code

   <div id="container">
    <img src="../pictures/img/default.png" alt="Default page layout" class="adcanvas"/>
    <div id="highlight"></div>
</div>

I've got that working great, but the picture is too big for mobile. So I put this in my CSS:

@media(max-width: 826px){
    .adpics{
    display:inline-block;
    width: 100%;
    max-width: 500px;
    }
.adinfo{
    display:inline-block;
    width:100%;
    }
    .adcanvas{
        display:none;
    }
}

That makes the canvas (id=adcanvas) disappear in the mobile and shows thumbnails of the larger image instead (id=adpics).

The problem is that the highlighting from the javascript still shows up. I've tried an IF ELSE statement telling it to run only if the window is >826, but it just causes the entire script to not run on any size screen.

How do I tell it not to run #highlight in mobile?

Link to the page as it runs so far.

Audrey Malone
  • 1
  • 3
    don't buy into the artificial difference: a raspberry pi with a 3" screen is a desktop, and a 14" tablet can be a mobile. Don't run something, or not run something, because it's a "desktop" or "mobile" device, see if the properties of where your code runs require you to run different code. Do feature detection and viewport checks, then run the code based on that and 100% ignore what humans call the physical hardware used. – Mike 'Pomax' Kamermans Feb 19 '16 at 21:32
  • I would suggest checking the user agent to test it. http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser/11381730#11381730 – Cayde 6 Feb 19 '16 at 21:33
  • *"I've tried an IF ELSE statement telling it to run only if the window is >826, but it just causes the entire script to not run on any size screen."* - Maybe add that code to your question, because it sounds like you've got a syntax or logic error that we could help with. – nnnnnn Feb 19 '16 at 22:59

1 Answers1

0

In CSS file:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #element { display: none; }
}

In jQuery/Javascript file:

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#element').css('display')=='none') {
        is_mobile = true;       
    }


    if (is_mobile == true) {
        //Conditional script here
    }
 });
dijaneee
  • 51
  • 6