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
    22
    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
    22
    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
    353
    Thanks
    9
    Thanked 52 Times in 51 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
    22
    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
    353
    Thanks
    9
    Thanked 52 Times in 51 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
    •