jQuery Mobilyblocks

[joebloggs]

I have finally signed up here for some help! I've been trying to solve this issue for about 3 days now with lots of trawling help forums and fiddling with my code without any joy. I am experienced with php but I'm pretty new to javascript, so I hope you will bear with me :-)

I am working on a menu using mobilyblocks which is working fine, but I want to add a collapsing and expanding effect the the menu on click. I have tried overlaying a div with a bakground image toggle which also works okay, but I can't get the two to work off the same click.

On the basis that a picture is worth a thousand words, I have set up a demo page at www.deslink.net/menu to illustrate. You will see a large square div there with a green menu circle and a smaller square div in the centre (I have put borders on both divs to make them easier to see). The small one is the mobilyblocks div. I have also set the same up as JSFiddle at http://jsfiddle.net/joebloggs/VsMXm/3/ where the code is visible.

If you click on the large div (outside the smaller div) you will see the background toggle to a smaller green circle. If you click on the smaller div in the centre you will see the mobilyblocks animation. What I am trying to achieve is to click on the centre div and have the click fire the toggle and the animation at the same time. So the effect would be that the large circle "collapses" to the small one and the animation runs. Clicking again on the centre would toggle back to the large circle. I don't know whether I should be posting code here, but the code is all quite small and readily viewable by viewing the page source. If I should post it here I am happy to do that. Sorry - I'm not sure of the convention on the forum.

I hope someone can help me with this - I don't usually give up, but I really am completely at sea with this and would love to know what the coding solution is so that I can improve my javascript and also get the job done.

Thanks!

[niralsoni]

Replace your current code (highlighted below) -

<script type="text/javascript">
$(document).ready(function() {
	$('.menu_items').mobilyblocks({duration:500, zIndex:10,	widthMultiplier:1.1});
    $('.switch').click(function(){
        if($('.switch').hasClass('menu_b'))
        {$('.switch').addClass('menu_s').removeClass('menu_b');}
        else
        {$('.switch').addClass('menu_b').removeClass('menu_s');}
     });
});	
</script>

with this one -

<script type="text/javascript">
$(document).ready(function() {
	$('.menu_items').mobilyblocks({duration:500, zIndex:10,	widthMultiplier:1.1});
    $('a.trigger').bind('click', function(){
        if($('.switch').hasClass('menu_b'))
        {$('.switch').addClass('menu_s').removeClass('menu_b');}
        else
        {$('.switch').addClass('menu_b').removeClass('menu_s');}
     });
});	
</script>

Hope it works for you...

Regards,
Niral Soni

[joebloggs]

Niral,

Perfect! Thank you so much.

I would like to learn something from this as well as receiving the solution . Would it be possible for you to explain where I was going wrong and how the solution you have given solves it?

Many thanks again.

[niralsoni]

I basically analysed the default behaviour of mobilyblocks.js file.

It was found that the js code internally creates a new anchor tag that is placed as a first child of the DIV tag ('menu_items'). css assigned to this tag is 'trigger'.

You just handled the click event for the parent tag, by assigning it a new css class. But because of this new anchor tag added, your piece of code was behaving differently. If you click on outer DIV tag ('switch') then only background images were getting changed. And nothing happened to the inner DIV, no events were triggered.

Hence I just changed the binding logic that two events must happen one by one. There are two possibilities of implementing the change -
1) outer DIV click event followed by inner DIV(anchor) click event
2) inner DIV(anchor) click event followed by outer DIV click event

While the previous solution was based on the second possibility, below is the logic for implementing the first possibility.

<script type="text/javascript">
$(document).ready(function() {
	$('.menu_items').mobilyblocks({duration:500, zIndex:10,	widthMultiplier:1.1});
    $('.switch').click(function(){
        if($('.switch').hasClass('menu_b'))
        {$('.switch').addClass('menu_s').removeClass('menu_b');}
        else
        {$('.switch').addClass('menu_b').removeClass('menu_s');}
        $('a.trigger').click();
     });
});	
</script>

Please note that the default behaviour of the menu is to handle the click event. As it also supports mouseover event, if you are changing this, you also need to change the click event to mouseover event.

Hope it clarifies everything...

Regards,
Niral Soni

[joebloggs]

Niral,

Thank you for the comprehensive explanation. I don't think I would have been able to work that out by myself with my level of knowledge of JS, so I appreciate the lesson as well as the solution!

Best regards