Question: I know i can't access :before and :after selectors via jQuery by writing a code like this. Because :before / :after are not the part of the DOM.
$(document).ready(function(e){
var beforebg = $('.SomeClass:before').css('background-color');
})
Is there any way i can save the value in a variable or there isn't any way at all? I know there are methods discussed here like on this post where it says that i make another class and define :before / :after on that class and then toggle that class using jQuery. But that is not my requirement here. I need this value to be stored in a variable so to use in my script.
Update: Why i need this to be stored in a vairable?
Please refer to my this question here to know what am doing. When i am able to store this value in a variable, i'd be able to iterate over DOM using each() and then i'll be able to add a specific class to an element that has a background-color equal to the color stored in that variable (beforebg in my case).
Update: Check this css code
.service-content:after {
background: none repeat scroll 0 0 #eb2c33;
border-radius: 100%;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.09);
content: "";
height: 8px;
left: 274px;
margin-top: -58px;
position: absolute;
top: 50%;
width: 8px;
z-index: 3;
}
So can i store the value "background" color value ( "#eb2c33" in this case ) in the variable beforebg?
There is no psudeo selectors :before or :after in jquery. if you want try this way
$(document).ready(function(e){
var beforebg = $('.SomeClass').addClass('sample');
});
In your style sheet
.SomeClass.sample:before,
.SomeClass.sample:after {
background: #ccc;
}
Related
Is there a way to style little x that serve to remove selected items?
I getting it with vanilla js and jquery and with :before pseudo selector, and from all of them only pseudo selector(partialy) works. Can't style pseudo selector.
I want to have, instead that x, to have anything else. I tried targeting it, as i said before, but even if i use
document.querySelectorAll("#forma1 > span > span > span > ul")[0].childNodes[0]
which should target span that contains little x, it targets next li element. I also tried targeting it indirectly, by saying "target first li's previousSibling", but to no avail. It can not be targeted what ever i try.
My question is: Is there any way of changing text inside this span, instead of that little x?
Mucho kudos in advance.
Edit1:
Little x:
Well you still didn't show your code, so I just tried it out on the demo page of select2.org
you can do something like this (i'm using querySelector, but you can do it with querySelectorAll if you have multiple items):
let x = document.querySelector(".select2-selection");
let y = document.createElement("span");
let z = document.createTextNode("x");
y.classList.add("my-styled-little-x");
y.append(z);
x.append(y);
And now use CSS to style your class "my-styled-little-x".
E. g. something like this:
.my-styled-little-x {
position: absolute;
top: 0px;
right: 20px;
padding: 5px;
font-weight: bold;
}
.select2-selection__clear:before {
content: "yourPlaceholderText";
position: absolute;
left: 11px;
top: 45%;
transform: translateY(-50%);
font-weight: 400;
color: black;
}
This is stuff what i looked for. It mimics placeholder text, but actually it serves same purpose as that small x.
I am building a fixed header with using JQuery
Everything is working fine at the moment but instead of setting attributes to classes and I want to call them from css directly. I am not quite familiar with this method.
One of the example is below;
#header-main {
background-color: #ffffff;
min-height: 107px;
color: #8c8c8c;
}
#header-main .sabit{
position : fixed;
width: 100%;
z-index: 98;
padding-top: 35px;
border-bottom: 3px ridge #7BBD42;
}
How I am doing is; (Working)
var menu = $('#header-main');
if (...)
menu.css('position','fixed').css('width','100%').css('z-index','98').css('padding-top','35px').css('border-bottom','3px ridge #7BBD42');
else
menu.removeAttr('style'); //Back to normal
What I am doing to achieve what I want; (Not working)
var menu = $('#header-main');
if(...)
menu.addClass("sabit");
else
menu.removeClass("sabit"); //Back to normal
I also tried menu.addClass(".sabit"); or menu.addClass("#header-main .sabit"); but none of them worked.
What part am I doing wrong to add directly css class using JQuery?
It's not working because you have a space between #header-main and .sabit in your CSS, meaning that your CSS is trying to style the .sabit descendant of #header-main and not the #header-main element itself.
Change:
#header-main .sabit
To:
#header-main.sabit
Your logic is fine, the problem comes from your CSS.
The line #header-main .sabit{ should instead be #header-main.sabit{, as the sabit class is set on the #header-main element and not on one of its children elements.
Try changing
menu.addClass("sabit");
to
$(menu).addClass("sabit");
addClass comes from the Jquery library so you need to reference it from there.
I need to insert an image before an element I am trying to find in this code (also I am trying to add the class in the same function).
The js:
insertSearchIcon: function(){
$(document).find('jstree-icon').prepend('<div class="oob-dropdown">test</div>');
}
And the css class I am trying to insert.
.oob-dropdown {
background-image: url("/apps/cdpe/img/search_444444.png");
background-color: transparent;
background-repeat: no-repeat;
height: 25px;
width: 25px;
border: none;
padding-top: 1cm;
position: relative;
}
Hopefully what I am trying to do is possible, but thanks for any help!
you probably missed the . in your selector find('jstree-icon') and secondly prepend() adds another item before the first child element of the matched selector.
To add another element right before another you might be interested in before:
$('.jstree-icon').before('<div class="oob-dropdown">test</div>');
Btw: $(document).find() is probably not best practice, rather use the selector directly!
.prepend() inserts an element as the first child of another; it sounds like you need .before(). Your selector also needs a dot (assuming jstree-icon is a class).
$('.jstree-icon').before('<div class="oob-dropdown">test</div>');
I have this slidetoggle and I want the style of the open toggle to be different then the closed ones.
By default all the faqtopics1 are set to border-radius: 5px; background-color: #f2ecec; when the div faqtext associated opens.
When the toggle opens, I want the style of faqtopics1 to be set to the "OnClick Style"
border-radius: 5px 5px 0 0;
background-color: #dedcdc;
I found out about the .css() Method and could somehow make something up (line 2 and 3):
$(".faqtopics1").click(function(event) {
$("div.faqtopics1").css({"border-radius":"5px", "background-color":"#f2ecec"});
$(this).css({"border-radius":"5px 5px 0 0", "background-color":"#dedcdc"});
$("div.faqtext").stop(true).slideUp(400);
$(this).next("div.faqtext").stop(true).slideToggle();
});
But it's not a total success as even when I re-click on a toggle to close it, the OnClick style remains. Is there a better way to make what I want ?
Also I want to apply the same principal even if I click on faqtopics2, faqtopics3 or faqtopics4 div. (cf the jsfiddle).
You can find my codes (css + query) on this jsfiddle
Thanks a lot for your help!
Something much easier:
Define your two states in CSS:
faqtopics1 {
border-radius: 5px;
background-color: #f2ecec;
}
.onclickstyle {
border-radius: 5px 5px 0 0;
background-color: #dedcdc;
}
Then in JS you just have to toogle the class:
$("div.faqtopics1").toggleClass("onclickstyle");
This means you have a clear separation between the exact style (in the css), and the dynamic toogle (in the javascript).
It may be easier to use addClass.
$this.addClass('active');
Then in your css
.faqtopics.active{border-radius:5px 5px 0 0; background-color:#dedcdc;}
You can give all of your "FAQ topics" a shared class .faqtopics and then unique id's #faqtopic1 #faqtopic2 if you need to style them a bit differently.
try this,
$('faqtopics1').attr('class','newClassName');
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 3 years ago.
This is what my code looks like:
$('.mainSpan:before').css('background','url(_gfx/cmn/main_bg.png)');
This does not seem to work so I'm asking if it's even possible to add
background images to shadow elements with jQuery.
It's not possible to directly access pseudo-elements with Javascript as they're not part of the DOM. You can read their style using the optional second argument - which most, although not all, browsers in current use support - in .getComputedStyle() but you can't directly change their style.
However, you could change their style indirectly by adding in a new style element containing new rules. For example:
http://jsfiddle.net/sjFML/
The initial CSS assigns the :before pseudo-element with a green background, which is turned to black by inserting a new style element.
HTML:
<div id="theDiv"></div>
CSS:
#theDiv {
height: 100px;
background: red;
}
#theDiv:before {
content:' ';
display: block;
width: 50px;
height: 50px;
background: green;
}
Javascript:
var styleElem = document.head.appendChild(document.createElement("style"));
styleElem.innerHTML = "#theDiv:before {background: black;}";
There is also solution with CSS Variables (aka custom properties):
var style = document.querySelector('.foo').style;
style.setProperty('--background', 'url(http://placekitten.com/200/300)');
.foo::before {
background: var(--background);
content: '';
display: block;
width: 200px;
height: 300px;
}
<div class="foo"></div>
For browser support see Can I use and here is link to Ponyfill (same as Polyfill, but you need to call a function)
Ponyfill work with CSS in link and style CSS, but if you use code below, you can set the variable like with setProperty (it will run only in browsers that don't support CSS Variables like IE11)
var style = document.querySelector('.foo').style;
style.setProperty('--background', 'url(http://placekitten.com/200/300)');
cssVars({
variables: {'--background': 'url(http://placekitten.com/200/300)'}
});
.foo::before {
background: var(--background);
content: '';
display: block;
width: 200px;
height: 300px;
}
<div class="foo"></div>
<script src="https://unpkg.com/css-vars-ponyfill#2/dist/css-vars-ponyfill.min.js"></script>
Unfortunately the cssVar ponyfill is global like setting var on :root. If you need to support IE11 or other old browser you can try to search for better polyfill or library.
It is possible to change the value of the ::after element but not directly. Gotta be sneaky. Works on all browsers.
Let's say you have an element:
<div class="thing1">hi here</class>
And you got an ::after css style for it:
.thing1::after {
content:"I am what comes ::after a thing :)";
display: inline-block;
background-color: #4455ff;
padding:3px;
border: 1px solid #000000; }
And you want to change the content and the background color of the ::after pseudo-element using javascript. To do this, make a second CSS rule with the changes you want applied and have both the current class name and add a totally new class name to it. So let's say I want to change the content and the background color a bit and leave the rest of the stuff, the same:
.thing1.extra_stuff::after {
content:"Some parts of me, changed!";
background-color: #8888cc; }
Now, you can just fire off an onclick javascript event that will apply those two new rules to the element, by adding the second class name, to the element :) yay
function change_the_after_attribute(thing_button) {
thing_button.className="thing1 extra_stuff"; }
https://jsfiddle.net/bt8n26a5/
fun side notes:
You can use thing_button.classList.add("extra_stuff"); and thing_button.classList.remove("extra_stuff"); to make the function applicable to many different elements with many different class names, and to be able to remove your changes, as well!
Use a variable instead of the "extra_stuff" string to change what you're adding more dynamically.