I have a table with 2 rows and 3 columns; in each cell there is a div.
What I want:
when mouse is over one div (say div1), I want to encrease its height and width (this is done)
the divs neighbours should remain still: no modification of left, top, right, bottom position.
the div1 overlaps over its neighbours
Can this be done ?
Thank you.
This can be done with css only.
http://jsfiddle.net/Erp2B/
td {
position:relative;
height:100px;
width:100px;
padding:5px;
background:#eee;
border:1px solid
#888;
}
td div {
position:absolute;
height:100px;
width:100px;
padding:5px;
top:0;
left:0;
transition: all 0.5s ease;
}
td:hover div {
height:200px;
background:#f33;
z-index:1000;
}
If you want it to simply overlap then you can set the div to position: absolute. If you want it to overlap to the left/right/top/bottom then you'll want to give it a negative margin when hovering over it and increasing its width / height.
Related
I have block with gradient from top(black) to bottom(blue) with 400px width and 100% height fixed at right side of the browser. There is a button as well with 50px width and 100px height at the left and vertically middle of this block. I want same block gradient merging this button as well so it will look attached with this block. Any solution using css or js? example given in screenshot.
thanks in advance
Use background-attachement:fixed and apply the same gradient to the button:
.box {
width:400px;
position:fixed;
top:0;
right:0;
bottom:0;
background:linear-gradient(to bottom,red, blue) fixed;
}
.button {
writing-mode:vertical-lr;
font-size:23px;
position:absolute;
top:30%;
left:-30px;
padding:5px;
color:#fff;
background:linear-gradient(to bottom,red, blue) fixed;
}
<div class="box">
<div class="button">a button</div>
</div>
I have Two Div, class name .div1 & .div2 with width:20%; each. Inside .div1 I have a another div name .bar
This .bar div is positioned left 100% absolute. I am trying to make the End point of .bar div and End point of .div2 should remain in same point in different screen like this Image below:
You can see that End point of Green Bar(.bar) and Gay Div(.div2) are in Line. But if I increase or decrease the size of the screen they don't remain in line. I have tied many ways but not worked. Is this possible with only CSS ? or Need any jQuery help ? If need any jQuery can anyone help me how to do that ? because I am not good with jQuery.
Here is the HTML:
<div class="div1">
<div class="bar"></div>
</div>
<div class="div2">
</div>
This is CSS that I have used:
.div1{
background:red;
}
.div2{
background:#ccc;
margin-top:25px !important;
}
.div1,.div2{
position:relative;
width:20%;
float:left;
margin:0px 10px;
height:180px;
}
.bar{
background:green;
position:absolute;
height:20px;
left:100%;
top:0px;
width:114%;
z-index:10;
}
Thanks in advance. FIDDLE
I have a simple jsfiddle example in here http://jsfiddle.net/RQ4F2/1/
The blu box-shadow is actually overflowing, covering a little part of the elements , is it possible to make it not ?
So that elements shows a full white background inside of themselfs?
Instead of setting box-shadow for the spans, you should set box-shadow for some pseudo-element of the span (such as the :before). That way you can put the box-shadow to the back by using z-index, the spans will be on top and cover the box-shadow:
span {
width:100px;
padding:20px;
float:left;
border-radius:100%;
height:100px;
background:white;
position:relative;
}
span:before {
content:'';
position:absolute;
width:100%;
height:100%;
border-radius:50%;
left:0; top:0;
background:white;
box-shadow:0px 0px 20px 4px blue;
z-index:-1;
}
Demo.
I'm guessing that adding a margin isn't what you're after and you'd like to have the circles touching but without the fade overlapping.
To do this you could have another inner span, positioned absolute with the box shadow overridden:
<span><span class="in"> </span></span>
span.in{
position:absolute;
box-shadow:inset 0px 0px 0px 0px;
/*compensate for outer span's padding*/
margin-left:-20px; margin-top:-20px;
}
I updated you CSS by adding margin: 10px to the span tag. To get more space between the elements, please raise the margin.
You may find the updated jsfiddle here
I have a bunch of divs in sort of a grid pattern, and when a tile div is clicked on, i want it to expand out to the right to show a previously hidden div. however, during the animation, the surrounding tile divs are put out of position for a moment before going back to their correct position after the animation completes. I would like it to just smoothly slide out to the right. click on the top left tile to see most closely what I mean.
Here's the JS code, but I assume there has to be some CSS tweak. see the fiddle for CSS.
$('.tile').on('click', function(){
$(this).find('.sparkline').show();
$(this).animate({
width : '326px'
},
600,
function(){
});
});
JSFiddle
All the Less:
.tiles{
.tile{
display:inline-block;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
.origMetrics{
width:154px;
display:inline-block;
}
.sparkline{
display:inline-block;
width:154px;
height:53px;
float:right;
}
.seperator {
margin: 0 15px 5px 15px;
border-color:black;
}
.metrictitle{
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.metricvalue {
display:inline-block;
text-align:left;
width:auto;
margin-left:10px;
font-size:25px;
}
.metrictrend {
float:right;
margin-right:10px;
margin-top:5px;
}
.positive{
color:green;
img{
position:relative;
bottom:15px;
left:15px;
}
}
.negative{
color:red;
img{
display:none;
}
}
.even{
img{
display:none;
}
}
}
}
Try placing the showing of the sparkline div inside of the .animate() complete callback function.
The sparkline container was being shown and taking up space in the DOM prior to the animation being completed. This led to the appearance of a jump in the animation.
For an even cleaner look, you can use .fadeIn() instead of .show() on the sparkline container.
$('.tile').on('click', function () {
$(this).animate({
width: '326px'
}, 600, function () {
$(this).find('.sparkline').fadeIn();
});
});
In addition, in IE and Firefox it appears that the display: inline-block style on the tiles was interfering with the overflow: hidden that gets applied as part of the animation. When you utilize inline-block, I would highly suggest also setting the vertical-align property accordingly. In your case, I believe vertical-align: top would be the best setting for the tiles.
.tile{
display:inline-block;
vertical-align: top;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
}
jsfiddle
In my template I have fixed div at the left of the main wrapper div , In the remaining portion I want to place my another div box perfectly in the middle even on window re-size.
I got the current window-size with jquery:
<script type=text/javascript>
$(window).resize(function() {
var my_window = $(window).width();
});
</script>
Html:
<div id="wrapper">
<div id="rightbox"></div>
<div id="leftbox"> </div>
</div>
Css:
#wrapper{
position:absolute;
width:100%;
height:100%;
background:green;}
#leftbox{
position:fixed;
width:100px;
height:100%;
top:0;left:0;
background:red;}
#rightbox{
position:fixed;
width:400px;
height:100px;
bottom:100px;
left:50px;
background:blue;}
Demo :http://jsfiddle.net/NpeRZ/
Now I want to place rightbox div in the middle of the green screen for any screen-resolution, so I want flexible width for this rightbox div. How to get this using jquery to set rightbox always in the middle. As well according to jquery my_window value I want to set different margin-left and margin-right for rightbox div.
for my-window 1024px :margin-left = 100px,
for my-window 768px :margin-left = 80px.
for my-window 640px :margin-left = 60px.
for my-window 480px :margin-left = 40px.
for my-window 240px :margin-left = 20px.
try this:
#rightbox{
position:fixed;
width:400px;
height:100px;
left: 100px;
right: 0px;
top: 0px;
margin: auto;
bottom:0px;
background:blue;
}
The left would be the size of of the left frame or div.
You don't have to use Jquery, just change the css of the right box to:
#rightbox{
position:fixed;
width:400px;
height:100px;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-50px;
background:blue;}
Just tried it, works perfectly.