<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
Related
I limited click event to :after pseudo-element using click-event:auto and created a span to bind an event inside the parent element. Why the span does not work?
function toggle(){
var button=document.querySelector('.toggle');
var bar=document.querySelector('.slide');
if(bar.className==='slide up'){
bar.className='slide down';
}else{
bar.className='slide up';
}
}
function click(){
document.body.innerHTML+='<div>Hello</div>';
}
span{
position:relative;
top:90px;
background:green;
cursor:pointer;
pointer-event:auto;
}
*{
margin:0px;
padding:0px;
height:100%;
width:100%;
}
.box{
overflow:hidden;
background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
background-size: cover;
background-position:center;
}
.slide{
position: relative;
left:39vw;
width: 55vw;
height: 77vh;
background: red;
pointer-events:none;
}
.slide:before {
pointer-events:auto;
cursor:pointer;
content: '';
position:absolute;
top:-3vh;
width: 0px;
height: 0px;
border-left:27.5vw solid transparent;
border-right:27.5vw solid transparent;
border-bottom:3vh solid white;
}
.slide.down{
transform:translateY(100vh);
}
.slide.up{
transform:translateY(23vh);
}
.slide.up:before{
transform:translateY(3vh) rotateX(180deg);
}
.slide{
transition:transform 0.4s ease-out;
}
<div class='box'>
<div class='slide up' onclick='toggle()'><span onclick='click()'>Hello</span></div>
</div>
The white triangle is .slide:before. I use click-event:auto; on it. I am NOT sure if I should use AUTO or ALL. Then I use click-event: none; on .slide class, which is the red rectangle below it. So now, I cannot click on the red rectangle just the white triangle to make it slide up and down. But I do still want to click on part of the red rectangle to do other things(not sliding necessarily).So I added a span(green Hello) inside the div that is the rectangle+the triangle. I then write the JS code so that if the green Hello is clicked, a div will Hello will be added to the body of the HTML. But it does NOT work.
I learned this span method here, but I dont quite understand it.
A few things:
Avoid events on pseudo-elements
Don't add elements by reassigning the entire body innerHtml - you lose all event bindings on all elements
Try to avoid putting JavaScript in your HTML
//listen for click event on toggle element
document.querySelector(".toggler").addEventListener("click", function(){
this.parentElement.classList.toggle("up");
});
//listen for click event on hello
document.querySelector(".clicker").addEventListener("click", function(){
var div = document.createElement("div");
var text = document.createTextNode("Hello");
div.appendChild(text);
document.body.appendChild(div);
});
html, body{
height:100%;
}
*{
margin:0px;
padding:0px;
}
.clicker{
position:relative;
top:90px;
background:green;
cursor:pointer;
}
.box{
overflow:hidden;
background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
background-size: cover;
background-position:center;
height:100%;
width:100%;
}
.slide{
position: relative;
left:39vw;
width: 55vw;
height: 77vh;
background: red;
transform:translateY(100vh);
transition:transform 0.4s ease-out;
}
.slide.up{
transform:translateY(23vh);
}
.toggler {
cursor:pointer;
content: '';
position:absolute;
top:-3vh;
width: 0px;
height: 0px;
border-left:27.5vw solid transparent;
border-right:27.5vw solid transparent;
border-bottom:3vh solid white;
}
.slide.up .toggler{
transform:translateY(3vh) rotateX(180deg);
}
<div class='box'>
<div class='slide up'>
<span class='toggler'></span>
<span class='clicker'>Hello</span>
</div>
</div>
Even better:
This effect can be done completely without JavaScript. Use sibling selectors, a label, and a checkbox instead. See working demo here
I am trying to make a animated bar graph in jQuery but how can I make the bar slide up from the bottom?
There are images for a bar and background. I set the place on CSS and am trying to add animation to the bar. After the bar shows up, I want to show a pop image. The animation works but I want to show the bar from the bottom.
$(document).ready(function() {
$(window).load(function(){
$("#graph_bar").animate({
"height":"toggle"
},2000,function(){
$("pop").show();
});
});
});
#graph_bg{
position:relative;
}
#graph_bar{
position: absolute;
top:270px;
left: 182px;
display: none;
}
#pop{
position: absolute;
top:50px;
left: 50px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="graph_bg" alt="graph_bg" src="graph_bg.jpg"/>
<img id="graph_bar" alt="graph_bar" src="graph_bar.jpg"/>
<img id="pop" alt="pop" src="image.jpg"/>
#graph_bg{
position:relative;
width:350px;
height:300px;
background-color:yellow;
overflow:hidden;
}
#graph_bar{
position: absolute;
top: 350px;
left: 50px;
height:300px;
width:50px;
background-color:blue;
}
#pop{
position: absolute;
top:50px;
left: 50px;
width:50px;
height:50px;
background-color:red;
display: none;
}
<div id="graph_bg">
<div id="graph_bar"></div>
<div id="pop"></div>
</div>
$("#graph_bar").animate({"top":"50px"}
,2000
,function(){
$("#pop").show();
}
);
http://jsfiddle.net/zacwolf/cgsdcwp3/1/
Since I didn't have your images I used background-colors instead, but you could just change those to background-image to use your images. The thing you were missing is that the background container needs to be the parent to the other two elements, then you can use "overflow-hidden" in the background container, and set the initial absolute position of the bar so that it is outside the visible limits of the background container. Then you just animate it to the "top" position where you want it to be. Also, you forget the # in your show()
How would I be able to have a <div> already collapsed when the page loads?
I have a JS Fidle with what I've got so far.
HTML
<button id="aa">Toggle it up</button>
<div id="test">TEST</div>
CSS
div {
background:#0F0;
margin:3px;
width:600px;
height:600px;
float:right;
}
div.test {
background:#345;
width:5px;
}
#aa {width: 100px;
height: 600px;
position: absolute;
top: 3px;
right: 0px;
z-index: 10
float: right;
}
JAVASCRIPT
$("#aa").click(function () {
$("div").animate({width: 'toggle'});;
});
CSS
Hide the div using css
#test{
display:none;
}
Fiddle Demo
jQuery
$('#test').hide();
JavaScript
document.getElementById('test').style.display = 'none';
CSS
#test{
display:none;
}
DEMO
<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!)
I have a hidden div with a buttin that I would like to appear when you hover over the div 'person-wrap'. How can I do this? Should I use CSS tricks or can it be done with JQUERY?
JSFIDDLE:
http://jsfiddle.net/ceTdA/3/
The div I would like to have appear:
#buttons {
display: none;
position:absolute;
right:10px;
top:10px;
margin: 0px 0px 0px 0px;
height: 30px;
width: 225px;
overflow: auto;
}
Given that your #buttons div is a child of #person-wrap you can do it with just CSS:
#person-wrap:hover #buttons {
display : block;
}
Demo: http://jsfiddle.net/ceTdA/4/
You should try this code:
$("#person-wrap").hover(function() {
$(this).find('#buttons').show();
}, function() {
$(this).find('#buttons').hide();
});
nnnnnn explains a pure css way which is best, but it's pretty simple with jQuery as well, all it does is call the first function while the mouse is hovering and the second when the mouse leaves.
$("#person-wrap").hover(
function () {
$("#buttons").addClass("hover");
},
function () {
$("#buttons").removeClass("hover");
});
And simple css:
.hover{
display:inline;
}
add this css:
#profile-pic:hover #buttons{
display:inline;
}
here is working jsfiddle