Skip to content

Instantly share code, notes, and snippets.

@seaofclouds
Created August 21, 2008 07:16
Show Gist options
  • Save seaofclouds/6516 to your computer and use it in GitHub Desktop.
Save seaofclouds/6516 to your computer and use it in GitHub Desktop.
pop! for jQuery, hashing out bugs
<div class='menu'>
<div class='demo pop'>
<h3 class="pop_toggle">Demo</h3>
<p>you can put anything you want in here!</p>
<p>images, links, movies of your cats. you name it!</p>
<p>you can even have several on the same page.</p>
<p>hoorah!</p>
</div>
<h3>test</h3>
<div class='test pop'>
<p>you can put anything you want in here!</p>
<p>images, links, movies of your cats. you name it!</p>
<p>you can even have several on the same page.</p>
<p>hoorah!</p>
</div>
</div>
//
// pop! for jQuery
// WATCH OUT, THIS IS IN DEVELOPMENT AND DOES'NT WORK!
// v0.3 requires jQuery v1.2 or later
//
// Licensed under the MIT:
// http://www.opensource.org/licenses/mit-license.php
//
// Copyright 2007,2008 SEAOFCLOUDS [http://seaofclouds.com]
//
(function($) {
$.fn.pop = function(options){
var settings = $.extend({}, $.fn.pop.defaults, options);
// inject html wrapper
function initpops (){
$(this).each(function(i) {
// assign reverse z-indexes to each pop
var totalpops = $(this).size() + 1000;
var popzindex = totalpops - i;
$(this).css({ zIndex: popzindex });
$(this).wrapInner("<div class='"+settings.pop_content_class+"'></div>");
if $(this).find(settings.pop_toggle_class) {
$(settings.pop_toggle_class).before()
} else {
$(this).before(" \
<div class='"+settings.pop_toggle_class+"'>"+settings.pop_toggle_text+"</div> \
");
}
if (settings.event == 'mouseover') {
// mouseover that pop
$(settings.pop_toggle_class).mouseover(function(){
$(this).parent().toggleClass("active");
}).mouseout(function(){
$(this).parent().toggleClass("active");
});
} else if (settings.event == 'click') {
// click that pop
$(settings.pop_toggle_class).click(function(){
$(this).parent().toggleClass("active");
});
}
$(this).mouseover(function() { activePop = $(this).index(this); });
$(this).mouseout(function() { activePop = null; });
});
}
initpops();
// close pops if user clicks outside of pop
activePop = null;
function closeInactivePop() {
$(this).each(function (i) {
if ($(this).hasClass('active') && i!=activePop) {
$(this).removeClass('active');
}
});
return false;
}
$(document.body).click(function(){
closeInactivePop();
});
}
// Default options:
$.fn.pop.defaults = {
pop_toggle_class : 'pop_toggle',
pop_toggle_text : '',
pop_content_class : 'pop_content',
event : 'click'
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment