WMI

by ayoub bob

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Merriweather+Sans&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<body >
   <div id="WMI" class="firstDiv">
		    
		    <span title="Home"  style="float:left;cursor:pointer;">
		    	<img class="wmiLogo" src="WMILogo.png" height="45px" width="50px"/>
			</span>
			
			<span title="Home" id="home" class="wmiTitle" >
				Weather Map India
			</span>
		    
		    
		    <div id="HMV" class="firstChildDiv" title="Info about Heat Map">
		        <b>Heat Map View</b>
		    </div>
		    
		    <div class="verticalLine" ></div>
		    
		    <div id="ClusterView" class="firstChildDiv" title="Info about Cluster Map View">
		        <b>Cluster View</b>
		    </div>
		    
		    <div class="verticalLine"></div>
		    
		    <div id="LiveView" class="firstChildDiv" title="Info about Live Map View" >
		        <b>Live View</b>
		    </div>
		    <div class="verticalLine"></div>
		    
		    
		</div>
		
			<div id="mydiv" style="height:20em;position:relative;border:solid; width:100%;height:80%; margin-left:-8px;">
  
		</div>
		
</body>

CSS

.firstDiv 
	{
		position:fixed; top:0%; height:50px; width:100%; margin-left:-8px;
		
		-webkit-box-shadow: 0px 2px 20px rgba(50, 50, 50, 0.69);
		-moz-box-shadow: 0px 2px 20px rgba(50, 50, 50, 0.69);
		box-shadow: 0px 2px 20px rgba(50, 50, 50, 0.69);
		
		overflow:auto; z-index:500;
		
		background-image: linear-gradient(#f3f3f3, #cfcfcf); background-repeat: repeat-x;
		
		border-bottom: 1px solid #e5e5e5; border-bottom-width: 0.5px; border-bottom-style: solid; 
		border-bottom-color: rgb(229, 229, 229);       
	}

	.firstChildDiv
	{
		position:relative; height:50px; float:right; padding-right:30px; padding-left:30px; width:15%; text-align:center;
	}

	.firstChildDiv:hover
	{
		/*background-color:#f3f3f3;  */
		text-shadow: 0px 0px 5px #edf7ff; color:#669bcf ;
		cursor:pointer;
	}

	b
	{
		line-height:3;
		font-family: 'Merriweather Sans', sans-serif; font-weight: 200; 
	}

	.verticalLine
	{
		height:50px; width:1px; float:right; background-color:#cfcfcf; border-right: 1px solid #fff;
	}
	
	.wmiLogo
	{
		padding-left:10px; padding-right:10px; 3px;margin-top: 1px;
	}
	
	.wmiLogo:hover
	{
		/*-webkit-filter: hue-rotate(-70deg) saturate(1.5);		*/		
	}
	
	.wmiTitle
	{
		float:left; line-height:3;
		text-shadow: 2px 2px 10px #c3c0c0;		
		font-family: 'Merriweather Sans', sans-serif; font-weight: 500; 
		cursor:pointer;		
	}

JavaScript

$("#home").click(function() {
  DivColor();  
});

function DivColor(dn)
{
    var n = $(dn).attr("id");
      $(dn).fadeOut(100, function() {
        $(dn).css("background-image", "linear-gradient(#f3f3f3, #f3f3f3)").fadeIn(100);
    });  
    if(n != "HMV")
    {
        $("#HMV").fadeOut(1000, function() {
        $(this).css("background-image", "linear-gradient(#f3f3f3, #cfcfcf)").fadeIn(1000);
    });
    }
    if(n != "ListView")
    {
    $("#LiveView").fadeOut(1000, function() {
        $(this).css("background-image", "linear-gradient(#f3f3f3, #cfcfcf)").fadeIn(1000);
    });
    }    
    if(n!=ClusterView)
    {
    $("#ClusterView").fadeOut(1000, function() {
        $(this).css("background-image", "linear-gradient(#f3f3f3, #cfcfcf)").fadeIn(1000);
    });
    }
     
      $(dn).fadeOut(100, function() {
        $(dn).css("background-image", "linear-gradient(#f3f3f3, #f3f3f3)").fadeIn(100);
    });  
}

$("#HMV").click(function() {
    $("#mydiv").load("http://www.google.co.in/");
    //$(this).css("background-color","#f3f3f3");
    DivColor(this);    
    
});

$("#ClusterView").click(function() {
  //alert("Handler for Cluster View");
        DivColor(this);

});

$("#LiveView").click(function() {
  //alert("Handler for Live View");
    DivColor(this);

});