number of elements (count/size/length)
Hi there,
I'm trying to figure out how to make something happen only if there are more than one link inside a div.
Here's my HTML:
-
<div class="boxgrid caption dark">
<a href="#">Home</a>
<div class="cover boxcaption"></div>
</div>
<div class="boxgrid caption dark">
<a href="test">Recent Work</a>
<div class="cover boxcaption"></div>
</div>
<div class="boxgrid caption dark">
<a href="test">Portfolio</a>
<div class="cover boxcaption">
<a href="#">Set 1</a><br>
<a href="#">Set 2</a><br>
<a href="#">Set 3</a>
</div>
</div>
It's a set of boxes where only one has a "submenu" that needs to appear.
The script I'm trying to use:
-
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
if ($(".boxgrid.caption a").length >= 0) {
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:140-$(".cover", this).innerHeight()},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'140px'},{queue:false,duration:160});
});
$('.boxgrid.caption').click(function() {
window.location = url;
});
};
});
</script>
For now I'm trying to make the little div with the class "cover caption" NOT move when there is only one link in the div.
THe reason for this is that I want the whole div to be clickable if there is only one link inside.
Any ideas?