First, thanks for reading my question. I'm trying to make grid of 3 images that slide over each other when a user hovers over it. I've seen this on many websites but I don't know what this effect/plugin is called. So I made a image and a fiddle of what I'm trying to accomplish.
The start:
3 images positioned horizontally. The first image is almost completely visible except for some tab-like bars on the right. When you would hover over the second image it will slide to the left leaving only a small (again) tab-like bar on the right. The same goes for the third image. See this image I've made.
If a user doesn't hover any of the images it just goes back to the default of showing the first image and the second and third image in tab-like state.
I've also made a fiddle here to show the way the images should be animated.
But as you can see this is not perfect. Does anyone here have a snippet I could use because my jQuery skills are not there yet. But I think this (should) could be accomplished easier and with less code I think? And even maybe more elegantly.
Thanks for the (long) read...
This is simple example ;]
$('li').hover(function() {
$(this).addClass('active');
}, function(){
$(this).removeClass('active');
})
li {
width: 0;
padding: 15px;
float: right;
height: 300px;
overflow: hidden;
cursor: pointer;
color: #fff;
}
li:nth-child(1) {
background: red;
}
li:nth-child(2) {
background: green;
}
li:nth-child(3) {
background: blue;
}
li.active {
width: 400px;
transition: all 1s;
}
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
Try zAccordian jquery plugin. https://natearmagost.github.io/zaccordion/index.html
So I changed your example a bit:
What I did was:
Changed positions to relative and set overflow hidden to .wrapper
$(document).ready(function(){
$(".img-1").hover(function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
$('.img-3').stop().animate({'left': '180px'}, 500);
}, function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
$('.img-3').stop().animate({'left': '180px'}, 500);
});
$(".img-2").hover(function(){
$('.img-2').stop().animate({'left': '20px'}, 500);
}, function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
});
$(".img-3").hover(function(){
$('.img-2').stop().animate({'left': '20px'}, 500);
$('.img-3').stop().animate({'left': '40px'}, 500);
}, function(){
$('.img-3').stop().animate({'left': '180px'}, 500);
$('.img-2').stop().animate({'left': '160px'}, 500);
});
});
.img-1 {position:relative;top:0px; background-color:red; width: 200px; Height: 50px;}
.img-2 {position:relative;top:-50px;left:160px; background-color: #1F6; width: 200px; Height: 50px;}
.img-3 {position:relative;top:-100px;left:180px; background-color: #0FF; width: 200px; Height: 50px;}
.wrapper {
border: black 1px solid;
width: 200px;
Height: 50px;
position:relative;
overflow: hidden;
top:0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="img-1">
</div>
<div class="img-2">
</div>
<div class="img-3">
</div>
</div>
You can do this completely with CSS, no need for javascript.
The example below manipulates the z-index when a div is hovered. The only tricky one is the hover of 'image-3'. The z-index of 'image-2' needs to be changed also to ensure it is on top of 'image-1'.
Therefore, in the HTML 'image-2' is placed after 'image-3'. Than in CSS 'image-2' can be addressed as a sibling.
[class^="img"] {
position: absolute;
top: 0;
left: 0;
}
.img-1 {
z-index: 3;
}
.img-1 img {
border: 6px solid #FF0;
}
.img-2 {
left: 20px;
z-index: 2;
}
.img-2 img {
border: 6px solid #F00;
}
.img-3 {
left: 40px;
z-index: 1;
}
.img-3 img {
border: 6px solid #F60;
}
div[class^="img"]:hover {
z-index: 5;
}
.img-3:hover+.img-2 {
z-index: 4;
}
<div class="wrapper">
<div class="img-1">
<img src="//placehold.it/200x50&text='image-1'" alt="">
</div>
<div class="img-3">
<img src="//placehold.it/200x50&text='image-3'" alt="">
</div>
<div class="img-2">
<img src="//placehold.it/200x50&text='image-2'" alt="">
</div>
</div>
Related
I wish to achieve this effect:
where a draggable will disappear below the edges of the container div.
I am not sure in which direction to head. At first I thought I should use css z-index but so far unsuccessful.
Is there a simple way to achieve it ? I intend to use it with jsPlumb but I don't think my question is limited to this library.
Here is a snippet with the problem. The blue rectangle is draggable, the grey area is my container, and the orange is the full page.
jsPlumb.bind("ready", function() {
jsPlumb.setContainer("conteneur");
jsPlumb.draggable(document.getElementById("item1"),{
});
console.log(document.getElementById("item1"));
});
#master {
background: orange;
position: relative;
z-index: 21;
padding: 20px;
}
#conteneur {
padding: 20px;
width:80%;
height: 200px;
border: 1px solid gray;
position: relative;
background: grey;
z-index:21;
}
#item1 {
left: 100px;
z-index: 12;
}
.node{
background: blue;
position: absolute;
width:20px;
height:30px;
}
<script src="https://rawgit.com/sporritt/jsPlumb/master/dist/js/jsPlumb-2.0.4-min.js"></script>
<div id="master">
<div id="conteneur" class="cont">
<div id="item1" class="node"></div>
</div>
</div>
If I'm understanding your question:
#conteneur {
overflow: hidden;
}
should do the trick.
I have two block inside container and under them button. I need, when I click on the button, then the first div slowly moves up and removed. I tried so:
HTML:
<div class="container">
<div class="block"></div>
<div class="block"></div>
</div>
<button class="move">Click</button>
CSS:
.container {
border: 2px solid blue;
display: inline-block
}
.block {
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
.move {
display: block
}
jQuery:
$(document).ready(function() {
$('.move').click(function() {
$('.block:first-child').animate({scrollTop: '-100px'}, 1000, function() {
$(this).remove();
});
});
});
But when I click on the button, then first .block just removed. I need to first move it up. How to fix it?
JSFiddle
You're animating the scrollTop of the element which will not have the effect you want. You can animate the height instead. However there is also the slideUp() function which will do this for you. Try this:
$('.move').click(function() {
$('.block:first-child').slideUp(function() {
$(this).remove();
});
});
Example fiddle
If you have to do it without resizing the block, you can set overflow: hidden on the container, then animate the margin-top of the block itself.
Example fiddle
Add position: relative to element. top property works on positioned elements that is position is anything other than static. position: relative suits in this case.
$(document).ready(function() {
$('.move').click(function() {
$('.block:first-child').animate({
top: '-100px'
}, 1000, function() {
$(this).remove();
});
});
});
.container {
border: 2px solid blue;
display: inline-block
}
.block {
width: 100px;
height: 100px;
background: red;
margin: 5px;
position: relative
}
.move {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="block"></div>
<div class="block"></div>
</div>
<button class="move">Click</button>
I'm creating a navigation with a sliding bar/box that follows the mouse. I manage to animate the box I'm having trouble to move the box to follow the mouse. ex. if the mouse is in nav1 the box would slide to nav1 from wherever nav the box is currently place.
I made a example jsfiddle: http://jsfiddle.net/5Wrcr/
HTML
<div id="nav" style="margin: 0 auto; width: 500px; background: red;">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="nav3"></div>
<div id="nav4"></div>
<div id="movers"></div>
</div>
CSS
#nav1, #nav2, #nav3, #nav4 {
width: 98px;
height: 48px;
border: thin solid black;
float: left;
}
#movers {
width: 100px;
height: 50px;
background: blue;
display: none;
position: absolute;
opacity: 0.3;
}
#nav:hover > #movers {
display: block;
}
JS
$(document).ready(function(){
$("#nav").hover(function(){
$('#movers').stop().animate({'margin-left': '300px'}, 500);
});
});
I don't know what animation showing that code. But if you want to use margin left animation then you can use:
$(document).ready(function()
{
$('#nav').hover(function()
{
$('#movers').animate({
margin-left: '300px'
});
});
});
not tested but should work...
Try this DEMO
$(document).ready(function(){
$("#nav div").hover(function(){
var a =$(this).position();
$('#movers').stop().animate({'margin-left': (a.left-29)+'px'},500);
});
});
Try this.
$("#nav div").hover(function(){
$('#movers').stop().animate({
'left': $(this).offset().left
}, 500);
});
UPDATED FIDDLE
What I am doing wrong?
When you click on class divtop, it should show a div popup in the middle of the page. At that time back page should become not clickable. escape or a button in popup will close it.
<html lang="en" class=" en">
<head>
<title>My Test Popup</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.divtop
{
width: 800px;
height: 300px;
border:solid;
}
.divbottom
{
top: 400px;
}
.localmenu {
border: 1px solid black;
background: #fff;
margin-left : auto;
top: 50px; width: 300px;
padding-top: 25px;
margin-top: 100px;
height: 150px;
}
.appContent{
width: 800px;
border:solid;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.maincontent{
width: 100%;
}
</style>
</head>
<body>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
<div id="popup" style="width : 100%; height: 600px;display: none;">
<div class='localmenu'>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().css("top", "500px").animate({top: 50}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
});
});
</script>
</body>
</html>
Fiddle
I added some CSS to your #popup and it's now all in the CSS (not inline in the html). Changed also your jQuery animate to 50px, instead of just 50.
I think you have small adjustments to do to the CSS, like in .localmenu I'm not sure why you have both padding-top: 25px; margin-top: 100px;.
CSS
#popup {
position:absolute;
display: none;
float: left;
left:30%;
z-index:1;
}
#popoverlay {
position: fixed;
display:none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
jQuery
$(document).ready(function () {
$('.divtop').click(function () {
$('#popoverlay').show();
$('#popup').show().css("top", "500px").animate({
top: "50px"
}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function () {
$('#popup').hide();
$('#popoverlay').hide();
});
});
HTML
<div class="appContent">
<div class="maincontent">
<div class="divtop">Top</div>
<div class="divtop divbottom">Bottom</div>
</div>
<div id="popup">
<div class='localmenu'>Text in Div Popup
<br/>
<button id="btnHide">Close</button>
<br/>
</div>
</div>
</div>
To get it to work properly, even if there is a vertical scroll bar, you have to use position "fixed". Place popup as a direct child of body and make it's position: fixed, and width and height 100%. Place localmenu as a direct child of body as well. Working example at jsbin.
Html:
<div id="popup">
<!--// This is to stop the user from interacting with the content in the back
// and to give a visual clue about that
-->
</div>
<div class='localmenu'>
<div>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
</div>
CSS:
//Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
#popup {
position: fixed;
width: 100%;
height: 100%;
display: none;
background: black;
opacity: .5;
top: 0;
left: 0;
}
//This is just to be able to center the actual menu
.localmenu {
top: 20%;
left: 0;
width: 100%;
position: fixed;
height: 150px;
display: none;
}
.localmenu > div {
border: 1px solid blue;
background: #fff;
margin-left : auto;
margin-right: auto;
width: 300px;
height: 150px;
}
Javascript: (This is mostly the same, although I removed the animate, because I don't know exactly how it works and it needs to end at 'top: 0'. As localmenu and popup are seperate, we show them seperate as well.)
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().animate(200);
$('.localmenu').show();
//$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
$('.localmenu').hide();
});
});
To block the div tags at the back from being clickable:
Add a div with the following style in your HTML. Im gonna call it overlay.
.overlay {
width: 100%;
height: 100%;
background-color: #000;
left: 0;
opacity: .8;
position: absolute;
top: 0;
z-index: 10000;
display: none;
}
This will essentially cover up your page when shown up.
To center your popup:
I added some extra styles to #popup and removed some from .localmenu. You were missing position: absolute and z-index, added those in. (z-index of popup must be > z-index of overlay)
#popup {
background: #fff;
position :absolute;
left : 40%;
width : 300px;
height: 600px;
height: 150px;
display: none;
z-index: 10001;
}
.localmenu
{
border: 1px solid black;
}
Then, in your JS,
In your animate method, I changed 50px to 30% to center div#popup
Added code to hide and show .overlay along with #popup.
After the changes,
$(document).ready(function () {
$('.divtop').click(function () {
$('#popup').show().css("top", "500px").animate({
top: "30%"
}, 200);
$('.overlay').show();
});
$('#btnHide').click(function () {
$('#popup,.overlay').hide();
});
});
Demo
http://jsbin.com/olasog/1
Code
http://jsbin.com/olasog/1/edit
Try this:
$(document).ready(function() {
$('.divtop').click(function() {
var div = $('.appContent');
$('.localmenu').css({'margin': '200px auto'});
$('#popup').show().css({top: "500px", position: 'absolute', width: div.width(), height: div.height()}).animate({top: 0}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('.mainContent').css("background-color", "");
$('#popup').hide();
});
});
I'm trying to do what many have asked before, but even after trying everything I still can't get the results I want.
I have an image 600px by 1600px, 4 images of 600px by 400px in a vertical line. I want to show 600px by 400px of the image at any one time. Ideally I would be able to hover over an element somewhere on my page and move the image upwards to reveal the other portions of the 600px by 400px image. In effect, I'd have 4 images viewable by hovering over 4 the elements.
I've tried various css3 and jquery solution but none have worked. I would appreciate any help with this.
HTML
<div class="mainimage">
<div class="buttonsection">
<div class="button1">Button 1</div>
<div class="button2">Button 2</div>
<div class="button3">Button 3</div>
<div class="button4">Button 4</div>
</div><!--end of buttonsection-->
<div class="rollingimage">
<img src="IMG/four-pics.png">
</div><!--end of rollingimage-->
</div><!--end of mainimage-->
</div><!--end of main content-->
CSS
.mainimage {
position: relative;
top: 0px;
left: 0px;
width: 900px;
height: 400px;
border: 2px solid #E78F25;
margin: 0 10px 20px 0;
}
.buttonsection {
width: 290px;
height: 400px;
position: relative;
float: left;
}
.button1,
.button2,
.button3,
.button4 {
display: inline;
height: 98px;
width: 290px;
border: 1px solid #E78F24;
text-align: center;
float: left;
}
.rollingimage {
width: 598px;
height: 400px;
position: relative;
overflow: hidden;
top: 0px;
left: 0px;
float: right;
}
jquery
$(document).ready(function(){
$(".button1").hover(function(){
$('.rollingimage').stop().animate({'top': '-200px'}, 1500);
});
});
Here is the jsfidle: http://jsfiddle.net/dirtyd77/jCvYm/1/
Thanks yet again
Gary
Just for fun, no JS:
http://jsfiddle.net/coma/MTWdb/5/
HTML
<div id="foo">
Button 1
Button 2
Button 3
Button 4
<div></div>
</div>
CSS
#foo {
width: 400px;
border: 2px solid #E78F25;
position: relative;
}
#foo > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 200px;
background: #fff url(http://placekitten.com/600/1600) no-repeat 0 0;
transition: background-position .5s;
}
#foo > a {
display: block;
width: 200px;
line-height: 100px;
text-align: center;
text-decoration: none;
}
#foo > a + a {
border-top: 1px solid #E78F25;
}
#foo > a:nth-child(1):hover ~ div {
background-position: 0 0;
}
#foo > a:nth-child(2):hover ~ div {
background-position: 0 -400px;
}
#foo > a:nth-child(3):hover ~ div {
background-position: 0 -800px;
}
#foo > a:nth-child(4):hover ~ div {
background-position: 0 -1200px;
}
You need to change the positioning of the image inside the div, not the div itself. To animate my example, you could add CSS transitions for better performance than JS animations.
http://jsfiddle.net/jCvYm/8/
$('.rollingimage').find('img')
As Dom mentioned, the jsFiddle you provided didn't reference the jQuery library. It also didn't included any actual images, and only contained code for one of the three buttons. I doubt those were the original problems you were having, though. (The missing reference to jQuery might have been.)
Once I had those straightened out, I noticed that hovering the button caused the picture to slide out of the screen, instead of scrolling. The simplest way to fix that is to move the img element, instead of moving the div. (The more natural way would be to change the scroll position of the div, but I don't recall how to do that off the top of my head.)
Added CSS:
.rollingimage img {
position: relative;
}
New JS:
$(document).ready(function(){
$(".button1").hover(function(){
$('.rollingimage img').stop().animate({'top': '0px'}, 1500);
});
$(".button2").hover(function(){
$('.rollingimage img').stop().animate({'top': '-400px'}, 1500);
});
$(".button3").hover(function(){
$('.rollingimage img').stop().animate({'top': '-800px'}, 1500);
});
$(".button4").hover(function(){
$('.rollingimage img').stop().animate({'top': '-1200px'}, 1500);
});
});
jsFiddle: http://jsfiddle.net/jCvYm/6/