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/
Related
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/
In the past I used the following code to take the take the text in the data-placeholder attribute and use it as a placeholder text for my div.
[contentEditable=true]:empty:not(:focus):before {
content:attr(data-placeholder)
}
This worked great, but in my current project we need to do the same thing except it's entirely built using jQuery. I know jQuery has .empty(), .before(), :not(), and .focus() functions. With the way the jQuery selectors work, is it possible to use the CSS selector in the jQuery selector like so?
var div = $([contentEditable=true]:empty:not(:focus):before);
If not, then is there a better way to do this when working with so many functions?
Simple solution is to append a style tag:
var rule ='[contentEditable=true]:empty:not(:focus):before {'+
' content:attr(data-placeholder)'+
'}';
$('head').append('<style>'+rule +'</style>');
How can I reset JavaScript changed CSS values in HTML elements (without reloading the page)?.
I'm trying to develop an interactive image gallery using jQuery.
Try this .....
document.getElementById("myForm").reset();
The simplest method would be to have the initial styles all set via your stylesheet (referencing elements by class, tag, or id as applicable). Don't have the defaults set via inline styles. Because then when you apply inline styles via JS you can reset to the defaults by simply removing the inline styles again - no need to know the previous values.
So taking your example where you set the opacity:
$("#main").animate({'opacity':'0'},2000);
This causes an inline style to be applied, which you can remove with:
$("#main").css('opacity', '');
...at which point whatever was in your stylesheet would take effect again.
I am able to easily change the style or the tag of an element based on certain criteria using JavaScript:
document.getElementsByTagName("mainclass")[0].style.color:#ffffff;
However, is there a way to do this is the style contains multiple classes and a tag like so
.mainclass .secondaryclass div td {
color: #000000;
}
The following is not working for me so im sure there is a totally different way of doing it:
document.getElementsByTagName(".mainclass .secondaryclass div td")[0].style.color:#ffffff;
...
The other option if easier is to figure out how to use JS to embbed a external style sheet (and not at the end of head, just where the JS code is thats where the CSS should go)
Thanks!
getElementsByTagName does not accept CSS selector syntax. You're looking for querySelectorAll but you'll have to iterate over the returned list to assign the style, and it's not completely supported across browsers.
...which is why everyone uses jQuery.
Example, assuming you want to modify just the first matched element:
document.querySelectorAll(".mainclass .secondaryclass div td")[0].style.color = '#ffffff';
Note the change from : to =, and wrapping the color value in quotes. JavaScript has different syntax from CSS; I suggest that you take some time to learn it.
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/