So basically I've created a modal which hides on exit using this code:
$('#emailToggle').on('click', function() {
$('body').toggleClass('dialogOpen');
});
$(document).keyup(function(e) {
if($('body').hasClass('dialogOpen')) {
if(e.keyCode == 27) $('body').toggleClass('dialogOpen');
}
});
I was trying to make it so that when the user touches outside the modal, the modal will fade as well as this.
I tried using:
$(document).on('click', function(){});
But I had no luck..
Thanks
Minimal example:
CSS:
.overlay{
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 3;
}
.modal{
z-index: 4;
}
.showOverlay{
display: block;
}
JavaScript:
$('.overlay').on('click', function() {
$('body').toggleClass('dialogOpen');
$(this).toggleClass('showOverlay');
});
You can use jquery mobile http://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp
$("p").on("tap",function(){
$(this).hide();
});
Related
I just need to have a modal close on click off of it. I tried 2 approaches:
Targeting a click event on body and check if the modal has a class and if it does show it
check the event.target and if it's not the modal hide it
Two attempts are below:
$(function(e) {
$("#filter-button").click(function(e) {
$(".dialog").toggleClass("show");
});
$("body").click(function() {
if ($(".dialog").hasClass("show")) {
$(".dialog").removeClass("show");
}
});
});
.dialog {
display: none;
width: 300px;
height: 300px;
background-color: red;
}
.show {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="filter-button">SHOW/HIDE</button>
<div class="dialog"></div>
Upon click on "SHOW/HIDE" the modal (a red box) does not even open. I think this might have something to do with #filter-button being counted as a target? As a troubleshooting initiative for the above sample, I attempted to use e.currentTarget https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget so basically changing the above to:
$(function(e) {
console.log(e.currentTarget);
...
I got nothing in the console so I can't tell if that's the issue.
I also tried to log e.target and got no results in the console as well.
Why is that?
My next attempt:
$(function(e) {
$("#filter-button").click(function(e) {
$(".dialog").toggleClass("show");
});
if(e.currentTarget != $("#filter-button")) {
$(".dialog").removeClass("show");
}
});
.dialog {
display: none;
width: 300px;
height: 300px;
background-color: red;
}
.show {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="filter-button">SHOW/HIDE</button>
<div class="dialog"></div>
The toggle function is restored, but clicking off of the modal does not close it. I found: Check if event target is hyperlink so I changed my code to:
$(function(e) {
$("#filter-button").click(function(e) {
$(".dialog").toggleClass("show");
});
if(e.target.tagName.toLowerCase() === 'body') {
$(".dialog").removeClass("show");
}
});
This breaks my previous code again, and now my dialog doesn't open at all.
howcome I can't console log e.target?
Why is the modal not opening at all in the first example? Is it because of a logic error with targeting body somehow?
Which is the better way? e.target or attaching a click event to the body?
To simplify things you could wrap your modal dialogue within a container that is full width and height of the viewport. This way you can show or hide the parent container if it is clicked instead of showing and hiding just the dialogue.
This also allows you to add an overlay with css later on to increase the visibility of the modal.
$(function(e) {
var modal = $(".modal-wrapper")
$("#filter-button").click(function(e) {
modal.toggleClass("show");
});
$(window).click(function(e) {
if (e.target == modal[0]) {
modal.removeClass("show");
}
});
});
.modal-wrapper {
display: none;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.modal {
width: 300px;
height: 300px;
background-color: red;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="filter-button">SHOW/HIDE</button>
<div class="modal-wrapper">
<div class="modal"></div>
</div>
I am trying to hide a div using
if ($("input,textarea").is(":focus")) {
$("#logos").hide();
} else {
$("#logos").show();
}
I have also tried
if ($("#input").is(":focus")) { }
and giving the input id of "input", but it seems to not work. It's supposed to work like in mobile google search.
What am I missing here?
You're probably missing an event handler
$("input,textarea").on({
focus : function() {
$("#logos").hide();
},
blur : function() {
$("#logos").show();
}
});
Here is a working example, using the jQuery methods
show()
hide()
focus()
blur()
$(document).ready(function(){
$('.logos').hide();
$('.focus').focus(function(){
$('.logos').show();
});
$('.focus').blur(function(){
$('.logos').hide();
});
});
div, textarea {
position: absolute;
width: 100px;
height: 100px;
vertical-align: top;
}
.logos {
top: 0;
left: 0;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
}
.focus {
top: 0;
left: 112px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logos">
#logos
</div>
<textarea class="focus">
Focus on me
</textarea>
I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})
Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}
I am trying to hide the popup if the background is clicked, but NOT the div.
Basically, when the user clicks the background it will hide the div; yet, if the user clicks the actual div it will still hide it. I would only like the div to be hidden on the clicking of the background.
Here is my code:
HTML
<div id="linkinputholder">
<div id="linkinputbox">
Title
</div>
</div>
<button onclick="displaylinkinput()" type="button"> Display </button>
CSS
#linkinputholder {
display: none;
position: fixed;
z-index: 100;
width: 100%;
min-height: 100%;
left: 0px;
top: 0px;
background: rgba(0, 0, 0, 0.2);
}
#linkinputbox {
display: block;
background-color: red;
width: 500px;
height: 100px;
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
JS/Jquery
function displaylinkinput() {
document.getElementById('linkinputholder').style.display = "block";
}
$('#linkinputholder').click(function() {
document.getElementById('linkinputholder').style.display = "none";
});
I'm assuming by background you mean your linkinputholder div, which is 100% wide by 100% tall. Your jquery code was missing the call to displaylinkinput, so i added a click event handler to call it. When you click on the linkinputbox div, the click event passes down through to linkinputholder. To prevent this just stop the event propagation.
$('#linkinputbox').click(function (evt) {
evt.stopPropagation();
});
I have created a JSFIDDLE for you here: http://jsfiddle.net/seadonk/oLgex1pq/
Here is the corrected javascript:
function displaylinkinput() {
$('#linkinputholder').show();
}
$(function () {
$('button').click(function () {
displaylinkinput();
});
$('#linkinputholder').click(function () {
$('#linkinputholder').hide();
});
$('#linkinputbox').click(function (evt) {
evt.stopPropagation();
});
})();
Edit
Check if div is target
$('#linkinputholder').click(function(event) {
if (jQuery(event.target).is('.linkinputholder')) return;
document.getElementById('linkinputholder').style.display = "none";
});
I have a div that looks like the following:
<div class="row-fluid product-to-be-categorized" data-id="584472"><img src="http://origincache-prn.fbcdn.net/10311205_575850285866660_368389950_a.jpg"></div>
I wanted such that when the div is clicked then it adds an semi-black-transparant overlay in front of the div, so the picture is covered with this transparant layer in front of it.
I have the following click handler:
$('.product-to-be-categorized').on('click', function(event) {
});
but I am unsure on what is the quickest and simplest way to do this
Simplest way would be to add a class with a pseudo element to the div on the click event.
DEMO
CSS :
.product-to-be-categorized {
position:relative;
width:50%
}
.product-to-be-categorized img {
display:block;
width:100%;
}
.overlay:before {
content:'';
position:absolute;
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.5);
}
jQuery :
$('.product-to-be-categorized').click('click', function (event) {
$(this).addClass('overlay');
});
(if you need to toggle the overlay, just replace ".addClass" by ".toggleClass" in jQuery code)
Firstly, in the click handler you can append a div to the container:
$('.product-to-be-categorized').on('click', function(event) {
$('<div />').addClass('overlay').appendTo(this);
});
Which has the following CSS:
.product-to-be-categorized {
position: relative;
/* other styling... */
}
.overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #000;
opacity: 0.5;
}
Example fiddle
You can also make the overlay togglable by checking for its existance and removing:
$('.product-to-be-categorized').on('click', function(event) {
if ($('.overlay', this).length) {
$('.overlay', this).remove();
}
else {
$('<div />').addClass('overlay').appendTo(this);
}
});
Example fiddle