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>
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>
How can I achieve this with pure JS? I am not allowed to use jQuery or a pure CSS solution, so the only way I can think of is pure JavaScript.
I have this demo, for example: http://codepen.io/anon/pen/jBEMRK
HTML:
<body>
<input type="text">
</body>
CSS:
body {
background: red;
}
input {
width: 50%;
}
What I want to achieve is that when I click on the input field, I'd love to have the input field focused and the background (body) having a backdrop / fade / blur (however it is called). Preferably with a certain opacity, of course.
You could do something like below. Basically, you can absolutely position a div and then trigger some dim/blur function for that div when the textbox is in focus.
http://codepen.io/anon/pen/LWEbYG
HTML
<body>
<input id="txtBox" onfocus="onFocus()" onfocusout="onFocusOut()" type="text">
<div id="blur"></div>
</body>
CSS
body {
background: red;
}
input {
width: 50%;
}
.blury {
position: absolute;
height: 100%;
width: 100%;
background-color: black;
top: 0;
left: 0;
opacity: 0.7;
z-index: -1;
}
JS
function onFocus() {
document.getElementById('blur').setAttribute('class', 'blury');
}
function onFocusOut() {
document.getElementById('blur').setAttribute('class', '');
}
You can simply do the following.
HTML part:
<input type="text" onblur="blurIt(false)" onfocus="blurIt(true)">
JS part:
function blurIt(val){
if (val) document.body.style.background = "black";
else document.body.style.background = "red";
}
If you mean blur as in smudge you could use the webkitfilter property.
Example:
HTML:
<input type="text" onfocus="blurBackground(true)" onblur="blurBackground(false)" />
JS:
function blurBackground(doIt) {
if (doIt) document.body.style.webkitFilter = "blur(5px)";
else document.body.style.webkitFilter = "blur(0)";
}
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'm tying to make text fadeIn and stay visible while the mouse pointer is in the container and only when the mouse pointer leaves the designated area, only then must the text fadeOut but for some reason its not working, the text will fadeOut even when the mouse is inside the container.
I'm using Jquery lib 1.10.1 as well as Jquery ui 1.11.0
Here is the code:
HTML
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="hold">
<div class="conti">
<div class="arrow-right"></div>
</div>
<div class="text-fade"></div>
</div>
CSS
.hold{
width: 142px;
background: yellow;
overflow: hidden;
padding:10px;
}
.conti{
width: 30px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
.text-fade{
display: none;
float: right;
margin-top:-30px;
margin-left: 10px;
margin-right:10px;
}
JS
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000).css('display',"block");
});
$('.hold').mouseout(function () {
$('.text-fade').fadeOut(1000);
});
This is the link to my fiddle example
mouseout is triggered by children, use mouseleave instead
$('.hold').mouseenter(function () {
// var d = $('.arrow-right');
// d.effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000);
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
JS fiddle updated
Put the text directly into ".text-fade" and give some transition to the ".text-fader" class. Then change the text color via JS.
Here's the code for changing from #FFFFFF to #000000 and back again:
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').css('color', '#000000');
});
$('.hold').mouseout(function () {
$('.text-fade').css('color', '#FFFFFF');
});
You are using the wrong functions, its mouseenter() and mouseleave()
working fiddle here
your javascript
$('.hold').mouseenter(function () {
$('.text-fade').text("this is a test text");
$('.text-fade').fadeIn(1000);
$('.text-fade').show();
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
also that bounce function you had seems to cause some problems that I could not find out why so I removed it