Make everything unclickable but one element [duplicate] - javascript

This question already has an answer here:
Click only inside div
(1 answer)
Closed 7 years ago.
I'm making popup. And when it appears I want everything be unclickable but this very popup.
Here's some lousy code example:
<div class="content-unclickable">
<div class="popup-clickable">some info and buttons</div>
</div>

$('content-unclickable *').on('mousedown', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
You can return false and use to e.preventDefault(); prevent Default behavior and e.stopPropagation(); all items will stop propagation

I suppose you want to display an overlay over the page that contains some elements.
Check the following example:
First, if you click on 'page element' an alert pops up.
Click on 'open popup' and you want be able to click 'page element':
$('#open-popup').on('click', function() {
$('#popup').show();
});
$('#page').on('click', function() {
alert('you clicked on page!');
});
$('#popupElem').on('click', function() {
alert('you clicked onside popup!');
});
#popup {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:100;
display:none;
}
.popup-inner {
position:fixed;
width:200px;
height:150px;
top:50%;;
left:50%;
margin-top:-75px;
margin-left:-100px;
background-color:#ececec;
z-index:110;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="page">page element (click on me!)</span><br />
<span id="open-popup">open popup!</span>
<div id="popup">
<div class="popup-inner">some info and buttons <b id="popupElem">click</b></div>
</div>

Related

Javascript hide on click off element [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 6 years ago.
I have some code which brings up a pop-up after a timer is met. Currently the code is designed so that when you click the element it closes, I just want to reverse this so that when you click off the element (anywhere else on screen) that it closes.
Thanks in advance for any help.
<script type="text/javascript">
$(document).ready(function() {
if(localStorage.getItem('popState') != 'shown'){
$("#popup").delay(5000).fadeIn();
localStorage.setItem('popState','shown')
}
$('#popup-close').click(function(e) // You are clicking the close button
{
$('#popup').fadeOut(); // Now the pop up is hiden.
});
$('#popup').click(function(e)
{
$('#popup').fadeOut();
});
});
The HTML/CSS is:
<div style="display:none; width:50%; height:50%; background-color:blue; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:1000;" id="popup"><p>Testing Newsletter Box</p><p>Click to close</p></div>
This is not a menu or a click-on, click-off event. It is a pop-up which appears on its own and once turned off cannot be brought back again so is not the same as previous questions.
Focus and unfocus element
$(document).ready(function() {
if(localStorage.getItem('popState') != 'shown'){
$("#popup").delay(5000).fadeIn();
$("#popup").focus(); //Focus when visible
localStorage.setItem('popState','shown')
}
$('#popup-close').focusout(function(){
$('#popup').fadeOut(); //When focus lost, fadeout
});
$('#popup-close').click(function(e) // You are clicking the close button
{
$('#popup').fadeOut(); // Now the pop up is hiden.
});
$('#popup').click(function(e)
{
$('#popup').fadeOut();
});
});

How to toggle between two divs?

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

jQuery - Mouseenter / Mouseleave Parent / Child Issue

I've got a parent div with multiple child divs. The parent div has a hover event on mouseover where it reveals some text on the dom. The child div's also have the same functionality.
I've tried mouseover/mouseout and mouseleave ect but they are not quite right for my usage.
When you hover over the parent the message "foo" reveals in the dom
When you hover over the child the message "bar" reveals in the dom
When you hover back to the parent without leaving the parent no message is shown. At this point I'd like it to be reset to have the same functionality as it did originally.
What is the best way to achieve this please? As I don't want to have to rearrange the dom as it'd be very time consuming
Thanks
It's a guess but this (or something similar) might do as you describe.
$(function(){
var disabled = false;
var theMessage = $("#theMessage");
$("#theParent").on("mouseover",function(e){
if(e.target.id == "theChild"){
theMessage.text("bar");
disabled=true;
} else if(!disabled) {
theMessage.text("foo");
}
}).on("mouseout",function(e){
if(e.target.id == "theParent"){
disabled=false;;
}
theMessage.text("...")
});
});
#theParent {width:200px; height:200px; background:red; position:relative;}
#theChild {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100px; height:100px; background:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theMessage">...</div>
<div id="theParent">
<div id="theChild"></div>
</div>
v2:
$(function(){
var disabled = false;
var theMessage = $("#theMessage");
$("#theParent").on("mouseover",function(e){
if(e.target.id == "theChild"){
theMessage.text("bar");
} else {
theMessage.text("foo");
}
}).on("mouseout",function(e){
if(e.target.id == "theParent"){
disabled=false;
theMessage.text("...");
}
});
});
#theParent {width:200px; height:200px; background:red; position:relative;}
#theChild {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100px; height:100px; background:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theMessage">...</div>
<div id="theParent">
<div id="theChild"></div>
</div>
v3: Use the data-attribute to store the hover text:
$(function(){
var theMessage = $("#theMessage");
var defaultTxt = theMessage.text();
$("#theParent, #theChild").on("mouseover",function(e){
e.stopPropagation();
theMessage.text($(this).data("txt"));
});
$("#theParent").on("mouseout",function(){
theMessage.text(defaultTxt);
});
});
#theParent {width:200px; height:200px; background:red; position:relative;}
#theChild {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100px; height:100px; background:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theMessage">...</div>
<div id="theParent" data-txt="foo">
<div id="theChild" data-txt="bar"></div>
</div>
http://jsfiddle.net/vnzunp5w/16/
e.preventDefault();
e.stopPropagation();
seems to be the winner!
I had to do this in order to have the arrows hide initially, and than show them on hover only.
Using this slider http://www.idangero.us/swiper/#.Vk4so7erTRY
(best one I have found so far)
$('.swiper-button-next, .swiper-button-prev').addClass('hide');
var hoverArrows = function(){
console.log("hoverArrows")
$('.swiper-wrapper, .swiper-button-next, .swiper-button-prev').mouseenter(function () {
console.log("hovered")
$('.swiper-button-next, .swiper-button-prev').removeClass('hide');
}).mouseleave(function () {
$('.swiper-button-next, .swiper-button-prev').addClass('hide');
});
}
hoverArrows();

Animation doesn't work correctly while scrolling the website

I have a problem with animation, when I scroll the page. You can see it above.
Click "show notice" button and wait about 2 seconds, then the notice will start to hide. Scroll up and down and you will see the notification is jumping up and down. What do I need to do to have notice always in the bottom of website window, even during scrolling?
JSFIDDLE
HTML
<input type="button" value="show notice">
<div id="notice"><p>Notice</p></div>
CSS
body {
height:3000px;
}
#notice {
display:none;
position:absolute;
top:0;
left:0;
width:100px;
height:40px;
background:green;
text-align:center;
font:12px Verdana; color:white;
}
#notice p {
}
JS
function shownotice(){
if(typeof(ntimeout)!='undefined')
clearTimeout(ntimeout);
$('#notice').css({'height':'0px', 'top':h+$(window).scrollTop()+'px'}).show().animate({'height':'+=40px', 'top':'-=40px'}, {duration:300});
ntimeout=setTimeout(function(){hidenotice();}, 2000);
}
function hidenotice(){
$('#notice').animate({'height':'-=40px', 'top':'+=40px'}, {duration:10600, complete:function(){$(this).hide();}});
}
$(function(){
h=window.innerHeight||document.body.clientHeight;
$('#notice').css({'top':h-$('#notice').height()+'px'});
$('input').on('click', function(){shownotice();});
$(window).scroll(function(){$('#notice').css({'top':h-$('#notice').height()+$(window).scrollTop()+'px'})});
});
http://jsfiddle.net/sn1xfwxm/11/
changes to your original fiddle:
#notice {
position:fixed;
removed the display: none, also!
the resulting js is much more simple:
$("#notice").hide(); //hide the notice on document load
$("#show").click(function () {
$("#notice").stop(true, true).slideDown();
});
$("#hide").click(function () {
$("#notice").stop(true, true).slideUp();
});

