Substitute HTML data attributes

Hey everyone, I'm wondering how to change a data attribute in my code. For example, I am currently using a script for a video background, but I want to replace the video with a lighter version when viewed on a mobile device. In my JavaScript file, I have included the following:

/* Include your own JavaScript code here */
$(document).ready(function(){

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ) {
     $('.fullscreen').attr('data-vide-bg', 'homepages/portfolio/video/mobile');
  }
});

In my index.html file, I have the following setup for the background video:

<section class="fullscreen" data-video-bg="homepages/portfolio/video/merge-kqwil">
<section>

What I would like to achieve is to replace the background video with 

"homepages/portfolio/video/mobile"
instead of 
homepages/portfolio/video/merge-kqwil
when a mobile device is detected.

I am using the VideoBg plugin for the background video, which normally displays a png or JPG when viewed on mobile devices. However, I want to customize this behavior and show the specific video for mobile instead. Any help would be appreciated. Thank you!

javascriptjquerycss

Answer №1

It appears that the code is functioning correctly.

$(document).ready(function(){

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera 
 Mini/i.test(navigator.userAgent) ) {
   $('.fullscreen').attr('data-vide-bg', 
  'homepages/portfolio/video/mobile');
};
});

There seems to be a missing single quote at the end. Please try to fix it and then revert back.

Answer №2

Don't forget to include a single quote at the end.

// Include your own custom JavaScript code
$(document).ready(function(){

  if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $('.fullscreen').attr('data-vide-bg','homepages/portfolio/video/mobile');
   };
});

Another error in HTML data attribute, it should be changed from data-video-bg to .data-vide-bg

I hope this information proves helpful.

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

Creating a variable in Node.js to serve as the name of a nested element within an object

Check out the object I have: obj = { "FirstName": "Fawad", "LastName": "Surosh", "Education": {"University": "ABC", "Year": "2012"} } Take a look at my node.js script: var nodeName = 'Education.Year'; obj.nodeName; // ...

javascriptjsonnode.jsnode.js-streamnode.js-client

Cursor hovers over button, positioned perfectly in the center

I am facing a challenge with implementing a hover function for a set of buttons on the screen. The goal is to display the mouse pointer at the center of the button upon hovering, rather than the actual position of the cursor being displayed. I have tried u ...

javascriptjquerycsspointerlock

Learn how to import from a .storybook.ts file in Vue with TypeScript and Storybook, including how to manage Webpack configurations

I'm currently utilizing Vue with TypeScript in Storybook. Unfortunately, there are no official TypeScript configurations available for using Vue with Storybook. How can I set up Webpack so that I am able to import from another .storybook.ts file with ...

javascripttypescriptvue.jswebpackstorybook

Troubleshooting: Angular.js error when Typescript class constructor returns undefined

I'm currently trying to create a simple TypeScript class, however I keep encountering an error stating this is undefined in the constructor. Class: class MyNewClass { items: string; constructor(){ this.items = 'items'; ...

javascriptangularjstypescriptangular-ui-router

Guide to displaying query results separately on a single webpage

On my page, I have two distinct sections: 1) A list of regular questions; 2) A top-voted list of popular questions Both of these sections rely on calls to the same backend API, with the only difference being an additional parameter passed for the popular ...

javascriptreactjsredux

Exploring the fundamentals of authentication with Express JS

Currently, I am encountering a challenge while attempting to implement basic authentication with Username and Password using Express JS. The problem lies in the fact that when I try to incorporate an if statement within an app.use() function, it does not s ...

javascriptexpresscurllocalhost

Applying custom CSS designs to images using Thymeleaf

Currently working on a web application using Spring MVC and Thymeleaf for templating. I'm struggling to figure out how to apply rules to an image, especially when using an external CSS file. I have tested code that works: page.html <a class="nav ...

htmlcsstwitter-bootstrapspring-mvcthymeleaf

