I am using one click function() to render some chart on my project.
The code is as below
$('.abc').click(function() {
checkGraph();
});
But when i resize the window then this click event is not firing. Means my chart us not getting rendered.
I tried some of the things as below but none worked
Approach 1
$(document).on('click','.abc',function(){
checkGraph();
});
Approach 2
var crclick = (function(){
$('.abc').click(function() {
checkGraph();
});
});
crclick();
$(window).resize(function(){
console.log("Window resized New");
crclick();
});
In approach 2, i am getting console output but click function is not working.
The resize and click events are separate. If you want both to call checkGraph, bind them individually to call checkGraph(). If you were binging to events to the same element you could do it in once call.
$('.abc').click(function() {
checkGraph();
});
$(window).resize(function(){
checkGraph();
});
I wouldn't do the .trigger method mentioned in other answers, it's not very clear code, with potential other consequences.
Why would click fire on a resize? You are only assigning the handler.
Later you can click it using $(".abc").click(); or $(".abc").trigger("click");
Be aware you likely want to only click AFTER a resize
https://stackoverflow.com/a/15170104/295783
use on window resize. You are just binding the click on resize.
$(window).resize(function(){
checkGraph();
});
Related
I am trying to trigger an event in a web browser on a desktop
$(window).trigger('resize');
The issue is on mobile it doesn't seem to be triggering. Is there an alternative method for mobile?
I am using tablesaw plugin for grids. When the screen is small in size, the columns will not fit and as such a swipe will be provided to move between them. When I sort them, all the columns gets squeezed and shown on the small screen, but after I trigger the resize event, an event in the plugin will get called that will fix them. On the mobile, this event doesn't exist I guess and I'm not targeting the orientation.
a variation of this (JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?)
this will run on resize and orientchange.
var waitForFinalEvent=function(){var b={};return function(c,d,a){a||(a="THISPAGE");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
var fullDateString = new Date();
$(document).ready(function(){
$.resized = function(){
waitForFinalEvent(function(){
//function to run
}, 300, fullDateString.getTime())
}
window.addEventListener("orientationchange", function() {
$.resized();
});
$(window).resize(function () {
$.resized();
});
$.resized();
});
window.dispatchEvent(new Event('resize'));
Creating an accordion style menu. On click the accordion div opens and animates great. That all works just fine. However after expanded the hidden div I want the title div to shrink slightly and then as the accordion div is collapsed have it revert to the original size.
I have a JSFiddle setup. Essentially need to correct the second click to revert the div height back to original. The first click is functioning correctly and adding the class and animating the height change. However the second click isn't recognized.
What simple thing am I overlooking?
$(function() {
$(".click").on('click', function(){
$(".animate").animate({height: '50px',},"slow");
$(this).addClass("expanded");
});
$(".click.expanded").on('click', function(){
$(".animate").animate({height: '100px',},"slow");
$(this).removeClass("expanded");
});
});
The issue is that your click item doesn't have the expanded class at start, so your binding isn't working.
You should being doing something like:
$(document).on('click','.click.expanded',function(){//event work});
To address the comments, yes you need to handle the original event, you can do this using the .not selector so that the first event doesn't fire.
$(document).on('click','.click:not(.expanded)', function()
In the end, your code could look something like this:
$(function() {
$(document).on('click','.click:not(.expanded)', function(){
$(".animate").animate({height: '50px',},"slow");
$(this).addClass("expanded");
});
$(document).on('click',".click.expanded", function(){
$(".animate").animate({height: '100px',},"slow");
$(this).removeClass("expanded");
});
});
Obligatory Fiddle
This question Event binding on dynamically created elements?, even though about dynamic elements, addresses your problem.
As #JasonWilczak has stated the problem you have is that you don't have any elements on load which will have the expanded class, and therefore they won't be assigned this click event handler.
However you will still have a problem if you use event delegation as the original click event handler will still be fired also.
A cleaner solution would be to only have one click event handler, and detect the expanded class within the callback.
Dependant on the expanded class being present run different logic conditionally.
$(".click").on('click', function(){
if (!$(this).hasClass("expanded")){
$(".animate").animate({height: '50px',},"slow");
$(this).addClass("expanded");
}
else {
$(".animate").animate({height: '100px',},"slow");
$(this).removeClass("expanded");
}
});
I've updated your jsFiddle to demonstrate this:
http://jsfiddle.net/ecLxkgj9/4/
Here is the updated fiddle
$(".click").on('click', function(){
if (!$(this).hasClass("expanded")){
$(".animate").animate({height: '50px',},"slow");
}
else {
$(".animate").animate({height: '100px',},"slow");
}
$(this).toggleClass("expanded");
});
I'm using Bootstrap 3 and creating an if statement with JQuery to make my navbar collapse when anything on the body is clicked, but only when the browser width is less than 992px. When the browser is 992px or wider, I want this function to be ignored. My function below is working as expected, except for the fact that "test" gets logged to the console when the body is clicked on all browser widths when it should only do so when it is less than 992px. Is something wrong with my if statement below?
if ($(window).width() < 992) {
$('body').click(function() {
console.log("test");
$('.navbar-collapse').collapse('hide');
});
};
I updated my code to have the if statement inside of the function, as seen below. It still functions properly and only logs "test" to the console on the correct browser width, but I'm wondering if this is a bad way to do it as the browser will be checking its width on every click even when I don't want it to. Is that a bad way of doing things? Is it better practice to try to get the first code I posted to work?
$('body').click(function() {
if ($(window).width() < 992) {
console.log("test");
$('.navbar-collapse').collapse('hide');
};
});
The second method is the way to go. The first one will only bind the click event if the width is less than 992 when that block of code initially executes.
What if the user resizes the browser after the initial decision to bind/not bind has been made? That's why you need to check the width on every click.
If you bind your click event handler using .bind(), you can use the .resize() event to only have the handler bound when the screen is under your desired width. The .unbind() function does the job. For example:
var collapseNavbar = function() {
console.log("test");//remove when done with testing
$('.navbar-collapse').collapse('hide');
}
$(window).resize(function() {
if($(window).width() < 992) {
$('body').bind('click',collapseNavbar);
} else {
$('body').unbind('click',collapseNavbar);
}
});
This way the check for window width is only done while/after resizing, and not on every click.
The bound function can be named as you wish, just make sure it is indeed named so unbinding can work properly. As the documentation says:
By naming the handler, we can be assured that no other functions are accidentally removed.
I'm not sure if the resize event is raised when the page is loaded, though. You might need to add a little snippet to ensure the behavior is present for a browser window which starts at a width lower than 992px (i.e. if you refreshed the page after resizing, or if you're viewing it on a smartphone). Something like this should do it:
$(document).ready(function() {
if($(window).width() < 992) {
$('body').bind('click',collapseNavbar);
}
});
I'm not that great with jQuery but basically, I have a jQuery that displays when scrolling down, new content.
But that new content has div that are under effect of another jQuery function that is called by ready.
So not it only the content that is loaded first when the page loads is working but when the new content is showing is not working on it to.
So I'm thinking maybe I can link the two jQuerys like a trigger when the second jQuery loads to execute the first one, is it possible? How?
Thanks!
UPDATE:
$(document).ready(function($){
$('.wrapper-hover').hover(
function () {
$(this).animate({opacity:'1'});
},
function () {
$(this).animate({opacity:'0'});
}
);
};
Try using Jquery .trigger() to trigger an event and then have something listen for that event
$(document).ready(function($){
//your event handler
$('body').on('event', function() {
$('.wrapper-hover').hover(
function () {
$(this).animate({opacity:'1'});
},
function () {
$(this).animate({opacity:'0'});
}
);
});
};
//when your inifinite scroll finishes trigger the event
$('body').trigger('event');
If all you're doing is attaching a hover event to that class you might also want to think about event delegation, still not sure what your intention is based on your question.
What I understood from your question is that you want a hover event on a div which works well when the page is loaded but it doesn't work when a new div renders. If this is so then try the following code.
$(document).ready(function($){
$('.wrapper-hover').on("mouseenter", function() {
$(this).animate({opacity: '0'}, 1000,
function() {
$(this).animate({opacity: '1'});
});
});
});
I resolved the issue with callback of the infinite scroll jquery. Thanks all!
I've seen a couple of questions in regards to bootstrap modals, but none exactly like this, so I'll go ahead.
I have a modal that I call onclick like so...
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
This works fine, but when I show the modal I want to focus on the first input element... In may case the first input element has an id of #photo_name.
So I tried
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
But this was to no avail. Lastly, I tried binding to the 'show' event but even so, the input won't focus. Lastly just for testing, as I had a suspiscion this is about the js loading order, I put in a setTimeout just to see if I delay a second, will the focus work, and yes, it works! But this method is obviously crap. Is there some way to have the same effect as below without using a setTimeout?
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
Try this
Here is the old DEMO:
EDIT:
(Here is a working DEMO with Bootstrap 3 and jQuery 1.8.3)
$(document).ready(function() {
$('#modal-content').modal('show');
$('#modal-content').on('shown', function() {
$("#txtname").focus();
})
});
Starting bootstrap 3 need to use shown.bs.modal event:
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
Just wanted to say that Bootstrap 3 handles this a bit differently. The event name is "shown.bs.modal".
$('#themodal').on('shown.bs.modal', function () {
$("#txtname").focus();
});
or put the focus on the first visible input like this:
.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})
http://getbootstrap.com/javascript/#modals
I am using this in my layout to capture all modals and focus on the first input
$('.modal').on('shown', function() {
$(this).find('input').focus();
});
I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript.
The solution:
$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});
Probably it´s something about the animation!
I had problem to catch "shown.bs.modal" event.. And this is my solution which works perfect..
Instead simple on():
$('#modal').on 'shown.bs.modal', ->
Use on() with delegated element:
$('body').on 'shown.bs.modal', '#modal', ->
Seems it is because modal animation is enabled (fade in class of the dialog), after calling .modal('show'), the dialog is not immediately visible, so it can't get focus at this time.
I can think of two ways to solve this problem:
Remove fade from class, so the dialog is immediately visible after calling .modal('show'). You can see http://codebins.com/bin/4ldqp7x/4 for demo. (Sorry #keyur, I mistakenly edited and saved as new version of your example)
Call focus() in shown event like what #keyur wrote.
I've created a dynamic way to call each event automatically. It perfect to focus a field, because it call the event just once, removing it after use.
function modalEvents() {
var modal = $('#modal');
var events = ['show', 'shown', 'hide', 'hidden'];
$(events).each(function (index, event) {
modal.on(event + '.bs.modal', function (e) {
var callback = modal.data(event + '-callback');
if (typeof callback != 'undefined') {
callback.call();
modal.removeData(event + '-callback');
}
});
});
}
You just need to call modalEvents() on document ready.
Use:
$('#modal').data('show-callback', function() {
$("input#photo_name").focus();
});
So, you can use the same modal to load what you want without worry about remove events every time.
I had the same problem with the bootstrap 3 and solved like this:
$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})
$('#myModal').modal('show').trigger('shown');
Bootstrap has added a loaded event.
https://getbootstrap.com/docs/3.3/javascript/#modals
capture the 'loaded.bs.modal' event on the modal
$('#mymodal').on('loaded.bs.modal', function(e) {
// do cool stuff here all day… no need to change bootstrap
})
Bootstrap modal show event
$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();
})
A little cleaner and more modular solution might be:
$(document).ready(function(){
$('.modal').success(function() {
$('input:text:visible:first').focus();
});
});
Or using your ID as an example instead:
$(document).ready(function(){
$('#modal-content').modal('show').success(function() {
$('input:text:visible:first').focus();
});
});
Hope that helps..