I have a div that expands as the user add images on it. And under the div I have a button. I need this button to go down as the div expands down.
The button position depends on the div position.
I want that the divUpload goes down as the user add photos to the panel: files.
HTML:
<form id="form1" runat="server" enctype="multipart/form-data">
<div id="divListFiles">
<asp:FileUpload ID="files" name="files[]" accept='image/*' runat="server" multiple />
<asp:Panel ID="list" name="list" runat="server" Height="107px">
</asp:Panel>
</div>
<div id="divListDel">
<output id="listdel" name="listdel"></output>
</div>
<div id="divCarregando">
<img id="carregando" src="http://bps.saude.gov.br/visao/img/carregando.gif" alt="Carregando..">
</div>
<div id="divNumImages">
<asp:TextBox ID="txbNumImages" runat="server"></asp:TextBox>
</div>
<div id="divUpload">
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClientClick="ShowCarregando()" OnClick="btnUpload_Click" />
</div>
CSS:
divListFiles {
position:absolute;
left:9px;
top:99px;
width:653px;
height:105px;
z-index:1;
}
#divListDel {
position:absolute;
left:81px;
top:73px;
width:627px;
height:33px;
z-index:1;
text-align: left;
}
#divCarregando {
position:absolute;
left:7px;
top:113px;
width:423px;
height:231px;
z-index:-1;
text-align: left;
}
#divNumImages {
position:absolute;
left:9px;
top:100px;
width:123px;
height:27px;
z-index:5;
text-align: left;
}
#divUpload {
position:relative;
left:19px;
top:241px;
width:65px;
height:27px;
z-index:1;
text-align: left;
}
#form1{
height: 303px;
}
#carregando{
visibility:hidden;
}
.thumb {
height:65px;
width:90px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
.thumbdel {
height: 17px;
width: 17px;
margin: 60px 81px 0 0;
}
What you've described would be the normal behavior for:
<div><!-- ...the images here ... --></div>
<button>The Button</button>
...as by default a div is as wide as it can be and as tall as it needs to be, with content following it being rendered underneath.
Live Example | Source
The problem is these lines in your CSS:
#divCarregando {
position:absolute;
"Absolutely positioned boxes are taken out of the normal flow", which creates (in my opinion) absolute MAYHEM on your page.
My #1 recommendation would be to use a nicely flowed HTML document without resorting to absolute positioning.
If you can't or won't do that, your only option will be to recalculate the bottom position of the image container and apply it to the top of the button container.
Using jQuery (for ease of example, only, as this is certainly possible without it):
When you add an image:
var images = $( "#divCarregando" ),
position = images.offset();
$( "#divUpload" ).css({
"top": position.top + images.outerHeight( true )
});
For what it's worth, I highly recommend not using absolute.
HTML
<div class="wrap">
<div class="innner">nfdj</div>
<button>Click</button>
</div>
CSS
.wrap{
width:250px;
background:green;
height:auto;
}
div{
width:100%;
height:150px;
background:grey
}
DEMO
Whenever I wonder about CSS I go and visit Peter-Paul Koch -
http://www.quirksmode.org/css/display.html
but if you don't want to discover that site, then in most cases I would use display: block; for the button, which will ensure that it below the one above it.
If I had a set of buttons arranged horizontally I would enclose them all inside a div which was display: block; and make each button display: inline;. That way the entire group gets pushed below the div above, but each button is inline inside the div.
I'll leave you to work out what to do with a vertical set of buttons to one side or the other of the main div.
Related
Im having difficulties with Firefox and drop down menu.
It has of about 200 px gap under the drop down list created by slideToggle.
When inspected, that area is not taken by anything and completely blank/empty.
Chrome displays everything correctly.
Source is here http://stafter.com/demo
I have been fighting this for 2 days already playing around "display" and "margins".
Here is the main code stracture
JQuery CODE
<script type="text/javascript">
$(document).ready(function(){
$(".plus1").click(function(){
$(".open1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus2").click(function(){
$(".open2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus3").click(function(){
$(".open3").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
HTML CODE
<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">
<div id="ul_wrap">
<div class="plus1">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open1"></p>
</div>
<div class="plus2">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open2"></p>
</div>
<div class="plus3">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open3"></p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>
CSS
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -77px;
padding:0;
}
.footer, .push {
height: 77px;
clear:both;
}
.footer{
width:100%;
background: url('../images/bottom_bg.jpg') repeat-x 0 0;
position:relative;
margin:auto;
}
.container {
width:800px;
min-height:400px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding:30px;
}
#ul_wrap {
position:relative;
margin-bottom:-100px;
clear:both;
}
#ul_wrap ul{
display:inline-block;
position:relative;
left:-20px;
padding:5px 0px 0px 10px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
clear:both;
height:27px;
}
#ul_wrap li{
font-size:16px;
text-align:left;
float:left;
list-style:none;
}
.one{
width:40px;
}
.two{
width:410px;
}
.three{
width:88px;
}
.open1, .open2, .open3{
margin:-5px 0 20px 0;
position:relative;
font-size:12px;
display:none;
}
PLEASE NO COMMENTS LIKE I FORGOT TO CLOSE A TAG OR SMTH, i had to rewrite the entire html code to post it here in short version and shorter names because otherwise it would be 4 page code of css html and javascript. Problem is not in debugging errors in unclosed tags or smth. Source was html validated 1000 times.
After playing with margins, display properties and floating and clearing i finally assembled a working structure (for now).
The key was to clear all elements and parents containing all floating elements,
Then because for some odd reasons slideToggle wasn't working properly with white background (unless you specified height of the hiding element) behind .wrap_ul if it was display:block, only with inline-block.
With Display:inline-block it was getting footer floating on the right, no matter clear:both on both items;
With specified height, slideToggle wasn't pushing the rest of the sliding elements down below but was overlapping.
Well with all these problems only in Firefox, Chrome never had this flue...
So i posted working code in the last edit, not sure which property got the whole puzzle working which is -> (
the background behind expanding down slideToggle list,
footer that is pushed down as well when list is expanded
not floated footer and no extra gaps or spacing's between drop down list and footer)
Hope you find it usefull
I'd like to make my navigation menu align itself so it doesn't overlap on page load but overlap when scrolling down (Dynamic nav bar)
What I currently have is here: https://m.omegarealm.tk/
As you can see on the page's initial load the bar overlaps the text, I'd like the nav bar not to overlap the text when the page is loaded but overlap on scroll.
My current CSS is here: https://files.omegarealm.tk/mobile.css
Quick note: The CSS is one line when you access it because cloudflare compresses it. It's indented on the server.
Thanks!
No need for any JavaScript here. Your "navbar" element seems to be a fixed height so you can achieve what you want simply by setting the top margin of your body to be equal to that height, plus a little extra so your content is sitting right on the edge of the fixed element.
body{
height:5000px;
margin:52px 10px 10px;
}
#navbar{
background:red;
left:0;
position:fixed;
top:0;
width: 100%;
}
#navbar img{
float:left;
margin:5px;
}
#navbar p{
font-weight:bold;
line-height:42px;
margin:0;
text-align:center;
}
<div id="navbar">
<img alt="Menu" height="32" src="//files.omegarealm.tk/images/menu_mobile.png" width="32">
<p>OmegaRealm</p>
</div>
<h1>Under construction</h1>
<p>Sorry, please come back later</p>
Because the element is fixed is has no relevance to the content below it. Wrap the body content and apply a margin to the top:
var navHeight = $('#navbar').height() + 30;
$('section').css('marginTop', navHeight);
#navbar {
background-color: red;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navbar">
<img width="32px" height="32px" align="left" style="padding: 5px;" src="//files.omegarealm.tk/images/menu_mobile.png">
<font size="5">
<b>
OmegaRealm
</b>
</font>
</div>
<section style="height: 2000px">
<h1>Under construction</h1>
<p>Sorry, please come back later</p>
</section>
I have a modal in which I am showing a form, on submitting the form i want to hide the content of form and instead want to show some ajax indicator of fixed size 100px x 100px. The issue is how to reduce the width/height of the modal to 100x100 with some animation and remaining that modal within center of screen?
<div class="modal">
<form>
....
</form>
<div class="ajax-indicator hidden"></div>
</div>
after click of submit button
<div class="modal">
<form class="hidden">
....
</form>
<div class="ajax-indicator"></div>
</div>
Create multiple stages (CSS classes) & activate them with js events.
You can achieve your animation with just some eventhandlers such as:
click,transitionend,submit...
and then just change the correspondent class.
Css
#box{
position:fixed;
width:0px;
height:0px;
top:0%;
left:0%;
background-color:black;
margin-left:0px;
margin-top:0px;
-webkit-transition:all 700ms ease;
overflow:hidden;
border-radius:0px;
}
#box.active{
width:300px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
border-radius:0px;
}
#box.loading{
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
border-radius:100px;
}
js
in this example i'm using a fake loading time with setTimeout that lasts 2sec after clicking the submit btn
function clk(e){
box.classList.add('active');
}
function frm(e){
e.preventDefault();
box.classList.remove('active');
box.classList.add('loading');
setTimeout(function(){box.classList.remove('loading')},2000);
}
var btn=document.getElementById('btn'),
box=document.getElementById('box');
btn.addEventListener('click',clk,false);
box.firstChild.addEventListener('submit',frm,false);
//box.addEventListener('webkittransitionend',dosomethingelse,false);
Demo
http://jsfiddle.net/hHD87/
this example uses modern technologies .. that work on all up to date browsers... chrom,firefox ie10 opera ios android...
maybe you need to add custom prefixexs like -webkit -moz -o ...
here is another example that uses also the delay witch is very important to completely hide the window at the end.
http://jsfiddle.net/RAu8Q/
After click submit button change the css of the model box.
var myElement = document.getElementByClass("model");
myElement.style.width = "100px";
myElement.style.height = "100px";
and set the ajax-indicator div position to center to get the model at center.
var modeElement = document.getElementByClass("ajax-indicator");
modelElement.style.align="center";
Create a css class that you can add to your modal which sets its size to 100x100. If you're centering your modal with margin: 0 auto it should automatically adjust itself. Then remove the class when the loading is done.
Regarding animation you can add transition: all .5s to your .modal-class
Example: http://jsfiddle.net/eSsM5/1/
css:
.modal {
margin: 0 auto;
width: 200px;
height: 200px;
transition: all .3s;
background-color: red;
text-align: center;
padding-top: 30px;
}
.loading {
width: 100px;
height: 100px;
}
.loading > form {
display: none;
}
.loading > .spinner {
display: block;
}
.spinner {
display: none;
}
html
<div class="modal">
<form>
your form
</form>
<div class="spinner">
Now loading!
</div>
</div>
<button type="button">toggle loading</button>
js
document.querySelector("button").addEventListener("click", function() {
var modal = document.querySelector(".modal")
modal.classList.toggle("loading")
})
How do I make a <hr /> tag go vertically, instead of its standard appearance as a horizontal line/going sideways?
I'd like to be able to use this on a mobile site, so a more widely-supported solution is preferable to one that only works in the latest browsers.
This will require changes to more than just the hr. the element above and below it must be floated. the effect can be achieved with a solid border:
<div class="section1"> content </div>
<div class="section2"> more content </div>
CSS:
.section1 {
float: left;
width: 200px;
border-right: 1px solid #333;
}
.section2 {
float: left;
width: 200px;
}
Edit: see also this answer
You could use css transforms. However, this just turns it, things are still where they would be if you hadn't rotated it.
HTML
<hr/>
<hr class="vert" />
<hr id="vert1" />
CSS
/*All <hr>*/
hr {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
/* IE 9 */
-webkit-transform:rotate(90deg);
/* Safari and Chrome */
}
/*<hr> of class ".vert"*/
hr.vert {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
/*<hr> with id "vert1"*/
hr#vert1 {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
Well you could possibly make a div (<div></div>) and then give it values with css later regarding height/width. If you want it to apply to one specific object give it an id <div id=""> and more than one object give it a class <div class="">
An example of the css you'd do is:
#(id name) or div.(class name) {
height: ; (how tall)
width: ; (how wide you want it)
background-color: ; (sets the color of the bar)
position: ; (depends on if you want it absolute or static etc.) }
You can obviously add/remove other css as you go depending on what you want to do
Put it in a div:
<div style="border-right:1px solid #333;">
Content here
</div>
This is with inline css. Otherwise, separate the css:
div {
border-right:1px solid #333;
}
I suppose you could re-style <hr /> as an inline-block element, with specified height...
hr {
display: inline-block;
width: 2px;
height: 256px;
}
That's just a basic example to get the <hr /> to look like I think you want it to look. You'd have to play with height and width (and possibly positioning) to make it do exactly what you need...
I have 3 fieldsets.
What I would like to make is this layout:
I want the bottom right fieldset to be bottom aligned, so it's bottom would be aligned with the left fieldset.
It should work in different resolutions.
Is there an easy way? or I will have to use javascript to add to it a margin-top dynamically?
code:
<div class="fieldSetsContainer">
<fieldset class="leftFieldSet">test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>
</fieldset>
<div class="rightFieldSets">
<fieldset>test2</fieldset>
<fieldset class="bottomRightFieldSet">test3</fieldset>
</div>
css:
.rightFieldSets {
float:left;
width:34%;
}
.rightFieldSets fieldset {
clear:left;
width:89%;
}
.leftFieldSet {
width:62%;
float:left;
margin-right:1px;
}
.bottomRightFieldSet {
margin-top:6px;
}
here is the a link:
http://jsfiddle.net/bbryK/
My solution assumes two things:
The right column has a fixed width.
The left column must always be the highest.
See http://jsfiddle.net/c3AFP/2/
Html structure:
<div class="container">
<div class="right">
<fieldset class="top"></fieldset>
<fieldset class="bottom"></fieldset>
</div>
<fieldset class="left"></fieldset>
</div>
Css styles:
.container {
position: relative;
}
.top, .bottom {
width: 300px;
}
.left {
margin-right: 300px;
}
.right {
float: right;
margin-left: 10px;
}
.bottom {
position: absolute;
bottom: 0;
}
EDIT:
Here is a solution with the right column sized by percentage: http://jsfiddle.net/c3AFP/5/
EDIT 2:
Here is a table based solution which removes the requirement of the left column being the tallest. Using vertical-align you can adjust where the smaller elements should align in relation to the tallest one: http://jsfiddle.net/c3AFP/7/
I'm giving you a start point on fiddle. Please play around, make some code and do share the same.
http://jsfiddle.net/vY462/
#one{width:200px;height:70px;border:2px solid black;float:left;}
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;}
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>