I have a main div under which there can be one or two sub divs. When there are two sub-divs, I would want them to be displayed side-by-side. But If I have only one sub div, then I'd want it to be displayed in the center. Can this be achieved by using CSS or should I take help of JavaScript? Using the following CSS I'm able to achieve the side-by-side part of it. But I'm not sure how to go forward when there is only one sub div
HTML:
<div id="maindiv">
<div class="subdiv">
<p>Div One</p>
</div>
<div class="subdiv">
<p>Div Two</p>
</div>
</div>
CSS:
div.subdiv {
float: left;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
}
Use display:inline-block instead of float:left. Try to remove the second sub div in my example fiddle and you can see the desired result.
div.subdiv {
display:inline-block;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
text-align:center;
}
DEMO
Related
is it possible to shrink and grow child HTML elements with just CSS. Here is an example below, I want to see how others would approach this. I have seen solutions with JQuery however wanted to know there is an easier way to do this.
<div class="your_custom_styling_here_for_resizing">
<div style="width: 400px; height: 400px; display: flex;">
<div style="height: 100px; background: #333333; flex: 1;"></div>
<div style="background: #cccccc; flex: 1;"></div>
</div>
</div>
An easier solution would be to create a class for those styles instead of using inline CSS, and for the new styles, then adding / removing / changing just classes from jquery.
You want a child element to scale to the parent elements dimensions? If you do then just do the following:
.parent {
border: 5px solid red;
}
.child {
width: inherit;
height: auto;
background-color: blue;
color: white;
}
<div class="parent">
<div class="child">Expand or shrink your screen to see me scale to my parent</div>
</div>
}
I have some div boxes in my html and they are formatted the way I want.
Whenever I use JavaScript to change the value of one of the boxes it changes the formatting.
Why is that? And how do I prevent it from doing that?
document.getElementById("0").innerHTML = 20;
body {
background-color: red;
width: 1000px;
margin: 10px;
}
#top {
display: block;
width: 200px;
height: 100px;
}
#bottom {
display: block;
width: 200px;
height: 100px;
}
.box {
height: 94px;
width: 96px;
border: 1px solid white;
display: inline-block;
}
<div id="board">
<div class="row" id="top">
<div class="box" id="0"></div>
<div class="box" id="1"></div>
</div>
<div class="row" id="bottom">
<div class="box" id="2"></div>
<div class="box" id="3"></div>
</div>
</div>
Here is my JSFiddle:
https://jsfiddle.net/pb4759jh68/arbsws5u/
In my fiddle I have my JavaScript statement active, you can comment it out to see what it does to my formatting.
Thanks!!!
It's actually not the JS, but due to the content being added. They align at first because there's no content, but once you add in content, it tries to line up the text with the bottom of the next block. You can avoid this by setting:
vertical-align:top;
to the box class.
Please can someone assist, looks like such a simple function but for the life of me I cannot get it right. I need to have it inserted on my wordpress website.
Its a simple show hide content when mouseover on another block. Exactly like the one on this site, under the heading Solutions. I mouseover the title block and I see the content on the right hand side.
Is there a very simple way to this? Or even a WP plugin?
Thanks in advance.
I just created a simple solution. Check this below or https://jsfiddle.net/oneness/Lotaaxdh/
JS/CSS/HTML RESPECTIVELY
$( ".science" ).mouseover(function() {
$( "#social_display" ).hide("fast");
$( "#science_display" ).show("slow");
});
$( ".social" ).mouseover(function() {
$( "#science_display" ).hide("fast");
$( "#social_display" ).show("slow");
});
.box{
background-color: #37545c;
border:1px solid #000000;
padding:5px 5px 5px 5px;
color:#ffffff;
}
.right{
float:right;
}
.left{
float:left;
}
#science_display, #social_display {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='left'>
<div class="box science">Science</div><br>
<div class="box social">Social</div>
</div>
<div class='right'>
<div id='science_display'>This is the story behind Science</div>
<div id='social_display'>Social button story and other details </div>
</div>
I made this for you, but if you have no knowlegde of coding it might be hard to add alone.
https://jsfiddle.net/Skaadel/5s7symfe/
Jquery
$('#puppies').hover(function() {
$('.display').html('Puppies'); /** Change ('Puppies') to change text displayed when hover**/
});
$('#kittens').hover(function() {
$('.display').html('Kittens');/** Change ('Kittens') to change text displayed when hover**/
});
$('#aardvark').hover(function() {
$('.display').html('Aardvark');
/** Change ('Aardvark') to change text displayed when hover**/
});
HTML
<div class="container">
<div id ="kittens"></div>
<div id ="aardvark"></div>
<div id ="puppies"></div>
</div>
<br>
<div class="display">Hover on the picture for description.</div>
CSS
body { background: black; }
.display {
font:20pt 'Georgia';
height:50px;
width: 759px;
text-align:center;
background-color: white;
border: 1px solid black;
margin: auto;
}
.container{
height: 250px;
width: 759px;
margin: auto;
border: 3px solid black;
}
#kittens{
background-image: url(http://goo.gl/Ktu3u0);
height: 250px;
width: 250px;
display: inline-block;
}
#aardvark{
background-image: url(http://goo.gl/qQUUff);
height: 250px;
width: 250px;
display: inline-block;
}
#puppies{
background-image: url(http://goo.gl/6gvDn2);
height: 250px;
width: 250px;
display: inline-block;
}
I made it fast, so the design is not that pretty.
I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).
So right now, I have this right now:
<div style="position:relative;">
<a href="#games">
<img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
<img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
<img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
</a>
</div>
Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.
How can I do this in JS/HTML/etc?
If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.
<div class="card">
<div class="no-hover">
stuff you want to show when the user is just looking
</div>
<div class="on-hover">
stuff you want to show when the user hovers
</div>
</div>
CSS:
.no-hover {
display: block;
}
.on-hover {
display: none;
}
.card:hover > .on-hover {
display: block;
}
.card:hover > .no-hover {
display: none;
}
It's extra HTML elements, but might be easier to maintain.
Based on your comment to Learner's answer, here is an example of the idea you are describing:
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer {
width: 304px;
height: 304px;
background-color: black;
}
.inner {
float: left;
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: none;
}
.outer:hover .inner {
display: block;
}
DEMO
If you are trying to achieve something like this:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm
Here's your solution:
http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/
How to align two pictures so that they are center of the div when using JqueryMobile and as far from the both sides? --p--p--
<div class="ui-grid-a" style="margin: 10px;"">
<div class="ui-block-a" id="pic" align="center">
<img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/>
</div>
<div class="ui-block-b">
<label> </label>
</div>
<div class="ui-block-c" id="pic" align="center">
<img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/>
</div>
</div>
<style>
div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px
text-align:center; background-color: white; margin: 0 auto;}
</style>
Second question is that what is the correct way to make a gap between divs? I am using now empty div, but I think that there might be something better?
Cheers,
Sami
You can always add css to that and overwrite the JQM stuff when you insert your css after the JQM css links.
I took your code and modified it a little bit so it should give you a starting pont. I don't know if any of your or JQM css interferes with that as I can't try out right now.
The CSS in my case is in no way smaller because of all the compatibility css (prefixed properties). But the advantage is that box layout is a lot more flexible in that it also allows to center the content in 2 directions and also allows for sorting and alignment.
http://www.w3.org/TR/css3-flexbox/
This is just an alternative.
http://dabblet.com/gist/3132163
I got it working. I guess it is not so sophisticated solution, but it is working.
.pics {
background-color: white;
border-radius: 15px;
border: 4px solid grey;
height: 130px;
padding: 0px;
text-align: center;
width: 130px !important;
}
.picLeft {
float:left;
margin-left: 10px !important;
}
.picRight {
float:right;
margin-right: 10px !important;
}
I am open to any better solutions and thanks Torsten!
Sami