Background:
I am building a Wordpress site with Elementor and will like to use Javascript to amend the hover properties.
What I have done:
Based on the answer in this solution (Change :hover CSS properties with JavaScript), I have been able to get my code to work in JSfiddle (https://jsfiddle.net/lindychen/hL60waqd/2/).
The problem:
However, when I import this code into my Wordpress site in the following manner, the code does not have any effect on my page. This is how I implement the code in Wordpress.
<script type="text/javascript">
if (localStorage.getItem('trackerxyz') === 'page_m') {
var css = 'button.elementor-button.elementor-size-sm:hover{ background-color: #cc3633; color: #ffffff } button.elementor-button.elementor-size-sm {background-color: rgba(204,54,51,0.86); #ffffff}';
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
Can someone please let me know how to resolve this? Thanks.
You can solve this just by this:
if (localStorage.getItem('trackerxyz') === 'page_m') {
var style = '<style>button.elementor-button.elementor-size-sm:hover{ background-color: #cc3633; color: #ffffff } button.elementor-button.elementor-size-sm {background-color: rgba(204,54,51,0.86); #ffffff}</style>';
document.head.insertAdjacentHTML('beforeend', style);
}
So no need to create nodes. See insertAdjacentHTML on MDN
Related
I want to animate background color of input element, but it doesn't works :(
JavaScript (when submit):
function sendImage() {
formularz = $('form#sendImage');
autor = formularz.children('input[name=autor]');
if (autor.val().length < 1 || autor.val().length > 20) {
console.log('start');
autor.animate({
backgroundColor: 'red',
width: '100px',
}, 3000, function() {
console.log('end');
});
}
}
jQuery liblaries:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui/jquery-ui.min.css">
<script src="jquery-ui/external/jquery/jquery.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<!-- I tried also this -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
In JS function works well - logs in console are shown, width of element too is changing, but background color not and it do not show any errors in console.
Any suggestions?
jQuery cannot animate background colours by default. You have two options, first you could use a third party plugin. Secondly, you can use CSS. The latter is preferable. Here's how to do it by setting the transition CSS rule on the element and then just adding the class in your jQuery code.
input {
transition: all 3s;
}
input.error {
background-color: red;
}
function sendImage() {
var $formularz = $('form#sendImage');
var $autor = $formularz.children('input[name=autor]');
if ($autor.val().length < 1 || $autor.val().length > 20) {
$autor.addClass('error');
}
}
Working example
I am pretty sure in Javascript you need to indicate you are adding style to an element via its id. So if you set an element's Id to be autor it would work using the following in your if statement:
document.getElementById('autor').style.background-color="red";
Rory McCrossan, I tested your recommendations and 'backgroundColor' worked well, but later i wanted to check again the backgoundColor and it also works...
So I don't know what was wrong. Mayby some typo or I forgot about somethink.
Sorry for the confusion.
I am trying to change the style of gridview footer's style due to change of aggregated footer alignment based on three conditions in IE9 but it just keeps on throwing me an error of undefined,my question is how can I change the style any help is appreciated:
.rgFooter, .rgFooterDiv
{
background: none !important;
background-color: transparent !important;
width: 100% !important;
/*max-width:779px;*/
}
To:
.rgFooter, .rgFooterDiv
{
background: none !important;
background-color: transparent !important;
width: 100% auto!important;
}
only using javascript no JQuery. I tried so far:
var mydiv = document.getElementById("mygrid").className;
mydiv.setAttribute("style", "width: 100% auto !important; background: none !important; background-color: transparent !important;");
Thanks everyone for the help
If you cannot use jQuery, perhaps you should just use the addClass and removeClass functions from it. You can see them re-written in pure javascript here: https://stackoverflow.com/a/14105067/1026459
The reason that your call to setAttribute is not working is because the reference you make is to the string for the element's class.
var mydiv = document.getElementById("mygrid").className;
Perhaps you should access the div like this instead:
var mydiv = document.getElementById("mygrid");
and then you will have access to setAttribute. To simply remove all classes from the div, you can always use
mydiv.removeAttribute("class");
No need to use "!important" for inline styles. If you want to set inline styles using javascript without usage of any libraries, I would recommend something like this:
var mydiv = document.getElementById("mygrid");
mydiv.style.width = "100% auto";
mydiv.style.background = "none";
mydiv.style.backgroundColor = "transparent";
I'm guessing that you have an issue in your code
var mydiv = document.getElementById("mygrid").className; // mydiv variable is a string
mydiv.setAttribute(...); // Why would a string have "setAttribute" function?
The className property returns a string, not an object that you can use to access the element. Just remove that:
var mydiv = document.getElementById("mygrid");
First, you don't want to access the "className" property of your element; you just need the element.
var mydiv = document.getElementById("mygrid");
Then, you should set the individual properties of the style object:
mydiv.style.width = '100%';
mydiv.style.backgroundColor = 'transparent';
and so on. If you want to get rid of all classes, you can do this:
mydiv.className = '';
Added another css:
.rgmine
{
background: none !important;
background-color: transparent !important;
width: auto !important;
}
then changed the class name based on third condition:
<script type="text/javascript">
function pageLoad() {
document.getElementById('ctl00_Body_rgWMTSI_GridFooter').className = 'rgmine'}
</script>
How do I add CSS to elements that have been dynamically created?
Here is a simple example of what I would like to do:
$(document).ready(function() {
$('#container').html('<p id="hello">hello world</p>');
// The following line doesn't work.
$('#hello').css("background-color", "#FFF");
});
The reason I want to do this, and I can't think of another way of doing it, is that I want to use background colour on alternate rows of a table that is dynamically generated:
$("#results-table tr:even").css("background-color", "#FFF");
I need to use this line of jQuery specifically for IE8 and below, which don't support nth-child CSS selectors.
Actually, your code does work. You might want to check if you don't have multiple elements by that ID.
Edit:
Here's your code, without duplicate IDs: http://jsfiddle.net/FhTU7/
Final edit:
Your HTML background and element background are both white.
You could instead of directly setting the CSS also just add a class to the even rows
$("#results-table tr:even").addClass("alt");
CSS to set the row colours and then a different set of colours for the alternate rows
<style type="text/css">
tr
{
background: #fff;
color: #000;
}
tr.alt
{
background: #000;
color: #fff;
}
</style>
You could declare the new element as a variable...
$(document).ready(function() {
var $new = $('<p id="hello">hello world</p>');
$new.css({
backgroundColor: "#fff"
})
$('#container').append($new);
});
You could use appendTo...
$(document).ready(function() {
$('<p id="hello">hello world</p>').appendTo('#container').css({
backgroundColor: "#fff"
})
});
However, if you create the elements correctly then you can use the original CSS at the end...
$('#container').append('<p id="hello">hello world</p>');
I want to change a less variable on client side.
Say I have a less file
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
I want that user yo pick a color and change the value of #color1 and recompile css without reloading the page.
Basically I'm looking for a js function, something like this
less_again({color1: '#ff0000'})
Marvin,
I wrote a function that does exactly what you're looking for, last night.
I have created a fork on Github;
https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc
Take a look at it. Since this is a recent addition, I'd like to hear your comments on the addition. This solution fits my needs perfectly and I think it will do the same for you.
Here is a basic sample;
Sample LESS:
#bgColor: black;
#textColor: yellow;
body {background: #bgColor; color: #textColor;}
From JS:
less.modifyVars({
'#bgColor': 'blue',
'#textColor': 'red'
});
The creator of less.js added some features that should allow you to do something like this. Read the comments and the answers here: Load less.js rules dynamically
This less:
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
compiles to this CSS and this is all the browser knows about:
.title { color: #123456; }
.text { color: #234567; }
So, now you're effectively saying you want to change dynamically to this:
.title { color: #ff0000; }
You can do that by reaching into the existing stylesheet with JS and changing the rule for .title. Or, you can define an alternate rule in your original CSS:
.alternate.title { color: #ff0000; }
And, find all the objects with .title and add .alternate to them. In jQuery, this would be as simple as:
$(".title").addClass(".alternate");
In plain JS, you'd need to use a shim to provide getElementsByClassName in a cross browser fashion and then use:
var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
list[i].className += " alternate";
}
Hello I am using jquery layout plugin from http://layout.jquery-dev.net/ .
my options are following:
<script>
$(document).ready(function(){
// create page layout
pageLayout = $('body').layout(
{applyDemoStyles: true,
spacing_open:0,
spacing_closed: 0,
slidable: false,
togglerLength_closed: 0
});
pageLayout.panes.north.css('backgroundColor','#A6f');
// we need to remove the borders as well....
});
</script>
This removes sliders but:
How to remove the pane borders as well?
thanks Arman.
Remove one border:
pageLayout.panes.north.css('border','none');
Remove all borders:
As you should be quite sure that each pageLayout.pane will have o as a property:
for(property in pageLayout.panes){
pageLayout.panes[property].css('border', 'none');
}
How you should really do it - checks to make sure o is a property of pageLayout.pane before attempting to access it:
for(property in pageLayout.panes){
if(pageLayout.panes.hasOwnProperty(property)){
pageLayout.panes[property].css('border', 'none');
}
}
I haven't tried this plugin yet but since your last line is pretty much like the usual css try this.
pageLayout.panes.north.css({'backgroundColor' : '#A6f', 'border' : 'none'});
Using a css rewriting. After including the css layout file in the head section (usually jquery.ui.layout.css) you could add a style that rewrites the original.
<style>
.ui-layout-pane {
background: #FFF;
border: 0 none; //This rewrites the original style
padding: 10px;
overflow: auto;
}
</style>