Codingjquery got me stumped, again

  

Press Ctrl+Enter to quickly submit your post
Quick Reply  
 
 
  
 From:  CHYRON (DSMITHHFX)   4 Apr 2013 14:04 
 To:  ALL 1 of 6 
40429.1 
I trying to implement bPopup and got it sort of working with this:

code: $(document).ready(function(){
    $(".thumb").click(function() {
        var thispop = $(this).next(".pop");
        thispop.bPopup({
            [other stuff]
        }
        , function(){
            [more stuff])
            })
        });
    });
});

 

".thumb" is a class of thumbnail images, ".pop" is the popup div class, one of which follows each thumb. The "other stuff" in the bPopup function is some custom bPopup parameters, as you probably guessed.

Problem is, I need to open popups from a number of thumbs (which is why I'm using classes rather than ids, as bPopup intended [turns out it's selector-agnostic]).

My script works on the first instance (only) of .thumb & .pop, then it stops working altogether so when I click on that first .thumb again (after closing the popup), it doesn't re-open. When I built it using ids (one function per), it works reliably, but I'm hoping to avoid this sort of kludge.

----
"Some ideas make you dumber the moment you learn of them."
0/0
 Reply   Quote More 

 From:  CHYRON (DSMITHHFX)   4 Apr 2013 19:45 
 To:  ALL 2 of 6 
40429.2 
Solved -- nothing wrong with script (or next() function)... by viewing generated source I spotted a couple of egregious markup errors (fail)

Hmm, well, not quite it seems. Though fixing the errors got the thumbs working at least on the first instance, the pPopup is doing some weird stuff to the generated code (moving the .pop divs to the end of the page hwere next() can't find them for repeat clicks. Damn.

----
"Some ideas make you dumber the moment you learn of them."
0/0
 Reply   Quote More 

 From:  Matt   4 Apr 2013 20:35 
 To:  CHYRON (DSMITHHFX)      3 of 6 
40429.3 In reply to 40429.2 
It'll probably be moving the div to the very last element on the page so it can make sure it appears above all other elements on the page.

If that's the case, you'll probably have to be a bit cleverer with the div it is moving, have only 1 for all the thumbs and dynamically change it's content depending on the thumb that was clicked.

doohicky
0/0
 Reply   Quote More 

 From:  CHYRON (DSMITHHFX)   4 Apr 2013 21:30 
 To:  Matt      4 of 6 
40429.4 In reply to 40429.3 
quote:
It'll probably be moving the div to the very last element on the page so it can make sure it appears above all other elements on the page.

I thought z-index took care of that, but I have a poor understanding of how the popup works. I've suggested to the author that instead of moving the popup div, he copies and (on close) destroys the copy, leaving the page in its original state, so we'll see if that's viable.


----
"Some ideas make you dumber the moment you learn of them."
0/0
 Reply   Quote More 

 From:  Matt   4 Apr 2013 22:07 
 To:  CHYRON (DSMITHHFX)      5 of 6 
40429.5 In reply to 40429.4 
The problem with z-index is that it is relative. By moving the div so it's a child of the body tag, it will have a relative z-index to elements that are also children of the body tag and not of the body tag's siblings' children.

See http://stackoverflow.com/a/7482870 for a good explanation.

doohicky
0/0
 Reply   Quote More 

 From:  CHYRON (DSMITHHFX)   5 Apr 2013 15:58 
 To:  Matt      6 of 6 
40429.6 In reply to 40429.5 
I managed to get it working by overrridng the bPopup "append" function (with a handy parameter), and using JQuery clone() and remove().

----
"Some ideas make you dumber the moment you learn of them."
0/0
 Reply   Quote More 

Reply to All    
 

1–6

Rate my interest:

Adjust text size : Smaller 10 Larger

Beehive Forum 1.5.2 |  FAQ |  Docs |  Support |  Donate! ©2002 - 2024 Project Beehive Forum

Forum Stats