I have a div with overflow:auto and a table inside. The div creates a vertical scroll bar as desired. However, I want to have a preview hover state for each row. This means that this hover state Div would have to go beyond the boundaries of the containing div. How would i do this with the overflow already set to hide my contents... z-index wont let me escape the parent.
Since it is a vertical scrollbar, then you can set to overflow-y:scroll and not set the overflow horizontally. Then just make sure your images only leaves the horizontal boundaries (not the verticals).
Next time, create a fiddle: http://jsfiddle.net/ and we can help you even faster :)
Use position:absolute;and set the z-index to a visible value for the div that you wish to overflow its container.
i recently resolved a similar issue, this should help you out:
https://stackoverflow.com/a/13383906/1063287
also see related jsfiddle here:
http://jsfiddle.net/rwone/eeaAr/
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
some amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
more amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
even more amazing html
</div>
</div>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 100px;
overflow-y: auto;
}
.hidden_db_data_div {
display: none;
background: #00AFF0;
width: 120px;
height: 150px;
color: red;
position:absolute;
overflow: hidden;
z-index: 999;
}
img {
width: 50px;
height: 50px;
}
.magic {
display: inline;
}
#container_a { position:relative; }
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
script
$(".magic").hover(
function () {
$(this)
.find('.hidden_db_data_div')
.css({'left':$(this).position().left+20 + "px", 'top':'-20px'})
.fadeIn(200);
},
function() {
$(this)
.find('.hidden_db_data_div')
.fadeOut(100);
}
);
Related
I'm trying to make something where I need to duplicate all the entries (multiple times) and then later I would like to make it spin and land on a colour slowly, etc. I'm now just getting stuck at duplicating the colours, how can I make it so the new colours are overflowing, without doubling the width?
I want it so that the colours go out of the wrapper div. Now they are just distributing themselves.
Any ideas?
$(document).on("click", ".duplicate", function() {
var $wrapper = $('.wrapper .inner');
$wrapper.find('.color').each(function() {
$wrapper.append($(this).clone());
});
});
.wrapper {
width: 75%;
margin: 12px auto;
height: 26px;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.wrapper .inner {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
.wrapper .color {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner">
<div class="color" style="background:red;width:231%"></div>
<div class="color" style="background:purple;width:111%"></div>
<div class="color" style="background:orange;width:91%"></div>
</div>
</div>
<button class='duplicate'>
Duplicate
</button>
In order to have two items in the same position in document flow you need to wrap them in a parent with position:relative and give one of them position:absolute; top:0;left:0. Also note that if your element doesn't have any content, you might need to define it's height and width. To make it same size as parent, you can give it top:0;bottom:0;left:0;right:0;.
Here's a demo started from your fiddle. You might want to inspect DOM after you press "Duplicate". I made it revert to original, so you can do it multiple times.
But do note your question is currently unclear. I'm afraid you lost me at "to make it spin and land on a colour slowly". It's truly poetic, but won't get you very far on SO...
I guess you are simply over complicating this. All what you need is a reapeated linear-gradient like this:
.wrapper {
width: 75%;
margin: 12px auto;
position: relative;
}
.wrapper .inner {
width: 100%;
height: 25px;
display: flex;
border-radius: 6px;
overflow: hidden;
}
.wrapper .color {
width: 100%;
height: 100%;
}
.new {
margin-top:5px;
height:25px;
border-radius: 6px;
background-image:linear-gradient(to right,red,red 54%,purple 54%, purple 80%,orange 0);
background-size:100% 100%;
animation:change 5s linear infinite alternate;
}
#keyframes change {
from {
background-position:0 0;
}
to {
background-position:-1000px 0;
}
}
<div class="wrapper">
<div class="inner">
<div class="color" style="background:red;width:231%"></div>
<div class="color" style="background:purple;width:111%"></div>
<div class="color" style="background:orange;width:91%"></div>
</div>
<div class="new"></div>
</div>
So I have 2 divs children of a display block parent. I would like to make div #2 (green) be on top of div #1 (red). With "on top" I'm not talking about z-index, I'm talking about literally being on top of the other. And then I was wondering if there could be a way to make div #2 slideDown()
As far as I tested, jQuery slideDown() or slideUp() works differently.
In the demo I made, when I run
$('.item-1').slideUp();
The item 2 is sliding up instead of item 1, why is that? I'm getting confused.
Any hints would be appreciated,
Thanks in advance.
window.slide = function() {
$('.item-1').slideUp();
}
.items-container {
height: 400px;
width: 240px;
background-color: #c3c3c3;
display: block;
/* overflow: hidden; */
}
.item {
height: 100%;
width: 240px;
position: relative;
font-size: 30px;
text-align: center;
vertical-alignment: middle;
}
.item-1 {
background-color: red;
}
.item-2 {
float: left;
position: relative;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="slide()">
Click me!
</button>
<div class="items-container">
<div class="item item-1">
1
</div>
<div class="item item-2">
2
</div>
</div>
jQuery's slideUp() and slideDown() methods animate the height of the matched elements, not position as you seemed to want: http://api.jquery.com/slideUp/.
What you seem to want is to translate the div it so that it moves on top of the first one.
http://www.w3schools.com/css/css3_2dtransforms.asp
window.slideUp = function() {
$('.item-2').addClass('slideUp');
}
window.slideDown = function() {
$('.item-2').removeClass('slideUp');
}
.items-container {
height: 100px;
width: 240px;
background-color: #c3c3c3;
display: block;
/* overflow: hidden; */
}
.item {
height: 100%;
width: 240px;
position: relative;
font-size: 30px;
text-align: center;
vertical-alignment: middle;
}
.item-1 {
background-color: red;
}
.item-2 {
position: relative;
transition: transform linear 1s;
background-color: green;
}
.slideUp
{
transform: translate(0,-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="slideUp()">
SlideUp!
</button>
<button onclick="slideDown()">
SlideDown!
</button>
<div class="items-container">
<div class="item item-1">
1
</div>
<div class="item item-2">
2
</div>
</div>
.slideUp() works by changing the height of the element. As that element gets shorter, following elements will move up the page.
As seen in the documentation:
The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items.
In your fiddle, item1 slides up as expected and as defined by the doc :
Description: Hide the matched elements with a sliding motion.
So your div slides up and disappears, and item2 doesn't "move", just fills the space in the DOM after item1 has been hidden.
I'm wanting to create a div panel with a link which when clicked slides a panel in from the right, I have this working fine but I want to have the clickable link pushed out with the div panel and it's this I cannot figure out although i'm guessing it's really simple.
The html I have is:
<div class="quick-contact">
<div class="slide-toggle">Slide Toggle</div>
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
</div>
the css is this:
quick-contact {
background: #ccc;
float:right;
}
.box{
float:right;
overflow: hidden;
background: #f0e68c;
display: none;
}
.slide-toggle {
float: right;
position: relative;
right: 0;
}
/* Add padding and border to inner content for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
and the jquery is:
// use this docu ready //
jQuery(function($) {
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
}); // end
I can get the panel to slide when I click the link but the clickable link just sits above the panel when it slides in, I need it to slide out with the panel, I need it to work like this http://www.sanwebe.com/assets/floating-contact-form/ The reason i'm not using that example is because I need to slidein panel to slide in the header div and not the body div like this example does.
Just place your <div class="slide-toggle">...</div> after <div class="box">...</div> (because you are using float: "right";). Make it look like this:
<div class="quick-contact">
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
<div class="slide-toggle">
Slide Toggle
</div>
</div>
Working example: http://codepen.io/anon/pen/GoPPPE
Here's a working example: https://jsfiddle.net/ruo8r7o8/2/
Essentially, what you want to do is:
Lose the float .. it complicates calculations
Animate the whole box, not just one part
Javascript action:
$(function(){
$('.slide-toggle').click(function(){
$('.quick-contact').animate({
right: $('.quick-contact').css('right') == '0px' ? "100px": "0px"
})
});
});
CSS action:
.quick-contact {
position: absolute;
right: 0;
}
.slide-toggle {
position: relative;
background-color: red;
}
.box {
position: absolute;
right: -100px;
width: 100px;
background-color: green;
}
I am trying to create a push animation, where one element 'pushes' the other. Something like this:
I finally got it implemented, thanks to this answer. But now I have another problem. I want #slider, leftBox, and rightBox to have a height based on its content. I don't want to set a fixed height to it.
If I remove their heights, and because their heights will be based on its content, I cannot assign a fixed margin-top to #buttons, so I will also have to remove margin for #buttons. Now that I had to remove all that, the #slider is hidden.
Also, I don't want #buttons in #wrapper, I want it in its own div places elsewhere.
How can I have a push animation like the above GIF, with the height being dynamic?
JSFiddle
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#slider').animate({
left: '-400px'
});
});
$('#rightBtn').click(function() {
$('#slider').animate({
left: '0px'
});
});
});
#wrapper {
width: 400px;
background-color: chocolate;
margin: auto;
overflow: hidden;
position: relative;
}
#leftBox,
#rightBox {
width: 400px;
display: inline-block;
position: absolute;
}
#rightBox {
left: 400px;
}
#slider {
position: absolute;
width: 800px;
}
#buttons {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slider">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div>
<div id="rightBox" style="background-color: darkkhaki;">Bye Bye
<br/>See you
</div>
</div>
</div>
<div id="buttons">
<div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div>
<div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
I'm pretty sure i managed to get what you want.
I have two JSFiddles for you, the first one is supported by all (decent) browsers, while the second one probably fits what you want better but is only supported in all browsers except for internet explorer.
The first one:
http://jsfiddle.net/Ljmxe5cx/
#leftBox,
#rightBox {
width: 400px;
float: left;
}
#slider {
width: 800px;
}
The boxes do not fill the container completely height-wise but as i said this should have wider support.
The second one: http://jsfiddle.net/hr8nzde8/
#leftBox,
#rightBox {
width: 400px;
}
#slider {
width: 800px;
display:flex;
}
The boxes do fill the containers completely in this version, this should also just generally cause less trouble if you decide to change some CSS for the boxes themselves
I would like to place an image centrally within a div (fiddle). Because I want that div to inherit that div's height from another one that is floating next to it, I had to use this trick.
For that reason, the solutions described here don't seem to be working.
The requirement is that no other behavior is modified, but the code can be as long as the effect achieved is the same. I am also willing to accept solutions involving javascript, if necessary.
<div class="container">
<div class="logo-div">
<img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
<div class="text-div">
<h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>
.container {
background: green;
overflow: hidden;
}
.logo-div {
background: yellow;
width: 150px;
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.text-div {
background: blue;
float: left;
max-width: 350px;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.logo {
width: 100px;
}
I have modified the code so that the logo image can be center aligned horizontally as well as vertically.
JSFiddle
HTML code:
<div class="container">
<div class="image-div">
<div class="logo-div">
<img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
</div>
<div class="text-div">
<h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>
</div>
Css code:
.container {
background: green;
overflow: hidden;
}
.logo-div {
background: #FFFF00;
display: table-cell;
height: 100px;
text-align: center;
vertical-align: middle;
width: 150px;
}
.text-div {
background: blue;
float: left;
max-width: 350px;
}
.image-div {
float: left;
}
.logo {
width: 100px;
}
If you have further issue, please comment on the code, and modify the jsfiddle.
Regards D.
There are two ways for this. One you can set Margin property of any component to 'auto' if you want it to align at the middle. Of course you can set this property in CSS instead of using style tag.
<img src="http://bit.ly/1qCKrtJ" style="margin:auto;"/>
Another is using center tag
(As 'margin:auto' may not work for images for some browsers however it works for div tag.)
<center>
<img src="http://bit.ly/1qCKrtJ" alt="Logo">
</center>
If you need just horizontal center, try:
.logo-div {text-align: center;}
img {margin: 0 auto;}
http://jsfiddle.net/yXNnd/18/
JS version
Using jQuery (I'm too lazy :))
http://jsfiddle.net/yXNnd/25/
Add this js
$(document).ready(function(){
var img = $('.logo-div img');
var top = ($('.container').height() / 2) - (img.height() / 2);
img.css('margin-top', top + 'px');
});