I'm seeing a lot of "how to vertically align stuff" type questions but I can't seem to find anything that solves this particular problem.
I have 3 "sections" in a jquery dialog and I want them to sit vertically in the space without leaving big gaps in between them.
I don't know their heights as their content is dynamic and changes.
Here's a fiddle showing what I mean:
http://jsfiddle.net/PTQS8/
In it's simplest form the code looks something like this (just imagine that all the br tags are real content though)
<div class="jqDialog">
<section>
<br/><br/>
</section>
<section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section>
<section>
<br/><br/><br/><br/><br/>
</section>
</div>
Then my current css:
section {
border: solid 1px #DADADA;
margin: 5px;
padding: 5px;
width: 200px;
display: inline-block;
vertical-align: top;
}
I want the bottom section to automatically fill the space above it if possible.
Any ideas?
EDIT:
Maybe I wasn't clear enough ...
This is my ideal result:
http://jsfiddle.net/PTQS8/2/
However bear in mind that the content in the sections is all dynamic so the style definition for "section3" would need to have a dynamic negative top margin in order for this to work.
Figuring this out could be possible with javascript I suppose but I was hoping there might be a more elegant solution.
<!--The simplest way is to use the span and float properties.-->
<!--Make use of table if you dont like the gap between the left and right panes-->
<div class="jqDialog">
<span style="float: left"><section>
<br/><br/>
</section></span>
<span style="float: right"><section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section></span><span style="float: left">
<section>
<br/><br/><br/><br/><br/>
</section></span>
</div>
If you want them vertically centered, change width:200px to width:100%;
http://jsfiddle.net/PTQS8/3/
<div class="jqDialog">
<section>
<br/><br/>
</section>
<section class="section2">
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section>
<section class="section3">
<br/><br/><br/><br/><br/>
</section>
</div>
and the css ...
section {
border: solid 1px #DADADA;
margin: 5px;
padding: 5px;
width: 200px;
display: inline-block;
vertical-align: top;
}
.section2 { float: right; }
Related
I'm learning web design and I'm struggling to position a button. I'm a beginner and trying to recreate league of legends client which is pretty simple in browser just for exercise, but I don't know how to use javascript and I can not find the solution online.
So this is how I want it to look: https://prnt.sc/pos3gf
I've tried to add logo and button in list and then display: inline but that doesn't really work or I just don't know to make it work.
This is my code
https://codepen.io/simic21/pen/poowQXK
I removed all of the CSS before /*====== REGION ======*//* Dropdown Button */ and replaced it with this:
.logo {
display: inline-block;
}
.region {
display: inline-block;
}
That will display the logo and region divs side by side. Now the only thing left is to add the rest of your desired styling such as padding or margin.
Add to your .region class display:inline-block and the same to your .logo class:
.region {
padding: 20px;
display:inline-block;
}
.logo {
padding: 40px 0px 0px 50px;
display:inline-block;
}
<div class="centered">
<div class="logo">
<img src="assets/img/logo.png" alt="logo">
</div>
<div class="region">
<button onclick="myFunction()" class="dropbtn">
<strong>EUNE(EN)</strong></button>
</div>
</div>
I have 3 questions about my jQuery study today.
Why my jQuery code not have the animation effect as it should be? for example, .slideUp() and .slideDown(), my code shows something strange instead of slideUp animation.
I understand, the .hide() or .slideUp() function is only to HIDE the div box, not DELETE them, however, in my code, why the position of other div boxes changed after a DIV .hide()? Shouldn't it stay at their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position, when one DIV box has been hided?
$(document).ready(function() {
$('#panel1').slideUp(1000).delay(1500).slideDown(1000);
});
.panel {
display: inline-block;
width: 80px;
height: 60px;
border: 1px solid green;
position: relative;
top: 20px;
margin-left: 45px;
border-radius: 5px;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
For your first question
Why my jQuery code not have the animation effect as it should be? for
example, .slideUp() and .slideDown(), my code shows something strange
instead of slideUp animation.
The .slideUp() method animates the height of the matched elements. Means it animates height so it reaches 0 (or, if set, to whatever the CSS min-height property is). See here for reference. That is exactly what is happening to your first box it is decreasing in height.
Afterwards the display style property is set to none to ensure that the element no longer affects the layout of the page.
What display none does ?
display:none means that the tag in question will not appear on the
page at all
Now for second and third question
I understand, the .hide() or .slideUp() function is only to HIDE the
div box, not DELETE them, however, in my code, why the position of
other div boxes changed after a DIV .hide()? Shouldn't it stay at
their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position,
when one DIV box has been hided?
The .hide() and .slideUp()function they both add display:none to your tag element. Means they are gone now
Now what can you do to let them stay there, But hidden from view ?
You can use visibility or opacity property instead rather than using display
property.
For example: visibility: hidden; will just hide it from the view.
Will update your fiddle in order to demonstrate it in a while. Hope this will help you. Please feel free to ask if not clear. Thank you.
$(document).ready(function() {
setInterval(function(){
$('#panel1').slideUp(1000).delay(500).slideDown(1000);
}, 3000);
});
.outer-div
{
position: relative;
display: inline-block;
min-height: 1px;
margin-right: 15px;
margin-left: 15px;
width: 130px;
height: 90px;
}
.panel {
border: 1px solid green;
margin-left: 45px;
border-radius: 5px;
position:absolute;
top:0;
width: 100%;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div class="outer-div">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
</div>
You should use display:flex on .panels, that solves your first question.
For second question you should use visibility or opacity.
With current code you are removing it, although it is called hide() it is equivalent to CSS display:none; which doesn't keep space of element.
Although you actually don't need to set visibility in your case because sliding it up will hide element and down show.
Something like this:
$('#panel1').animate({
top: -62 // 60 is height of element plus 2px of borders
}, 1000).delay(1500).animate({
top: 0
}, 1000);
Also you have to change CSS a bit.
Add this to your CSS:
.panels {
display: flex;
overflow: hidden;
margin-top: 20px;
}
And from .panel remove top: 20px;
Full example is here https://jsfiddle.net/_jakob/cphptby3/1/
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
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
I think this will require javascript. I figured it wouldn't hurt to ask though.
We all know how to float an image or div right or left and have the text flow around and below that image. I'm trying to float a div at a fixed width from the top of a container and have text flow around above and below it.
It would be easiest if I could place this div above the paragraph text, but I could insert it if I had to.
I made this crude image outlining what I'm trying to do.
Thanks!
a bit of a cheat but possible using a dummy spacer
CSS:
#wrapper {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
}
.fl {
float: left;
clear: left;
margin: 10px 10px 10px 0;
}
.fr {
float: right;
clear: right;
margin: 10px 0 10px 10px;
}
.dummy {float: right; height: 300px; width: 1px; background: #f00;}
HTML:
<div id="wrapper">
<img src="http://dummyimage.com/100x100/000/fff" width="100" height="100" class="fl">
<span class="dummy"></span>
<img src="http://dummyimage.com/100x200/DAD/fff" width="100" height="200" class="fr">
<p>all your paragraphs follow</p>
</div>
Working Example: HERE
and the spacer does need to be at least 1px wide, but it can be transparent
Have you tried something like this?
http://jsfiddle.net/8DczT/1/
This is exactly what a float does; it puts a box wherever you specify, and content flows around it. See this jsFiddle.
Put a margin-top on your floated div, to push it down from the top, something like this:
<div> <!-- parent containing div -->
<div style="float: right; margin-top: 50px">floated div</div>
<div>paragraph 1</div>
<div>paragraph 2</div>
</div>
As long as you get the margin right, you can floa it halfway between the center of the two paragraph divs.