Forums

kimsia

Long story short

Please see the demo here.

I have several div.story-in-myworks

inside each div.story-in-myworks, there is a div.pageimage-div-overlay that controls the overlay over each div.story-in-myworks.

Inside each div.pageimage-div-overlay there is a a.btn-storysetting responsible for hiding and showing a div.storysettings_talkbubble_left.

both a.btn-storysetting and div.storysettings_talkbubble_left are child elements of div.pageimage-div-overlay.

Here is a snippet:

  <div class="img-holder story-in-myworks " rel="91" style="background: url('img/01d-0.jpg?1353745136') no-repeat; background-size: cover; border: 1px solid #DCDDDE">
        <div class="pageimage-div-overlay">
          <a class="btn-storysetting" href="#"><span></span></a>
          <div class="storysettings_talkbubble_left settings-bubble border-radius-5 hidden talkbubble-padding">

The basic issue is I want a different behavior when I click on div.story-in-myworks OR div.pageimage-div-overlay which does NOT affect the click event handler for a.btn-storysetting

What I wanted to accomplish

R1. when cursor moves into any single div.story-in-myworks, an overlay appears over that div (done)

R2. when cursor moves into any single div.story-in-myworks, an image (btn-storysetting12x12.png) appears at the top right hand corner (done)

R3. when left click on the btn-storysetting12x12.png, a bubble appears right next to the image. (done)

R4. when the bubble appears, the selected div.story-in-myworks continues to exhibit the overlay look (done)

R5. After the bubble appears and then left click anywhere else in the doc, the bubble closes and div.story-in-myworks goes back to normal without the overlay (done)

R6. After the bubble appears, cursor can leave the bubble and the bubble stay visible and the overlay for the selected div.story-in-myworks remains. (done)

R7. When a bubble is opened for 1 div.story-in-myworks and then cursor opens the btn-storysetting12x12.png of ANOTHER div.story-in-myworks, the previous bubble disappears and the corresponding overlay is hidden, but the currently selected div now has the overlay and the bubble appears for the currently selected div (done)

R8. Without changing any of the previous 7 behavior, I want to be able to click on the div.story-in-myworks which leads to another behavior e.g., navigating to another webpage.

Note that those marked (done) are accomplished. Please see the demo here.

What I tried and gotten as a result

I tried to do 8 but rule 2 - 7 will be instantly broken.

What I need

A way to accomodate all 8 requirements without breaking anything else.

FAQs

Q1. is this your full app?

No. I did a reduced test case where i stripped out as much un-necessary code to explain my problem without affecting the problem statement as possible.

You can tell by noticing that there is no stylings for the links inside the talk bubbles in the demo.

Disclosure

D1. I have cross-posted this question over at stackoverflow here to gather greater attention to the question.

kimsia

this is the code i used :

/* tooltip for the settings */ // when enter into a story $(".story-in-myworks").mouseenter(function(e){

      var currentStory = $(this);
      // and then click on the setting button of this story
      var settingBtn = $(this).find(".btn-storysetting");

      var container = $(this).find(".pageimage-div-overlay");       

      settingBtn.click(function(e) {

        var settingBubble = $(this).next("div.settings-bubble");
        settingBubble.show();

        settingBubble.addClass("selected-story-bubble");

        currentStory.addClass("selected-story");

        $(".story-in-myworks:not(.selected-story)").click(function(e){
          hideSelectedBubble();
        });

        disableCssHoverOfPageOverlayDiv();

        settingBubble.click(function(event){
          //console.log('settings');
            event.stopPropagation();
            clearTimeout(clickCover);
        });


        var newCurrentStory = $(".selected-story");
        newCurrentStory.find(".pageimage-div-overlay-nohover").addClass("selected-story-overlay");

        newCurrentStory.click(function(event){
          event.stopPropagation();
        });

      });

      container.click(function(e) {

        if ($(e.target).hasClass('btn-storysetting')) {
          return;
        }

        // put your separate behavior for the parent element.
    });

treehouse : what would you like to learn today?