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
Related
need a kind help from you:
I have this CSS and i want to change the word "ACTIVE" into another word after clicking on a button:
after clicking it should be:
example: body.new.content
My code is:
enter image description here
Could you please help me?
thanks.
Thank you for your answers, my issue is how to perform this:
When i click on the first press button (as you can see in the picture), it will open 2 pop-ups also the second button
enter image description here
enter image description here
This is my html code:
enter image description here
why you need to change css using javascript. It's not a correct way and can't do directly.
For example, if you have a need, try to remove active and add need class in your html content. Keep both type styles in your css. If still having exact need to modify, tell us denarii, let we think through and guide you. Thanks,
I don't think you can interfere in CSS with the way you described it.
you need to add a new class using classList.add("the name of the class you want to add") then append it to the parent div or for example the body with the append() or appendChild() methods then if you want you can style it using .style
I don't recommend you do this, because you'll run into some problems later in the development of your app.
Anyways I can give you a solution for that. Every DOM element has a lots of properties, one of them is classList which is an array of classes that the element has.
You can get it this way: body.classList
So, if you want to remove the class .active from your body you can use the remove() method like this: body.classList.remove('active'). Then if you want to add another class like .new you must use the add method like this: body.classList.add('new'). Make sure there is a 'new' class in css.
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/
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've got this element that's not precisely defined as a div or anything but just white space popping up inside the html. Can't get to it with jQuery to remove it.
Type of element is highlighted in the screenshot.
Im not expert, but maybe you could use .prev() method.
Something like
$('#main .content').prev();
Pure Javascript to select it:
var textNode = document.getElementById("main").getElementsByClassName("filter-navigation")[0].nextSibling;
and remove it:
textNode.parentElement.removeChild(textNode);
jQuery simplifies the selection a bit, but the removal has to be done the same way since jQuery doesn't like removing text nodes:
var textNode = $("#main").find("filter-navigation")[0].nextSibling;
textNode.parentElement.removeChild(textNode);
The answer is not simply.
jQuery can map objects with structure. It's very hard to catch just whitespaces as DOM elements and remove them.
I cant suggest 2 alternatives:
Use jQuery to get parent tag, extract innerHTML and user regex to remove "extra whitespaces" between tags:
$(document).ready(function(){
var container = $('.product-container');
container.html(container.html().replace(/>\s+</i, '><'))
});
Use css to clean how looks my content inside that tag as suggests thirtydog here
Hope this help!
I am running in to this situation. Basically my site has many templates of css and users can change the color dynamically using jQuery. Now, the way I did it was to use jQuery to modify the css property directly by selecting the classes. However, if users switch to a different template (also dynamically), I insert .css file in but it has NO effect what so ever. The reason is the css change style=".." for each elements take precedent. How to fix this issue? I am thinking of 2 ways:
Delete the style="..." at each elememts. But how to do this?
Get the values directly from within .css file and assign to each elements again as style="..."
Anyone can show me some light on either one? Thanks.
If you just want to remove the style attribute from a group of elements you can use:
$('p').removeAttr('style');
Just replace 'p' with all the elements you want to remove the inline CSS from, e.g:
$('input, div, h1').removeAttr('style');
Hope this helps.
Before you switch out the style from the original using jQuery, why don't you assign the original style value to data on that element, and then restore it using that value.
So, for instance, say you're changing the css font-family of an element with class "foo":
To apply new css:
var orig = $(".foo").css('font-family');
$(".foo").data('origFont', orig);
$(".foo").css('font-family', 'Arial');
To revert the css:
var orig = $(".foo").data('origFont');
$(".foo").css('font-family', orig);
Get rid of all inline CSS using this regex in your editor:
style="[^"]*"
i just had the same problem, but i think the best solution is to use the jquery add and remove class.
each template should have a class, then to change it, use the remove class and add the desired class