This question already has answers here:
How to get CSS to select ID that begins with a string (not in Javascript)?
(5 answers)
Find all elements whose id begins with a common string
(5 answers)
Closed 8 months ago.
On my website I have an AJAX search form. The HTML code displays this ID:
id="edit-field-geolocation-proximity-center-geocoder--Bq5Bx8zXA1A"
I want to apply a style to it. My problem is that the code at the end of Bq5Bx8zXA1A changes with each search.
How to style all ID starting with :
id="edit-field-geolocation-proximity-center-geocoder--"
UPDATE
Here is my current CSS code, it works on non-AJAX forms. But for those who have AJAX enabled, it doesn't work because there is a random code added to the background of the ID :
#edit-field-geolocation-proximity-center-geocoder .form-item {
margin-top: 0rem;
}
enter image description here
Welcome to Stack Overflow! I can help with that. One way to achieve what you are looking for in pure CSS is with an attribute prefix selector (which uses a form of regular expressions). In your case the following would likely do the trick:
[id^="edit-field-geolocation-proximity-center-geocoder"] .form-item {
/* your styles here :) */
}
This thread offers a lot of additional excellent methods on how to use regex in CSS if you would like to do some additional reading.
Related
This question already has answers here:
How do I create an HTML button that acts like a link?
(35 answers)
Closed 6 years ago.
I coded
<a class="link, btn"(styles that I made) href="">About me</a>
But I don't know what to put in the href.
Can anyone help?
Thanks!
html buttons don't really have hrefs. They are usually within a form and the form has the href in it. If you don't have a form and you just want the 'look' of a button you can use this code:
<style>.button { background: grey; color: black; }</style>
then in the body where you want your link
Oh yeah baby!
..... down the page somewhere
you can also use (s)
Just keep in mind you can only have one unique id per page. Dont give two elements the same id.
The link will now 'jump' down the page to the 'anchor'
You can use sites like this one to generate prettier buttons than that one! http://css3buttongenerator.com/
If you need clarification just ask, good luck!
This question already has answers here:
CSS content property: is it possible to insert HTML instead of Text?
(5 answers)
Closed 6 years ago.
I built a progress bar that consists of a horizontal list. Each list item has svg's included in the content property of the ::before pseudo class. The effect is the appearance of icons above each list item that represent a certain step in the user's progress.
User's are allowed to edit the color of all content on the site. The svgs' color cannot be edited when it is simply linked via the content url. However, I was wondering if i could instead insert the svg into an <object> tag and then include the <object> in the content property.
I have a feeling this can't be done but was hoping somebody else had some insight!
Thanks!
.test::after {
content: "Pseudo-elements <b>cannot contain additional DOM nodes</b>."
}
<div class="test">Nope. </div>
Only text, URIs, or a handful of misc convenience values are allowed in the "content" property: https://developer.mozilla.org/en-US/docs/Web/CSS/content
This question already has answers here:
How to get a style attribute from a CSS class by javascript/jQuery?
(8 answers)
Closed 8 years ago.
It might be repeated question but still need of time is that I want a solution.
I am new to CSS and jQuery, so here is what I am looking for.
I have a css like this
.my-selector {
background-size: cover;
something-here1 : 2;
}
Now I want to check whether this my-selector has backgroud-size as one of the elements or not, if it has then I want to add new element in same selector.
This I want to do in JavaScript or using jQuery
btw: jQuery IS javascript.
if (!$(this).hasClass("my-selector")) {
//rlemons post [link below] deals with this
}
look here for rlemon's anwer for the this part
This question already has answers here:
Custom attributes - Yea or nay?
(15 answers)
Closed 9 years ago.
I am working on a website using HTML5. I have a jQuery script that shows a custom tooltip on all elements that have the title attribute. I also have a script that makes an alert message appear when the user clicks a picture. The alert message will say what the title attribute equals. Unfortunately the tooltip script and the alert script interfere with each other.
My question is:
Can I make up an attribute?
Not exactly, but HTML 5 provides data-*.
In html5 , use data-XX to produce extra attributes.
see : http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
You can make an aditional attribute, just by naming it.
<img src="abc.jpg" data-opens="abc" data-test="abc" id="image" />
And access it in jQuery by typing
$("#image").attr("data-opens")..
Like:
alert($("#image").attr("data-opens") + " " + $("#image").attr("data-test"));
Edited, thanks to GCyrillus.
Specifically answering you question: you can make up attributes.
But your HTML will no longer be valid and since you are adding them just to store information, you should use de data-* form to add you own data storage for an element, plus it will still be a valid HTML
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Changing a CSS rule-set from Javascript
Dear experts,
Is there a way to dynamically generate a CSS stylesheets using Javascript according to what the users fill in on a form (user interface)?
If this isn't possible with Javascript, could someone point me to the right direction. Ruby on rails would also be fine.
Thanks
Sure you can. But you have to validate the user input. And write some kind of a css-processor to search the input text for the elements themselves and the according css-rules.
Finding css-rules is easy - they are all inside the braces {...} and the elements to which you apply the rules are outside the braces {...} .an .element {...}
You'll end up with something like this css playground
Yes you can do that.. Lets say you have a input fields.. and whenever user changes value in the input field, then you want to add some special css..
$('#form input').change(function(){
$('#someElement').css({
'background-color': 'green';
});
});