CSS Global Class Issue with Child - javascript

i have a global class for an html
<div class="wrapper">
<div class="content"></div>
</div>
and the CSS is
.div { width:auto; display:block }
.content { width:100px; height:50px; }
On the .content div, i do not need "display:block" class. But Its applying on Runtime.
i Have given dispay:inherit; but it doesn't work. Is there any Other Way for Removing the Display Style ?

.div { width:auto; display:block }
this might not be working....for the above provided html cos there is not div named class
what you can do is
.content { width:100px; height:50px; display:inline}

.content { width:100px; height:50px; display: inline; }
or another display property

You can just do:
.content { width:100px; height:50px; display:inline }
//or display:none or whatever your standard default is
inline is what the value is by default, see MDN Ref.

Related

HTML/CSS/JS: Simple div not displaying

I just want to understand why the #div element is not appearing anyway at the simple following code:
<!DOCTYPE html>
<html>
<body>
<div id="div"></div>
<style>
#div{
color:black;
width:50px;
height:50px;
}
</style>
<script>
function algo(){
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
</script>
</body>
</html>
Here's the fiddle:
http://jsfiddle.net/26pkt2y6/
color would mean the foreground color. Since there's no text to show, it appears that the div isn't displaying. Set the background to see the div.
function algo() {
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
#div {
color: black;
width: 50px;
height: 50px;
background: #000;
}
<div id="div"></div>
Because it's empty, try to add some content between the div tags, or if you want to have a block like a button you have to change the CSS to:
<style>
#div{
background-color:black;
width:50px;
height:50px;
}
</style>
div{
color:black; change this to background-color:black;
width:50px;
height:50px;
}
Use background-color for the color
Your div is empty, set a text or styling with css, you should used background-color instead of color:
function algo(){
alert("ALGO");
}
document.querySelector("#div").onclick = algo;
#div{
background-color:black;
width:50px;
height:50px;
}
<div id="div"></div>

How to include child div into parent div automatically?

Is there any way how to add a child div into parent divs. The child div is still same (without changes) but content of parent div is variable. Parent div contains child div automatically like CSS div::before but with whole div in it not just text.
Basically for each parent automatically generate same child.
See figure
sample of parent and child divs
How can I make it via CSS ? (or JS)
CSS cannot generate content (as such) it can only style it.
If the element is not present in the HTML nothing will happen.
It is possible to add "pseudo content" with a pseudo element but the primary purpose of these pseudo-elements is enhancement not addition of "content". Also they cannot contain HTML.
It would be possible to use a pseudo element with a bg image in this instance as this is essentially styling.
JSfiddle Demo
div {
height:250px;
width:250px;
display: inline-block;
margin: 25px;
position: relative; /* required */
}
div:after {
content:"";
/* required */
position: absolute;
bottom:25px;
right:25px;
background-image: url(http://www.webdevelopersnotes.com/how-do-i/thumbs/shortcut-arrow.jpg);
height:75px;
width:75px;
background-size:cover;
}
.one {
background: red;
width:300px;
}
.two {
background: lightblue;
height:300px;
}
<div class="one"></div>
<div class="two"></div>
Not sure I understood your question so I will just give you a solution and then you comment your requirements.
You can have a div that contains another child div which is positioned inside the parent but does not change when you add more content to the parent.
Here is a fiddle:
http://jsfiddle.net/1fohx3qf/
.parent {
border:2px solid black;
padding:5px;
position:relative;
width:124px;
height:120px;
}
.child {
border:2px solid red;
padding:30px;
position:absolute;
bottom:5px;
right:10px;
}
It's not completely clear to me what the problem/issue is, but it sounds like you are looking for JS code like this:
var child = document.createElement('div');
child.innerHTML = '<p>Child!</p>';
var parent = document.createElement('div');
parent.innerHTML = '<p>Parent 1</p>';
parent.appendChild(child);

How to eliminate the flicker from this JQuery/CSS3 Animation

I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)
Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )
I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.

horizontal content

