deactivating image mapping on mobile media screens

I'm looking to disable my image map on mobile screens using media queries.

I've attempted to include some javascript in the head of my html file, but I encountered an error:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    if($(window).width() < 1200){
         /*document.getElementById("imgmap").removeAttribute("usemap");*/
        document.getElementById("imgmap").setAttribute('usemap','disabled');
    }
    if($(window).width() > 1199){
        document.getElementById("imgmap").setAttribute('usemap','#Map');
    }
</script>

Here is the image map code:

<img class="bdg-homeimg" id="imgmap" src="http://www.chiantisculpturepark.it/newdesign/img/pievasciata.jpg" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="90,100,140,120" title="massimoturato" href="massimoturato.htm" target="_blank" onclick="NewWindow(this.href,'name','612','530','no');return false" />
<!-- more area tags -->
</map>

And here is the error message I received:

ReferenceError: $ is not defined

I could use some assistance with this issue.

javascriptjqueryhtmlcssimagemap

Answer №1

When working with JavaScript, you have the option to use directives such as getElementById without including the library. However, for methods like removeAttr and setAttribute, you will need to include the JavaScript library. The $ symbol is defined in the JavaScript library, which is why you may encounter an error stating that $ is not defined.

To resolve this issue, make sure to add the necessary JavaScript library to your project.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Answer №2

For a demonstration, you can view it by clicking on this link.

if($(window).width() < 1200){
    // document.getElementById("imgmap").removeAttr("usemap");
    $("#imgmap").removeAttr('usemap');
  } else {
    //$("#imgmap").setAttribute('usemap','#Map');
  }

If you are interested in creating a responsive Image map, I recommend checking out this plugin

Answer №3

To incorporate jQuery into your HTML document, you need to link it properly.

Include the following line in your HTML file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revamp your handles using the power of jQuery rotatable!

Greetings! I am currently utilizing a minified plugin created by godswearhats in my project. To activate the plugin, I simply call the following function: $('#em_1').rotatable(); Here is an excerpt of my HTML code: <div class="draggable par ...

javascriptjqueryrotation

Showcase each video stored within a specific directory in the form of a list using HTML 5

I'm working on an application that requires me to showcase a series of videos on a single HTML5 page using the video tag. Despite successfully uploading files to my folder, I am struggling to display them properly. My search for a solution has been fr ...

phphtml

When using res.json(), the data is returned as res.data. However, trying to access the _id property within it will result

I'm facing a challenge in comprehending why when I make a res.json call in my application, it successfully sends data (an order object). However, when I attempt to access and assign a specific piece of that data (res.data._id) into a variable, it retu ...

javascriptreactjsexpressaxios

Modify data in an array using Vuex

