Define Javascript slider hit/rollover area
- by Rob
Hey,
Im having an issue defining the hit area for a javascript sliding element.
See example:
http://www.warface.co.uk/clients/warface.co.uk/
Please slide over the grey box on the right side to reveal the button, although this works I would only like for the slider to only be triggered by rolling over the red block.
CSS
.slidingtwitter { /* -- This is the hit area -- */
background: #ccc;
width:255px;
height:55px;
overflow: hidden;
top:50%;
right: 0px; /* -- This is the sliding start point -- */
position: fixed;
font-family: Gotham, Sans-Serif;
z-index: 50;
}
.slidingtwitter.right {
right:0px;
}
.slidingtwitter .caption { /* -- This is the sliding area -- */
background: #fff;
position: absolute;
width:260px;
height:55px;
right: -205px; /* -- This is the sliding start point -- */
}
.slidingtwitter a {
color: #484848;
font-size: 20px;
text-transform: uppercase;
}
.slidingtwitter a:hover {
color: black;
}
.slidingtwitter .smaller {
font-size: 12px;
font-family: Gotham Medium;
}
.twitterblock {
background: #f35555 url("styles/images/button_twitter.png") no-repeat 14px 15px ;
width:35px;
height:35px;
padding:10px;
float:left;
display:block;
}
.slidingtwitter .followme {
background: url("styles/images/button_arrowheadthin.jpg")no-repeat right 0;
height:35px;
display:block;
float:left;
line-height:14px;
width:140px;
margin:10px 0px 0px 14px;
padding-top:6px;
padding-right: 40px;
}
JS
$('.slidingtwitter').hover(function(){
$(".slide", this).stop().animate({right:'0px'},{queue:false,duration:400}); //Position on rollover
},function() {
$(".slide", this).stop().animate({right:'-205px'},{queue:false,duration:400}); //Position on rollout
});
Any suggestions would be much appreciated.
