After creating a function to set a background on a click event, I encountered an issue. I attempted two different methods, expecting both to be successful. However, only the .css() version worked while the addClass method failed. Why is this happening?
function changeBackground(e){ $("#" + e).css('backgroundColor', '#444444');}
function addClassName(e){$("#" + e.id).addClass('clickColor');}
Below is the CSS for the clickColor class:
.clickColor{
backgroundColor: #444444;
}
Take a look at this article
.clickColor {
background-color:#444444;
}
Remember to use background-color, not backgroundColor
Note: jQuery requires camel casing for CSS attributes when used as a property, but if specified as a string, use "background-color"
^ This information is based on http://api.jquery.com/css/
When it comes to Css, inline styles take precedence over applied class styles. Using the .css() method will apply an inline style, making it highly likely to override any other styling rules. On the other hand, using the addClass() method adds a class with lower priority.
Is it "background-color" in css instead? Your function seems to have an error; if you don't include quotes around the value of e in your jquery selector, it won't work.
Check out this example here: http://jsfiddle.net/zPDpC/2/
$('#'+e+'').css('background-color', '#444444');
Having trouble implementing a Drag & Drop feature. The droppable div is styled with CSS transformations, but the draggable div doesn't drop correctly on the right part of the box. If you'd like to take a look at the code and try it out yourself, ...
I am attempting to create a wavy border effect where two sections meet on a page (refer to the image below). What is the most effective way to achieve this? The waves should be uniform in size. EDIT: To whoever flagged this as 'already answered' ...
Issue: Hover over the X and wait for the div to collapse completely. Move away from the X Notice how the div jumps to the bottom and then back up. Inquiry: How can I prevent text wrapping while expanding the div during animation? (Currently using del ...
I am a beginner in the world of Javascript, JSON, and jQuery. I am seeking some guidance as I navigate through this new territory. On my JSP page, there is a drop down list that needs to be populated with content when the page loads. To achieve this, I hav ...
Is there a way to keep a div element fixed in its original place when scrolling through it, so that it locks into position once we reach a certain point? I've tried using CSS position:fixed; without success. I have noticed this technique on many webs ...
Experience this code function AutoPopup() { setTimeout(function () { document.getElementById('ac-wrapper').style.display = "block"; }, 5000); } #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; back ...
I created a basic overlay setup using css, html, and jQuery. Here's how it looks: <a class="activator" id="activator" style="" href="#">hello</a> <div class="overlay" id="overlay" style="display:none;"></div> <div style="d ...
I am currently constructing a website that features an SVG map of the United States using the user-friendly usmap jQuery plugin powered by Raphael. An event is triggered when an individual state on the map is clicked. However, when rendering a single stat ...
I have a vision to create a web application that can display the weather of any city based on user input. I've divided my project into three files - index.html for collecting user input, index2.html for retrieving and displaying the data, and a CSS fi ...
I tried using ::first-line, but it bolds all the p tags in the array. What I want is to only bold the first p tag which contains "Hello". <div v-for="item in first" :key="item.id"> <p class="cat_name" >{{ ...
Every time I attempt to use getelementbyid on a dynamically loaded div, I receive null as the result. This occurs even after trying both window.onload = function () { and $(window).load(function() { index.html: <main > <div id="main-div"> ...
I am in need of assistance with a script I am working on that involves dynamically creating a jquery selectmenu. The issue I am facing is that when a selection is made on the first selectmenu, which is created within the HTML itself, it triggers an alert. ...
I have recently delved into the world of es6-promises and I'm struggling to fully grasp its concepts. In my project, I am attempting to retrieve data through an ajax call and keep looping until all data is fetched (essentially pagination). Below is t ...
I am looking to create a dynamic image list using either an array or an HTML list. When I hover over an image, it should change one by one with a fade or slide effect, and revert back to the default images when I hover out. Question 1: What type of list s ...
I'm in the process of developing a website that features a main content area and a sidebar, similar to what you see on Stack Overflow. The challenge I am facing is figuring out how to make the sidebar remain visible as a user scrolls down the page. T ...
Imagine a scenario where my website contains textbox elements that are dynamically generated, each with the class 'mytxt'. <input type="text" class="mytxt" /> <input type="text" class="mytxt" /> <input type="text" class="mytxt" /& ...
Having an issue with my PhoneGap-Android app that uses Jquery. When making an ASYNCHRONOUS AJAX call, the app freezes and waits for the call to finish, especially noticeable on a GSM connection. I would expect this behavior if I were using synchronous req ...
I followed the instructions, and the Datatables export function worked perfectly in localhost, but when I tried it in Google Apps script, it didn't work. For more information about the issue, you can visit this link: DataTables TableTools buttons not ...
My goal is to inject javascript code into the head of an iframe using jquery with the code provided below. var snippets_js='<?php echo $snippets_javascript;?>'; var scriptjs = document.createElement("script"); scriptjs.type = "text/j ...
Is there a way to update the column header in Tabulator using inline style when trying to avoid ellipsis as the column size is reduced? <VueTabulator ref="tabulator" v-model="receipts" :options="options" style="white ...