Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Mobilyblocks

  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mobilyblocks

    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!

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    Replace your current code (highlighted below) -
    Code:
    <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 -

    Code:
    <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

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    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.
    Code:
    <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

  • Users who have thanked niralsoni for this post:

    joebloggs (01-09-2013)

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •