JQuery 'Aw Snap!' in Chrome but not crashing any other browser
I would go through that get_colour function and start removing things one at a time, starting with the re-initialization of your Shadowbox. There's a chance that initializing / setting it up twice is breaking it.
If commenting out the .init and .setup calls DOES fix the crash, I would then start looking into how to completely remove (or de-initialize) your Shadowboxes before re-initializing them.
If it does not fix it, I would continue to move upwards through that function, removing code until you can stop it from crashing.
Also, closing the shadowbox probably tells it to do a bunch of work behind the scenes (removing dom elements, and whatever else Shadowbox does deep within it's JS core). Perhaps the issue is that you're closing it, and then telling it to initialize too soon, and Chrome is still holding on to a reference to the (not yet closed) lightbox.
To test / fix this, try moving the init and setup calls to another function entirely, and ONLY call that when you manually click a test link on your page. Make sure your get_colour function runs and finishes successfully first. If it works, then you know that this is the issue, and that you need to wait a bit longer before calling .init and .setup. Maybe you can call these two methods during the Shadowbox's onClose event instead... or somewhere else later in your code.
Update from Question Asker regarding implementation of solution:
Just in case anyone else runs into similar trouble. The eventual solution was because I was manipulating the DOM with the .html() call whilst the .click() call seemed to still be in the works.
The solution required me to put the .click() AFTER the .html() call as previously worked.
//create colour object divvar colourObject = '<div class="colourObject"><div class="colourPreview" style="background:#'+hex+'"></div><div class="colourInfo"> '+title+' / '+gender+'</div><div class="colourRemove"><a href="#" onclick="remove_colour('+id+')">x</a></div</div>'var currentList = $('#colour-list').html();$('#colour-list').html(currentList+colourObject);$('#sb-nav-close').click(); //trigger shadowbox closeIt now works flawlessly in all browsers.
I suppose the lesson here is to not process too much at any one time, I overloaded the browser by the looks of things.
See this page which describes the "Aw Snap!" page: http://www.google.com/support/chrome/bin/answer.py?answer=95669
This is normally caused by the computer running low on memory. It may be that your application uses too many resources. Try dialing down the images and javascript and only use as much as you need.
The following will consistently generate the "Aw Snap" message on Chrome, but works fine on Firefox and Safari:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="haemosphere"> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function() { $("#user-action-div").on("click", function(ev, ui) { $(this).empty().append("<select id='user-action-sel'>"); $('select', this).append("<option value='nop' selected='selected'>Rugby</option>"); $('select', this).append("<option value='profile'>My Profile</option>"); $('select', this).append("<option value='logout'>Log Out</option>"); $("select", this).trigger("create"); }); }); </script> </head> <body> <span id="user-action-div">Click Here</span> </body></html>