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

Transforming a string into an object

I've been working on this code where my aim is to convert a string into an object and then display the data from an ajax call. However, it appears that using the string value in this way is not functioning as expected. var string = "first: 'Geor ...

javascriptjqueryajaxstringobject

Allow JavaScript to determine whether to link to an internal or external web address

Currently, I am in the process of setting up a new website and need to create an HTML page with some JavaScript that can determine whether to link to the external or internal IP address. I have researched some JavaScript code to fetch the IP address, whic ...

javascripthtmlnetworking

Incorporating interactive maps into an AngularJS web application

I've been attempting to integrate Google Maps into my AngularJS application, using the script tag below: <script src="https://maps.googleapis.com/maps/api/js?key=[MySecretKeyHere]&callback=initMap" async defer></script> I found this ...

javascriptangularjshtmlgoogle-maps

Block of white colors located on the right side beyond the confines of an HTML structure

I am encountering an issue where a white block is appearing outside the HTML on my page. Despite having no content, Firebug indicates that it is located outside the html tag. I suspect the problem may be related to an image that is too wide or padding exc ...

htmlcss

Reactjs - Creating a video component with a placeholder that loads the video seamlessly

I created a Video component that utilizes the React.Suspense component to show a placeholder while the video is loading. However, I'm facing an issue where it seems like the functionality isn't working as intended. When I set the network to "slow ...

javascriptreactjsnext.jspreload

Trigger a jQuery event when a particular element has finished loading

Is there a way to globally detect when any element (such as textarea) is displayed on the page in order to perform a specific action? The element could also be added dynamically through an AJAX request. // This code snippet is just an illustration of the ...

javascriptjquery

Listening for Events from Child Components in Vue.js

I am struggling to figure out how to send an event from a child component to its parent in order to change the view. Although I have been able to create and emit the event, my template does not seem to be properly registering it. I am working with Single ...

javascriptvue.jsvuejs2frontend

node js retrieves information from the request body

Hey there! I'm diving into the world of Node.js and JavaScript, but I've hit a roadblock. I'm trying to fetch data from a URL using node-fetch, then parse it as JSON. However, I keep running into the issue of getting 'undefined' in ...

javascriptnode.jsnode-fetch

Using PHP to reset variables for dynamic display in JavaScript

I've been working on retrieving values from a database and storing them in JavaScript variables. While I was successful in accomplishing this task, I encountered an issue when the values in the database are updated - the values of the variables remain ...

phpjavascriptdatabasevariablesreset

Instructions for implementing a "Load More" feature on blogs using either HTML or JavaScript

When retrieving blogs from a SQL Database, some of them tend to be lengthy. To tackle this issue, I plan on trimming each blog down to around 30 words (this amount may vary) and then incorporating a Load More link at the end. This link will enable users to ...

javascriptjqueryhtml

Error message appears when trying to render a shallow mock of a React.Component that extends MyInterface with any type

Encountering an Issue with Component Mocking When attempting to mock a component, I am receiving the following error message: "Conversion of type '{ props: { index: number; AssignmentTitle: string; AssignmentDescription: string; AssignmentUtilizedHou ...

javascripttypescriptenzymees6-classts-jest

Problem with dynamic page routes in Next.js (and using TypeScript)

Hi everyone, I'm currently learning next.js and I'm facing an issue while trying to set up a route like **pages/perfil/[name]** The problem I'm encountering is that the data fetched from an API call for this page is based on an id, but I wa ...

javascripttypescriptnext.js

Elements missing from the Bootstrap 5 framework

I've been attempting to link my bootstrap card deck to a mongo database with ejs. The website renders without any errors, but for some reason, the cards are not displaying. Does anyone have any insight into what could be causing this issue? Below is ...

htmlejsbootstrap-5bootstrap-cards

Adjusting the tab order dynamically within a navigation menu

I am currently facing an issue where the focus is not being ignored when the drawer is closed. Even with the showDrawer reference set to false, I can still tab through links in the closed drawer. Setting tabindex="-1" on the <nav> element does not pr ...

javascripthtmlvue.jsvuejs3accessibility

What is the process of using an if statement in jQuery to verify the existence of a property in a JSON file?

I am working on a task to incorporate an if statement that checks for the existence of a specific property in a JSON file. If the property exists, I need to display its value within HTML tags <div class='titleHolder'> and "<div class=&ap ...

javascriptjqueryhtmlcssjson

Variations in the implementation of responsive web design on laptops versus mobile devices

Looking at the css code below: @media only screen and (min-width: 0px) and (max-width: 768px) { ... } I'm curious about why, on my laptop, when I resize the browser window to exactly 768px, the css properties inside this media query are applied. ...

androidhtmlcss

Adjust the map automatically as the cursor approaches the map's edge in Google Maps API V3

My latest project involved creating a selection tool using the Rectangle shape tool. With this tool, users can easily select markers by drawing a rectangle over them and releasing their mouse to erase the selection (similar to selecting items on a desktop ...

javascriptgoogle-mapsgoogle-maps-api-3

Is there a way to retrieve JSON data using Vue and Axios?

I'm facing an issue trying to retrieve product data from a JSON file. Despite attempting different methods and searching for solutions online, I have not been able to find one that fits my specific scenario. As I am new to both Vue and axios, I apprec ...

javascriptvue.jsaxios

Exploring different approaches to recreate the functionality of promise.allsettled by utilizing async.each

I previously had a code snippet containing Promise.allSettled(payoutPromises); Unfortunately, it did not function properly on our server due to its nodejs version being 10. After consulting some blogs for guidance, I came up with the following alternativ ...

javascriptnode.js

The state may be modified, but the component remains unchanged

I've been tasked with implementing a feature on a specific website. The website has a function for asynchronously retrieving data (tickets), and I need to add a sorting option. The sorting process occurs on the server side, and when a user clicks a s ...

javascriptreactjstypescript