<div id="one">aaa</div>
<div id="two">bbbbbbbbbb</div>
<span id="click">click</span>
FIDDLE: http://jsfiddle.net/g6Myb/
how can i get #two and put him on #one with jQuery after click span#click?
<div id="one">aaa</div>
<div id="two">bbbbbbbbbb</div>
<span id="click">click</span>
#one {width: 200px; height: 200px; background-color: red}
#two {width: 200px; height: 200px; background-color: green; opacity: 0.3 }
$('.click').click(function(){}) // what to do here ?
there is about a million different ways of doing it, the one I chose is to wrap #one and #two with relatively positioned div and move #two to 0X0 on click
updated your fiddle:
http://jsfiddle.net/g6Myb/1/
#one {width: 200px; height: 200px; background-color: red}
#two {width: 200px; height: 200px; background-color: green; opacity: 0.3 }
#wrapper{position: relative;}
#two.on{position: absolute; top:0; left:0;}
$('#click').click(function(){
$("#two").addClass("on");
})
You will want to make a new CSS class:
.hoverOpacity{
position:absolute;
top: 0; //or wherever you want to put it
right: 0; //or whereever you want to put it
opacity: .5; //plus all the browser specific
}
Then on click, add this class to the div:
$('#click').click(function(){
$('#two').addClass('hoverOpacity');
});
You're targeting a class instead an ID
$('.click').click(function(){});
^----- USE #
than you can use this methods:
http://api.jquery.com/append/
http://api.jquery.com/appendto/
Examples:
$('#click').click(function(){
$('#one').append( $('#two') );
});
$('#click').click(function(){
$('#two').appendTo( $('#one') );
});
If your elements contain text those might not be the desired methods you want...
so if you desire to OVERLAY #two over #one than you can go with offset:
jsBin demo
$('#click').click(function(){
var TWOpos = $('#one').offset();
var pos = {X: TWOpos.left, Y:TWOpos.top };
$('#two').css({position:'absolute', left:pos.X, top:pos.Y });
});
http://api.jquery.com/offset/
DOCS: http://api.jquery.com/ (read it always. those are your tools!)
Related
I found a lot of similar questions but could not find the answer which could solve my problem.
I have a div with id 'first'. All I want is slidedown another div with id 'second' over the first one when mouse is on div 'one' and slideup div 'second' when the mouse is out of that div.
The code below works well but it has some problems.
1) when the mose is in - it slides twice.
2) when the second div is down and I move mouse over the div, it slides again
Could you please help me to get the result I want.
html
<div>
<div id="zero"><div>
<div id="my_hover">
<div id="second"></div>
<div id="first"></div>
</div>
<div id="third"></div>
</div>
js
$(document).ready(function(){
$("#first").mouseenter(function(){
$("#second").stop().slideDown("slow");
});
$("#first").mouseout(function(){
$("#second").slideUp("slow");
});
});
The easiest way is to add pointer-events: none; to the #second div CSS and position it above the #first div.
pointer-events: none; In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.(...)
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
Reference
$(document).ready(function(){
var slide = $("#second");
$("#first").hover(function(){
slide.stop().slideDown("slow");
},function(){
slide.slideUp("slow");
});
});
#first {
width: 100px;
height: 100px;
background:red;
}
#second {
position: absolute;
display: none;
width: 100px;
height: 100px;
background:blue;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="second">Second</div>
<div id="first">First</div>
Another way is to insert these two elements inside another element and use hover for that element instead of div #first. This way, the whole area is sensitive:
$(document).ready(function(){
var slide = $("#second");
$(".my-hover").hover(function(){
slide.stop().slideDown("slow");
},function(){
slide.slideUp("slow");
});
//for demo:
$('.btn').click(function(){
alert('it works!');
});
});
#first {
width: 100px;
height: 100px;
background:red;
}
#second {
position: absolute;
display: none;
width: 100px;
height: 100px;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=my-hover>
<div id="second"><button class=btn>BUTTON</button></div>
<div id="first">First</div>
</div>
I have tried your code and it's working well:
$(document).ready(function(){
$("#first").mouseenter(function(){
$("#second").stop().slideDown("slow");
});
$("#first").mouseout(function(){
$("#second").slideUp("slow");
});
});
See Example:
http://jsfiddle.net/dwxxpabq/
Okay here you go :
var $second=$("#second");
$("#first").hover(function(){
$second.stop().slideDown("slow");
},function(){
$second.stop().slideUp("slow");
});
div{
width: 100px;
height: 100px;
background: green;
margin-right: 10px;
float: left ;
position: absolute;
top:0;
left:0;
}
#second{
display: none;
background: yellow;
pointer-events : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">1</div>
<div id="second">2</div>
You can put the second div as a child of first div and by using relative/absolute positioning you can achieve what you want.
$(document).ready(function() {
var slide = $("#second");
$("#first").hover(function() {
slide.stop().slideDown("slow");
}, function() {
slide.slideUp("slow");
});
});
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#second {
position: absolute;
top: 0;
left: 0;
display: none;
width: 100px;
height: 100px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">First
<div id="second">Second
<button>click me</button>
</div>
</div>
I just want the cursor to stay a pointer when it passes over the text in my div. Using cs, it works, but using Jquery it reverts to the text selector over text.
This doesn't work...
<style>
#test
{
height: 300px;
width: 300px;
background: blue;
position:absolute;
top: 0px;
left: 0px;
font-size: 80px;
}
</style>
</head>
<body>
<div id="test">It's not a pointer!</div>
<script src='jquery-1.10.2.min.js'>
</script>
<script>
$(document).ready(function(){
$("#testjquery").hover(function(){
$(this).css({'cursor':'hand', 'cursor':'pointer'});
});
});
</script>
While this works fine...
<style>
#test
{
height: 300px;
width: 300px;
background: blue;
position:absolute;
top: 0px;
left: 0px;
font-size: 80px;
}
#test:hover
{
cursor: pointer;
cursor: hand;
}
</style>
</head>
<body>
<div id="test">It's a pointer!</div>
It seems weird, as I thought jquery simply accessed the css methods.
Looking for an explanation, or better yet a solution w/ how to do this in Jquery.
Thanks!
Your div id is test not testjquery
$("#test").hover(function () {
$(this).css({
'cursor': 'hand',
'cursor': 'pointer'
});
});
Update you can only use
$("#test").hover(function () {
$(this).css({
'cursor': 'pointer'
});
});
Read How can I make the cursor a hand when a user hovers over a list item? as commented by frnhr
<div id="main">
<div>TITLE</div>
<div>BODY</div>
<div>COMMENT</div>
<div><textarea></textarea></div>
</div>
<button>overlay</button>
#main {
width: 200px;
height: 200px;
background-color: yellow;
}
live: http://jsfiddle.net/9DLyE/1/
How is the best way to do overlay in jQuery? If i click on button overlay then i would like overlay (same as fancybox) all div#main, for example background-color: blue and transparency 0.5.
Use position:absolute to place the overlay div and use jquery toggle to show it.
CSS
#main {
width: 200px;
height: 200px;
background-color: yellow;
position:relative
}
#overlay{
background:rgba(0, 84, 214, 0.5);
height:100%; width:100%;
position:absolute;
top:0; left:0;
display:none
}
jquery
$('button').click(function(){
$('#overlay').toggle();
});
DEMO
What you have tried..??try to put click event like
$('button').on('click',function(){
//Do your stuff
});
Try this FIDDLE
I have a simple animation I'm playing with where it slides content from behind the parent element. The problem is I'm not sure where to account for that parents width. I tried to put it in the else part of the statement but if I do then the animation only runs once, where do I make it so when the animation is finished the child isn't hiding behind the parent?
JSFiddle
HTML
<div id="slideContainer">
Start Slide
<div id="slide">
This is More Content!
</div>
</div>
CSS
#slideContainer{
position: relative;
width: 500px;
overflow:hidden;
}
#slideContainer a{
display:block;
background-color: beige;
width:50px;
height: 50px;
float: left;
position: relative;
z-index: 1;
}
#slide{
width: 200px;
height: 50px;
background-color: beige;
position: absolute;
left: -500px;
}
Jquery
$(document).ready(function(){
$('#slideContainer a').click(function() {
var lefty = $(this).next();
lefty.animate({
left: parseInt(lefty.css('left'),10) == 0 ?
-lefty.width() :
100
});
});
});
Just change the comparisons from 0 to whatever value you want to use (such as 100 or 50).
left: parseInt(lefty.css('left'),10) == 50 ?
-lefty.width() :
50
http://jsfiddle.net/ExplosionPIlls/NwJTU/2/
Try this fiddle.
I have used .toggleClass to add/remove class "close". And used jQuery's .hasClass to decide the animation.
if i mouseover on my nick in stackoverflow on top page that show me new menu with * activity
* privileges
* logout etc. how can i make it? i maked something:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">
#ONE {
background-color: #888;
width: 500px;
height: 500px;
}
#TWO {
background-color: blue;
width: 50px;
height: 50px;
}
#THREE {
background-color: yellow;
width: 200px;
height: 200px;
display: none;
}
#four {
background-color: red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
$(document).ready(
function()
{
$("#TWO").click(
function()
{
$("#THREE").toggle();
});
});
</script>
<div id="ONE">
<div id="TWO">
</div>
<div id="four">
</div>
<div id="THREE">
</div>
</div>
sample image: http://img231.imageshack.us/img231/3885/threej.png
default
click for blue div
how can i it make?
If I understand correctly, you're asking how to make the yellow div appear up beside the blue one, as you have it in the third mockup? If that's the case, then:
You'll want to read up on CSS Positioning. In a nutshell, to make the yellow div sit over everything like that, it needs to take position: absolute; It'll be positioned in relation to it's nearest ancestor that has positioning, so set #ONE to position: relative;
So:
#ONE {
position: relative;
}
#THREE {
position: absolute;
left: 100%;
top: 25%;
}
This will make the top-left of #THREE shift to the far right of and a quarter of the way down #ONE. The absolute positioning also takes it out of the flow of the document, allowing it to overlap other elements.
If you want to position elements on top of each other, use position: relative or absolute. If you want it to stick to a position on your window regardless of if you scroll, use fixed.
After defining the position, you can define top, right, bottom and left to position it where you want. To simulate the 3rd image in your example, you could add:
position:relative;
top: -220px;
left:50px;
to your #THREE elements CSS, like here:
http://jsfiddle.net/niklasvh/Axjgf/