We Keep Coding

Javascript Performance Huge page

I have an Single Page App with lots of buttons (3000 with click event) and bootstrap accordions with nested accordion. The page can be almost 1Mb of size.
My problem is that sometimes after a while, the browser becomes unresponsive and crashes. I wondered if there is something I could do to reduce the chances of this occuring or should I change the whole design?
EDIT:
For example, I'm using :
$(".plus").click(function () {
add1($(this).closest("tr"));
});
Should I use :
$(document.body).on("click", ".plus", add1($(this).closest("tr")));
Instead?
Thanks

I used the idea of delegating the click event to the parent and it seems to have improved greatly considering the number of buttons. But the main problem seems to be my design.
Thanks to Sabithpocker.
I'll also try the options of attach/detach of dom elements that aren't visible.

JQuery Carousel multiple instances on the same page

I am trying to use a third-party jQuery Carousel plugin in a project at work (don't know which plugin it is though). The problem is that when I use multiple instances of the same plugin on the same page only one of the instances updates. I think this issue is with how my instances are setup. I have constructed a jsFiddle at here.
The carousel is attached by the .carousel class and all instances are initiated by the method shown below:
// Enable carousel
$.each($('.carousel'), function (i) {
$(this).carousel(this.id);
});
Unlike in my local code, in the JsFiddle only one of the carousels works. Any help would be very much appreciated.

Firstly there is an error when your js runs. If you look in your browser dev tools of choice you should see
TypeError: properties.slider.swipe is not a function
Once commented out the js will run correctly but if you click any of the next and previous buttons only the bottom slider will run. This is because they use the same instance of the var properties.
I would suggest looking at creating a jQuery widget with your existing code, it is fairly straight forward to do. By doing this you can have several instances of the same widget running on a page together.
Coding your first jQuery ui plugin

Rather than fix the entire plug-in, it's much easier to tell you that after the plug-in is initialized, the plug-in code breaks when it attempts to add touch events.
// Add touch events
properties.slider.swipe(function (event) {
if (event.swipeDirection == 'left') {
methods.next();
} else if (event.swipeDirection == 'right') {
methods.previous();
}
});
// Throws: Uncaught TypeError: Object [object Object] has no method 'swipe'
Comment out the plug-in code's touch events, and it no longer breaks.
However, because of how the plug-in is created, it can only handle one carousel at a time since it overwrites the last one that was defined.
Try a different, widely-used, and responsive JS slider that supports touch events.

Hi i have created Carousel without using any third party plugin.If you want please refer
Reference Link
Hope its helps you.

Combining jQuery Isotope and Lazy Load

Have started a project using jQuery Isotope. Initially integrated with Infinite scroll, but thought it was a little clunky.
Was hoping to replace Infinite Scroll with Lazy Load, and wondered if anyone has had any luck combining the two. Any tips to get them to play nice would be great.
Thanks a mill

If you want to use isotope's sorting/filtering functions, you will need to set the failure_limit of lazyload and trigger the event with isotope's onLayout callback.
jQuery(document).ready(function($) {
var $win = $(window),
$con = $('#container'),
$imgs = $("img.lazy");
$con.isotope({
onLayout: function() {
$win.trigger("scroll");
}
});
$imgs.lazyload({
failure_limit: Math.max($imgs.length - 1, 0)
});
});
Explanation
According to the docs ( http://www.appelsiini.net/projects/lazyload )
After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.
With an isotope sorted/filtered list, the page order is certainly different from the HTML so we need to adjust our failure_limit.
As you can see we store the jQuery object so that we can use its length-1 as our failure_limit. If you're curious as to why it is length-1, it's because of the following check in lazyload's update method.
if (++counter > settings.failure_limit) {
return false;
}
Lazy load on other events
If you are not triggering your lazyloads on scroll, you will need to swap the "scroll" trigger for whichever event you are using.
Demo
http://jsfiddle.net/arthurc/ZnEhn/

I think you might have some luck using this instead : https://github.com/fasterize/lazyload
It's library independent so won't break.

Here's working code using both jquery isotope and lazyload together successfully (tested in Chrome)
http://jsfiddle.net/wN6tC/62/
In the browser console you will get console.log('loaded image') confirmation when an image is loaded, as you scroll down. Drag the jsfiddle html box to change the width and you will see the layout change dynamically.
I added the background red class so you can see how isotope alters the dom after it loads. Most of the problems while trying to set this up come from, IMHO, isotope's dom manipulation.
I hope this is enough to get you started. Have fun.
Update:
I never tested example in other browsers, and apparently IE or FF failed to work because of the HTTPS references for the javascript resources (for some odd security reason). Replacing them was all that was needed to get it working in IE and FF as seen here:
http://jsbin.com/ajoded/
and
http://jsfiddle.net/wN6tC/73/

Use part jQuery mobile only

I would like to use widgets from jQuery Mobile - buttons, drop down list, etc.
I already have a site that has been developed without the use of jQuery mobile, which has its own menus and links - and when I try to add jQuery mobile framework to it, it causes all sorts of problems (overrides CSS, tries to hijack page transitions, etc).
Is it possible to disable some features of the framework?
This is related to the question: Removing unused jQuery Mobile elements? - but it deals with minimizing the script size. I only want to disable certain functinality, so it doesnt interfere with the rest of my app.
Update: Part of the problem caused by using jQuery Mobile "as is" stems from the fact that it will attempt to load all links via ajax. It can be mitigated by adding rel="external" to links, so jQM won't attempt to load it via ajax.

There is a builder for JQM coming soon. As of 5/4/2012 its still in beta. Hang in there and the feature will be available any time now. I will try to update this answer when its released.
Update here is a link to the JQM builder http://jquerymobile.com/download-builder/

Adding the data-role="none" attribute to any form or button element tells the framework to not apply any enhanced styles or scripting

Building your package with only needed components is the first step that you should do but sometimes it is not enough.
There is also a piece of code which we found recently and used to stop loading jQuery Mobile panes on one page. This is very usefull if you want to use jQuery Mobile components separately without the framework itself. In other words, you still want to have a normal page behaviour (i.e. page reloads by clicking links) and use some jQuery Mobile components.
And here is this code that did a trick for our Symfony 2 project:
(function($) {
$(document).bind('mobileinit',function() {
$.mobile.ajaxEnabled = false;
});
})(jQuery);

Issue with IE7 hiding/removing/showing content using jQuery

So I have a bit of script at the bottom of my page //RETAINER CURRENT that is supposed to hide and show content based on what menu item the user selects in the maincontent area. Unfortunately in IE7 all layers are rendered which means the videos in each layer play simultaneous. I tried .detach, .remove, methods and had no luck and when I saved the items to an array and .empty 'd them I still had no success. What noob mistake am I making?
http://jsbin.com/ahuye4/3

I had the same issue. I was using asp.net so the way I was able to solve this was by using updatepanels and handling the hiding/showing in the code behind with Panels.
I'm not sure what fraemwork/language you are using.
However, I think you might need to call into the flash object and pause/stop the flash videos programmatically.