Fading In and out inline div's without changing the position? - javascript

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;
}

Related

Does "display:none;" ignore div's position to the viewport?

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;
});
});

Bootstrap - Switching between Div with Jquery

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;
}

CSS: Transition of horizontal scroll menu is not smooth

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>

Javascript height to impact content not just 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)

Show div on hover issue

In this fiddle you will fill when i hover on "action" a dropdown is showed.
The problem is when we see the last item it goes below the scroll and it is not seen.
in .scrollable class i have used the position:relative;
.scrollable
{
overflow: auto;
height: 300px;
position:relative;
width:100px;
}
and the child class "drop" has the position:absolute;
i dont want to change the position:relative of .scrollable class and i want the .drop element to comeout of the scrollable on hover and .drop should not be shown below the scroll;
here is the fiddle : http://jsfiddle.net/napper7/XPxsx/15/
THanks in advance!!
here is a working code,i added a bit of js to get the current cursor position
$('.navItem').each(function() {
$(this).hover(function(e) {
$(this).find(".drops").css('left',e.pageX-20);
$(this).find(".drops").css('top',e.pageY);
}, function(e) {});
});​
http://jsfiddle.net/XPxsx/43/
.scrollable
{
position:relative;
height:300px;
width:100px;
}​
I think your best bet is to drop off the overflow behavior. As far as I know, it is not possible to display nested divs outside their parent when it has an overflow value different from visible. Ever other values clip the outside box content of some sort (either by adding a scrollbar or by hiding completely the content)
I edited a jsfiddle that does what you want but without a scrollbar :
http://jsfiddle.net/XPxsx/42/
And here is some documentation on overflow behavior :
http://www.w3.org/TR/CSS21/visufx.html
Anything out of this, will be using js to display the content in a different place DOM wise.
Also, as a more general opinion : it is good to use sass (i guess from css indentation), but even better to order your selectors in a meaning order, that would be from the most general to the most specific (such as html, then body, then div.. in your case .scrollable, then .actionTools, then .navItem..)
hope that helps

Categories