Scroll to top in a lightbox

I have created a customized menu. See here. On click of this link I have a shadowbox popping up which has a long list of items. Now I want to have a "back to top" anchor link which takes me back to the top of the menu list.
I've set your lightbox with the #box id.
Html
<div id="box">
...
<!-- long content there -->
To Top
</div>
CSS (setting the width of elements)
#box {
position:relative;
width:200px;
height:250px;
overflow:auto;
}
#box #toTop {
position:absolute;
display:none;
left:150px;
top:10px;
}
jQuery
$('#box').bind('scroll', function(e) {
if ($(this).scrollTop() > 100) {
$('#toTop').fadeIn();
$('#toTop').css({'top' : $(this).scrollTop() + 100});
} else {
$('#toTop').fadeOut();
}
});
$(document).on('click', '#toTop', function(e) {
e.preventDefault();
//$('#box').scrollTop(0); //just go to top
$('#box').animate({scrollTop : 0},'slow'); //animate
});
Fiddle
Pretty easy with:
document.querySelector("iframe").contentWindow.scrollTo(0,0);
Now put a button on the page and call that on click. Oh, and omit the height:100% on your body of the iframe, this way you get rid of the second scrollbar.
You can try this out by just pasting the line above and executing it in the console of your browser with your webpage.

Categories