I have three divs with display: inline-block. In every div i have div with display: none when im trying to show hiding div with $('#div-id').show(1000) nearest divs 'jump around'
What should i change? I do like to see div under div just draw and the left or right div doesn't change his place.
For example two divs with my problem there (hide div shows up onchange in the textbox)
http://jsfiddle.net/WZCJu/13/
I added this CSS:
#amount-div, #specific-div {
width: 300px;
vertical-align: top
}
Version without the width, you may like it better:
http://jsfiddle.net/WZCJu/15/
Try using css's visibility property instead since it retains the element's position in the flow.
Docs: http://www.w3schools.com/css/pr_class_visibility.asp
Example:
<div id="herp" style="width: 100px; height: 40px; visibility: hidden;">plarp</div>
<div id="derp" style="width: 100px; height: 40px; visibility: visible;">slarp</div>
If you change the divs to use float: left; with a specified width you can avoid the "jump around".
See my updated example at: http://jsfiddle.net/WZCJu/12/
I changed the following:
<div id="amount-div" style="display:inline-block;">
...
<div id="specific-div" style="display:inline-block;">
To use floats with a specified width.
<div id="amount-div" style="float:left;width:220px;">
...
<div id="specific-div" style="float:left;width:220px;">
I also changed the <br> tag which preceeds the submit button so that it will clear the floated divs like so (though, there are better ways of handling that in my opinion):
<br style="clear:both">
display none removes the element completely from the document. there wont be any space reserved for it. so when u bring it back(show) it ll rearrange the nearby divs. so try using visibility:hidden which will retain the space but keep the div hidden..
Changing an HTML element from display: none to display: block or some other value will always cause it to change the flow of other elements around it in the tree. To prevent the DIVs from jumping around, you have a few options. Here are a couple simple ones:
First, you could "pad" the DIV in another DIV with a fixed size. For example:
<div style="width: 100%; height: 2em;">
<div id="js-amount" style="display: none">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
</div>
Secondly, you could use absolute positioning to remove your DIV from the flow of the document:
<div id="js-amount" style="display: none; position: absolute; top: 200px; left: 50px;">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
You must set a fixed size for your divs, so when the new one appears, it's constrained with the given side. I updated your JSFiddle : http://jsfiddle.net/WZCJu/16/
Have a look at how I constrain the size for your divs in the CSS. To improve layout, I took the liberty to add some styling to the submit button, so the HTML is a little bit modified too.
If you have any trouble understanding my solution, ask some questions.
When using display: none, the element does not render at all so it doesn't use any space on the rendered web page. I think you might want to use visibility:hidden to hide your element but still make the space usage calculation.
EDIT: It appears jQuery method works only on the display style so my answer is not applicable and indeed a fixed offset is necessary to avoid side effects in the page flow.
Related
I want to have an image that when clicked will fade out and display text "behind it". Right now all I can do is have my text appear above or below the image depending on where I move the element in the html file.
If I can figure this out the plan is to have the text display:none and image display:block then have them toggled by an action of clicking on the image / clicking on the text div.
If this doesn't make sense I can try to clarify.
I am working on my "tribute page" for free code camp. This is not a requirement but something extra I want to accomplish. The idea is to have my main image fade away and display the list items for "job history and Python timeline". Everything is commented in my code pen link below. In question are the final two div elements "main image" and "job History and Python timeline"
Here is a link to my code pen
<!-- job history and Python timeline -->
<div id="history-timeline" class="text-center" style="display:show; inline">
<p>
<ul>
<li>
<li>
<li>
<li>
</div>
Add position:absolute to your image, so it will be out of the page flow and img will stack over h2. now you can hide the image on click. I used display:none on hover of div. make sure your parent div height match the height of image.
.hide_on_hover{
width:200px;
height:200px;
}
.hide_on_hover img{
position:absolute;
}
.hide_on_hover:hover img{
display:none;
}
<div id="main-image-div" class="text-center hide_on_hover">
<img
id="main-image"
src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg"
class="rounded img-thumbnail " width="200" height="200">
<!-- job history and Python timeline -->
<h2 id="history-timeline">does this work</h2>
</div>
This can easily be accomplished by adjusting the positioning and z-indexing.
Your parent div element will want to have a position: relative attribute. The text will want to then have a position: absolute attribute. This will allow the text to overlap your image. Position relative tells the child element to position themselves respective to the closes parent with a relative attribute.
The next step is to apply a few more attributes to control the layer. From my understanding, you'll want the image to be the top layer, and the text be the lower layer. Solution for this is to apply position: relative; z-index: 2 to your image and add z-index: 1 to your text. The z-index attribute gives a layer order to the overlapping elements. We need to give position: relative to the image because the default position of that element ignore z-index attributes. Things should start looking closer now.
Now, you mentioned using a display: block and display: none attribute to hide your image and show the text. This would work based on the functionality you described, but will create a jump effect since setting to display: none loses height settings so you'll get things collapsing on your page. If you dont want this, you'll want to use visibility: hidden and visibility: visible instead.
However, what I would probably do instead is add a new css class:
.hidden{ opacity: 0 }
This way you can have simpler javascript and also can go to the extent of animating the fade effect. Speaking of Javascript, this would use the following code:
$("#main-image").click(function(){ $(this).toggleClass('hidden') });
Here's what some your modified code looks like:
HTML:
<div id="main-image-div" class="text-center" style="position: relative">
<img id="main-image" src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" style="margin-top:2%; position: relative; z-index: 2;" class="rounded img-thumbnail">
<h2 id="history-timeline" style="position: absolute; z-index: 1; ">does this work</h2>
</div>
CSS
.hidden{opacity: 0}
Outside the scope of this, you should avoid doing inline styling and have the html just use classes. Reference those classes in your css code and apply your styling there. This allows for cleaner, more manageable code as your site gets built up.
Try this code
$(document).ready(function(){
$("#main-image").click(function(){
$(this).removeClass('show-block');
$(this).addClass('hide-block');
$('#history-timeline').removeClass("hide-block");
$('#history-timeline').addClass("show-block");
});
$("#history-timeline").click(function(){
$(this).removeClass('show-block');
$(this).addClass('hide-block');
$('#main-image').removeClass("hide-block");
$('#main-image').addClass("show-block");
});
});
DEMO
I am trying to create a webpage with two div sections displayed next to each other horizontally. In one of them I want to append content that will change over time. I noticed that if I use css display:inline-block to align the two div sections and then I use append() to insert a paragraph in the first section, the second one is pushed down to align with the paragraph block. I know I can fix this problem by using float:left instead, but I still don't understand why inline-block behaves that way. I wonder if there is a way to make inline-block work in case I really need to use that instead of float. Here is JsFiddle: Link
<div id="left">left</div>
<div id="right">right</div>
#left, #right{
background-color:#ff0;
width: 100px;height: 100px;
display:inline-block;}
<script>
$("#left").append("<p>Paragraph</p>");
</script>
when using display: inline-block you have to add vertical-align: top if you want the elements to display at the top:
JSFIDDLE
The reason being inline-block elements are set to baseline by default
this is the code for two divs placed side by side such that on minimizing the first div the second should automatically occupy the remaining space. When the first div is brought back to original position, the second should automatically reduce its size.
One more constraint here is that, the sizes of the divs are not fixed by pixels, they are infact had to be mentioned as percentages. Can any one help in this regards?
<div id="parent" class="parent">
<div class="left"><button class="collapse-expand"></button></div>
<div class="right">
<!--<button class="collapse-expand"></button>-->
</div>
Demo here: http://jsfiddle.net/rams10786/wrv8r91r/
I think I have acomplished what you want by not floating the right div and setting it to always 100%.
.right{
height: 100%;
width: 100%;
background-color: #67b168;
}
Also I commented the size change in the jquery code:
if($('.left').css("width")=='37px'){
$('.left').animate({width:"20%"});
// $('.right').animate({width: "80%"});
}
This is the updated code: http://jsfiddle.net/jfpamqb7/1/
I want to center a div inside a parent div. The only way I can do it is by using margin-left property. The formula is:
margin-left = (parent.width/2) - (child.width/2)
but I can't get it done via JavaScript because of two things:
The width isn't defined in the style thus cannot be accessed via document.getElementById("child").style.width
document.getElementById("child").offsetWidth doesn't give the proper and the correct width for unknown reasons
I am using this code, but as said above, it doesn't work
<script type="text/javascript">
document.getElementById("fb_share").style.marginLeft = parseInt((document.getElementById("vss_border").offsetWidth / 2) - (document.getElementById("fb_share").offsetWidth / 2)) + "px";
</script>
If there is any other solution via CSS (but it must be margin-left and no width change) please tell.
Since you said JavaScript, I can't avoid mentioning jQuery's position function:
$("#myDiv").position({
my: "center",
at: "center",
of: $('#parent')
});
I found your problem. The child width is set to 691px, so once it tries to center the fb_share div it only sets it by a few pixels.
All you have to do is set the style, e.g:
<div id="fb_share" style="width:150px;">
Breakdown
Nothing wrong with your javascript.
The child is almost the same width as the parent, causing a minimum center.
Set the child width correct and all should be working fine
This is actually a quite common question. The problem is exacerbated by the fact that different browsers understand the stuff differently. The easiest thing is actually non-CSS:
<div id="parent" style="width:100%">
<div align="center">
your own stuff
</div>
</div>
However if you need to do this in pure CSS, then the answer will be something like this:
In your CSS:
div.parent {
text-align: center;
width: 100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
text-align: left;
}
div.child {
text-align: left;
}
Then, in your HTML, you'd have something like this:
<div class="parent">
<div id="wrapper">
<div class="child">
Your stuff here
</div>
</div>
</div>
I used this (second) approach to centre the entire page content within the browser window (in my case, instead of the first div, I had <body>. If you want to see where I used this, have a look at http://www.ooklnet.com/
I have a container div element that has overflow:hidden on it. Unfortunately this property is required on it because of the way the site is made.
Inside this div it's all the site content, including some tooltips. These tooltips are displayed with jQuery when you mouse over a link or something.
The problem is that some of these tooltips will display partially hidden because of the overflow thing above, because they are positioned outside the container div...
Is there any way to be able to show a specific element from inside this container, even if it's out of its boundaries? Maybe a javascript solution?
the html looks like this:
<div style="overflow:hidden; position:relative;">
the main content
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
try this:
<div style="position:relative;">
<div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
just place your main content to another div inside the main div and give provided css to hide the content if overflowing...
CSS works like a box, and sometimes, you have elements "flowing out". Setting overflow: hidden on the main element hides contents that flow out of this box.
Consider the following:
HTML
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
CSS
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`
This outputs the following:
Note that the rest of the texts that overflow are hidden.
if overflow:hidden is to contain floats, then there are other ways that would allow tooltips to not be cut off. look foe clearfix:after