seaofclouds (owner)

Revisions

gist: 6516 Download_button fork
public
Description:
pop! for jQuery, hashing out bugs
Public Clone URL: git://gist.github.com/6516.git
Embed All Files: show embed
index.html #
raw 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

      <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>
jquery.pop.js #
raw 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

//
//  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);