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
  1. #1
    New Coder
    Join Date
    Aug 2011
    Location
    Mauritius
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Area Map and toggle div

    Hi all, will need help to resolve some issue - I have an image with area maps - on clicking each one a div toggle/show - I need to add in my jquery to toggle div a check to close any opened div before opening other one - hope its clear.


    Area Map:

    Code:
    <map name="Map" id="Map">
          <area shape="poly" coords="2,-1,244,-1,0,359" href="#" id="area_indices" />
          <area shape="poly" coords="249,0,250,358,5,358" href="#" id="area_topgainers" />
          <area shape="poly" coords="254,1,448,285,372,359,254,358" href="#" id="area_weakest" />
          <area shape="poly" coords="264,4,751,3,452,282" href="#" id="area_active" />
        </map>
    
        <!-- image map hovers -->
        <ul>
            <li id="indices" style=""><a href="#">Indices</a></li>
            <li id="topgainers"><a href="#">Top Gainers</a></li>
            <li id="weakest"><a href="#">Weakest Performers</a></li>
            <li id="active"><a href="#">East Asia</a></li>
        </ul>
         
         <div id="content_indices" class="content">
           content 1
         </div>
        
         <div id="content_topgainers" class="content">
           content 2
         </div>
    
         <div id="content_weakest" class="content">
           content 2
         </div>
    
         <div id="content_active" class="content">
           content 2
         </div>

    Jquery to show hover:

    Code:
    <script>
        $(document).ready(function() {
      
    
         $('.top area').each(function () {
            // Assigning an action to the mouseover event
            $(this).mouseover(function (e) {
                var country_id = $(this).attr('id').replace('area_', '');
                $('#' + country_id).css('display', 'block');
            });
        
            // Assigning an action to the mouseout event
            $(this).mouseout(function (e) {
                var country_id = $(this).attr('id').replace('area_', '');
                $('#' + country_id).css('display', 'none');
            });
        
        });
        
    
    
    });
    </script>

    Jquery to toggle div :

    Code:
    <script>
        $(document).ready(function() {
      
          $("area").click(function(e) {
                var content_id = $(this).attr('id').replace('area_', 'content_');
                
                  $('#' + content_id).css('display', 'block');   //  need an if statement to close opened div before opening other one
        
            
          });
          e.preventDefault(); 
    });
    </script>

    PLEASE HELP.

    Thanks Sam.
    Last edited by VIPStephan; 04-25-2014 at 10:39 AM. Reason: added code BB tags

  • #2
    New Coder
    Join Date
    Aug 2011
    Location
    Mauritius
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anyone out there ?

  • #3
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    416
    Thanks
    10
    Thanked 61 Times in 60 Posts
    Hi Nadazoulou.

    Assuming all divs of class "content" serve for this purpose,
    then let's try this one:
    Code:
    $('area').click(function(e){
    	var content_id = $(this).attr('id').replace('area_', 'content_');
    	$('.content').each(function(){ //search for all divs of class content
    		if ($(this).attr('id') == content_id)
    			$(this).css('display', 'block'); //same id? show
    		else
    			$(this).css('display', 'none'); //not? hide
    	});
    });

  • #4
    New Coder
    Join Date
    Aug 2011
    Location
    Mauritius
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hi hdewantara

    Thanks for replying - learning much from your piece of code - another question if I click again on same area - how do I make it hide - i.e Click once to open , click again to close

  • #5
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    416
    Thanks
    10
    Thanked 61 Times in 60 Posts
    You're welcome

    jQuery has one nice function called toggle(). Have a look. It shoud work logically by rewriting this one line below:
    Code:
    $(this).toggle(); /*$(this).css('display', 'block');*/ /*same id? show line*/
    Hendra


  •  

    Posting Permissions

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