I want to reveal a hidden div when a hyperlink (with an anchor on the hidden div) is clicked. My research has led me to believe that using .switchClass is the way to go, but for the life of me I haven't been able to get it to work. Here's what I've got:
HTML
<!-- link -->
<div id="rightnest">
<p>
You likely have a few questions, and maybe some of them can
<br>be answered
<a href="#questions" class="smoothScroll">
<ins>here</ins>
</a>.
</p>
</div>
<!-- hidden div that should gain .centernest on click -->
<div class="hide">
<p> a lot of text</p>
</div>
CSS
.hide {
height: 400px;
left: 200px;
padding-top: 10px;
position: absolute;
top: 5px;
vertical-align: top;
visibility: hidden;
width: 700px;
}
.centernest {
height: 400px;
left: 200px;
padding-top: 10px;
position: absolute;
top: 5px;
vertical-align: top;
visibility: visible;
width: 700px;
}
there's .hide p, .hide h1, hide p a:link as well – all with visibility:hidden; (same for the .centernest class)
JavaScipt
$(function() {
$("<ins>here</ins>").click(function(){
$(".hide").switchClass("hide", "centernest", 100);
return false;
});
});
Try this:-
$(function() {
$(".smoothScroll").click(function(){
$(".hide").css( "visibility", "visible" );
});
});
Fiddle
Call the click event with the hyperlink class.
$(function() {
$(".smoothScroll").click(function(){
$(".hide").switchClass("hide", "centernest", 100);
return false;
});
});
Related
I have a problem with jQuery, I made a button to open/close the menu and it's work. But I want to allow the click of anywhere on the body to close the menu. So when we click outside the .burger I want to close the menu.
So I made this:
edit : this is my all code for menu
var count = 0;
function menu(){
$('.burger').click(function(){
if (count==0) {
$('.navigation').css({'display':'block', 'opacity':'1'});
count=1;
}else{
$('.navigation').css({'display':'none', 'opacity':'0'});
count=0;
}
});
}
menu();
if(count == 1){
$("body *:not(.burger)").click(function(event){
$('.navigation').css({'display':'none', 'opacity':'0'});
count=0;
});
}
But when I click on .burger, it shows the alert.
Like this, my menu appear and desappear when i click on .burger, but nothing work when I click outside of .burger
You're selecting all body tags that don't match div.burger. This will simply select the body tag (As it doesn't match div.burger).
To match all elements in body, that don't have the tag .burger, Try this instead:
$("body *:not(.burger)").click(function(){alert('ok');
$('.nav').css({"display":"none"});
});
Likewise, if you want to match ONLY DIVS that don't have the class .burger, use div:not(.burger) (You shouldn't even need body here, as a div should not appear outside of the <body> tag):
$("body *:not(.burger)").click(function(){
alert('matched body *:not(.burger)');
});
$("div:not(.burger)").click(function(){
alert('matched div:not(.burger)');
});
div
{
width: 50px;
height: 50px;
float: left;
background-color: orange;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="burger">Burger</div>
<div>Not a burger</div>
Instead of putting a binding on everything that is not the burger, I would use a delegate event binding that filters out events that bubble up.
$('.burger').on('click', function(e){
e.stopPropagation();
$('#menu').toggleClass('hide');
});
$(document.body).on('click', ':not(.burger)', function(e){
$('#menu').addClass('hide');
});
.burger {
display: inline-block;
background-color:lightblue;
}
.hide {
opacity: 0;
}
body {
background-color: gray;
min-width: 1920px;
min-height: 1080px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="burger">Burger icon</div>
<ul id="menu" class="hide">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
With function .not() you can accomplish that.
$(".body *").not("div.burger").click(function(){
$('.nav').css({"display":"none"});
});
.burger {
width: 200px;
height: 200px;
background-color: rgba(255,255,255, 1);
position: absolute;
top: 25px;
left: 30px;
z-index: 9999;
}
.body {
width: 100%;
height: 100%;
}
.nav {
width: 100%;
height: 100%;
background-color: rgba(0,0,0, .2);
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
<div class='burger'>
Burger div (Click and nothing happend)
</div>
<br><br><br>
<div class="nav">
Click this overlay div to hide it!
</div>
</div>
Hope it helps!
I'm wanting to create a div panel with a link which when clicked slides a panel in from the right, I have this working fine but I want to have the clickable link pushed out with the div panel and it's this I cannot figure out although i'm guessing it's really simple.
The html I have is:
<div class="quick-contact">
<div class="slide-toggle">Slide Toggle</div>
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
</div>
the css is this:
quick-contact {
background: #ccc;
float:right;
}
.box{
float:right;
overflow: hidden;
background: #f0e68c;
display: none;
}
.slide-toggle {
float: right;
position: relative;
right: 0;
}
/* Add padding and border to inner content for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
and the jquery is:
// use this docu ready //
jQuery(function($) {
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
}); // end
I can get the panel to slide when I click the link but the clickable link just sits above the panel when it slides in, I need it to slide out with the panel, I need it to work like this http://www.sanwebe.com/assets/floating-contact-form/ The reason i'm not using that example is because I need to slidein panel to slide in the header div and not the body div like this example does.
Just place your <div class="slide-toggle">...</div> after <div class="box">...</div> (because you are using float: "right";). Make it look like this:
<div class="quick-contact">
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
<div class="slide-toggle">
Slide Toggle
</div>
</div>
Working example: http://codepen.io/anon/pen/GoPPPE
Here's a working example: https://jsfiddle.net/ruo8r7o8/2/
Essentially, what you want to do is:
Lose the float .. it complicates calculations
Animate the whole box, not just one part
Javascript action:
$(function(){
$('.slide-toggle').click(function(){
$('.quick-contact').animate({
right: $('.quick-contact').css('right') == '0px' ? "100px": "0px"
})
});
});
CSS action:
.quick-contact {
position: absolute;
right: 0;
}
.slide-toggle {
position: relative;
background-color: red;
}
.box {
position: absolute;
right: -100px;
width: 100px;
background-color: green;
}
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 am trying to create some options that are hidden unless the user goes with the mouse in a specific area. Let's take an example: Google+ profile page:
When you go with the mouse cursor on the picture, the button appears.
Here is what I tried:
var $button = $("#button");
$("#profile-picture").on("mouseover", function() {
$button.show();
}).on("mouseout", function() {
$button.hide();
});
#profile-picture {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 45px;
left: 70px;
opacity: 0.75;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
The problem is that when I go with the cursor over the #button, it flickers. What can I do?
The easiest method is placing them both in the same div, and then using mouseover/out for that div. Example: http://jsfiddle.net/1g24mhhz/
HTML:
<div id="profile-picture">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" class="profile">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>
CSS edits:
#profile-picture .profile {
width: 150px;
height: 100px;
}
EDIT: You should probably not use an ID for the div, since you probably have multiple profiles on a page. This was just to show it with the code you had already used.
A simple css approach. You can have a click event on the button :)
$('#button').on('click', function() {
alert('I am clickable');
});
#profile-picture,
.hover-wrap {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
bottom: 0;
right: 0;
margin: auto;
opacity: 0.75;
cursor: pointer;
}
.hover-wrap {
position: relative;
}
.hover-wrap:hover #button {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="hover-wrap">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>
You can use CSS:hover properties to show/hide the button, no Javascript needed.
The trick is a sibling selector:
#profile-picture:hover + #button, #button:hover{
display:block;
}
Try this:
http://jsfiddle.net/6s9200ab/
This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.
I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.
My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the display:none - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.
I've gotten the code from coders answer in this question.
Here it is:
Script:
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="block";
});
html:
<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="blackground" class="black_overlay"></div>
CSS:
.black_overlay{
/*display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background-color: #000000;
z-index:1001;
/*-moz-opacity: 0.8;*/
/*opacity:.80;*/
/*filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Here's the fiddle-demo so you can play around as well
I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).
Also: the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the display:none attribute.
Thank you so much in advance for any help. Been stuck for a while now
You need to attach the jquery plugin in jsfiddle http://jsfiddle.net/dhana36/K57DH/12/
After update http://jsfiddle.net/dhana36/K57DH/20/
UPDATE:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/* display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 50%;
background-color: #000000;
z-index:1001;
/* -moz-opacity: 0.8;*/
/* opacity:.80;*/
/* filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="none";
//document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
Close
</a>
</div>
<div id="blackground" class="black_overlay"></div>
<button type="button" id="btn-update">Button!</button>
</body>
</html>
Add the script before closing </body> not inside </head> Same code doesn't work when wrapped inside head
http://jsfiddle.net/K57DH/18/ edit in left panel