I have three different boxes in same row. I want transition in those boxes when clicked inside the box.
Right now when i click on any box it will expand from left to right and get full width and other boxes are stacked in next row. What i want is when i click red box the that box must expand from left to right overlapping the remaining boxes.
Similarly when i click the green box, it must expand from both its side and overlap both boxes in left and right side and get full width. Similarly when i click blue box it must expand from left side and fill the width overlapping the remaining boxes.
Can any one please help me?
My Code is :
<html>
<head>
<title>Transition</title>
<style type="text/css">
.box {
width:30%;
height: 200px;
margin: 10px;
float:left;
}
#first {
background-color: red;
}
#second {
background-color: green;
}
#third {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$("#"+id).animate({width: "100%"});
});
});
</script>
</body>
</html>
Jsfiddle link
Transition transform: scale(), and that will allow the element to expand over the others. You can just assign a class via js for that property to transition and you can do that in pure CSS. And since each element is 20% wide, transitioning scaleX(5) would be 100%. And use transform-origin to change which direction the elements expand from.
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).addClass('scale');
});
.box {
width:20%;
height: 200px;
margin: 10px;
float:left;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: center center;
}
#third {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
transform: scaleX(5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
Though this effect would work a lot better if the elements were evenly spaced within the parent, then they will overlap and fill the parent evenly. Using display: flex; justify-content: space-between; on the parent enables that.
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).addClass('scale');
});
.container {
display: flex;
justify-content: space-between;
}
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: center center;
}
#third {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
transform: scaleX(5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
Related
Say I have 2 divs, I moved 1 div to hover above all other divs using position: absolute like this:
.wrapper {
display: block;
}
.block1 {
width: 100px;
height: 300px;
background-color: grey;
}
.block2 {
width: 100px;
height: 200px;
background-color: yellow;
}
.block3 {
width: 100px;
height: 50px;
background-color: green;
position: absolute;
top: 10%;
}
<div class='wrapper'>
<div class='block1'>Block 1</>
<div class='block2'>Block 2</>
<div class='block3'>Block 3</>
</div>
Now I'd like to add a frosted glass to all the divs except block3. I know the frosted glass effect can be done by something like filter: blur(10px), but how can I modify block3 class to apply this effect to all other divs? In other words I want block3 to be clear, everywhere else should be blurred. Surely adding filter: blur(10px) to all other divs are not allowed because in reality I could have block4, block5 etc.
EDIT: thanks for all the help, what I wanted was to have any single block unblurred, and all other blocks blurred. So Marc's answer is correct.
Note the new CSS I added, which excludes the <div> with a class of block3.
.wrapper {
display: block;
}
.block1 {
width: 100px;
height: 300px;
background-color: grey;
}
.block2 {
width: 100px;
height: 200px;
background-color: yellow;
}
.block3 {
width: 100px;
height: 50px;
background-color: green;
position: absolute;
top: 10%;
}
div.wrapper > div:not(.block3) {
filter: blur(10px);
}
<div class='wrapper'>
<div class='block1'>Block 1</div>
<div class='block2'>Block 2</div>
<div class='block3'>Block 3</div>
</div>
If you're goal is to hide the last .block element, as others have assumed, then you could use the following instead:
div.wrapper > div:not(:last-child) {
filter: blur(10px);
}
If I understand correctly this is all possible with CSS.
To create your frosted glass effect use a CSS class selector *="class" (equivalent to CSS attribute selector) which selects all elements whose class contains at least one substring "block".
[class*="block"] {
filter: blur(10px);
}
Then when you hover over a div, override the styles with this:
[class*="block"]:hover {
filter: none !important;
}
User hover and target the element
.wrapper {
display: block;
}
.wrapper:hover > .block {
filter: blur(10px);
}
.wrapper:hover > .block:hover {
filter: blur(0px);
}
<div class='wrapper'>
<div class='block'>Block 1</div>
<div class='block'>Block 2</div>
<div class='block'>Block 3</div>
</div>
if you want it hard coded
.wrapper {
display: block;
}
.wrapper > .block {
filter: blur(10px);
}
.wrapper > .block3{
filter: blur(0px);
}
<div class='wrapper'>
<div class='block'>Block 1</div>
<div class='block'>Block 2</div>
<div class='block block3'>Block 3</div>
</div>
I'm trying to create the effect seen in the header of http://anagram.paris/work/burgerking where the text moves as you scroll down.
I'm trying to do it with css margins and jQuery, but it doesn't seem to act right. I am using flex to vertically center all the content so I think that may be affecting it too.
jQuery(document).ready(function($){
var offset = 175,
scroll_top_duration = 1500,
// bind with the button link
$animation = $('.spacer');
$(window).scroll(function(){
if( $(this).scrollTop() > offset ) {
$animation.addClass('stretch');
}
else
{
$animation.removeClass('stretch');
}
});
css
.flex {
display: -webkit-flex;
display: flex;
flex: 1;
align-items: center;
}
.spacer.stretch { padding-top: 4%; }
.spacer {
position: relative;
transition: padding .35s 0s ease;
}
html
<div class="jumbotron indx-jumbotron flex">
<div class="row flex">
<div class="col-xs-8 col-xs-offset-2">
<h1 class="spacer">Hi, I'm <strong>Lucas</strong></h1>
<p class="spacer">Lorem ipsum dolor sit amet,</p>
<div class="spacer">Button</div>
</div>
</div>
this is simple parallax effect
At first, margin is not a good property to do that (performance issue) better is transform: translate3D(0px,0px,0px) -> translate3D(0px,-100px,0px)
If you want to, I can write more, how translate3D works.
But if you want to ready to use solution look at here
http://scrollmagic.io/
If you want to now more about performance
https://developers.google.com/web/fundamentals/performance/rendering/
I had to pretty much overhall the code, but this works properly. To adjust the speed simply adjust the multiplier from .5 to whatever you want.
jQuery(document).ready(function($){
$(window).scroll(function(){
$(".container .foreground").css({
top:$(".container").height()/2-$(this).scrollTop()*.5
});
});
});
body {
padding:0;
margin:0;
}
.container {
position:relative;
overflow:hidden;
}
.container .background {
width:100%;
height:100%;
display:block;
}
.container .foreground {
position:absolute;
font-size:40px;
color:yellow;
z-index:1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spacer {
height:400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img class="background" src="http://neil.computer/s/1.jpg" />
<div class="foreground">
Testing text
</div>
</div>
<div class="spacer">
</div>
Here's a very simple jsFiddle:
function hideDiv2() {
$('.div2').hide();
}
function showDiv2() {
$('.div2').show();
}
.div1 {
height: 300px;
width: 20%;
background-color: red;
float: left;
}
.div2 {
height: 300px;
width: 20%;
background-color: green;
float: left
}
.div3 {
height: 300px;
width: 35%;
background-color: pink;
float: left
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<br>
<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()">Show div2</button>
that creates 3 divs in HTML, and provides two buttons to hide and show the middle div. What I'd like to know is how I keep div3 from sliding over to the left when div2 is hidden. In other words I'd like div3 to remain in its original location regardless of whether div2 is hidden or visible. It is required, however, that the initial HTML page be displayed with all 3 divs visible as shown initially in the jsFiddle.
Instead of using .hide(), set opacity to 0, or set visibility to hidden
$('.div2').css('visibility', 'hidden');
Note: opacity won't work in IE < 9
By adding an external div you can achieve what you looking for.
Here is your code and jsFiddle
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.div1 {
height:300px;
width:20%;
background-color: red;
float:left;
}
.div2 {
height:300px;
width:100%;
background-color: green;
float:left
}
.hideDiv {
height:300px;
width:20%;
float:left
}
.div3 {
height:300px;
width:35%;
background-color: pink;
float:left
}
</style>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
<div class="div1">div1</div>
<div class ="hideDiv"><div class="div2">div2</div></div>
<div class="div3">div3</div>
<br>
<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()" >Show div2</button>
</body>
<script>
function hideDiv2()
{
$('.div2').hide();
}
function showDiv2()
{
$('.div2').show();
}
</script>
</html>
Objective
To have the page the page on my website to expand in height according to the dynamic data pushed into the container.
Background
The page has a set of images and text that is populated via a JSON feed. The text is overflowing into the footer because it is not expanding its containing div which would subsequently expand its containing div which would subsequently expand the body. So I need for a specific child div to push its multiple parent divs.
I have searched similar problems on Stackoverflow and attempted various CSS solutions such as giving all of the parent divs a CSS rule of clear:both or even in the HTML inserting a <div style="clear:both"></div> but none of those solutions worked.
So now I am experimenting with jQuery to see if I could find a solution to this problem.
I know I need to create a variable of some sort like
var newHeight = $("#carousel").height();
And that it needs to have push out the height with something like
$(".case").height(newHeight);
This is my current HTML
<body>
<div class="container">
<div class="block push">
<div id="mainContent" class="row">
<div class="large-12 columns">
<h1>Before & After Case Gallery</h1>
<div id="casesContainer">
<div id="carousel"></div>
</div>
<script id="casestpl" type="text/template">
{{#cases}}
<div class="case">
<div class="gallery_images_container">
<div class="item_container">
<div class="gallery_heading">BEFORE</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_b_300.jpg" alt="Photo of {{alt}}" />
</div>
<div class="item_container">
<div class="gallery_heading">AFTER</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_a_300.jpg" alt="Photo of {{alt}}" />
</div>
</div>
<div class="description_container">
<p>
<span><strong>Case Number {{{number}}} {{version}}:</strong></span>
{{{description}}}
</p>
</div>
</div>
{{/cases}}
</script>
The {{{description}}} in the <p> is overflowing into its parent divs <div class="description_container"> then <div class="case"> then <div id="carousel"> then <div class="casesContainer"> then <div class="large-12"> (which is a container in Foundation) then <div class="mainContent"> and so on.
Here is my CSS
html, body { height: 100%; }
.container { display: table; height: 100%; width: 100%; margin: 0 auto; }
.block { display: table-row; height: 1px; }
.push { height: auto; }
#mainContent {}
#casesContainer {
min-width:310px;
}
.image-navigation {
background: rgb(6,6,6);
color: #fff;
width:100%;
max-width: 640px;
height: 24px;
}
.image-navigation a {
color: #fff;
padding: 6px;
}
.image-navigation-previous, .image-navigation-next{
float:left;
width: 50%;
}
.image-navigation-previous {
text-align: right;
}
.image-navigation-next {
text-align: left;
}
#carousel {
height:auto;
min-height:600px;
overflow-y: auto;
}
.case {
max-width: 640px;
height:auto;
}
.gallery_images_container {
clear: both !important;
}
.item_container{
max-width: 320px;
float: left;
}
.gallery_heading {
background: black;
color: white;
width: 100%;
text-align: center;
}
.description_container {
background: none repeat scroll 0% 0% white;
min-width: 308px;
max-width: 640px;
padding: 6px 6px 12px 6px;
clear: both !important;
}
I realize that #carousel { height:auto; min-height:600px; overflow-y: auto; } is an ugly hack. It was just an experiment.
I hope that I am just completely missing something and this is an easy jQuery fix. Or maybe my HTML and CSS could use a different structure?
Not a complete fix but maybe helpful.
I've used this function but Internet Explore increases the heights on resize.
$(document).on('ready', function() {
// $(window).on('resize', function() {
var height1 = $("#r1c1").height();
if (height1 < $("#r1c2").height()) { height1 = $("#r1c2").height() }
if (height1 < $("#r1c3").height()) { height1 = $("#r1c3").height() }
$("#r1c1").height(height1);
$("#r1c2").height(height1);
$("#r1c3").height(height1);
// }).trigger('resize'); // Trigger resize handlers not working correctly with IE8.
});//ready
I have made a jQuery script in which you can hide or show one of divs (first one) on click of button hide
The code looks like this in script:
$('.hideButton').click( function() {
var toggleWidth = $(".first").width() == 100 ? "10px" : "100px";
$('.first').animate({ width: toggleWidth},200);
if ( $('.first').width() == 10 ){
$(".content").attr("hidden",false);
}
else if ( $('.first').width() == 100 ){
$(".content").attr("hidden",true);
}
});
HTML:
<div class="contain">
<div class="row">
<div class="navigation">
navigation
</div>
<div class="advert">
advert
</div>
</div>
<div class="row">
<div class="main">
main
<br/>
<button class="hideButton">hide</button>
<br/>
<div class="first">
1
</div>
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
</div>
</div>
CSS:
.row{
margin-left:0px;
}
.navigation{
height:100px;
background-color:orange;
width:400px;
display:inline-block;
}
.advert{
height:100px;
background-color:lime;
width:200px;
display:inline-block;
}
.main{
width:600px;
height: 300px;
background-color: magenta;
}
.first{
width:100px;
height:80%;
background-color: yellow;
display:inline-block;
}
.second{
width:100px;
height:80%;
background-color: blue;
display:inline-block;
}
.third{
width:100px;
height:80%;
background-color: red;
display:inline-block;
}
And best way is that you see it in jsfiddle: http://jsfiddle.net/dzorz/EhjeA/
Now I have a issue with other two divs. When I click the hide button and first div gets animated, other two divs on animation, both skip to the end of first div and when the animation is done they get back in place.. It is really annoying and I don't know how to solve it...
I just need that one div that gets hidden on click of button and that he does not affect anything else...
Is this example fixable or maybe you could suggest me some nice jQuery plugin that does the same?
Instead of displaying these 3 as inline-block, remove the display and float them left instead using float: left in your CSS.
JSFiddle Demo
.first{
width:100px;
height:80%;
background-color: yellow;
float: left;
}
.second{
width:100px;
height:80%;
background-color: blue;
float: left;
}
.third{
width:100px;
height:80%;
background-color: red;
float: left;
}
You can wrap the offending divs in a wrapper with a fixed width: http://jsfiddle.net/EhjeA/1/
.wrapper {
display: inline-block;
width: 100px;
}
<div class="wrapper">
<div class="first">
1
</div>
</div>
Try adding this to your CSS:
.first,.second,.third {
vertical-align: top;
}
During the animation, the overflow is set to overflow: hidden which causes the other inline elements to shift down. Adding the vertical-align: top should fix the issue.
Updated fiddle: http://jsfiddle.net/EhjeA/3/