CODEWITHSUNDEEP
jqueryhtmlcss
himynameis
himynameis

Reputation: 259

Hover over DIV to expand width

This is what I have so far - https://jsfiddle.net/8216Lntb/

body {
  background-color: black;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}
.grow {
  height: 100vw;
  /* Origional height */
  width: 25%;
  /* Origional width */
  margin: 0px 0 0px 0;
  /* Just for presentation (Not required) */
  float: left;
  /* Just for presentation (Not required) */
  position: relative;
  /* Just for presentation (Not required) */
  transition: height 0.5s;
  /* Animation time */
  -webkit-transition: height 0.5s;
  /* For Safari */
}
.grow:hover {
  width: 25%;
  /* This is the height on hover */
}
<html>

<head>
  <title>HOMEPAGE</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" />
</head>

<body>
  <div class="grow" style="background-color:#2A75A9;"></div>
  <div class="grow" style="background-color:#274257;"></div>
  <div class="grow" style="background-color:#644436;"></div>
  <div class="grow" style="background-color:#8F6048;"></div>
  <!--<div class="grow" style="background-color:red;"></div>-->
</body>

</html>

What I am trying to achieve is this https://artsandculture.withgoogle.com/en-us/national-parks-service/parks

Every time I hover over a div it will remove one off the page because it's gone over 100%.

My question is how do I do it so that when one div expands the others just become smaller so they all stay on one page

Upvotes: 18

Views: 18032

Answers (7)

Haresh Vidja
Haresh Vidja

Reputation: 8496

Please check this code. I have used jquery for hovering effect

$(document).ready(function(){
$('.grow').hover(function() {
    $( this ).addClass( "hover" );
    $('.grow').not(this).removeClass("hover");
  });
 });
