This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 1 year ago.
I have baloon shape designed with CSS3.
JS Fiddle Example
It's have triangle made with
:after {
content: "";
}
I need to moving triangle left-right with modify left css param with Jquery.
I know that i can't select pseudo element which out of DOM, but is there another way to change :after style with js?
Yes, we can put another div inside like
<div class="pop"><div class="arr"></div></div>
but it's ugly
There is a much easier way: just set the pseudo element's content property value to attr(some-attribute-name), it will use the value of the HTML attribute on the parent as the content for the pseudo element. You can then use the setAttribute() method on the parent element to change the value dynamically. Below are mock snippets of how this method would look in action. I also did a blog post with further details that contains a live example fiddle.
CSS
#SomeElement:after {
content: attr(some-attribute-name);
}
HTML
<div id="SomeElement" some-attribute-name="Pseudo content here!"></div>
JavaScript (to change pseudo content)
var someElement = document.getElementById('SomeElement');
someElement.setAttribute('some-attribute-name', 'New pseudo content here!');
You insert the CSS styles dynamically in the head, and then modify that:
$("<style type='text/css' id='dynamic' />").appendTo("head");
$('.pop').click(function(e){
$("#dynamic").text(".pop:after{left:" + e.offsetX+ "px;}");
});
Here is a demo
http://jsfiddle.net/HWnLd/
As per this related question, you can't select the pseudo element. So I'd suggest defining additional CSS classes, and adding classes to the balloon with jQuery. E.g. use a class like this:
.pop.right:after {
left: 80%;
}
and apply it like this:
$('div.pop').addClass('right');
Working jsFiddle: http://jsfiddle.net/nrabinowitz/EUHAv/2/
Related
Background,
There are some elements where CSS animations needs to be applied. However these CSS needs to be generated on the fly as calculation needs to be done from JavaScript code.
This question clarifies how to dynamically add a CSS. Now the question is, how do I remove or replace a CSS generated following the accepted answer?
Just to be clear, it's nothing to do with removing a class from element. I need to remove it from the page so that animations will stop from elements with class. At some time later I can alter the CSS and re-register class so that associated elements are animated in different way.
document.getElementById('someElementId').className = '';
Edit.
You can remove it from the element's class list
document.getElementById("myelementsid").classList.remove("classname");
Here you are full documentation to do it with jQuery
https://api.jquery.com/removeclass/
with this, you can remove one or more classes
If you want to remove the specific style from the page you can do it like the following snippet:
$('link[title=stylesheettitle]').prop('disabled',true);
OR
$('link[title="stylesheettitle"]').remove();
Java Script
var style = document.getElementById('styleID');
style.parentNode.removeChild(style );
I'm experimenting with jQuery and I made this fiddle. What it basically does is wherever you click, a div element is appended on the body to that clicked coordinates.
I've managed to do it but I would like to avoid the inline styling, i.e.;
this line : $('body').append('<div style="top:'+y+'px; left:'+x+'px;"></div>');
Is there any way I could do this with any jQuery methods where the CSS can be set for every particular div as soon as it is appended?
If it is to function as your fiddle does, stick with inline styles. To dynamically write CSS into a style tag in the dom for every element, while possible, would be hyper-wonky.
If you like it more jQuery like, you can write it like this:
$('<div/>').css({'top' :y, 'left':x}).appendTo('body');
but that essentially does the same thing you're already doing.
See it here
After appending all dynamic elements you can append a style tag directly to the head to avoid any inline style in your code.
E.g.:
$('head').append(
'<style type="text/css">' +
'div{ top: y; left: x}' +
'</style>'
);
You can also use style sheets for performance purposes. See: https://learn.jquery.com/performance/use-stylesheets-for-changing-css/
I try to edit a line of jquery code to add two div elements in addition to this code! (see below)
Currently only the element "name" is displayed, but i wish i could style it via my css and add more tags elements!
Could you help me with this because i'm newbie in jQuery/javascript?
$("#tip").show().html(wmConfig["points"][e]["name"]);
If you read the jQuery documentation, you see the html function take HTML string.
http://api.jquery.com/html/
I'm not sure what do you want to do.
If you want append the divs after the name, the 2 previous answer work.
If you want put the name in 2 div, you can simply write the 2 div around in the html function.
$("#tip").show().html('<div><div>'+wmConfig["points"][e]["name"]+'</div></div>');
You can also add classes and ids.
The append method will allow you to add elements to another element.
$("#tip").append("<div>Div1</div><div>Div2</div>");
Try doing this;
$current_tip = $("#tip").show().html(wmConfig["points"][e]["name"]);
$current_tip.append('<div></div>'); //add first div
$current_tip.append('<div></div>'); //add second div
$current_tip.css('border' , '1px solid black'); //sample: add a css style in your #tip
I have a problem - I want to DELETE the div's rather than just hide them with css on my web page. I'm newbie in Javascript and I can not say for sure whether this is but I think that should be used function removeChild(). Here's the script:
http://jsbin.com/ufoyor/edit#javascript,html/
It works like this:
1) "X" button hide pronto and crossClose divs due to the fact-purpose style of "hidden" these blocks.
2) The script sets a specific value in a cookie if the value matched the block is not shown (with style = "visibility: hidden;").
Yes, you can remove the element together with its subtree with removeChild().
However, for I suggest setting style display: none. It won't display at all (won't occupy the space as visibility:hidden does).
In plain JavaScript use removeChild(): https://developer.mozilla.org/En/DOM/Node.removeChild
In jQuery you have method remove(): http://api.jquery.com/remove/
I have a Javascript function when this returns a particular value I would like to change the colors of various table header using their id.
How can I change the colour of a table header in javascript I know how in CSS, or should I somehow conditionally call the CSS to do this?
Thanks,
Van
In your Javascript you'll want to change the class name of the table header in question.
This way you will keep your styles in you CSS and simply switch out the class name on the header, thus changing the style.
I suggest using the jQuery Javascript framework to make your life a lot easier and using its addClass() method.
Change the element class with another class defined in your CSS stylesheet.
document.getElementById('headerID').style.color = '#{color}';
See this Fiddle: http://jsfiddle.net/maniator/55Z8K/
You can easily manipulate CSS in Javascript. For example, this jQuery snippet changes the background colour of an element when condition 'x' is true:
if(x) $('#test').css('background-color', 'green');
… that's very simplistic of course: it would be far better to change the relevant element's class to something else, and define the various class styles in your CSS.
Based on the return of the function, you could add/remove a class from the element, causing its colors to change.
document.getElementById('FOO').className += 'new-class'
Alternatively, you can change the style of an element in JavaScript in the following way
document.getElementById('FOO').style = { color: '#FFF', backgroundColor: '#000' };
Refer to This reference on the JavaScript names of style options.