I have a situation where I need to access a div which is dynamically generated by jQuery mobile.
How can I access this using CSS ? I need to change UI of the inside div.
Following is the HTML structure.
<div id="myCreatedDiv">
<div class="jQueryMobileCreatedDiv">
/* I need to access this div */
</div>
</div>
Note: Above structure I found in chrome's element inspector
My original code is as follows
<div id="one" class="myDiv" ui-body-d ui-content">
<input name="anyName" id="jQueryTextBox"/>
</div>
It would be very helpful if anyone can help me for the same.
Thanks in advance!
You can acces div inside .jQueryMobileCreatedDiv is like this:
var divInside = $('.jQueryMobileCreatedDiv').children("div");
Use this CSS selector:
#myCreatedDiv > div { /* Your CSS here */ }
You can use it.
$('#myCreatedDiv').find('#one');
or
$('.jQueryMobileCreatedDiv').parents('#myCreatedDiv').find('#one');
You can use the class of the generated div
#myCreatedDiv > .jQueryMobileCreatedDiv {
}
Related
In this implementation below, I got an md-sidenav component with a local template variable #sidenavsearchArea.
<md-sidenav #sidenavSearchArea align="" mode="push" opened="false">
sidenav content here..
</md-sidenav>
I'd like to style the area where it says "sidenav content here.."
How do you refer to this section from the styles.css?
md-sidenav #sidenavSearchArea {
/* does not seem to be the right way */
}
My only solution was to break the DRY principle and introduce a new ID ( id="sidenavSearchArea" into the component ) and do it the old school way, like this:
<md-sidenav id="sidenavSearchArea" #sidenavSearchArea align="" mode="push" opened="false">
sidenav content here..
</md-sidenav>
style.css
#sidenavSearchArea {
/* this approach works but not DRY */
}
Is there a better way to achieve the same thing without the addition of id=""?
Template variables are only for Angulars internal use. They are never added to the DOM and therefore not available for CSS styling.
You need to additionally add something that is available to CSS selectors, like a class:
<md-sidenav class="sidenavSearchArea" #sidenavSearchArea align="" mode="push" opened="false">
sidenav content here..
</md-sidenav>
md-sidenav.sidenavSearchArea {
/* does not seem to be the right way */
}
.mat-drawer{
background-color:red;
}
plunker
I need to style body tag differently based on another element’s class that is set dynamically on load. Is it possible to select body as a parent element of another element without using JS?
Under condition #1 the page might look like this:
<body>
…
<div class=”first-version”>…</div>
…
</body>
Under condition #2 the page might look like this - different class on div:
<body>
…
<div class=”second-version”>…</div>
…
</body>
Pseudocode, this doesn’t work but gives you an idea what I’m trying to do (create a theme of sorts):
body[contains div.first-version] {
margin:100px;
}
body[contains div.second-version] {
margin:200px;
}
Use different classes for the body styling and you SHOULD use Javascript.
Try this template:
HTML
<body id="the_body">
<input id="template_1" value="Template 1" type="button"/>
<input id="template_2" value="Template 2" type="button"/>
</body>
CSS:
.template_1{
color:red;
}
.template_2{
color:blue;
}
JS (use jQuery):
$(function() {
$("#template_1").click( function()
{
$("#the_body").html("<p class='template_1'>template 1</p>");
}
);
$("#template_2").click( function()
{
$("#the_body").html("<p class='template_2'>template 2</p>");
}
);
});
DEMO
Ok, thanks everyone for your help. That was very fast, I didn't expect this. Sorry if question wasn't clear. (This is my first time posting a question Stack Overflow).
It looks like pure CSS solution is not possible in this case and I should just use jQuery. Michael Marr posted the link to the jQuery solution that I'm going to use:
Apply CSS styles to an element depending on its child elements
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.
Does anyone know why the following code isn't working:
The image remains towards the left of the screen.
HTML:
<div class"footerimg">
<img src="./img/logo2.png" width="100px;" height="100px;">
</div>
CSS:
.footerimg {
float:right;
}
Additional Info:
This div is inside another div called footer, but that shouldn't affect anything should it?
The CSS file IS linked to the page, I have started the style the footer.
error :
<div class"footerimg">
should be
<div class = "footerimg">
__^^^^__missing equal sign
try this:
footerimg>img{float:right;}
and add this in your html code:
class="footerimg"
you forgot the '='
I have code that looks like this:
<h4 class="tableTotals">Total Selected: R<div id="bankTotal">##,##</div></h4>
The output that I want should all be in ONE line but as it turns out the div tags displays it's content in a new line, which I don't exactly want. So the output looks like this:
Total Selected: R
##,##
When I actually want it to display like this:
Total Selected: R##,##
Does anybody know how to stop the div displaying on a new line?
Thank for any push in the right direction!
Use <span> instead of <div>
div is a block element, and h4 is a header meant for single line.
Style your div to be displayed as inline-block
#bankTotal { display: inline-block; }
Demo
Using inline-block does not have to chang the div completely into as inline element just like span . Furthermore, you can still have block properties.
<div> is a block element and will put a return before and after the <div>
You should use instead.
<h4 class="tableTotals">Total Selected: R<span id="bankTotal">##,##</span></h4>
Using CSS:
#bankTotal{
display:inline;
}
div displaying on a new line ?
<div id="bankTotal" style="display:inline">##,##</div>
or
<div id="bankTotal" style="float:left">##,##</div>
but better :
<span id="bankTotal" >##,##</span >
display:inline property of css for displaying the div "inline",
or u could use <span> tag instead of <div> tag ..
<h4 class="tableTotals" style="display:inline;">Total Selected: R<div id="bankTotal" style="float:left;">##,##</div></h4>
Here I have added a style to position the DIV manually to where you want it to be. Please note that I didn't put it in its exact position so just fiddle with the margin PX.
<h4 class="tableTotals">Total Selected: R<div id="bankTotal" style="margin-left:50px;margin-top:-10px;">##,##</div></h4>