body {
    background-color: #8F6048;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.grow {
    height: 100vw; /* Origional height */
    width: 20%; /* Origional width */
    margin: 0px 0 0px 0; /* Just for presentation (Not required) */
    float: left; /* Just for presentation (Not required) */
    position: relative; /* Just for presentation (Not required) */
    transition:width 0.5s; /* Animation time */
    -webkit-transition:width 0.5s; /* For Safari */
}
.grow.hover{
    width: 40%; /* This is the height on hover */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="grow hover" style="background-color:#2A75A9;"></div>
        <div class="grow" style="background-color:#274257;"></div>
        <div class="grow" style="background-color:#644436;"></div>
        <div class="grow" style="background-color:#8F6048;"></div>

Upvotes: 3

ffdigital
ffdigital

Reputation: 11

There ya go.

<div id="left" style="position: absolute;   z-index: 1;  width: 40px; height: 150px; left: 0px; background: #22bb22;">
</div>
<div id="right" style="position: absolute;  z-index: 1;  width: 40px; height: 150px; left: 40px; background: #bb2222;">
</div>
<div class="info" id="info" onClick="" style="position: absolute; width: 200px; height: 100px; bottom: 0px; ">
</div>

Javascript:

var obj1 = [];
var obj2 = [];
var objects = [];
obj1.push(document.getElementById('left'), ['left','px', 0, 2], ['width','px', 10, 2]);
obj2.push(document.getElementById('right'), ['left','px', 10, 2], ['width','px', 60, 2]);

objects.push(obj1, obj2);
startAnimation(objects, 2, 60);

function startAnimation(objects, seconds, fps, onCompleteFunction) {
    var now;
    var fps = fps;
    var duration = seconds * 1000; //miliseconds
    var iterations = seconds * fps;
    var startTime = Date.now();
    var previous = startTime;

    var interval = 1000/fps;
    var stop = false;
    var delta;

    var frameCounter = 0;

    // info
    var elapsed = 0;
    var info = document.createElement('p');
    document.getElementById('info').appendChild(info);  

    for (var i = 0; i < objects.length; i++) {
        for(var j = 1; j < objects[i].length; j++) {
            var splitValue = objects[i][0].style[ objects[i][j][0] ];       
            var originalValue = splitValue.split(objects[i][j][1]);
            originalValue = parseInt(originalValue[0]);         
            var increment = originalValue; // increment will be altered by the easing formula
            objects[i][j].splice(2, 0, originalValue);
            objects[i][j].push(originalValue, increment);
        }
    }   
    animate(objects, now, startTime, previous, fps, interval, stop, delta, duration, elapsed, frameCounter, onCompleteFunction, info);
} 
function animate(objects, now, startTime, previous, fps, interval, stop, delta, duration, elapsed, frameCounter, onCompleteFunction, info) 
{
        if (stop) {
            return;         
        }  
        window.requestAnimationFrame( function() { animate(objects, now, startTime, previous, fps, interval, stop, delta, duration, elapsed, frameCounter, onCompleteFunction, info); }
        );      
        now = Date.now();
        delta = now - previous;
        if (delta > interval) {        
            /* Just `previous = now` is not enough.
            Lets say we set fps at 10 which means
            each frame must take 100ms
            Now frame executes in 16ms (60fps) so
            the loop iterates 7 times (16*7 = 112ms) until
            delta > interval === true
            Eventually this lowers down the FPS as
            112*10 = 1120ms (NOT 1000ms).
            So we have to get rid of that extra 12ms
            by subtracting delta (112) % interval (100).
            Hope that makes sense.  */      
            previous = now - Math.round(delta % interval); //<-- unconsistency on end frames
            elapsed = (previous - startTime)/1000;  // return value in seconds 
            frameCounter++;

            animateObjectsArray(objects, elapsed, duration);
            runInfo(elapsed, previous, startTime, frameCounter, info);

        }
        if (now - startTime >= duration) {
            stop = true;                
            for (var i = 0; i < objects.length; i++) {
                for(var j = 1; j < objects[i].length; j++) {
                    objects[i][0].style[objects[i][j][0]] = String(objects[i][j][3]) + objects[i][j][1];
                }
            }
            onCompleteFunction();
        }
}
function animateObjectsArray(objects, elapsed, duration) {
    for (var i = 0; i < objects.length; i++) {
        for(var j = 1; j < objects[i].length; j++) {
            objects[i][j][5] = Math.round(easeArray[ objects[i][j][4] ]( elapsed , objects[i][j][2], (objects[i][j][3] - objects[i][j][2]), duration/1000) );   
            objects[i][0].style[ objects[i][j][0] ] = String(objects[i][j][5]) + objects[i][j][1];  
        }               
    }

}
function runInfo(elapsed, previous, startTime, frameCounter, info) {     
    info.innerHTML = frameCounter + 'f / ' + parseInt(elapsed) + 's = ' + parseInt(frameCounter/elapsed) + 'fps<br />'; 
}
// t = time (elapsed), b = initialValue, c = change(FinalValue - initialValue), duration)
var easeArray = [
    //0 - simple linear tweening - no easing, no acceleration
    function linearTween(t, b, c, d) {
        return c*t/d + b;
    },
    //1 - quadratic easing in - accelerating from zero velocity
    function easeInQuad(t, b, c, d) {
        t /= d;
        return c*t*t + b;
    },
    //2 - quadratic easing out - decelerating to zero velocity
    function easeOutQuad(t, b, c, d) {
        t /= d;
        return -c * t*(t-2) + b;
    },
    //3 - quadratic easing in/out - acceleration until halfway, then deceleration
    function easeInOutQuad(t, b, c, d) {
        t /= d/2;
        if (t < 1) return c/2*t*t + b;
        t--;
        return -c/2 * (t*(t-2) - 1) + b;
    },
    //4 - cubic easing in - accelerating from zero velocity
    function easeInCubic(t, b, c, d) {
        t /= d;
        return c*t*t*t + b;
    },

]

https://jsfiddle.net/rrafw/4vxqLs3q/

Most of the easing functions below can be discarded after. Check this post about animating various style elements on the same requestanimationframe.

Is it better to use one or multiple requestAnimationFrame for multiple canvas objects?

Upvotes: 0

kaleemullah
kaleemullah

Reputation: 51

use a responsive grid which should work for you.

Upvotes: 0

Hitesh Misro
Hitesh Misro

Reputation: 3461

You can solve it easily using toggleClass()

Try this:

$(function() {
    $('div').hover(function() {
        $(this).toggleClass('expand');
        $('div').not(this).toggleClass('shrink');
    });
});
body {
    background-color: black;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.grow {
    height: 100vw; /* Origional height */
    width: 25%; /* Origional width */
    margin: 0px 0 0px 0; /* Just for presentation (Not required) */
    float: left; /* Just for presentation (Not required) */
    position: relative; /* Just for presentation (Not required) */
    -transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
}

.expand{
    width: 40%;
}
.shrink{
    width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>

Upvotes: 17

Dhaval Ajani
Dhaval Ajani

Reputation: 177

Please check this code.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animate Div Width on Hover in jQuery</title>
</head>
<body>
    <p><strong>Note:</strong> Place mouse pointer over the box to play the animation.</p>
    <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
</body>
</html>

Css :

 .box{
        width: 200px;
        height: 150px;
        background: #f0e68c;
        border: 1px solid #a29415;
    }

Javascript:

 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var boxWidth = $(".box").width();
        $(".box").mouseenter(function(){
            $(this).animate({
                width: "400"
            });
        }).mouseleave(function(){
            $(this).animate({
                width: boxWidth
            });
        });
    });
</script>

Upvotes: 1

Gust van de Wal
Gust van de Wal

Reputation: 5291

If you're okay with using flexbox, this could be the solution you're looking for.

html, body{
  height: 100%;
  margin: 0;
}
.grow{
  display: flex;
  justify-content: center;
  height: 100%;
  overflow-x: hidden;
}
.grow > div{
  flex-basis: 25%;
  flex-shrink: 0;
  transition: .5s;
}
.grow > div:hover{
  flex-basis: 40%;
}
.grow > div:first-child:hover{
  margin-left: 15%;
}
.grow > div:last-child:hover{
  margin-right: 15%;
}
<div class="grow">
  <div style="background-color:#2A75A9;"></div>
  <div style="background-color:#274257;"></div>
  <div style="background-color:#644436;"></div>
  <div style="background-color:#8F6048;"></div>
</div>

This piece of code actually hides the left and right boxes when one of the two in the middle is being hovered, like in the website you showed. It's also CSS only, so that's a plus!

So the container is a flexbox, its children are always centered, their flex-basis is 25%, and they can't shrink (flex-shrink: 0), which means that when one of them grows, they will overflow.

Then when the first one or the last one is being hovered, they get 15% extra margin added, which let's them flow back into the container.

Hope this helps

Upvotes: 15

Vixed
Vixed

Reputation: 3509

I think that you don't need javascript for this.

html,body{
	margin: 0 auto;
	height: 100%;
	width: 100%;
}
body {
	background-color: black;
}
#growContainer{
	display: table;
	width:100%;
	height:100%;
}
.grow{
	display: table-cell;
	height:100%;
	width: 25%;
	-webkit-transition:width 500ms;
	-moz-transition:width 500ms;
	transition:width 500ms;
}
#growContainer:hover .grow{
	width:20%;
}
#growContainer:hover .grow:hover {
	width:40%;
}
<div id="growContainer">
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
</div>

Upvotes: 37

Related Questions