When working with my Vuex mutation, I am trying to replace an element in an array within the state. The code snippet below illustrates what I am attempting to do: UPDATE_MAILING(state, mailing) { let index = _.findIndex(state.mailings, {id: mailing.id ...

javascriptvue.jsvuejs2vuex

What is the method for setting a default image to be preloaded in filepond?

Currently, I am working on a Laravel view for editing a record which includes an associated image. My goal is to have the image preloaded inside the input file so that when you submit the form, the same image is sent or you can choose to change it. // Con ...

javascriptjqueryfilepond

Building a Next.js application in a docker container on a local machine using minikube is successful, however, the build fails when attempting to build it on a staging environment

I've encountered a puzzling issue. My next.js app is running in a docker container. It builds successfully on my local Ubuntu machine with minikube and ks8 orchestration, but it gets stuck indefinitely during the build process on the staging setup. T ...

javascriptnode.jsdockerkubernetesnext.js

A technique for calculating the total quantity of each item individually while using v-for in VueJS

Struggling to code (complete newbie) using VueJS and facing a major roadblock. I have a list of orders and I need to sum the quantities of each item separately. The only way to access the items is through v-for. <tr> <td data-th="list"> < ...

javascriptvue.jsv-for

Is the JSON returned by WCF Data Services incorrect?

Currently, I am in the process of updating a software application that previously utilized jQuery 1.3.2 to interact with a WCF Data Service (also known as ADO.NET Data Services or Astoria) to now work with the most recent version of jQuery (1.4.2). Unfortu ...

.netjqueryjsonwcf-data-services

Modifying the CSS class of an element does not produce the desired effect after altering its styles using JavaScript

html: <input id="myinput" class="cinput" type="image" src="http://www.foodwater.org.au/images/triple-spiral-3-small-button.jpg"/> <br><br><br><br> <button id="s">set to visible class</button> <button id="h"> ...

javascripthtmlcss

Strong tags within MFC

Is it possible to create labels in MFC (Static text) that contain both bold and non-bold text? For instance, something like this: "I want my label to have a mix of styles like this" Any suggestions on how to achieve this? I am aware that I can change ...

htmlvisual-c++mfclabelbold

Require modification of JSON values in React Promise code

Looking to modify the data returned from a promise and wrap a link around one of the fields. Here is the React code: this.state = { medications: [], } queryMeds().then((response) => { this.setState({medications: response}); }); The response c ...

javascriptarraysjsonreactjspromise

What is the best way to utilize $.post() to send a combination of a javascript object and form

I'm having trouble sending a JavaScript object along with form data using the shorthand method $.post(). I want to combine these two, but it's proving to be difficult. Additionally, I need to know how to retrieve the form data on my PHP page. An ...

javascriptphpjqueryajax

Different sources for multiple iframes

Greetings everyone, I am facing an issue with multiple iframes on my page, each with a different src attribute. Despite specifying unique sources for each iframe, upon loading the page, they all seem to be loaded with the same src. <html><body&g ...

jqueryhtmliframe

Employ Ajax for updating a database using a Select option instead of a form with a button

My goal is to utilize ajax in order to select an option and store the data in a database, rather than using a select within a form along with a button. This approach is necessary because I have one select for each row, and every time I change the selected ...

phpjqueryajax

step-by-step guide for resolving issues with downloading files in node.js

I've been attempting to download files from my server using node.js with the res.download function from Express, but I keep getting an undefined error. The folder path is D:\program\web\java_script\Node\my_project\ketabk& ...

javascriptnode.jsexpressdownloadbackend

Accessing a text document from a specific folder

As a novice in the world of HTML and PHP, I am attempting to develop a script that can access a directory, display all text files within it, allow for editing each file, and save any changes made (all operations will be managed through an HTML form). Howev ...

phphtml

Why won't my Twitter Bootstrap navigation bar apply the styles?

I am currently working on a Rails app (4.0) and have incorporated Bootstrap 3 into my project. Both bootstrap.css and bootstrap-theme.css are stored in the stylesheets directory, while bootstrap.js is located in the javascripts directory. Most of the Boots ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

using jquery to select elements based on their data attribute values

I have a question about using jQuery to select an object with a specific data value. For instance: $('[data-infos-parent_id=0]').html('it ok'); <div class="question" data-infos='{"parent_id":0,"my_id":0, "title":""}'> ...

jqueryhtmlobjectjquery-pluginsselector

`How can I retrieve a PHP variable using a JavaScript AJAX request?`

When sending an AJAX request, I encounter a situation where: //javascript var rq = new XMLHTTPrequest(); rq.open('POST','test.php', true); rq.send(JSONString); Within "test.php" file, the following action is taken: //php $data = "Hel ...

javascriptphpajax

Issues arising from jQuery AJAX request in Chrome extension

BLUF: The AJAX call from my Chrome extension is not functioning properly. AJAX: $.ajax({ type: "GET", url: "http://weather.aero/dataserver_current/httpparam?dataSource=metars&requestType=retrieve&format=xml&stationString=KFBG&hour ...

jqueryxmlajaxgoogle-chrome-extension