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.
Related
I'm trying to change width and height of pseudo-class element through the attribute. I'm doing this because I cannot change pseudo element in javascript. What's wrong in my code? Mozilla says its posible:
https://developer.mozilla.org/en/docs/Web/CSS/attr#Examples
.loader::before {
height: 30px;
width: attr(data-width);
display: block;
position: absolute;
background-color: red;
content: '';}
javascript:
$('.loader').attr('data-width', '100px');});
https://jsfiddle.net/9j2pbbzd/
Be careful, at the moment you can use attr() just into content property. Look at this similar answer https://stackoverflow.com/a/27529435/1849721
What if you create a class with the width/height you want the pseudo element to have and use JS to add/remove this classes as you want to ?
I have a round < button > with a < div > inside that represents a Unicode image. Currently the button is set to border-radius: 12px; height: 24px; and width: 24px; and the < div > is to font-size: 17px. The < div > Unicode image sits inside but not centered and the button is slightly off to the side.
How can I get the < div > to center inside an oval button despite what font-size the < div > is?
EDIT
I want to create a circle/round button with an emoji center to the middle of the button despite the button's size or the emoji image's size.
CSS for the button and emoji image for div:
#emoji-button {
border-radius: 19px;
width: 38px;
height: 38px;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 20px;
}
And round/circle button with emoji image inside:
<button
type="submit"
id="emoji-button"
>
<div id="thumb-emoji"></div>
</button>
But it is not centered.
And is there a way to just back the emoji image alone to be clickable for a method?
First off:
A <div> is a block element by nature. It will always become 100% wide. If you want it to not be 100% wide, give it a display:inline-block so it won't get bigger than it needs to be. Then give it a margin:0 auto; or a text-align:center on the parent to center it.
HOWEVER, You are not allowed to put <div>s inside of <buttons>. it is invalid HTML
See this answer for more information:
Why can't a <button> element contain a <div>?
Or, you could read here, from W3 that only phrasing content is expected to be used within a button:
https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element
If you do not know what phrasing content is, See this page:
https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content
-- if you are looking into styling buttons specifically, maybe this very short tutorial would help:
http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/
Here is a fiddle of a working button like yours:
https://jsfiddle.net/68w6m7rr/
I honestly didn't have many problems with this. I only replaced your <div> with a span, that's it.
can you post your code?
You should NOT need a div inside the button. If you need the button to have a specific style give it a class. You could do something like this
CSS:
button.something {
padding: 25px;
border-radius: 100%;
font-size: 20px;
border: none;
}
HTML:
<button class="something">👌</button>
For clean and valid code, you'd better use a :before or :after pseudo-element. This would also take care of the centering by default.
It's even easy to set the content. Either in css only, like this:
1.
button:before {content:"\25b6";}
(put your unicode value there and classes/ids as needed, then specify them in turn in css)
2.
Or if you need to specify the value in mark-up, drop a custom data-* attribute like this:
<button data-myunicode="\25b6"></button>
with each button taking it's own value, then drop this single line in css:
button:before {content:attr(data-myunicode);}
Before answering, let's clear some things out.
div is a block level element, used in an inline element, which is the button element. Browsers will consider this invalid and will fix it by removing the block element from the inline element. For more about CSS concepts like box model, box generation please refer to these resources:
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Also, if you are using an IDE, make sure you have installed linting/hinting tools to help you out. These tools can help you in code authoring so, make sure you have them. If you are using software like VSCode or Sublime Editor, there are many free code analysis tools out there.
Let's go back to the code now.
You said
I want to create a circle/round button with an emoji center to the
middle of the button despite the button's size or the emoji image's
size.
I went ahead and created a plunk here where I demonstrate this. Essentially, I wrapped the button around a div which serves as a container and through some CSS magic, I made it to have the same height as its width. More on that you can find at this SO answer.
The #emoji-button then has a border-radius: 100% in order to be round, width is inherited from the parent, meaning it has the same as the container and it position is absolute in order to fit in the container.
The #thumb-emoji has changed to a span element. By user agent styles it has text-align:center.
<div class="button-group">
<button type="submit" id="emoji-button">
<span id="thumb-emoji"></span>
</button>
</div>
CSS:
.button-group {
position: relative;
width: 100px;
}
.button-group:before {
content: "";
display: block;
padding-top: 100%;
}
#emoji-button {
width: inherit;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 200%;
}
You can change the .button-group width to whatever width you want, it will still keep its 1:1 ratio.
You can use then media queries on .button-group to adjust the font-size of your #thumb-emoji, by setting your desired breakpoints.
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>');
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;
}