Menu bar

Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Sunday, 13 July 2014

Detect Browser?

Detect the browser 

Detect the browser using javascript, whether it is Internet Explorer or Netscape Browser.




<html>
<head>
<title>Browser Detective</title>
<script>
var bVersion = 0;
var isNav = false;
var isIE = false;

function checkBrowser(){
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion); 
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+6);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
 fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
   fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
   fullVersion=fullVersion.substring(0,ix);

majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
 fullVersion  = ''+parseFloat(navigator.appVersion); 
 majorVersion = parseInt(navigator.appVersion,10);
}

document.write(''
 +'Browser name  = '+browserName+'<br>'
 +'Full version  = '+fullVersion+'<br>'
 +'Major version = '+majorVersion+'<br>'
 +'navigator.appName = '+navigator.appName+'<br>'
 +'navigator.userAgent = '+navigator.userAgent+'<br>'
)
}

</script>
</head>

<body>
<center>
<h1>Browser Detective<hr></h1>
<script>
checkBrowser();

if (isNav){
  document.write("Netscape Navigator");
} else {
  if (isIE){
    document.write("Internet Explorer");
  }
}

</script>
</center>
</body>
</html>



OUTPUT:


Thursday, 29 May 2014

How to make sidebar menu using slide toggle?

Copy this content to your HTML or PHP page and modify according to your requirement.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slide Toggle</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
#toggle-view {
font-family:arial;
font-size:11px;
margin:0;
padding:0;
width:200px;
background:#999;
border-radius:15px;
border:1px solid #CCC;
}

#toggle-view  li {
position:relative;
cursor:pointer;
list-style:none;
font-size:18px;
padding:9px 0px 9px 0px;
border-bottom:1px solid #ccc;
text-align:center;
`
}

#toggle-view ul{
background:#FFFFFF;
padding:0px;
margin:0;
}

#toggle-view h3 {
margin:0;
font-size:20px;
border-bottom:1px solid #ccc;
padding:5px;
background:#344da1;
color:#FFFFFF;
}

#toggle-view h3:hover {
background:#1f2e60;
}
#toggle-view h3:active {
background:#1f2e60;
}
#toggle-view h3:visited {
background:#1f2e60;
}
#toggle-view h3:focus {
background:#1f2e60;
}
</style>
</head>

<body>
<div id="toggle-view">
  <h3 class="grow-link">Categories</h3>
  <ul class="grow" style="display: none;">
    <li  value="best-seller">Best Seller</li>
    <li  value="charger">Charger</li>
    <li  value="memory">Memory</li>
  </ul>
  <h3 class="grow-link">Brands</h3>
  <ul class="grow" style="display: none;">
    <li  value="Naztech">Naztech</li>
    <li  value="Spider">Spider</li>
    <li  value="Gemini">Gemini</li>
    <li  value="Reactor">Reactor</li>
    <li  value="Kingston">Kingston</li>
    <li  value="sandisk">sandisk</li>
  </ul>
  </div>
<script>
// toggle


menu on sidebar and main nav
jQuery('ul.grow').hide();
jQuery('.grow-link').click(
function() {
jQuery(this).next().slideToggle('slow');
return false;
}
);
</script>
</body>
</html>