综合开发

Div sliding from above the footer on click on another div

微信扫一扫,分享到朋友圈

Div sliding from above the footer on click on another div

I am having trouble in sliding div from bottom of the page.

Here is my JSFIDDLE

When i click on the blue box (arrow-hover) the div slides Up(box-main).

But to hide the div(box-main) again i have to click inside the box-main div.

Instead i want to hide the div when i again click on the blue box(arrow-hover). I tried a lot,but was unsuccessful.

And also i used position fixed for both the boxes so when i zoom in the page the box is fixed and it hides the rest of the page. If i give position absolute or relative The Div(box-main) is visible below the footer, which doesn’t look nice. Is there any other way to do this.

here is my code

HTML:

<div id="container">
<div id="box-main"></div>
<div id="arrow-hover"></div>
<footer></footer>
</div>

CSS:

#container
{
margin:0;
width:100%;
height:100%;
}
#box-main{
position: fixed;
left:150px;
bottom: -150px;
width: 250px;
height: 150px;
background: #000;
z-index: 100;
}
#arrow-hover{
position: fixed;
bottom: 50px;
left: 250px;
width: 50px;
height: 50px;
background: blue;
z-index: 100;
}
footer
{
width:100%;
background:green;
height:50px;
bottom:0;
left:0;
position:absolute;
z-index:500;
}

Jquery:

$('body').on('click','#arrow-hover',function(){
$('#arrow-hover').animate({
bottom: '200px'
},250);
$('#box-main').animate({
bottom: '50px'
},250);
});
$('body').on('click','#box-main',function(){
$('#arrow-hover').animate({
bottom: '50px'
},250);
$('#box-main').animate({
bottom: '-150px'
},250);
});

And also i want to put an upward arrow in (arrow-hover)div so when clicked the div moves up and then the arrow should be downwards, so when again clicked the div hides. Is there any way of doing this in Jquery or javascript or css3
.

Any help would be appreciated, Thanks a lot.

Problem courtesy of: shyam selvan

Solution

since i don’t rely on variables, i just added a class to your main box: “visible”

this class gets toggled in both animations, so it is set, when you show it, and removed, when you hide it:

update: to include some arrows in the clickable div, we add an “arrow up” class to the #arrow-hover element in the html:

<div id="container">
<div id="box-main"></div>
<div id="arrow-hover" class"arrow-up"></div>
<footer></footer>
</div>

then we add the toggleClass function, to your arrow-hover click handler, to switch between arrow-up and arrow-down class

$('body').on('click','#arrow-hover',function(){
if($('#box-main').hasClass("visible"))
{
$('#arrow-hover').animate({
bottom: '50px'
},250).toggleClass("arrow-up arrow-down");
$('#box-main').animate({
bottom: '-150px'
},250).toggleClass("visible");
}else
{
$('#arrow-hover').animate({
bottom: '200px'
},250).toggleClass("arrow-up arrow-down");
$('#box-main').animate({
bottom: '50px'
},250).toggleClass("visible");
}
});

all you have to do now, is define the arrow-up and arrow-down classes in your css and set a background image.

for those purposes, i use the icon font “font awesome” http://jsfiddle.net/hapttwf6/28/
–> this is how it looks like ;)

Solution courtesy of: errand

Discussion

see my updated fiddle :

$('body').on('click','#arrow-hover',function(){
$('#arrow-hover').animate({
bottom: '200px'
},250);
$('#box-main').animate({
bottom: '50px'
},250);
if($('#arrow-hover').css('bottom')!='50px'){
$('#arrow-hover').animate({
bottom: '50px'
},250);
$('#box-main').animate({
bottom: '-150px'
},250);
}
});
#container
{
margin:0;
width:100%;
height:100%;
}
#box-main{
position: fixed;
left:150px;
bottom: -150px;
width: 250px;
height: 150px;
background: #000;
z-index: 100;
}
#arrow-hover{
position: fixed;
bottom: 50px;
left: 250px;
width: 50px;
height: 50px;
background: blue;
z-index: 100;
}
footer
{
width:100%;
background:green;
height:50px;
bottom:0;
left:0;
position:absolute;
z-index:500;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
<div id="box-main"></div>
<div id="arrow-hover"></div>
<footer></footer>
</div>

http://jsfiddle.net/hapttwf6/27/

Discussion courtesy of: Innodel

You can maintain a boolean variable and check its value and show or hide div accordingly.

See updated fiddle

var clicked = false;
$('body').on('click','#arrow-hover',function(){
if(!clicked){
$('#arrow-hover').animate({
bottom: '200px'
},250);
$('#box-main').animate({
bottom: '50px'
},250);
clicked = true;
}
else{
$('#arrow-hover').animate({
bottom: '50px'
},250);
$('#box-main').animate({
bottom: '-150px'
},250);
clicked = false;
}
});

Hope this helps.

Discussion courtesy of: MysticMagicϡ

This recipe can be found in it’s original form on Stack Over Flow
.

微信扫一扫,分享到朋友圈

Div sliding from above the footer on click on another div

使用Java程序通过http post访问ABAP Netweaver服务器

上一篇

前首席芯片设计师:苹果“扼杀了新技术的创新”

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

Div sliding from above the footer on click on another div

长按储存图像,分享给朋友