Experiencing a strange response while attempting to parse the result of an Angular 2 HTTP JSON request

After successfully implementing the http.get call and retrieving data from the request, I encountered an issue: this.http.get('https://data.cityofnewyork.us/resource/xx67-kt59.json').subscribe(data => { // Read the result field from the ...

javascriptjsonangularangular-http

Decide whether an angular rotation is within the camera's field of vision inside a spherical object

Seeking assistance with a three.js project. I have set up a camera inside a SphereGeometry at position (0,0,0) and am projecting an image on the sphere's wall. My goal is to create interactive JS elements outside of the threejs framework that respond ...

javascriptthree.jsrotationpanoramas

A guide on looping through data in a JSON-serialized System.Data.DataTable with the help of jQuery

Here is an example of the JSON format: [ {"animal":"dog", "sound": "bark"}, {"animal":"cat", "sound": "meow"} ] I am looking to iterate over each record {...} within the brackets [ ], starting with the dog-record and then moving on to the cat- ...

jqueryjsondatatableeach

What is the top choice for creating a cutting-edge front-end web module?

Which generator or scaffold is recommended for creating a contemporary front-end web module using npm/webpack? ...

javascriptnpmwebpack

jQuery function fails to work on a list that has been dynamically generated

Can someone please assist me? I have encountered an issue where the dynamic list on the second page is not functioning properly. When I click any "li" element to trigger an alert for the respective "id" (which works fine for a hardcoded list), nothing happ ...

jqueryhtmljquery-mobile

Consolidate all scripts into a single file with Asp.net MVC 5 bundling

On one of my razor pages, I have the following script section: @Scripts.Render("~/bundles/script1") @Scripts.Render("~/bundles/script2") @Scripts.Render("~/bundles/script3") The issue is that it renders three separate JavaScript files. Is there a way to ...

javascriptasp.net-mvcrazorbundle

Exploring the Power of jQuery's Vote-Object and Scope

This is a coding dilemma related to JavaScript. The reference to this particular website is not necessary and therefore does not pertain to meta. In my current project, I am developing a Greasemonkey script that automatically loads more answers onto the i ...

javascriptjqueryscopegreasemonkey

What is the best way to retrieve a JSP parameter dynamically or how can one create a JSP parameter on the

Currently learning JSP and ajax simultaneously. In the process of creating a dynamic tab that can be added or removed using these steps. Looking to pass parameters from controller to the content area of the newly added tab. 1. When clicking on the &apos ...

javascriptjqueryajaxjsp

Dynamic text displayed on an image with hover effect using JavaScript

Currently, I am in the process of developing a website for a coding course that is part of my university curriculum. The project specifications require the use of JavaScript, so I have incorporated it to display text over images when they are hovered over ...

javascripthtmlcsshover

"Encountered an error while trying to access properties that

Struggling to create a practice menu with the functionality of making elements appear and disappear on click? If you are encountering issues with a class named "option" not working as expected, you are not alone. Clicking on nested objects like images or i ...

javascripthtmlcss

Receiving a blank array from the firestore database

I have written a code for the LeftBar Component where I am trying to retrieve data stored in the "contacts" document in Firebase. However, I am getting an empty array and I'm not sure why this is happening. Additionally, I would like to know how to ac ...

javascriptreactjsfirebasegoogle-cloud-firestore

"Learn how to extract the image URL from the configuration file (config.json) within the assets folder, and then seamlessly display it within

In my Angular project, I have a configuration file located in the assets folder: { "brandConfig": "brand1", "brand1": {"urlPath": "http://192.168.168.60:8081/mantle-services", " ...

javascripthtmlangularhttpfrontend

"The boundary of suspense was updated before completing hydration." This error occurs when utilizing suspense and dynamic import within Next.js

I am currently working on lazy loading a list of data using suspense and dynamic import in Nextjs. However, I encountered the following error: Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch ...

javascriptreactjsnext.jsreact-suspense