My question is how to make dynamic content to be shown horizontally. It means no vertical scrolling, only horizontal. I have tried -webkit-column-count but it only creates X columns, but not horizontal scrolling. Any suggestions?
You can use the CSS
white-space: nowrap;
But then you'll have to be careful about putting line breaks in where you want them otherwise you'll end up with one really long line of text. http://jsfiddle.net/Nbkj2/1/
This is a pretty open-ended question, as I'm sure there's a lot of ways to answer this, but maybe this will point you in a useful direction: http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/
To summarize the article, you break your content into a series of full-screen pages. Each page is a div with CSS to take up the whole screen, with height/width properties and float:left; to make them all stack up sideways. To prevent the pages from wrapping you make the body of the document as wide as all the pages you've made: body { width:10000px; }
Then the author puts some javascript handlers on links to scroll the page sideways to each panel of content.
Depends what element and what you mean by horizontal. Here's two examples of what I think you mean.
div {
Width:20%;
Display:inline-block; //won't work for ie 8 and below
}
body {
width: 150%;
}
Something like this demo (HTML add CSS only)
DEMO: http://jsfiddle.net/enve/ea88y/
FROM: http://www.visibilityinherit.com/code/horizontal-website.php
HTML
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p></div>
<div id="three"><p>THREE</p></div>
<div id="four"><p>FOUR</p></div>
<div id="five"><p>FIVE</p></div>
</div>
</body>
</html>​
CSS
* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:scroll;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:500%;
overflow:hidden;
}
#one, #two, #three, #four, #five {
width:20%;
float:left;
}
ul {
position:fixed;
width:100%;
height:40px;
line-height:40px;
text-align:center;
background:#ccc;
}
li {
display:inline;
margin:0 50px;
}
p {
margin:50px;
text-align:center;
}
* html ul {position:absolute;left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
* html {background:url(fake.jpg)}
* html #full {height:100%;}​

Dynamically changing height of div element based on content

I'm working on a Facebook-like toolbar for my website.
There's a part of the toolbar where a user can click to see which favorite members of theirs are online.
I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.
For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.
I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.
Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).
Thanks.
JavaScript:
function favoritesOnlineClick()
{
$('#favoritesOnlinePopUp').toggle();
$('#onlineStatusPopUp').hide();
if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); }
}
CSS and HTML:
#toolbar
{
background:url('/_assets/img/toolbar.gif') repeat-x;
height:25px;
position:fixed;
bottom:0px;
width:100%;
left:0px;
z-index:100;
font-size:0.8em;
}
#toolbar #popUpTitleBar
{
background:#606060;
height:18px;
border-bottom:1px solid #000000;
}
#toolbar #popUpTitle
{
float:left;
padding-left:4px;
}
#toolbar #popUpAction
{
float:right;
padding-right:4px;
}
#toolbar #popUpAction a
{
color:#f0f0f0;
font-weight:bold;
text-decoration:none;
}
#toolbar #popUpLoading
{
padding-top:6px;
}
#toolbar #favoritesOnline
{
float:left;
height:21px;
width:160px;
padding-top:4px;
border-right:1px solid #606060;
text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
display:block;
border:1px solid #000000;
width:191px;
background:#2b2b2b;
float:left;
position:absolute;
left:-1px;
top:-501px; /*auto;*/
height:500px;/*auto;*/
overflow:auto;
}
#toolbar #favoritesOnlineListing
{
font-size:12px;
}
<div id="toolbar">
<div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
<img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" />Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)
<div id="favoritesOnlinePopUp">
<div id="popUpTitleBar">
<div id="popUpTitle">Favorites Online</div>
<div id="popUpAction">x</div>
</div>
<div id="favoritesOnlineListing">
<!-- Favorites online content goes here -->
</div>
</div>
</div>
</div>
Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.
Make it a float element and don't use a clearing element after it.
You should take out the CSS height:25px property in the toolbar, the contents will expand the container. Also, ID selector tags are unique and you can specify directly to them without having to reference the ancestor:
INCORRECT:
#toolbar #popUpAction { /*some css */ }
#toolbar #popUpAction a { /*some css */ }
CORRECT:
#popUpAction { /*some css */ }
#popUpAction a { /*some css */ }

Categories