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';
});
});
Related
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.
This question already has answers here:
How do I add a tool tip to a span element?
(5 answers)
Closed 4 years ago.
After writing down a set of rules for a website, I want to give certain words a definition. My idea was that it would be best when a person hovers over a word, that the definition will pop up below or at the top of the word, whilst the text around the word itself remains in place.
I have looked all over and I cannot find a proper way to do this. I have offcourse looked at: https://www.w3schools.com/howto/howto_css_tooltip.asp
This is very close to what I want to achieve, but I cannot seem to find out on how to get text in front and after the word I want to hover over and then display a definition.
Hopefully I am clear in my wording here.
On a side note, only html, css and javascript should be used.
Example:
<p>Rule number 1: Please be respectful in our community.</p>
I would want a hover on the word respectful that displays a text above it with a definition.
There is already a tag specifically for this, if you don't mind holding your mouse over it for a moment, the DEFINITION tag or <dfn>. By default, it italicizes the text, but you can change that styling however you'd like to. This is going to be more semantically accurate than just using something like a span or div, but it doesn't really matter which you do. It's the title on the element that does the magic.
<p>Rule number 1: Please be <dfn title="don't be a jerk">respectful</dfn> in our community.</p>
You could use the title attribute on a <span> element (hover for a second over respectful:
<p>Rule number 1: Please be <span title="feeling or showing deference and respect">respectful</span> in our community.</p>
Or, you could use the HTML5 <dfn> (definition) tag for semantics, although you'd still need the title attribute:
<p>Rule number 1: Please be <dfn title="feeling or showing deference and respect">respectful</dfn> in our community.</p>
This question already has answers here:
jQuery attribute selector for multiple values
(2 answers)
Closed 7 years ago.
This is pretty simple, but I need to be able to toggle showing columns in a table.
The idea is to have a function that will take the name of the column (all the rows have the same data-field in the same column) and hide it, adjusting the width of the table as it goes.
Using Chrome's inspector, I came up with a simple proof of concept
$('[data-id="column"],[data-field="column"]').toggle()
After running the above, I need to adjust the width of the element plus / minus 4 pixels for the table to fit correctly - The table renders a white box on the right hand side where the column(s). This is just a proof of concept and the actual width will be stored in a variable that will be manipulated to allow multiple columns to be hidden.
$(".oe_list_content").width($(window).width()+/-4)
I made a simple function to come up with the initial idea, but when I run the function, it returns undefined and doesn't make the changes. I'm fairly certain that it can, but is the jQuery selector not able to take a function variable?
function rowToggle(row){
// Verify the rows even exist in the DOM
if($('[data-id="'+row+'"]').length){
$('[data-id="'+row+'"]','[data-field="'+row+'"]').toggle();
if($('[data-id="'+row+'"]').is(':hidden')){
$(".table").width($(window).width()+4);
}else{
$(".table").width($(window).width()-4);
}
}
}
This really seems like a variable problem because
var row = "column";
$('[data-id="'+ row +'"]').toggle();
doesn't actually toggle the field. Am I missing something?
This line
$('[data-id="'+row+'"]','[data-field="'+row+'"]').toggle();
Should be:
$('[data-id="'+row+'"],[data-field="'+row+'"]').toggle();
It's a single selector string. Not two strings separated by a comma as you had it.
Further reference to this issue: jQuery attribute selector for multiple values
This question already has answers here:
How to scroll an HTML page to a given anchor
(17 answers)
Closed 8 years ago.
I want browse directly to my site div by this way:
www.xyz.com/#divname
some sites I saw , I know there is a way to do it ,can anyone tell me the code
I have tried
window.location.href=#divname
but not scrolling.
Try
window.location.hash = '#divname';
Where #divname is the id of your div
Can you try this,
<body onload="window.location.hash = '#divname';">
That is called bookmark links, see here http://www.hyperlinkcode.com/bookmark.php.
To navigate to an anchor via javascript you can use this code:
window.location.hash = "#divname";
This topic is also a duplicate of the following:
How to scroll HTML page to given anchor using jQuery or Javascript?
Regards.
If you want to browse directly using a URL (as per your question), then there is absolutely no need for any javascript.
All you need to do is set an id for your div elements, that match the anchor tag you want to use. In the case of your example:
www.xyz.com/#divname
Then you would need an element like so:
<div id="divname">
</div>
Here is a working example
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