Results 1 to 6 of 6
  1. shawalli's Avatar
    Posts
    83 Posts
    Global Posts
    85 Global Posts
       #1  
    I want to have some buttons within a scrim when the scrim is called. The buttons have custom functions called by their listeners. I also have a listener that turns the scrim off if the scrim is tapped but the buttons aren't, using $('scrimID').hide(). Whenever I click the buttons, however, the scrim disappears. When reloading the scrim, the changes I expected from hitting the button have happened, but during the scrim off time. I would like the scrim to stay on unless the scrim itself is tapped.

    Code:
    <div class="palm-scrim" id="menuOverlayScrim">
        <div id="leftScrimContainer">
    		<div id="tripButton">trip</div>
    		<div id="twoButton">two</div>
    		<div id="threeButton">three</div>
        </div>
    </div>
    EDIT: these are custom buttons, so they're basically divs with CSS webkit styling that puts an image in the div that resembles a button.

    So, the buttons are contained within the scrim div, so it appears that the scrim listener is always activated whenever anything inside it is tapped. Does anyone know how to differentiate between the parent scrim and its children?
  2. #2  
    So, the buttons are contained within the scrim div, so it appears that the scrim listener is always activated whenever anything inside it is tapped. Does anyone know how to differentiate between the parent scrim and its children?
    Yep, that's it. There's a couple things you can try. The one I'd probably try first is don't actually put the buttons inside the scrim, put them over it. For instance:
    Code:
    CSS:
    #buttons { position: relative; top: -100px; }
    
    HTML:
    <div id="myscrim"></div>
    <div id="buttons">
    ...Your Buttons...
    </div>
    Another thing you could try, is make sure you give your items a position:relative or posistion:absolute and then set the z-index on your scrim to 1 and on your buttons/container to 2 or higher.

    Finally, try putting the function to hide your scrim in it's onclick field i.e.:
    Code:
    <div class="palm-scrim" id="menuOverlayScrim" onclick="hideScrim();">
    And drop your Event.observe or whatever from your scene assistant.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  3. #3  
    Not had this issue so not 100% sure if this will work, but you could try calling
    Code:
    event.stopPropagation()
    which is a DOM event that stops the event bubbling up, ie. any parents that were also clicked do not receive the event.

    If that doesn't work, overlaying the scrim with relatively positioned buttons as unfairSurprisery mentioned is pretty common.
    My apps:
    ReWeather - Attractive weather app that reflects current conditions
    Suburbly UK (trial version) - Search for properties to rent, share or buy all over UK.

    Twitter: @joshsharp / @recursivemedia
  4. shawalli's Avatar
    Posts
    83 Posts
    Global Posts
    85 Global Posts
       #4  
    i tried the z-inex already, but it seems that it conflicts with my base div. My base div is similar to a webview/imageviewer, but the z-index still messes it up, even if i set the buttons to -1 temporarily until the scrim is called. I have not tried hiding them off the screen yet, and will try that next. Thanks for the tip!
  5. #5  
    I wasn't saying to hide them off screen. Just put them below your scrim instead of inside it and then use the relative positioning to move them into place. And I forgot about stopPropagation(thanks joshsharp). That one will probably work.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  6. shawalli's Avatar
    Posts
    83 Posts
    Global Posts
    85 Global Posts
       #6  
    the event.propagation did the trick. Thanks a ton guys!

Posting Permissions