I want to know is it possible to add values for classes created in .css file to a tag dynamically?
Now, if I have <div class="textFrame"> in .html file and in css file I have declaration as-
.textFrame
{
overflow:hidden;
position:absolute;
}
Now, I want to add style attribute for <div> with left, top, height and width etc attributes. My question is, is it possible to create some variables let us say, left, top, height or width in .textFrame class(in .css file) and assign values dynamically to these variables for each <div> tag. Actually there are no of textFrames(<div> tags) with different values of top, left, height and width.
With use of jquery you are able to add classes dynamically in tags
eg:
<div class="textFrame">
.......
.......
</div>
Jquery :
$(document).ready(function() {
$('.textFrame').css('height','500px');
}
For multiple div has same class
eg:
<div class="textFrame" id="1"> ....... ....... </div>
<div class="textFrame" id="2"> ....... ....... </div>
Jquery :
$(document).ready(function() {
$('.textFrame').each(function(e){
if($('.textFrame').attr('id') == '1'){
$('.textFrame').css('height','500px');
} else if($('.textFrame').attr('id') == '2'){
$('.textFrame').css('height','300px');
}
});
If they all have different attributes, it makes no sense to dynamically change the source stylesheet. You should probably use Javascript to change each element's style dynamically. jQuery makes that very easy.
Related
I have this html code here:
<div default_name="RandomName1">
<div name="RandomName1">RandomName1</div>
<div name="RandomName2">RandomName2</div>
<div name="RandomName3">RandomName3</div>
</div>
The property default_name on parent div changes from time to time. I would like to set the child div which has name matching default_name to background-color:red.
Like:
<style>
div > div[name=default_name_of_parent] { background-color: red }
</style>
I have no control over what the name values are, users set it. Is this possible via style sheet?
Thanks
This can be done, if you make a rule containing a selector for each possible “combination”, like so:
div[default_name=RandomName1] > div[name=RandomName1],
div[default_name=RandomName2] > div[name=RandomName2],
div[default_name=RandomName3] > div[name=RandomName3]
{ background-color: red }
http://jsfiddle.net/wc5whfwa/
But j08691 is totally right with their comment – this should be avoided at all cost if possible, data- attributes would be the way to go.
I have the following structure:
<div class="main">
<div class="submain">
.....
<div class="sub..submain">
</div>
.....
</div>
<div class="submain">
</div>
</div>
Some of the subelements have the css property float:right;, and I dont know how many levels there are.
How can I select all elements with this css property using the selector $('.main')?
I have an idea, but I am trying to find an easier way to do it:
var elemsArray=[];
function findNeededChildren(elem){
var hasChildren = elem.children().length>0?true:false;
if(hasChildren ){
$.each(elem.children(),function(){
if($(this).css('float')=='right')elemsArray.push($(this));
findNeededChildren($(this));
});
}
}
findNeededChildren($('.main'));
You can select elements by an attribute, so you could try
$('div[style="float:right"]')
This should select all the divs with that attribute. But I am not sure if it will also select something with more than this one style.
Edit:
I just remembered that some people here where I work use classes for this sort of thing. It makes maintainability easier. Make a css rule that says:
.floatRight {
float:right
}
Then just assign this class to everything that needs floating. These should be even easier to select.
You can do something like
$(document).ready(function(){
$(".main").find("div").each(function(){
if($(this).css("float") == "right") {
// This is the required div
}
});
})
And if you don't know that children of .main are divs or other tags then use
$(document).ready(function(){
$(".main").children().each(function(){
if($(this).css("float") == "right") {
// This is the required element with float: right property
}
});
})
I have a slider that's marked up like so:
<div class="slider wide">
//slider html in here
</div>
And another marked up like so:
<div class="slider narrow">
//slider html in here
</div>
Is it possible to reference each of these like this in my CSS file by in a way concatenating the class names:
.slider.wide { //css specific to the wide slider goes here }
.slider.narrow { //css specific to the wide slider goes here }
No, you make three classes .slider, where you put common slider css, and .narrow where you put narrow slider specific css, and .wide where you put wide slider specific css.
.slider { //css common among all sliders goes here }
.wide { //css specific to the wide slider goes here }
.narrow { //css specific to the narrow slider goes here }
Yes, .slider.narrow is valid. It's not exactly concatenating the class names, it's making two different class selectors and applying them to the same element. So .narrow.slider is also valid and will match the same elements.
The problem with using multiple class selectors against a single element is that is doesn't work in IE6. This browser will ignore all but the last class selector. So to support that browser you typically end up using something like class="slider wide-slider".
I use the following code on my page:
<div id="itemstable" class="item_type1">
...other divs here...
</div>
And in my CSS file I have this code:
.item_type1 div {
background-image: url(images/type1.giff);
}
the problem is there are a lot of different item types so I will need to have a lot of lines in my CSS file. I was wondering how to apply the background-image: url(images/type1.giff); style to the nested divs without assigning it to each one. eg. I want to change the code for the "itemstable" div so that it applies a css rule to the nested divs.
Is this possible?
EDIT: I'm looking for something like this:
<div id="itemstable" style="SET BACKGROUND IMG FOR NESTED DIVS HERE">
...other divs here...
</div>
(If I'm understanding the question correctly:)
Think about using a different ID/class scheme. I don't know about the further specifics of your structure, but id="itemstable" class="item_type1" seems slightly redundant to me. Can itemstable be anything else than item_type1? Try to apply more generic class names and keep the specific cases for IDs.
Failing that, you can add another class that is responsible for adding the background image: class="item_type1 item_types".
EDIT
Since it seems sheer mass is the main problem (not applying the style as the title suggests) it's probably best to dynamically insert a style in the page header. Something along the lines of:
<head>
...
<style type="text/css" media="screen">
<?php echo "#$myelement"; ?> div { background: url(<?php echo $image; ?>) ...; }
</style>
</head>
Inline styles can only apply to the element directly, not one of its children. I.e.:
<div style="background: ...;">
The background only applies to this one div.
You can't use selectors in inline styles like:
<div style="div { background: ...; }">
I think including a little more of your HTML would make your question easier to understand.
You can certainly include multiple rules in a compound selector:
.item_type1 div.a, .item_type1 div.b, .item_type1 div.c {
background-image: url(xyz.gif);
}
But since you are pulling images from the database dynamically, you will need to either include them in your dynamic code-- in the divs themselves, or dynamically create CSS as suggested above:
<style>
<% for $i in $images { echo "div.image$i div { background-image: url(/path/to/$i) }" %>
</style>
I different CSS styles, one of which is:
#layoutsectiondiv{
border: 2px dashed #000000;
padding: 1px;
left: 0px;
}
I have a aspx page:
<div id="testDiv" runat="server">
</div>
If it was regular HTML, I would set the style of a div by doing a
<div id="layoutsectiondiv">
</div>
At runtime (in code behind), I need to dynamically assign different styles to the DIV. How would I do it?
Use the class property and change your css styles to use class selectors instead of id selectors. For example
.layoutsectiondiv{}
<div id="testDiv" class="layoutsectiondiv">
</div>
Edit
Make your class only so that you apply it on the specific divs you want. don't reuse your classes. This should be easy since your css is already tied to a specific ID, just put that class on that element.
If you use that class on many types of elements what you suggested would work fine.
Josh is right, you should use class instead of id.
for your question :
At runtime (in code behind), I need to
dynamically assign different styles to
the DIV. How would I do it?
try this :
// layoutsectiondiv is defined as class : .layoutsectiondiv{}
testDiv.Attributes["class"] = "layoutsectiondiv";
So you could use a css id selector this way.
#layoutsectiondiv { color: red }
with the following html
<div id="layoutsectiondiv">
</div>
Or a css class html selector like this.
.layoutsectiondiv { color: blue }
with the following html
<div class="layoutsectiondiv">
</div>
If you want to control the style of a particular .net control, ie one that has the runat="server" attribute, then as we know .net will 'mangle' the id to ensure its unique.
In this case in our code we can use FindControl to access the div and change its style
<div id="testDiv" runat="server">
</div>
ie.
HtmlGenericControl testDiv =
(HtmlGenericControl)Page.FindControl("testDiv");
// to hide
testDiv.Attributes.Add("style", "display: none"); // OR
testDiv.Attributes["style"] = "display: none";
// to show
testDiv.Attributes.Add("style", "display: block"); // OR
testDiv.Attributes["style"] = "display: block";
// or to add a class
testDiv.Attributes.Add("class", "MyCssClassName"); // OR
testDiv.Attributes["class"] = "MyCssClassName";
Here is a good explanation on the difference between css id and class - CSS: div id VS. div class.
And here for How to edit CSS style of a div using C# in .NET