<div class="box" id="box1">
<div class="overlay" id="ovlay1">
</div>
</div>
<style>
.box{
height:200px; width:200px;
}
.overlay{
height:50px; width:200px; position:absolite; top:-50px;
}
</style>
<script>
$(".box").mouseover(function(){
// $(".overlay").animate({
// $(this).animate({
top: "+=50px",
});
});
</script>
assuming i have about 5 of the .box divs, each with ascending id from box1 -> box5 etc.
the overlay should slide in on mouseover, but just on the hovered box.. i can't figure out the jquery function for this. runing animate on (".overlay") shows the overlay on every box, using (this) does not work because its obviously referring to (".box")...
how can i focus (this) on the overlay?
You can use the find method of jQuery:
$(".box").mouseover(function(){
$(this).find(".overlay").animate({
top: "+=50px",
});
});
Target the .overlay inside the currently hovered .box
$(".box").on('mouseover', function(){
$(".overlay", this).animate({
top: "+=50px",
});
});
This jQuery will select the overlay that is the child of $(this):
$(this).children('.overlay').animate({
top:"+=50px"
});
So the final piece looks like this:
$(".box").mouseover(function(){
$(this).children('.overlay').animate({
top:"+=50px"
});
});
Related
I'm trying to toggle between div .cam1 and div .cam2, but nothing is working, heres the code;
HTML:
<div class="cam1"></div>
<div class="cam2"></div>
CSS:
.cam1 {
position:absolute;
height:100%;
width:100%;
background-color:red;
}
.cam2 {
position:absolute;
height:100%
width:100%
background-color:blue;
}
JS:
$('.cam2').hide();
$('.cam1, .cam2').on('click',
function()
{
$('.cam1, .cam2').toggle()
}
);
$(document).read(main)
Your dom elements are not loaded when you are trying to hide and bind the event to them. You need to wrap the code in DOM ready event:
$(function(){
$('.cam2').hide();
$('.cam1, .cam2').on('click',function(){
$('.cam1, .cam2').toggle();
});
});
Demo
I have a sliding div, or we can say that its a on click expand and collapse div(toggle).
I want to apply the .scrollTop() to the div. when the button is clicked to expand the div
before expand set to top, and then expand. I tried it more then hundreds times
with different ways but i unable to get the desired result. Any help will be appreciated.
<div id="mainarea">
</div>
<div class="slidingDiv">
</div>
<div class="show_hide">
<p> Click me</p>
</div>
var currentscrollpos;
currentscrollpos = $(window).scrollTop();
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
$('body').animate({scrollTop:100}, 'slow')
return false;
});
});
$(document).click(function()
{
$('body').animate({ scrollTop: currentscrollpos }, 0);
});
//This is my css
#mainarea{width:550px; height:300px;background-color: yellow;}
.slidingDiv {
height:200px;
background-color: white;
margin-top:10px;
width:261px;
background-color: black;
}
.show_hide {
display:none;
}
#notificationFooter {
background:#FFFFFF; margin:0 auto; height:8px; width:96px;
}
This is the fiddle
http://jsfiddle.net/muheetmehfooz/wmwn5424/
What you are doing is not bring you to top, just move you bit up. However, if your question is only about how to make this actions in right order - try this.
jsfiddle
just use callback function
P.S.
to get to the top use
{scrollTop:currentscrollpos}
I'm trying to make two buttons that slide when clicked and push the other button out of the viewport. For example:
Before clicked - [ blue | grey ]
Click blue - [ all blue ]
Get it? I have the html and css set up perfectly (I think), but I just can't get this jQuery code to animate and change the positioning of the element that contains the two buttons. It's driving me nuts. What I have so far is:
<div id='container'>
<div id='wrapper'>
<a id='wrapper_photo' href=""></a>
<a id='wrapper_video' href=""></a>
</div>
</div>
<style>
#container{
width:760px;
height:25px;
background:#000000;
overflow:hidden;
}
#wrapper {
width:1520px;
height:25px;
background-color:#0F0;
position:relative;
left:-380px;
}
#wrapper_photo{
width:760px;
height:25px;
background-color:#666666;
float:left;
}
#wrapper_video {
width:760px;
height:25px;
background-color:#0000CC;
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper_photo').click(function() {
$('#wrapper').animate({
left:"-=380"},
5000);
});
});
</script>
I stopped when I couldn't get the left side to work.
here you go: DEMO
$(function(){
$('#wrapper_photo, #wrapper_video').click(function() {
$(this).animate({
width:"100%"},
5000);
$(this).siblings('a').animate({
width:'0px'
},5000);
});
});
I'm not sure if this new value for left will be set, so you can use position() function to get value of left of #wrapper container and then calculate new value.
$(document).ready(function() {
$('#wrapper_photo').click(function() {
var leftVal = $('#wrapper').position().left - 380;
$('#wrapper').animate({
left:leftVal},
5000);
});
});
I am trying to get an animation effect where current content fades out, and is then replaced by content sliding in from the right side of the screen. My current effort:
http://jsfiddle.net/LKazq/3/
<p>header</p>
<div id="wrapper">
<div style="height: 400px; background-color: red;">
<p>Here is some text!</p>
<button id="next">And a button!</button>
</div>
</div>
<p>footer</p>
$('#next').click(function () {
var current = $('#wrapper :first-child');
var next = $('<div>').css("height", "400px").css("background-color", "blue");
next.hide();
current.fadeOut(800, function () {
current.remove();
$('#wrapper').prepend(next);
next.show("slide", { direction: "right" }, 800);
});
});
Two problems:
The removed element is still taking up space; notice how the footer gets pushed down.
Is there anyway to suppress the horizontal scroll bar?
Any tips on better ways to do this are appreciated. Thanks!
The reason for the vertical scroll back is because of an additional UI wrapper that jQuery UI puts in place.
You can do this with regular jQuery and it should be just fine:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').css({
height:400,
backgroundColor:'blue',
marginLeft:'100%',
display:'none'
});
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().animate({marginLeft:0},800);
});
});
Updated jsFiddle.
That's the quick-fix way to do it. An additional step is to externalize your CSS into classes (which you really, really should do instead of inline styles) to make things a bit cleaner:
HTML:
<p>header</p>
<div id="wrapper">
<div class="first">
<p>Here is some text!</p>
<button id="next">And a button!</button>
</div>
</div>
<p>footer</p>
CSS:
wrapper {
overflow:auto;
overflow-x:hidden;
}
.first {
height:400px;
background-color:red;
}
.second {
height:400px;
background-color:blue;
}
Better jQuery:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').addClass('second').css({
marginLeft:'100%',
display:'none'
});
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().animate({marginLeft:0},800,function(){
$(this).removeAttr('style');
});
});
});
Here is a second jsFiddle for that.
And finally the best (although not ancient-browser compliant) way to do it, by maximizing CSS.
CSS:
#wrapper {
overflow:auto;
overflow-x:hidden;
}
.first {
height:400px;
background-color:red;
}
.second {
height:400px;
background-color:blue;
margin-left:0;
-webkit-transition:margin-left 800ms;
-moz-transition:margin-left 800ms;
-o-transition:margin-left 800ms;
transition:margin-left 800ms;
}
.secondPushed {
margin-left:100%;
}
Smaller jQuery:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').addClass('second secondPushed').hide();
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().removeClass('secondPushed');
});
});
This is the best from an overhead perspective, and its the way to do it in the modern web world, but it doesn't work on IE9 and below.
Here's a jsFiddle for that one.
I searched for this but didn't find an solution that totally fixed my problem.
I got 2 divs that are over each other. Where div #2 isn't shown (display:none).
Now what I want is that if I hover over div #1, div #2 slides down (open) at his current position.
Then div #2 should stay open when people are hovering over div #2, when they leave the hover status of div #2 for more then 5 seconds div #2 slides up again.
I made a fiddle to illustrate my div positions.
Using jQuery to keep the code simpler. One way to do what you want is to pair a global variable with a setTimeout function. The timeout checks if the mouse is still out of the div after five seconds, and if so, slides it up and out of sight.
$('.button').click(function() {
$('.showme').slideDown();
});
$('.showme').mouseout(function() {
window.isoverdiv = false;
setTimeout(function() {
if (!window.isoverdiv) {
$('.showme').slideUp();
}
}, 5000);
});
$('.showme').mouseover(function() {
window.isoverdiv = true;
});
http://jsfiddle.net/mblase75/TxnDd/2/
I moved div #2 into div #1 and this allowed me to do this with only css
http://jsfiddle.net/57Shn/
CSS
.button {width:100px; height:50px; position:fixed; background-color:blue; margin-top:30px;}
.button:hover .showme {display:block}
.showme {width:100px; height:200px; position:fixed; background-color:red; display:none; margin-top:30px;}
HTML
<div class="button">
touch me
<div class="showme">show me</div>
</div>
CSS-only solution: (doesn't slide)
<div class="outer">
<div class="one">Hover</div>
<div class="two">Hello World!</div>
</div>
CSS:
.two { display: none; }
.outer:hover .two { display: block; }
JS solution:
$(function() {
$('.two').hide();
$('.outer').hover(function() { $('.two').stop().slideDown(); });
$('.outer').mouseout(function() { $('.two').stop().slideUp(); });
});