SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Mentor silver trophybronze trophy
    alabamaseo's Avatar
    Join Date
    Dec 2012
    Location
    Birmingham, AL
    Posts
    203
    Mentioned
    25 Post(s)
    Tagged
    0 Thread(s)

    Want to Make States Active On Click for jQuery Map

    Hello,

    I am making a jQuery map for a client who has offices in many states. Right now, when I click on a state, the text at the bottom remains until I click on another state, but I would like for the state to keep the color red after I click it. It will be fine if states I hover over keep the same color, I just want to make sure the active state that the user clicks on is able to stand out.

    Can someone please help me learn how to do this? I am new to Javascript so please bear with me if this is a stupid question. Thank you in advance for your help!

    Here is my code thusfar:

    Code:
    <div id="map" style="width: 500px; height: 500px;"></div>
    <div id="notif" style="width: 500px;"></div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://newsignature.github.com/us-map/js/libs/raphael.js"></script>
    <script src="http://newsignature.github.com/us-map/js/libs/jquery.usmap.js"></script>
    
    <script>
    	$(document).ready(function() {
    		$('#map').usmap({
    			stateSpecificStyles: {
    				'AL': {fill: 'yellow'},
    				'MS': {fill: 'yellow'},
    				'GA': {fill: 'yellow'},
    				'FL': {fill: 'yellow'},
    				'TN': {fill: 'yellow'},
    				'SC': {fill: 'yellow'},
    				'NC': {fill: 'yellow'},
    				'VA': {fill: 'yellow'}			},
    			stateSpecificHoverStyles: {
    				'AL': {fill: 'red'},
    				'MS': {fill: 'red'},
    				'GA': {fill: 'red'},
    				'FL': {fill: 'red'},
    				'TN': {fill: 'red'},
    				'SC': {fill: 'red'},
    				'NC': {fill: 'red'},
    				'VA': {fill: 'red'}
    	},
    			click: myCallback
    		});
    	});
    
    
    	function myCallback(event, data)
    	{
    		if ('AL' == data.name) // this text for Alabama
    		{
    			$('#notif').html('<div style="width: 200px; height: 250px; background-color: #0D937B; color: #fff; font-size: 22px; font-weight: bold;" class="rounded-corners"><span style="align: center; padding-top: 10px;">This is example text</span></div>'); 
    		}
    		else if ('VA' == data.name) // text for Virginia
    		{
    			$('#notif').html('Virginia is under the cursor!');
    		}
    		else if ('GA' == data.name) // text for Georgia
    		{
    			$('#notif').html('Georgia is under the cursor!');
    		}
    		else if ('TN' == data.name) // text for Tennessee
    		{
    			$('#notif').html('Tennessee is under the cursor!');
    		}
    	}
    </script>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,019
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    And welcome to the forums.

    It took a while, but I found an answer to your problem.
    What you need to do is to alter the code in the file "jquery.usmap.js" (you also need to be hosting it locally to do this).

    At about line 256 in this file (latest version), you'll find the following code:

    Code JavaScript:
    // Create the actual objects
    var stateAttr = {};
    for(var state in paths) {
      stateAttr = {};
      if(this.options.stateSpecificStyles[state]) {
        $.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
      } else {
        stateAttr = attr;
      }
      this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
      this.topShape = this.stateShapes[state];
     
      this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});
      this.stateHitAreas[state].node.dataState = state;
    }

    You need to add the following line before the final curly brace:

    Code JavaScript:
    this.stateShapes[state].node.setAttribute("id", state);

    The code should now should read:

    Code JavaScript:
    // Create the actual objects
    var stateAttr = {};
    for(var state in paths) {
      stateAttr = {};
      if(this.options.stateSpecificStyles[state]) {
        $.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
      } else {
        stateAttr = attr;
      }
      this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
      this.topShape = this.stateShapes[state];
     
      this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});
      this.stateHitAreas[state].node.dataState = state;
      this.stateShapes[state].node.setAttribute("id", state);
    }

    What this does, is give every state on the map its own id which corresponds to the id used in the state specific styles (Alabama has id ="AL", California has id="CA" etc.)

    Now in your click handler you can write:

    Code JavaScript:
    $("#map > svg > path").each(function(){
      $(this).css('fill', '');
    });
    $('#' + data.name).css('fill', 'pink');

    The first bit gets a reference to all of the states on the map and removes the fill property from all of them.
    This is so that only one state can be highlighted at once.
    The second bit changes the colour of the state that was just selected.

    I've made a simple demo showing what I mean here: http://hibbard.eu/blog/pages/us-map/example/

    I hope this helps you.

    P.S. I can't take credit for the first part of this. I found a big hint on the project's issue tracker on GitHub: https://github.com/NewSignature/us-map/issues/3

    P.P.S. If you want me to send you over the files, just PM me.

  3. #3
    SitePoint Mentor silver trophybronze trophy
    alabamaseo's Avatar
    Join Date
    Dec 2012
    Location
    Birmingham, AL
    Posts
    203
    Mentioned
    25 Post(s)
    Tagged
    0 Thread(s)
    Again, thank you so much for all of your help! I am still a little confused as to how I would add the click handler to the code I have in place. Would I place it before the myCallback?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,019
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hey there,

    No problem!

    You currently have this:

    Code JavaScript:
    function myCallback(event, data)
      {
      if ('AL' == data.name) // this text for Alabama
      {
        $('#notif').html('<div style="width: 200px; height: 250px; background-color: #0D937B; color: #fff; font-size: 22px; font-weight: bold;" class="rounded-corners"><span style="align: center; padding-top: 10px;">This is example text</span></div>'); 
      }
        else if ('VA' == data.name) // text for Virginia
      {
        $('#notif').html('Virginia is under the cursor!');
      }
        else if ('GA' == data.name) // text for Georgia
      {
        $('#notif').html('Georgia is under the cursor!');
      }
        else if ('TN' == data.name) // text for Tennessee
      {
        $('#notif').html('Tennessee is under the cursor!');
      }
    }

    change it to this:

    Code JavaScript:
    function myCallback(event, data)
      {
      if ('AL' == data.name) // this text for Alabama
      {
        $('#notif').html('<div style="width: 200px; height: 250px; background-color: #0D937B; color: #fff; font-size: 22px; font-weight: bold;" class="rounded-corners"><span style="align: center; padding-top: 10px;">This is example text</span></div>'); 
      }
        else if ('VA' == data.name) // text for Virginia
      {
        $('#notif').html('Virginia is under the cursor!');
      }
        else if ('GA' == data.name) // text for Georgia
      {
        $('#notif').html('Georgia is under the cursor!');
      }
        else if ('TN' == data.name) // text for Tennessee
      {
        $('#notif').html('Tennessee is under the cursor!');
      }
     
      $("#map > svg > path").each(function(i){
        $(this).css('fill', '');
      });
      $('#' + data.name).css('fill', 'pink');
    }

    This will only work if you have altered the "jquery.usmap.js" file.

    HTH

  5. #5
    SitePoint Mentor silver trophybronze trophy
    alabamaseo's Avatar
    Join Date
    Dec 2012
    Location
    Birmingham, AL
    Posts
    203
    Mentioned
    25 Post(s)
    Tagged
    0 Thread(s)
    For some reason this is not making the state remain pink after it is selected. It works exactly the same as before I added the code.

  6. #6
    SitePoint Mentor silver trophybronze trophy
    alabamaseo's Avatar
    Join Date
    Dec 2012
    Location
    Birmingham, AL
    Posts
    203
    Mentioned
    25 Post(s)
    Tagged
    0 Thread(s)
    Is there any reason you can think of that this code would be working properly with your map and not mine? Could there be something overriding that section?

    I have made all of the changes you have suggested exactly.

    Thank you again for taking so much time from your busy schedule to help me solve this issue.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,019
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Is it possible to post a link to a page where I can see this?
    I'm sure it'll be something simple.

  8. #8
    SitePoint Mentor silver trophybronze trophy
    alabamaseo's Avatar
    Join Date
    Dec 2012
    Location
    Birmingham, AL
    Posts
    203
    Mentioned
    25 Post(s)
    Tagged
    0 Thread(s)
    It can be found at http://alabamaseo.org/map

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,019
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    The problem is that you are still linking to the jquery.usmap.js file on GitHub.

    HTML Code:
    <script src="http://newsignature.github.com/us-map/js/libs/jquery.usmap.js"></script>
    You need to download this file, alter it as I describe in my first post, then upload it to your own server.

    Does that make sense?

  10. #10
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, this worked great on everything except IE8? I even checked your example and it doesn't work in IE8. Would you be able to point me in the right direction on how to get it to work in ie8?

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,019
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Welcome to the forums

    Quote Originally Posted by jdelatorre312 View Post
    Would you be able to point me in the right direction on how to get it to work in ie8?
    It seems that the line that is causing IE to balk is this:

    Code:
    $('#' + data.name).css('fill', 'pink');
    Support for SVG in IE8 and below is patchy.
    TBH I don't think you're going to have much luck, but you could try Googling "SVG fill attribute polyfill" or something similar.

    Good luck!

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,019
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    After posting the above, it occurred to me that the Raphael library (on which this is based) actually has its own fill method.

    So, aftersome experimentation, I found out that instead of doing this:

    Code JavaScript:
    $('#' + data.name).css('fill', 'pink');

    you could do this:

    Code JavaScript:
    data.hitArea.attr({'fill': 'yellow'});

    which should then work in IE8, right?

    Wrong!

    The problem I then encountered is that even though the above command, successfully fills the state with the appropriate colour, the plugin uses the opacity property to produce that nice hover effect.

    Ok then, so we need to do this:

    Code JavaScript:
    data.hitArea.attr({'fill': 'yellow', 'opacity': 1.0});

    Now that works in Chrome and all other sensible browsers, but unfortunately, IE8 still refused to play ball (due to the way that it implements opacity).

    So, I had a look at the plugin and altered the line where the opacity is specified originally:

    Code JavaScript:
    this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});

    became:

    Code JavaScript:
    this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, 'cursor': 'pointer'});

    Now things started to kind of work in a cross browser way. IE8 started cooperating, but the map turns black and we lose our state-specific highlighting.

    I then spent far too long playing around with applying classes and removing them and, and, and ...

    In the end the best I could come up with was this IE8 demo, which probably isn't much use as the states remain highlighted once you have clicked on them.

    I've spent several hours on this now and I really don't think you're going to get this to work. Sorry

  13. #13
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you so much for all your help. This map was for a project I needed to get done by end of day today. After hours of looking into html image mappers and the above, I just did the most obvious:

    My map has four regions: west, midwest, southeast, and northeast. I manipulated the coordinates to get it this way. Overall the plugin works, the only part that wasn't working is keeping the hover color when it was clicked. I only have four regions, so what was the easiest thing to do???

    Create five maps for IE8 and below, and leave the single map for everything else.

    For IE8, I created a map for the default view and another four maps with the 'selected' region filled to the hover color.

    The default map is displayed first and the other maps are display:none; On click, ONLY FOR IE8 AND BELOW, the map will hide the current view, and display the map with the section color filled to the hover color. To the user, the experience is the same as the regular map, except in reality it's five maps which are hidden and shown depending on click. I know, I know, it's sloppy and redundant code, but I was low on time and just needed it to work. Here's the code:

    Code:
    $(document).ready(function() {
    	  $('#map').usmap({
    	  	  showLabels: false,
    	  'stateSpecificHoverStyles': {
    	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
    		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
    		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
    		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
    	  },
    	    'stateSpecificStyles': {
    	      
    		  'WEST' : {fill: '#1D5E75',
    		  stroke:'#ffffff'},
    		  'SOUTHEAST' : {fill: '#006B3B',
    		  stroke:'#ffffff'},
    		  'MIDWEST' : {fill: '#A49A00',
    		  stroke:'#ffffff'},
    		  'NORTHEAST' : {fill: '#DCA728',
    		  stroke:'#ffffff'}
    		  
    	    },	    
    	    'mouseoverState': {
    	      'HI' : function(event, data) {
    	        //return false;
    	      }
    		  
    	    },
    		
    		 'clickState': {
    			'SOUTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:2});
    				
    				$("#map > svg > path").each(function(){
    				  $(this).css('fill', '');
    				});
    				$('#' + data.name).css('fill', '#e1ebe5');
    						   $("#southeastpanel").toggleClass("openmapui");					
    			},
    			
    			'NORTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:3});
    				$("#map > svg > path").each(function(){
    					  $(this).css('fill', '');
    					});
    					$('#' + data.name).css('fill', '#EDDEBD');
    						   $("#northeastpanel").toggleClass("openmapui");						
    			},
    			
    			'MIDWEST' : function(event, data) {
    				$(".accordion").accordion({active:1});
    				
    					$("#map > svg > path").each(function(){
    					  $(this).css('fill', '');
    					});
    					$('#' + data.name).css('fill', '#edebcc');	
    						   $("#midwestpanel").toggleClass("openmapui");						
    			},
    
    			'WEST' : function(event, data) {
    				$(".accordion").accordion({active:0});
    				
    				$("#map > svg > path").each(function(){
    				  $(this).css('fill', '');
    				});
    				$('#' + data.name).css('fill', '#e1ebf4');	
    			$("#westpanel").toggleClass("openmapui");					
    			}			
    		  },
    		  
    	    
    	    'click' : function(event, data) {
    	      $('#alert')
    	        .text('Click '+data.name+' on map 1')
    	        .stop()
    	        .css('backgroundColor', '#ff0')
    	        .animate({backgroundColor: '#ddd'}, 1000);
    	    }
    	  });
    	  
    	  $('#mapie').usmap({
    	  	  showLabels: false,
    	  'stateSpecificHoverStyles': {
    	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
    		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
    		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
    		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
    	  },
    	    'stateSpecificStyles': {
    	      
    		  'WEST' : {fill: '#1D5E75',
    		  stroke:'#ffffff'},
    		  'SOUTHEAST' : {fill: '#006B3B',
    		  stroke:'#ffffff'},
    		  'MIDWEST' : {fill: '#A49A00',
    		  stroke:'#ffffff'},
    		  'NORTHEAST' : {fill: '#DCA728',
    		  stroke:'#ffffff'}
    		  
    	    },	    
    	    'mouseoverState': {
    	      'HI' : function(event, data) {
    	        //return false;
    	      }
    		  
    	    },
    		
    		 'clickState': {
    			'SOUTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:2});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiewest').hide();
    				$('#mapiemw').hide();
    
    				$('#mapiese').show();				
    			},
    			
    			'NORTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:3});
    						$('#mapie').hide();
    						$('#mapiese').hide();
    						$('#mapiewest').hide();
    						$('#mapiemw').hide();
    
    						$('#mapiene').show();			
    			},
    			
    			'MIDWEST' : function(event, data) {
    				$(".accordion").accordion({active:1});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiewest').hide();
    				$('#mapiese').hide();
    
    				$('#mapiemw').show();				
    									
    			},
    
    			'WEST' : function(event, data) {
    				$(".accordion").accordion({active:0});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiese').hide();
    				$('#mapiemw').hide();
    
    				$('#mapiewest').show();
    			}			
    		  },
    		  
    	    
    	    'click' : function(event, data) {
    	      $('#alert')
    	        .text('Click '+data.name+' on map 1')
    	        .stop()
    	        .css('backgroundColor', '#ff0')
    	        .animate({backgroundColor: '#ddd'}, 1000);
    	    }
    	  });
    	  
    	  $('#mapiewest').usmap({
    	  	  showLabels: false,
    	  'stateSpecificHoverStyles': {
    	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
    		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
    		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
    		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
    	  },
    	    'stateSpecificStyles': {
    	      
    		  'WEST' : {fill: '#e1ebf4',
    		  stroke:'#ffffff'},
    		  'SOUTHEAST' : {fill: '#006B3B',
    		  stroke:'#ffffff'},
    		  'MIDWEST' : {fill: '#A49A00',
    		  stroke:'#ffffff'},
    		  'NORTHEAST' : {fill: '#DCA728',
    		  stroke:'#ffffff'}
    		  
    	    },	    
    	    'mouseoverState': {
    	      'HI' : function(event, data) {
    	        //return false;
    	      }
    		  
    	    },
    		
    		 'clickState': {
    			'SOUTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:2});
    				
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiewest').hide();
    				$('#mapiemw').hide();
    
    				$('#mapiese').show();			
    			},
    			
    			'NORTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:3});
    				$('#mapie').hide();
    				$('#mapiese').hide();
    				$('#mapiewest').hide();
    				$('#mapiemw').hide();
    
    				$('#mapiene').show();					
    			},
    			
    			'MIDWEST' : function(event, data) {
    				$(".accordion").accordion({active:1});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiewest').hide();
    				$('#mapiese').hide();
    
    				$('#mapiemw').show();
    									
    			},
    
    			'WEST' : function(event, data) {
    				$(".accordion").accordion({active:0});		
    					
    			}			
    		  },
    		  
    	    
    	    'click' : function(event, data) {
    	      $('#alert')
    	        .text('Click '+data.name+' on map 1')
    	        .stop()
    	        .css('backgroundColor', '#ff0')
    	        .animate({backgroundColor: '#ddd'}, 1000);
    	    }
    	  });
    	  
    	  $('#mapiese').usmap({
    	  	  showLabels: false,
    	  'stateSpecificHoverStyles': {
    	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
    		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
    		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
    		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
    	  },
    	    'stateSpecificStyles': {
    	      
    		  'WEST' : {fill: '#1D5E75',
    		  stroke:'#ffffff'},
    		  'SOUTHEAST' : {fill: '#e1ebe5',
    		  stroke:'#ffffff'},
    		  'MIDWEST' : {fill: '#A49A00',
    		  stroke:'#ffffff'},
    		  'NORTHEAST' : {fill: '#DCA728',
    		  stroke:'#ffffff'}
    		  
    	    },	    
    	    'mouseoverState': {
    	      'HI' : function(event, data) {
    	        //return false;
    	      }
    		  
    	    },
    		
    		 'clickState': {
    			'SOUTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:2});
    				
    								
    			},
    			
    			'NORTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:3});
    			$('#mapie').hide();
    			$('#mapiese').hide();
    			$('#mapiewest').hide();
    			$('#mapiemw').hide();
    
    			$('#mapiene').show();									
    			},
    			
    			'MIDWEST' : function(event, data) {
    				$(".accordion").accordion({active:1});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiewest').hide();
    				$('#mapiese').hide();
    
    				$('#mapiemw').show();				
    									
    			},
    
    			'WEST' : function(event, data) {
    				$(".accordion").accordion({active:0});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiese').hide();
    				$('#mapiemw').hide();
    
    				$('#mapiewest').show();				
    								
    			}			
    		  },
    		  
    	    
    	    'click' : function(event, data) {
    	      $('#alert')
    	        .text('Click '+data.name+' on map 1')
    	        .stop()
    	        .css('backgroundColor', '#ff0')
    	        .animate({backgroundColor: '#ddd'}, 1000);
    	    }
    	  });
    	  
    	  $('#mapiemw').usmap({
    	  	  showLabels: false,
    	  'stateSpecificHoverStyles': {
    	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
    		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
    		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
    		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
    	  },
    	    'stateSpecificStyles': {
    	      
    		  'WEST' : {fill: '#1D5E75',
    		  stroke:'#ffffff'},
    		  'SOUTHEAST' : {fill: '#006B3B',
    		  stroke:'#ffffff'},
    		  'MIDWEST' : {fill: '#edebcc',
    		  stroke:'#ffffff'},
    		  'NORTHEAST' : {fill: '#DCA728',
    		  stroke:'#ffffff'}
    		  
    	    },	    
    	    'mouseoverState': {
    	      'HI' : function(event, data) {
    	        //return false;
    	      }
    		  
    	    },
    		
    		 'clickState': {
    			'SOUTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:2});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiewest').hide();
    				$('#mapiemw').hide();
    
    				$('#mapiese').show();
    								
    			},
    			
    			'NORTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:3});
    				$('#mapie').hide();
    				$('#mapiese').hide();
    				$('#mapiewest').hide();
    				$('#mapiemw').hide();
    
    				$('#mapiene').show();									
    			},
    			
    			'MIDWEST' : function(event, data) {
    				$(".accordion").accordion({active:1});
    				
    										
    			},
    
    			'WEST' : function(event, data) {
    				$(".accordion").accordion({active:0});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiese').hide();
    				$('#mapiemw').hide();
    
    				$('#mapiewest').show();				
    								
    			}			
    		  },
    		  
    	    
    	    'click' : function(event, data) {
    	      $('#alert')
    	        .text('Click '+data.name+' on map 1')
    	        .stop()
    	        .css('backgroundColor', '#ff0')
    	        .animate({backgroundColor: '#ddd'}, 1000);
    	    }
    	  });
    	 
    	 $('#mapiene').usmap({
    	  	  showLabels: false,
    	  'stateSpecificHoverStyles': {
    	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
    		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
    		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
    		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
    	  },
    	    'stateSpecificStyles': {
    	      
    		  'WEST' : {fill: '#1D5E75',
    		  stroke:'#ffffff'},
    		  'SOUTHEAST' : {fill: '#006B3B',
    		  stroke:'#ffffff'},
    		  'MIDWEST' : {fill: '#A49A00',
    		  stroke:'#ffffff'},
    		  'NORTHEAST' : {fill: '#EDDEBD',
    		  stroke:'#ffffff'}
    		  
    	    },	    
    	    'mouseoverState': {
    	      'HI' : function(event, data) {
    	        //return false;
    	      }
    		  
    	    },
    		
    		 'clickState': {
    			'SOUTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:2});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiewest').hide();
    				$('#mapiemw').hide();
    
    				$('#mapiese').show();				
    			},
    			
    			'NORTHEAST' : function(event, data) {
    				$(".accordion").accordion({active:3});
    									
    			},
    			
    			'MIDWEST' : function(event, data) {
    				$(".accordion").accordion({active:1});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiewest').hide();
    				$('#mapiese').hide();
    
    				$('#mapiemw').show();
    										
    			},
    
    			'WEST' : function(event, data) {
    				$(".accordion").accordion({active:0});
    				$('#mapie').hide();
    				$('#mapiene').hide();
    				$('#mapiese').hide();
    				$('#mapiemw').hide();
    
    				$('#mapiewest').show();				
    							
    			}			
    		  },
    		  
    	    
    	    'click' : function(event, data) {
    	      $('#alert')
    	        .text('Click '+data.name+' on map 1')
    	        .stop()
    	        .css('backgroundColor', '#ff0')
    	        .animate({backgroundColor: '#ddd'}, 1000);
    	    }
    	  });
    	  
    	  
    
    	});
    Inline:

    Code:
    <!--[if lt IE 9]>
    <div class="" id="mapie">
    <div class="maptext">Click on a territory for contacts</div>
    </div>
    
    <div class="" id="mapiene" style="display:none;">
    <div class="maptext">Click on a territory for contacts</div>
    </div>
    
    <div class="" id="mapiewest" style="display:none;">
    <div class="maptext">Click on a territory for contacts</div>
    </div>
    
    <div class="" id="mapiese" style="display:none;">
    <div class="maptext">Click on a territory for contacts</div>
    </div>
    
    <div class="" id="mapiemw" style="display:none;">
    <div class="maptext">Click on a territory for contacts</div>
    </div>
    <![endif]-->
    
    
    <!--[if lt IE 9]>
    <script type="text/javascript"> 
    $(function() { 
    $('#map').hide();
    var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" }; 
    $( "#accordion" ).accordion({ icons: icons, header:"h3", active:3, collapsible:true, }); 
    $( "#toggle" ).button().click(function() { if ( $( "#accordion" ).accordion( "option", "icons" ) ) { 
    $( "#accordion" ).accordion( "option", "icons", null ); } else { 
    $( "#accordion" ).accordion( "option", "icons", icons ); } }); 
    $("#southeastpanel").click(function() { if(!$('#southeastpanel').hasClass("ui-state-active")){ } else{ 
    
    $('#mapie').hide();
    $('#mapiene').hide();
    $('#mapiewest').hide();
    $('#mapiemw').hide();
    
    $('#mapiese').show();
    } }); 
    $("#northeastpanel").click(function() { if(!$('#northeastpanel').hasClass("ui-state-active")){ } else{ 
    $('#mapie').hide();
    $('#mapiese').hide();
    $('#mapiewest').hide();
    $('#mapiemw').hide();
    
    $('#mapiene').show();
    } }); 
    $("#westpanel").click(function() { if(!$('#westpanel').hasClass("ui-state-active")){ } else{ 
    $('#mapie').hide();
    $('#mapiene').hide();
    $('#mapiese').hide();
    $('#mapiemw').hide();
    
    $('#mapiewest').show();
    } }); 
    $("#midwestpanel").click(function() { if(!$('#midwestpanel').hasClass("ui-state-active")){ } else{ 
    $('#mapie').hide();
    $('#mapiene').hide();
    $('#mapiewest').hide();
    $('#mapiese').hide();
    
    $('#mapiemw').show();
    } }); }); 
    </script> 
    <![endif]-->
    Oh and by the way, my map is connected to a jquery ui accordion. When the map is clicked, each corresponding accordion for each region is activated.

    IE8 I HATE YOU!!!!!!!!!!!

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,019
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Yeah, that's weird because IE8 is otherwise such a standards compliant browser (not), but at least you found a solution that works for you.
    Thanks for taking the time to share it with us.


Bookmarks

Posting Permissions

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