On my website I have a slideToggle div that contains some images, very big. When this div opens, I need the images to slideIn one by one when entering the viewport.
With my code, the div opens, but then the images slide in all at the same time (as if they were a single block).
But if I remove "display: none;" from my slideToggle div and I leave it open as a starting point, the script works perfectly.
I was wondering if "display: none;" somehow ignores the div's position to the viewport.
This is the slideToggle script I am using (if it helps): https://jsfiddle.net/5efuhytm/
Instead of
display: none;
Use
visibility: hidden;
This is because display: none will remove the entire dom element from the document. Whereas visibility: hidden will just hide the dom element. In this case, if you don't want to change the viewport hide go with the visibility property.
Refer this for more details, https://stackoverflow.com/a/133064/7544289
Hope this helps!
Change the CSS remove display:none in #show-images:
/*Panel that slides open*/
#show-images
{
color: #FFF;
padding: 0;
width: 150px;
}
And add this code (because what you want to hide is just Image.)
#show-images img
{
display: none;
}
Change the JS adding #show-images img
$(function()
{
$("a#toggle").click(function()
{
$("#show-images img").slideToggle(800);
$("#toggle").toggleClass("fade");
return false;
});
});
Related
So I'm using bootstrap as my responsive framework and I have a container, row I also have two div's that I'm going to be switching between using a button. So I setup my HTML and my second div I set the display to "none" to hide it. However when using Jquery fadeIn/fadeOut you can see there is some shifting/expanding in terms of the Height.
Now I think to get around this I have to set the position to Absolute and also change the z-index of the first and second div so one is hidden behind the other. Using absolute however breaks the bootstrap container... So is there a way to switch the Div without the shifting in height when the button is clicked. Added some source so you can see what happens when to buttons are clicked.
http://www.bootply.com/hBNIHfCpxR
Try this:
http://www.bootply.com/PIG2icyErI
Relevant CSS:
.row {
position: relative;
padding-top: 50px;
}
#content-one, #content-two {
position: absolute;
width: 100%;
top: 0;
}
I would like to make the transition of the menu to be smooth. The problem is when you click the arrows, the 2nd div will show on the bottom of the 1st div, making it not smooth to look at. pls see below for my code:
Pls see my code here:
http://www.codeply.com/go/mdMPOkmFVH
in your code you need to do some basic change in CSS, your CSS should be as follows
.btn-arrow {
display: inline-block;
text-align: center;
}
.effects-list {
text-align: center;
}
.col-xs-4 {
min-height:20px;
}
Here you need to set minimum height 20px for class .col-xs-4, The reason behind this is the jquery function needs to set sliding element to have position absolute, and you were setting it to relative by force. and if all child elements in divs are absolute elements, then absolute elements won't acquire it's space in parent div and that is why it will make parent div's acquired content will be empty. so it will treat it as empty div and set it's height as 0px, and won't show anything in the div... so here we are specifying it's minimum height to solve our issue.
Another thing that we could have done is adding white space to the parent div
e.g.
<div class="col-xs-4" id="effects_menu"> </div>
I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...
Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.
You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)
I want to embed a dropdown div in a wrapper div that has 0 height, so that it takes no space whether or not it is shown, and when it is shown, it overlays the contents placed below. Suppose that dropdown element is a div with content Foo. I did something like:
HTML
<div class="dropdown_wrapper">
<div id="dropdown_content">Foo</div>
</div>
CSS
.dropdown_wrapper{
height: 0;
overflow: visible;
}
And through Javascript, I switched the #dropdown_content's style between display: block and display: none. When it is the former, I expect the content to be shown, but it is actually not shown, hidden within the wrapper div that has 0 height.
How can this be fixed?
you probably do not want the wrapper to use any space in the document. to use it as an anchor point use
position: absolute;
overflow: visible;
on the wrapper. this way the content will set it's own bounding box.
the rest seems to work as you intended. check this FIDDLE
The question might be a little bit confusing.
I have an inline div and the first one is meant to be a close/delete button. I'm trying to fadeIn the close button on hover, although when it's faded out the rest div's move to the left.
How would you prevent this?
Here is a fiddle: http://jsfiddle.net/x2SEv/
Hover on top of 'Some text goes here'
jQuery functions .show() and .hide(), use the CSS attribute display.
When attribute display is set to none, the space filled by HTML element which is hidden is remove. So your second div move to left.
You have to use the CSS attribute visibility. It does the same thing that display, but it keeps the space filled by HTML.
Let's try :
In your JS :
$(".todo").mouseover(function() {
$('.closebtn').css("visibility", "visible");
});
$(".todo").mouseout(function() {
$('.closebtn').css("visibility", "hidden");
});
And your CSS :
.closebtn, .actions{visibility:hidden;}
You'll have to absolutely position the element that you're fading, and move your text in a bit: http://jsfiddle.net/x2SEv/1/ .
.parent {
position: relative;
padding-left: 40px;
}
.div-to-fade {
display:none;
position: absolute;
left:0; top:0;
}