Here I have an input that I like with a cursor that I thought was nice. I would like this input to be "focused" on when my window is loaded up so that the cursor is blinking and the input is ready to type in. I use jquery to make the cursor work but cannot make the .focus() function work
https://jsfiddle.net/cityFoeS/z9Ldt/233/
This is my jquery:
$(function() {
var cursor;
$('#cmd').click(function() {
$('input').focus();
cursor = window.setInterval(function() {
if ($('#cursor').css('visibility') === 'visible') {
$('#cursor').css({ visibility: 'hidden' });
} else {
$('#cursor').css({ visibility: 'visible' });
}
}, 500);
});
$('input').keyup(function() {
$('#cmd span').text($(this).val());
});
$('input').blur(function() {
clearInterval(cursor);
$('#cursor').css({ visibility: 'visible' });
});
});
$('#text').focus();
$(function(){ }); is the same as $(document).ready(function () { })
It fires when the document has been parsed and is ready.
You have the $('#text').focus(); outside of this snippet and that piece of code is being executing before the document.ready. So onclick and onblur functions weren't setted yet.
You can try this. If you change your js and simulate click action of "cmd" div after attach the function, it works:
$(function() {
var cursor;
$('#cmd').click(function() {
$('input').focus();
cursor = window.setInterval(function() {
if ($('#cursor').css('visibility') === 'visible') {
$('#cursor').css({ visibility: 'hidden' });
} else {
$('#cursor').css({ visibility: 'visible' });
}
}, 500);
});
$('#cmd').click();
$('input').keyup(function() {
$('#cmd span').text($(this).val());
});
$('input').blur(function() {
clearInterval(cursor);
$('#cursor').css({ visibility: 'visible' });
});
});
Related
Have this code and tried to hide my side navbar when clicked outside the #nav, got this error.
Cannot read property 'addEventListener' of null
$( document ).ready( function() {
setTimeout(function(){
$('.menu-opener').click(function(){
$('#nav').toggleClass('active');
});
let slide = document.querySelector('#nav .active');
slide.addEventListener('click', function(e) {
if (e.target !== slide) return;
$('#nav').removeClass('active');
});
}, 1000);
});
answer is that you need to detect click outside of div you are trying to hide:
$(window).click(function() {
//Hide the menus if visible
});
//stopping above function from running when clicking on #nav itself
$('#nav').click(function(event){
event.stopPropagation();
});
Try this inside setTimeout
$('body').on('click','#nav .active', function(e){
// your logic
})
OR
$( "'#nav .active'" ).bind( "click", function(e) {
// your logic
});
instead of
let slide = document.querySelector('#nav .active');
slide.addEventListener('click', function(e) {
if (e.target !== slide) return;
$('#nav').removeClass('active');
});
Got this working with
$(document).click(function(event) {
if(!$(event.target).closest('#nav').length && !$(event.target).closest(".menu-opener").length)
{
$('#nav').removeClass('active');
}
});
I'm having trouble figuring out a way to get this toggle function to close.
It will open happily, but closing is a different story.
Console Error: property 'toggle' of undefined at focusMobileSearch
Code:
function focusMobileSearch() {
$('.mobile-search').removeClass('is-focused');
function reveal() {
$('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' });
$('.input-group').delay('200').queue(function (next) {
$(this).css('visibility', 'visible');
next();
});
}
reveal().toggle();
}
This was my Previous Code (it had a weird issue where the first click did nothing:
function focusMobileSearch() {
$('.mobile-search').removeClass('is-focused');
function reveal() {
$('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' }).toggle();
$('.input-group').delay('240').queue(function (next) {
$(this).css('visibility', 'visible');
next();
}).toggle();
}
reveal();
}
Thanks!
Use a class for the toggle.
function focusMobileSearch() {
$('.mobile-search').removeClass('is-focused');
function reveal() {
$('.search-dropdown').toggle('visible');
$('.input-group').delay('240').queue(function(next) {
$(this).toggle('visible');
next();
});
}
reveal();
}
.visible {
visibility: visible;
}
.search-dropdown.visible {
height: 64px;
}
This fixed it:
function focusMobileSearch() {
$('.ef-header-alt__search').removeClass('is-focused');
function reveal() {
if ($('.search-dropdown').css('visibility') == 'hidden') {
$('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' });
$('.input-group').delay('240').queue(function (next) {
$(this).css('visibility', 'visible');
next();
})
} else {
$('.search-dropdown').css({'visibility': 'hidden', 'height': '0px'});
$('.input-group').css('visibility', 'hidden');
}
}
reveal();
}
Big thanks to: #Taplar for letting me know toggle doesn't effect visibility, but rather just display property.
Just for first click the img class rotate to 180deg and post class show, but i want for second click if rotate 180deg change to 0deg again and post class show.
Post class show is working but rotate just for first click work.
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
$(document).ready(function() {
$(".op-cl").click(function() {
$(".post").toggle("slow", function() {
if ($('.img').css('transform', 'rotate(0deg)')) {
$('.img').css('transform', 'rotate(180deg)');
} else if ($('.img').css('transform', 'rotate(180deg)')) {
$('.img').css('transform', 'rotate(0deg)');
}
});
});
});
$('.img').css('transform', 'rotate(0deg)') will always resolve to true because it returns the jQuery chaining for $(".img"). It sets the transform property and does not evaluate. See http://api.jquery.com/css/ for reference.
To fix this you could add a class to check if it is already rotated:
$(document).ready(function() {
$(".op-cl").click(function() {
$(".post").toggle("slow", function() {
if ($('.img').hasClass('rotated')) {
$('.img').css('transform', 'rotate(0)');
$('.img').removeClass('rotated')
} else {
$('.img').css('transform', 'rotate(180deg)');
$('.img').addClass('rotated');
}
});
});
});
IMO better to use toggle when you want to toggle between two values :
$(document).ready(function(){
$(".op-cl").click(function() {
$('.img').toggle(function () {
$("#user_button").css({transform: "rotate(0deg)"});
}, function () {
$("#user_button").css({transform: "rotate(180deg)"});
});
});
});
img{
width:200px;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='op-cl'>op-cl</button>
<br>
<img class='img' src='https://pbs.twimg.com/profile_images/604644048/sign051.gif' style='transform:rotate(0deg)'/>
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
$(document).ready(function() {
$(".op-cl").click(function() {
var click=1;
$(".post").toggle("slow", function() {
if (click % 2 !=0) {
$('.img').css('transform', 'rotate(180deg)');
} else if (click % 2 ==0) {
$('.img').css('transform', 'rotate(0deg)');
}
click++;
});
});
});
I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.
Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});
In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design
Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}
I know this is a old question , but i've searched a lot .
i want to remove class after clicked outside the like body . here is my code :
Html
<div id="user-login-top">Enter</div>
<div id="user-login-wrapper" class="">visible</div>
Jquery
$(function () {
$("#user-login-top").on("click", function () {
$("#user-login-wrapper").addClass("wide");
});
$(document).on("click", function (e) {
if ($(e.target).is("#user-login-wrapper") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
and here is the fiddle : Fiddle
Appreciate your help !?
Thx
It is because of the propagation of event.
When you click on user-login-top, the first click handle is triggered which is adding the class, then because of event propagation the handler attached to the document is triggered where it satisfies the if condition and removes the class.
One possible solution here is to use event.stopPropagation()
$(function() {
$("#user-login-top").on("click", function(e) {
$("#user-login-wrapper").addClass("wide");
e.stopPropagation()
});
$(document).on("click", function(e) {
if ($(e.target).is("#user-login-wrapper") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
#user-login-wrapper {
opacity: 0;
}
#user-login-wrapper.wide {
opacity: 1 !important;
}
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>
Another is
$(function() {
$("#user-login-top").on("click", function(e) {
$("#user-login-wrapper").toggleClass("wide");
});
$(document).on("click", function(e) {
if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
#user-login-wrapper {
opacity: 0;
}
#user-login-wrapper.wide {
opacity: 1 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>
<section>
<div class="click-text">
click inside and outside me
</div>
</section>
const concernedElement = document.querySelector(".click-text");
document.addEventListener("mousedown", (event) => {
if (concernedElement.contains(event.target)) {
console.log("Clicked Inside");
} else {
console.log("Clicked Outside / Elsewhere");
}
});