CODEWITHSUNDEEP
javascriptjquerycss
FunnyOxymoron
FunnyOxymoron

Reputation: 615

JS event handling through transparent elements

I have two elements which overlap, one on top of the other. Half of the top element is completely transparent (opacity = 0), showing the other element underneath. I've assigned click event handlers to both elements, but obviously, when trying to click the element underneath, it's activating the 'top' element which is transparent. I'm looking for a way around this.

I would normally create a ghost element on the opaque part of the top element to pick up the event handler of the top element, but I'm working with angled gradients so that's not really an option.

Code for CSS, HTML and jQuery below:

HTML:

<body>
    <div id="wrapper">
        <div id="window">
            <div id="blueRibbon" class="ribbon">
               <div class="ribbonContent">
                   <h1>Page Title</h1>
                   <p>CONTENT</p>
               </div>
            </div>
            <div id="blueRibbon2" class="ribbon">
               <div class="ribbonContent">
                   <h1>Page Title</h1>
                   <p>CONTENT2</p>
               </div>
            </div>
        </div>
    </div>
    <script src="/scripts/jQuery.js"></script>
    <script src="/scripts/ribbons.js"></script>
</body>

CSS:

body, html{
margin: 0;
padding: 0;
height: 100%;
}

#blueRibbon2{
background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 62%, rgba(45,175,226,1) 62%, rgba(45,175,226,1) 67%, rgba(45,175,226,0) 67%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(652%,rgba(249,249,249,1)), color-stop(62%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 65%,rgba(45,175,226,1) 65%,rgba(45,175,226,1) 69%,rgba(45,175,226,0) 69%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* IE10+ */
background: linear-gradient(135deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#002dafe2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
/*dimensions*/
height: 800px;
width: 1880px;
/*positioning styles*/
position: absolute;
left: -1520px;
}

#blueRibbon{
background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 62%, rgba(45,175,226,1) 62%, rgba(45,175,226,1) 67%, rgba(45,175,226,0) 67%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(652%,rgba(249,249,249,1)), color-stop(62%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,1)), color-stop(67%,rgba(45,175,226,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 65%,rgba(45,175,226,1) 65%,rgba(45,175,226,1) 69%,rgba(45,175,226,0) 69%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* IE10+ */
background: linear-gradient(135deg,  rgba(249,249,249,1) 62%,rgba(45,175,226,1) 62%,rgba(45,175,226,1) 67%,rgba(45,175,226,0) 67%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#002dafe2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
/*dimensions*/
height: 800px;
width: 1880px;
/*positioning styles*/
position: absolute;
left: -1400px;
}

#window{
width: 1200px;
height: 800px;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
position: relative;
}

#wrapper{
padding-top: 50px;
padding-bottom: 50px;
width: 1200px;
margin: 0 auto;
position: relative;
background: #EEE;
}

JS:

function moveRibbonLeft(){
$(this).unbind("click", moveRibbonLeft);
$(this).animate({left: -1400}, 200, function(){
    $(this).bind("click", moveRibbonRight);    
});
}

function moveRibbonRight(){
$(this).unbind("click", moveRibbonRight);
$(this).animate({left: 0}, 200, function(){
    $(this).bind("click", moveRibbonLeft);    
});
}

function moveRibbonLeft2(){
$(this).unbind("click", moveRibbonLeft2);
$(this).animate({left: -1520}, 200, function(){
    $(this).bind("click", moveRibbonRight2);    
});
}

function moveRibbonRight2(){
$(this).unbind("click", moveRibbonRight2);
$(this).animate({left: -120}, 200, function(){
    $(this).bind("click", moveRibbonLeft2);    
});
}

$(document).ready(function(){
$("#blueRibbon").bind("click", moveRibbonRight);
$("#blueRibbon2").bind("click", moveRibbonRight2);  
});

Any help at all is much appreciated :)

P.S I know a lot of the code is far from pretty, but i'm just testing at this stage :)

Upvotes: 2

Views: 225

Answers (1)

SeanCannon
SeanCannon

Reputation: 77996

Just capture the x,y coords of the click event and check which of your elements underneath the invisible blocker fit in the same screen space, then trigger the click event on the respective element.

That being said, this is silly. If you want people to click on things, you shouldn't put things in front of them.

Upvotes: 3

Related Questions