I have an element, for communication purposes we'll call $elA which during runtime is having some CSS properties changed via .animate()
for example:
$elA.stop().animate({
top: `${Math.floor(Math.random()*99)}%`,
left: `${Math.floor(Math.random()*99)}%`,
width: '15px',
height: '15px',
opacity: '1.0'
//etc etc etc
});
When a certain event triggers later in the code, I am in need of creating a clone of $elA. For communication purposes lets call this $elB.
How can I do something akin to $elB.css = $elA.css during this event? It doesn't need to be a jQuery method, or it can be there is no problem, I just am not sure if there is an elegant way of handling this case where there is no current class associated with it because the properties for the DOM element I wish to clone doesn't exist in a sheet anywhere.
Thank you.
if you only need the styles to be cloned you can use a function for it like that: (Fiddle hier: https://jsfiddle.net/taxostd0/2/)
function copyStyles(from, to) {
var fromStyles = getComputedStyle(from);
for(prop in fromStyles) {
to.style[prop] = fromStyles[prop];
}
}
and then call it like this:
copyStyles($elA[0], $elB[0]);
Use .clone() method of jQuery. It performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes.
If using javascript, the following would help to copy just the styles to another element.
document.getElementById("copy2").style.cssText= document.getElementById("copy1").style.cssText;
<div id="copy1" class ="copycss" style="width: 100px; background-color: blue; color: red; font-size: 15;">
10
</div>
<div id="copy2" class ="copycss">
10
</div>
Related
i've a JSX module(card.jsx) which is call in another component to create 5 instances of this module(card.jsx).
import card.css
...
<div className='cistern'>
<div className="shape">
<div className="wave"></div>
</div>
</div>
in my card.css, i have a custom property call filled.
.wave {
position: absolute;
--filled: 20%;
in my card.jsx i try to set different value for the css custom variable "filled".
React.useEffect(() => {
var cisternProperty = document.querySelector( '.wave' )
cisternProperty.style.setProperty('--filled', showFilledRoundString)
console.log('show Tank Level', showFilledRoundString)
}, [])
only the first instance use the new value, all other instance used the default "filled" value set in the css file.
what's happening? what could be the workaround?
thanks
To change the CSS property for every instance of an element in the .wave class you can either change the property in some common ancestor element rather than in the .wave elements themselves or you can go through all the .wave elements change their property.
So instead of using querySelector, which gives you only the first element in that class, use querySelectorAll which gives you a collection of all the elements in that class. You can then loop through them setting the CSS variable individually for each one:
var cisternProperties = document.querySelectorAll( '.wave' );
cisternProperties.forEach( cisternProperty => {
cisternProperty.style.setProperty('--filled', showFilledRoundString);
});
I want to create a custom HTML element that behaves exactly like the built-in <div> element. I'm trying to prevent a <div> soup. I would for example want to have a <currency-list> element. This element should behave exactly like the <div> element. The only difference is the name. How can I achieve this?
Thanks,
Yosemite
a DIV (HTMLDivElement) is a block element.
But you don't even need a defined Custom Element/Web Component to make a block element
customElements.define("currency-list", class extends HTMLElement {
connectedCallback() {
this.style.display = "block";
}
});
another-list {
display: block;
}
body>*:defined {
background: green;
color: beige;
}
body>*:not(:defined) {
background: lightgreen;
}
Line 1
<currency-list>Hello Web Component</currency-list>
Line 3
<div>Line 4</div>
Line 5
<another-list onclick="alert(this.constructor.name)">Line 6</another-list>
Line 7
Notes:
<currency-list> is an "Autonomous Custom Element" (extends HTMLElement)
You can extend HTMLDivElement in Chromium and FireFox, but Apple has stated they will never implement "Customized Built-In Elements"
From: https://github.com/WICG/webcomponents/issues/509
<another-list> is an HTMLUnknownElement; nothing wrong with using it, its constructor is an HTMLElement, so can do everything an HTMLElement can do.
For more on the value of Unknown Elements see my Dev.to post
You can set any CSS display value on a DIV, you can't on your own Elements, as it will destroy the display:block setting.
PS. tag your SO questions web-component and/or custom-element
I am trying to obtain the font-size currently applied to a cloned element, but when I use the jQuery .css function, it doesn't retrieve anything.
Is it not possible to use the ".css" function in jQuery to retrieve a specific css property from a cloned element?
The following does not work:
var clonedElement = jQuery('.element').clone();
clonedElement.attr("style", "");
var defaultFontSizeValue = clonedElement.css('font-size');
console.log(defaultFontSizeValue);
Edit 1
The original unfortunately has inline styles that don't allow me to get the overridden font-size property for that element that is applied via a class. This is why I am trying to retrieve that original value by removing the inline styles in the clone.
Your problem is that the cloned element is not "attached" to your dom, and therefore there is no style definition to this element (based on css that are not inline).
What you can do is append the cloned element to the body (after setting display: hidden, if you want), and then check the font-size:
$(function() {
console.log($('.c1').css('fontSize'));
c1 = $('.c1').clone();
console.log(c1.css('fontSize'));
c1.css('display', 'none');
$('body').append(c1)
console.log(c1.css('fontSize'));
});
.c1 {
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c1">asd</div>
I would like to replace the class's suffix while preserving its prefix
DEMO:
http://jsbin.com/vozufura/4/edit
The desired code should make all the div black.
So that:
class= menu-456 AND menu-789 should be replaced and become menu-123
All the div should be black as a result
HTML:
<div class="menu-123">black</div>
<div class="menu-456">green</div>
<div class="menu-789" >red</div>
CSS:
.menu-123 {
background: black;
}
.menu-456 {
background: green;
}
.menu-789 {
background: red;
}
Javascript (Jquery):
/* I am not looking for javascript like removeClass nor addClass,
nor do i want to change the background.
I wanted to know if it is possible to REPLACE the suffix of a class*/
Use a combination of removeClass() and addClass() functions provided by jQuery, like this:
$(document).ready(function(){
$(".menu-456,.menu-789").removeClass("menu-456 menu-789").addClass("menu-123");
});
This code runs when the DOM is loaded and what it does is as follows:
It selects all elements with either class menu-456 or menu-789.
It removes classes menu-456 and menu-789 from those elements.
It gives the elements the class menu-123.
FIDDLE
your jquery
JS:
$(document).ready(function () {
$('[class^=menu-]').not('.menu-123').removeClass().addClass('menu-123');
});
you can you addClass and removeClass
DEMO
Changing and messing with classes is easy with jQuery.
Take a look at .addClass .removeClass.
You can use the Attribute Contains Selector or Attribute Contains Prefix Selector to be more general and effective in your code.
For example, if you want menu-123 to be the only new class on the element:
$("div[class|='menu']").attr('class', 'menu-123');
or, if you want to get clever:
$("div[class|='menu']").attr('class', function(i, c){
return c.replace(/(^|\s)menu-\S+/g, 'menu-123');
});
thanks to this answer.
How to add style=display:"block" to an element in jQuery?
$("#YourElementID").css("display","block");
Edit: or as dave thieben points out in his comment below, you can do this as well:
$("#YourElementID").css({ display: "block" });
There are multiple function to do this work that wrote in bottom based on priority.
.css()
Set one or more CSS properties for the set of matched elements.
$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
display: "block",
color: "red",
...
})
.show()
Display the matched elements and is roughly equivalent to calling .css("display", "block")
You can display element using .show() instead
$("div").show()
.attr()
Set one or more attributes for the set of matched elements.
If target element hasn't style attribute, you can use this method to add inline style to element.
$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")
JavaScript
You can add specific CSS property to element using pure javascript, if you don't want to use jQuery.
var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red";
// Multiple properties
div.setAttribute("style", "display:block; color:red");
Depending on the purpose of setting the display property, you might want to take a look at
$("#yourElementID").show()
and
$("#yourElementID").hide()
If you need to add multiple then you can do it like this:
$('#element').css({
'margin-left': '5px',
'margin-bottom': '-4px',
//... and so on
});
As a good practice I would also put the property name between quotes to allow the dash since most styles have a dash in them. If it was 'display', then quotes are optional but if you have a dash, it will not work without the quotes. Anyways, to make it simple: always enclose them in quotes.
If you are using BS5 and Tabulator I found that I had to add position: static to the cell AND add it to the button.
So, I added the following CSS:
.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
position: static;
}
and on the Tabulator div I have:
<div id="myTable" class="table-sm table-responsive"></div>
and finally on the event I do:
myTable.on("dataProcessed", function(data){
$('[tabulator-field="my_fancy_field"]').css("position", "static");
});
You will need some way of finding the right cell. I used the field that I am loading the data from.
I then end up with (on most rows) something that looks like this:
And on the last row it pops upwards like this: