JQuery doesn't work after a minute or two - javascript

My JQuery works well to allow the logo to pop up the mobile navigation but it doesn't work after a few minutes. It no longer changes the display of the UL when the logo is clicked Here is my code:
$(document).ready(function() {
checkSize();
});
function checkSize(){
if ($("ul, #left img:nth-of-type(2)").css("display") == "none" ) {
$("#click").on('click',function() {
$("ul, #left img:nth-of-type(2)").toggleClass("show-items");
});
}
}
Thank you.

From jQuery docs:
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Your jQuery works, only you have specified to run it once.
UPDATE:
To run your script every time the window changes size use .resize()
The resize event is sent to the window element when the size of the
browser window changes:
// run once the document is lodaded
$(document).ready(checkSize);
// run on resize
$( window ).resize(checkSize);

Did you mean onclick event didn't working?
How many times you call checkSize() function?
May be you call it couple of times - so you bind couple onclick events.
And may be you call $("ul, #left img:nth-of-type(2)").toggleClass("show-items"); twice - so it toggle class twice. And it's looks like as "no effect".
Use debugger; in the first line of the onclick event and look in the developer tool how many times this event will be raised.
Also you can add $("#click").off('click'); before binding this event.

Related

Jquery Onclick functionality not working for div, as specific loaded after sometime

For <div class="editdiv">Test</div>. Jquery click functionality is added in document.ready function . But editdiv loading in page dynamically with delay.
So when I click on the div. Function is not calling. By using timeout function is working fine.
I need a different approach to solve this functionality.
If your .editdiv is loaded dynamically after your js loading so your click event can't detect it and it will not work, instead you should use event delegation on() to deal with fresh DOM :
$('body').on('click', '.editdiv', function(){
//Your click event code
})
If you want to avoid setTimeout you could use delay with queue callback method :
$('div.scroll-area-blue')
.delay(5000)
.queue(function() {
$(this).enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
});
If you will use setTimeout better to use it like :
setTimeout( enscrollDiv, 5000);
function enscrollDiv(){
$('div.scroll-area-blue').enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
}
Hope this helps.
It is really difficult to understand whats going wrong from your question. What I guess is you are loading a specific div using Ajax or similar technologies - meaning the div is not available initially.
The way jQuery works is that, it only binds the event to the elements only available at the time the part is executed.
If a <div id='myDiv'></div> is not present when $('#myDiv').click(function(){}) is called, it won't work.
One workaround is to do it like this:
$('body').on('click','#myDiv',function(){});
This registers the click on body and then checks if the clicked element is having a id 'myDiv' or not. We can expect the <body></body> to be present always. So the problem we had with previous code won't happen here.
maybe you're loading the javascript codes before the html elements(tags) are loaded.
try adding the script which includes "document.ready()" before the end tag of the body when all html tags have already finished loading.
I'm hitting targets in the dark. Hope it works for you. It's difficult to generate any solution without analyzing the problematic code......

Add a resize event handler only once

I have a widget that insert a div element in the DOM;
that div needs some js that handles the resize event;
the problem is:
the widget can be added multiple times on the same page, but I don't wanto to add many identical resize event handlers on the page (one, acting on the specific widget's class will be enough for all the widget instances);
the page that will embeed the widget can have its own resize event handler, that should not be deleted;
do you have any suggestion about how to implement this?
Honestly, I didn't get most of workflow explained as you didn't provide any html and js but I hope the following works for you:
var resized = 0; // works as a flag
$( window ).on('resize', function () {
if ( resized++ >= 1 ) return;
// do something here..
console.log('resized once'); // console.log as an example!
});
Good luck.

jQuery toggle() not always firing

I've been making some basic mobile navigation and am using a click event to show/hide the menu.
A reduced code sample:
jQuery('.menu-button').click(function(){
jQuery('.header-nav').toggle();
console.log('clicked');
});
I've been remotely debugging on mobile and the console.log always works, but the .header-nav toggle() seems to randomly not trigger - I can't spot a pattern to it, but it always remains in the DOM (which it should), so it being somehow removed is not the reason why it is not firing.
Any ideas?
Thanks to Kevin B's comment it seems that the click event is firing multiple times. To fix this, the following was used:
$(element).off().on('click', function() {
// function body
});
Reference: jQuery click events firing multiple times

Timeout for javascript execution

jQuery(document).click(function () {
jQuery('.close-news').css('display', function(){return jQuery('#colorbox').css('display');});
});
I have this script, which make my link appear\dissappear depends on state of #colorbox block. But somewhy link appear\dissappear not immediatelly, but after 2 click.
Basically i have to click one more time in random area to make my script work
I guess its because my html code isnt update fast enought to make . So how do i add some timeout for this script?
It seems you are using Colorbox in Drupal.
There can be a callback function that gets executed once the Colorbox is shown up.
After Debugging your site, seems that there is a cbox_complete custom event firing up.
If thats the case, you can attach a function to this event.
In the function, you can toggle the display of your .close-news li element, similar to what you are doing on document click in the question

Run a script when div is inserted

I have a script that does graphing, using jqplot. It works fine when the document is loaded rendering each graph using jquery's .each method. However, the problem lies when I replace the div with another one when a bar is clicked. It is suppose to render another graph in the position of the old graph. It changes the graph but does not execute the script.
The script that loads the items has this function to change all divs to graphs:
$("div.barchart").each(function(){
barChart($(this).attr("id"),$(this).attr("data-xmlurl"));
});
is there another way to do this so that it would work when a div is changed too?
Update:
Rails generates a script that is ran. However, it doesn't seem to work when I have this:
chart$=$("#<%=params[:chart_id]%>");
chart$.replaceWith("<%=escape_javascript(render :partial=>"chart_partial"}%>");
barChart(chart$.get(0).attr("id"),chart$.get(0).attr("data-xmlurl"));
Note:
For reference, the actual source code can be found in the jquery_cheats project
Perhaps you could add a listener on the parent element? Is it OK if the barChart() function gets called more than once?
Maybe something like this:
$("div.barchart").parent().on("DOMSubtreeModified", function(e) {
// (or maybe use DOMNodeInserted event instead)
$("div.barchart[id][data-xmlurl]").each(function() {
barChart($(this).attr("id"),$(this).attr("data-xmlurl"));
});
});
You can check out my jsFiddle for this here.
On the current application I'm working on, I'm stuck with version 1.5.2. To get around this, I would unbind and rebind my event and load the initialization in both "ajaxComplete" and "ready". I wasn't able to get the DOM to automatically rebind the event. Delegate is suppose to work like "on", but in my instance I still had to use the below logic.
In short, it would look something like this.
$(document).ready(function () {
InitSomethingCool();
});
$(document).ajaxComplete(function() {
InitSomethingCool();
});
function InitSomethingCool(){
$(".something").unbind('click').click(function(e) {
//Unbind and rebind click event.
alert('You clicked me!');
});
}
Reference:
http://api.jquery.com/on/
http://api.jquery.com/delegate/

Categories