Bonjour
J'ai enfin réussi a avoir un menu déroulant sus IE
Je rencontre malheureusement plusieurs problèmes.
Le premier c'est qu'entre chaque bouton il devrait y avoir des images mais elles n'apparaissent pas. Pourquoi?
Ensuite présentation, jour j et infos pratiques sont décalé de 2px a peux près vers le bas.
Sinon sous firefox ma ligne est en fait sur 2 lignes se qui n'est pas le cas sous IE.
et pour finir les sous menu sont décalé de 20 px jepense sur la gauche. Comment je peux le modifier?
Je sais que ca fais beaucoup de questions. Mais merci d'avance de votre aide
voici le code CSS
Code :
body
{
font: 11px verdana, sans-serif;
background: #AFA99B;
margin: 0;
padding: 0;
}
#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
/* CSS du menu horizontal, bieler batiste */
.menu{
position:absolute;
display:block;
margin:0;
padding:0;
width:500px;
}
.menu ul{
position:absolute;
display:block;
width:124px;
/*margin:0;*/
padding:0;
}
.menu li ul{
visibility:hidden;
}
.menu li li ul{
position:absolute;
margin-left:124px;
margin-top:-23px;
}
.menu li{
list-style:none;
width:124px;
height:auto;
display:inline;
display/**/:block;
float:none;
float/**/:left;
margin:0;
padding:0;
}
.menu li li{
display:block;
float:none;
}
/* correct a little IE bug */
* html .menu li li{
display:inline;
}
.menu a{
text-align:center;
background-color: #9cf;
border:0px #666 solid;
color:#000;
display:block;
width:120px;
text-decoration:none;
padding:0px 0;
margin:0spx;
}
.menu a:hover{
background-color: #eee;
}
.menu a:focus{
background-color: #aaf;
}
a.linkOver{
background-color: #eee;
}
Voici le code HTML
Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head>
<title>Menu déroulant horizontal à plusieurs niveaux en DHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Robots" content="follow" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
<!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
@import "design_emeline411.css";
</style>
<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
function rollover(id) {
var img = document.getElementById("id_" + id);
if(img.alt == id + "_on") {
img.src = "image/" + id + "_off.jpg";
img.alt = id + "_off";
} else {
img.src = "image/" + id + "_on.jpg";
img.alt = id + "_on";
}
}
</script>
<!-- FIN DU SCRIPT -->
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />
</head><body>
<!-- liste imbriquée de liens qui fera office de menu -->
<div>
<a href="emeline_index.html"><img src="image/emeline_rub.jpg"></a>
<ul id="menu">
<li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" style="float: left" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 3</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
</li>
</ul>
<ul><img src="image/oiseau1_rub.jpg" style="float: left"></ul>
</li>
<li><a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" style="float: left" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
<ul>
<img src="image/oiseau2_rub.jpg">
</ul>
</li>
<li><a href="infospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" style="float: left" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
<ul>
<img src="image/oiseau3_rub.jpg">
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
initMenu();
</script>
</body></html>
Voici le code java script pour le menu
Code :
// the timeout for the menu
var timeout = 1000;
// not very clean but simple
// the function can be run in the HTML for faster display
// window.onload=initMenu;
// creat timeout variables for list item
// it's for avoid some warning with IE
for( var i = 0; i < 100; i++ )
{
eval("var timeoutli" + i + " = false;");
}
// this fonction apply the CSS style and the event
function initMenu()
{
// a test to avoid some browser like IE4, Opera 6, and IE Mac
if ( browser.isDOM1
&& !( browser.isMac && browser.isIE )
&& !( browser.isOpera && browser.versionMajor < 7 )
&& !( browser.isIE && browser.versionMajor < 5 ) )
{
// get some element
var menu = document.getElementById('menu'); // the root element
var lis = menu.getElementsByTagName('li'); // all the li
// change the class name of the menu,
// it's usefull for compatibility with old browser
menu.className='menu';
// i am searching for ul element in li element
for ( var i=0; i<lis.length; i++ )
{
// is there a ul element ?
if ( lis.item(i).getElementsByTagName('ul').length > 0 )
{
// improve IE key navigation
if ( browser.isIE )
{
addAnEvent(lis.item(i),'keyup',show);
}
// link events to list item
addAnEvent(lis.item(i),'mouseover',show);
addAnEvent(lis.item(i),'mouseout',timeoutHide);
addAnEvent(lis.item(i),'blur',timeoutHide);
addAnEvent(lis.item(i),'focus',show);
// add an id to list item
lis.item(i).setAttribute( 'id', "li"+i );
}
}
}
}
function addAnEvent( target, eventName, functionName )
{
// apply the method to IE
if ( browser.isIE )
{
//attachEvent dont work properly with this
eval('target.on'+eventName+'=functionName');
}
// apply the method to DOM compliant browsers
else
{
target.addEventListener( eventName , functionName , true ); // true is important for Opera7
}
}
// hide the first ul element of the current element
function timeoutHide()
{
// start the timeout
eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );");
}
// hide the ul elements under the element identified by id
function hideUlUnder( id )
{
document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden';
}
// show the first ul element found under this element
function show()
{
// show the sub menu
this.getElementsByTagName('ul')[0].style['visibility'] = 'visible';
var currentNode=this;
while(currentNode)
{
if( currentNode.nodeName=='LI')
{
currentNode.getElementsByTagName('a')[0].className = 'linkOver';
}
currentNode=currentNode.parentNode;
}
// clear the timeout
eval ( "clearTimeout( timeout"+ this.id +");" );
hideAllOthersUls( this );
}
// hide all ul on the same level of this list item
function hideAllOthersUls( currentLi )
{
var lis = currentLi.parentNode;
for ( var i=0; i<lis.childNodes.length; i++ )
{
if ( lis.childNodes.nodeName=='LI' && lis.childNodes[i].id != currentLi.id )
{
hideUlUnderLi( lis.childNodes[i] );
}
}
}
// hide all the ul wich are in the li element
function hideUlUnderLi( li )
{
var as = li.getElementsByTagName('a');
for ( var i=0; i<as.length; i++ )
{
as.item(i).className="";
}
var uls = li.getElementsByTagName('ul');
for ( var i=0; i<uls.length; i++ )
{
uls.item(i).style['visibility'] = 'hidden';
}
}
et voici le code javascript pour les navigateurs
Code :
function BrowserDetectLite() {
var ua = navigator.userAgent.toLowerCase();
// browser name
this.isGecko = (ua.indexOf('gecko') != -1 && ua.indexOf('safari') == -1);
this.isMozilla = (this.isGecko && ua.indexOf('gecko/') + 14 == ua.length);
this.isNS = ( (this.isGecko) ? (ua.indexOf('netscape') != -1) : ( (ua.indexOf('mozilla') != -1) && (ua.indexOf('spoofer') == -1) && (ua.indexOf('compatible') == -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) && (ua.indexOf('hotjava') == -1) ) );
this.isIE = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) );
this.isSafari = (ua.indexOf('safari') != - 1);
this.isOpera = (ua.indexOf('opera') != -1);
this.isKonqueror = (ua.indexOf('konqueror') != -1 && !this.isSafari);
this.isIcab = (ua.indexOf('icab') != -1);
this.isAol = (ua.indexOf('aol') != -1);
// spoofing and compatible browsers
this.isIECompatible = ( (ua.indexOf('msie') != -1) && !this.isIE);
this.isNSCompatible = ( (ua.indexOf('mozilla') != -1) && !this.isNS && !this.isMozilla);
// browser version
this.versionMinor = parseFloat(navigator.appVersion);
// correct version number
if (this.isNS && this.isGecko) {
this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
}
else if (this.isIE && this.versionMinor >= 4) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
}
else if (this.isMozilla) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('rv:') + 3 ) );
}
else if (this.isSafari) {
this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
}
else if (this.isOpera) {
if (ua.indexOf('opera/') != -1) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera/') + 6 ) );
}
else {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera ') + 6 ) );
}
}
else if (this.isKonqueror) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('konqueror/') + 10 ) );
}
else if (this.isIcab) {
if (ua.indexOf('icab/') != -1) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab/') + 6 ) );
}
else {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab ') + 6 ) );
}
}
this.versionMajor = parseInt(this.versionMinor);
this.geckoVersion = ( (this.isGecko) ? ua.substring( (ua.lastIndexOf('gecko/') + 6), (ua.lastIndexOf('gecko/') + 14) ) : -1 );
// dom support
this.isDOM1 = (document.getElementById);
this.isDOM2Event = (document.addEventListener && document.removeEventListener);
// css compatibility mode
this.mode = document.compatMode ? document.compatMode : 'BackCompat';
// platform
this.isWin = (ua.indexOf('win') != -1);
this.isWin32 = (this.isWin && ( ua.indexOf('95') != -1 || ua.indexOf('98') != -1 || ua.indexOf('nt') != -1 || ua.indexOf('win32') != -1 || ua.indexOf('32bit') != -1 || ua.indexOf('xp') != -1) );
this.isMac = (ua.indexOf('mac') != -1);
this.isUnix = (ua.indexOf('unix') != -1 || ua.indexOf('sunos') != -1 || ua.indexOf('bsd') != -1 || ua.indexOf('x11') != -1)
this.isLinux = (ua.indexOf('linux') != -1);
// specific browser shortcuts
this.isNS4x = (this.isNS && this.versionMajor == 4);
this.isNS40x = (this.isNS4x && this.versionMinor < 4.5);
this.isNS47x = (this.isNS4x && this.versionMinor >= 4.7);
this.isNS4up = (this.isNS && this.versionMinor >= 4);
this.isNS6x = (this.isNS && this.versionMajor == 6);
this.isNS6up = (this.isNS && this.versionMajor >= 6);
this.isNS7x = (this.isNS && this.versionMajor == 7);
this.isNS7up = (this.isNS && this.versionMajor >= 7);
this.isIE4x = (this.isIE && this.versionMajor == 4);
this.isIE4up = (this.isIE && this.versionMajor >= 4);
this.isIE5x = (this.isIE && this.versionMajor == 5);
this.isIE55 = (this.isIE && this.versionMinor == 5.5);
this.isIE5up = (this.isIE && this.versionMajor >= 5);
this.isIE6x = (this.isIE && this.versionMajor == 6);
this.isIE6up = (this.isIE && this.versionMajor >= 6);
this.isIE4xMac = (this.isIE4x && this.isMac);
}
var browser = new BrowserDetectLite();
[/i][/i]
J'ai enfin réussi a avoir un menu déroulant sus IE
Je rencontre malheureusement plusieurs problèmes.
Le premier c'est qu'entre chaque bouton il devrait y avoir des images mais elles n'apparaissent pas. Pourquoi?
Ensuite présentation, jour j et infos pratiques sont décalé de 2px a peux près vers le bas.
Sinon sous firefox ma ligne est en fait sur 2 lignes se qui n'est pas le cas sous IE.
et pour finir les sous menu sont décalé de 20 px jepense sur la gauche. Comment je peux le modifier?
Je sais que ca fais beaucoup de questions. Mais merci d'avance de votre aide
voici le code CSS
Code :
body
{
font: 11px verdana, sans-serif;
background: #AFA99B;
margin: 0;
padding: 0;
}
#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
/* CSS du menu horizontal, bieler batiste */
.menu{
position:absolute;
display:block;
margin:0;
padding:0;
width:500px;
}
.menu ul{
position:absolute;
display:block;
width:124px;
/*margin:0;*/
padding:0;
}
.menu li ul{
visibility:hidden;
}
.menu li li ul{
position:absolute;
margin-left:124px;
margin-top:-23px;
}
.menu li{
list-style:none;
width:124px;
height:auto;
display:inline;
display/**/:block;
float:none;
float/**/:left;
margin:0;
padding:0;
}
.menu li li{
display:block;
float:none;
}
/* correct a little IE bug */
* html .menu li li{
display:inline;
}
.menu a{
text-align:center;
background-color: #9cf;
border:0px #666 solid;
color:#000;
display:block;
width:120px;
text-decoration:none;
padding:0px 0;
margin:0spx;
}
.menu a:hover{
background-color: #eee;
}
.menu a:focus{
background-color: #aaf;
}
a.linkOver{
background-color: #eee;
}
Voici le code HTML
Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head>
<title>Menu déroulant horizontal à plusieurs niveaux en DHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Robots" content="follow" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
<!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
@import "design_emeline411.css";
</style>
<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
function rollover(id) {
var img = document.getElementById("id_" + id);
if(img.alt == id + "_on") {
img.src = "image/" + id + "_off.jpg";
img.alt = id + "_off";
} else {
img.src = "image/" + id + "_on.jpg";
img.alt = id + "_on";
}
}
</script>
<!-- FIN DU SCRIPT -->
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />
</head><body>
<!-- liste imbriquée de liens qui fera office de menu -->
<div>
<a href="emeline_index.html"><img src="image/emeline_rub.jpg"></a>
<ul id="menu">
<li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" style="float: left" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 3</a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
</li>
</ul>
<ul><img src="image/oiseau1_rub.jpg" style="float: left"></ul>
</li>
<li><a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" style="float: left" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
<ul>
<img src="image/oiseau2_rub.jpg">
</ul>
</li>
<li><a href="infospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" style="float: left" class="rollOver" /></a>
<ul>
<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
<ul>
<img src="image/oiseau3_rub.jpg">
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
initMenu();
</script>
</body></html>
Voici le code java script pour le menu
Code :
// the timeout for the menu
var timeout = 1000;
// not very clean but simple
// the function can be run in the HTML for faster display
// window.onload=initMenu;
// creat timeout variables for list item
// it's for avoid some warning with IE
for( var i = 0; i < 100; i++ )
{
eval("var timeoutli" + i + " = false;");
}
// this fonction apply the CSS style and the event
function initMenu()
{
// a test to avoid some browser like IE4, Opera 6, and IE Mac
if ( browser.isDOM1
&& !( browser.isMac && browser.isIE )
&& !( browser.isOpera && browser.versionMajor < 7 )
&& !( browser.isIE && browser.versionMajor < 5 ) )
{
// get some element
var menu = document.getElementById('menu'); // the root element
var lis = menu.getElementsByTagName('li'); // all the li
// change the class name of the menu,
// it's usefull for compatibility with old browser
menu.className='menu';
// i am searching for ul element in li element
for ( var i=0; i<lis.length; i++ )
{
// is there a ul element ?
if ( lis.item(i).getElementsByTagName('ul').length > 0 )
{
// improve IE key navigation
if ( browser.isIE )
{
addAnEvent(lis.item(i),'keyup',show);
}
// link events to list item
addAnEvent(lis.item(i),'mouseover',show);
addAnEvent(lis.item(i),'mouseout',timeoutHide);
addAnEvent(lis.item(i),'blur',timeoutHide);
addAnEvent(lis.item(i),'focus',show);
// add an id to list item
lis.item(i).setAttribute( 'id', "li"+i );
}
}
}
}
function addAnEvent( target, eventName, functionName )
{
// apply the method to IE
if ( browser.isIE )
{
//attachEvent dont work properly with this
eval('target.on'+eventName+'=functionName');
}
// apply the method to DOM compliant browsers
else
{
target.addEventListener( eventName , functionName , true ); // true is important for Opera7
}
}
// hide the first ul element of the current element
function timeoutHide()
{
// start the timeout
eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );");
}
// hide the ul elements under the element identified by id
function hideUlUnder( id )
{
document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden';
}
// show the first ul element found under this element
function show()
{
// show the sub menu
this.getElementsByTagName('ul')[0].style['visibility'] = 'visible';
var currentNode=this;
while(currentNode)
{
if( currentNode.nodeName=='LI')
{
currentNode.getElementsByTagName('a')[0].className = 'linkOver';
}
currentNode=currentNode.parentNode;
}
// clear the timeout
eval ( "clearTimeout( timeout"+ this.id +");" );
hideAllOthersUls( this );
}
// hide all ul on the same level of this list item
function hideAllOthersUls( currentLi )
{
var lis = currentLi.parentNode;
for ( var i=0; i<lis.childNodes.length; i++ )
{
if ( lis.childNodes.nodeName=='LI' && lis.childNodes[i].id != currentLi.id )
{
hideUlUnderLi( lis.childNodes[i] );
}
}
}
// hide all the ul wich are in the li element
function hideUlUnderLi( li )
{
var as = li.getElementsByTagName('a');
for ( var i=0; i<as.length; i++ )
{
as.item(i).className="";
}
var uls = li.getElementsByTagName('ul');
for ( var i=0; i<uls.length; i++ )
{
uls.item(i).style['visibility'] = 'hidden';
}
}
et voici le code javascript pour les navigateurs
Code :
function BrowserDetectLite() {
var ua = navigator.userAgent.toLowerCase();
// browser name
this.isGecko = (ua.indexOf('gecko') != -1 && ua.indexOf('safari') == -1);
this.isMozilla = (this.isGecko && ua.indexOf('gecko/') + 14 == ua.length);
this.isNS = ( (this.isGecko) ? (ua.indexOf('netscape') != -1) : ( (ua.indexOf('mozilla') != -1) && (ua.indexOf('spoofer') == -1) && (ua.indexOf('compatible') == -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) && (ua.indexOf('hotjava') == -1) ) );
this.isIE = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) );
this.isSafari = (ua.indexOf('safari') != - 1);
this.isOpera = (ua.indexOf('opera') != -1);
this.isKonqueror = (ua.indexOf('konqueror') != -1 && !this.isSafari);
this.isIcab = (ua.indexOf('icab') != -1);
this.isAol = (ua.indexOf('aol') != -1);
// spoofing and compatible browsers
this.isIECompatible = ( (ua.indexOf('msie') != -1) && !this.isIE);
this.isNSCompatible = ( (ua.indexOf('mozilla') != -1) && !this.isNS && !this.isMozilla);
// browser version
this.versionMinor = parseFloat(navigator.appVersion);
// correct version number
if (this.isNS && this.isGecko) {
this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
}
else if (this.isIE && this.versionMinor >= 4) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
}
else if (this.isMozilla) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('rv:') + 3 ) );
}
else if (this.isSafari) {
this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
}
else if (this.isOpera) {
if (ua.indexOf('opera/') != -1) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera/') + 6 ) );
}
else {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera ') + 6 ) );
}
}
else if (this.isKonqueror) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('konqueror/') + 10 ) );
}
else if (this.isIcab) {
if (ua.indexOf('icab/') != -1) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab/') + 6 ) );
}
else {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab ') + 6 ) );
}
}
this.versionMajor = parseInt(this.versionMinor);
this.geckoVersion = ( (this.isGecko) ? ua.substring( (ua.lastIndexOf('gecko/') + 6), (ua.lastIndexOf('gecko/') + 14) ) : -1 );
// dom support
this.isDOM1 = (document.getElementById);
this.isDOM2Event = (document.addEventListener && document.removeEventListener);
// css compatibility mode
this.mode = document.compatMode ? document.compatMode : 'BackCompat';
// platform
this.isWin = (ua.indexOf('win') != -1);
this.isWin32 = (this.isWin && ( ua.indexOf('95') != -1 || ua.indexOf('98') != -1 || ua.indexOf('nt') != -1 || ua.indexOf('win32') != -1 || ua.indexOf('32bit') != -1 || ua.indexOf('xp') != -1) );
this.isMac = (ua.indexOf('mac') != -1);
this.isUnix = (ua.indexOf('unix') != -1 || ua.indexOf('sunos') != -1 || ua.indexOf('bsd') != -1 || ua.indexOf('x11') != -1)
this.isLinux = (ua.indexOf('linux') != -1);
// specific browser shortcuts
this.isNS4x = (this.isNS && this.versionMajor == 4);
this.isNS40x = (this.isNS4x && this.versionMinor < 4.5);
this.isNS47x = (this.isNS4x && this.versionMinor >= 4.7);
this.isNS4up = (this.isNS && this.versionMinor >= 4);
this.isNS6x = (this.isNS && this.versionMajor == 6);
this.isNS6up = (this.isNS && this.versionMajor >= 6);
this.isNS7x = (this.isNS && this.versionMajor == 7);
this.isNS7up = (this.isNS && this.versionMajor >= 7);
this.isIE4x = (this.isIE && this.versionMajor == 4);
this.isIE4up = (this.isIE && this.versionMajor >= 4);
this.isIE5x = (this.isIE && this.versionMajor == 5);
this.isIE55 = (this.isIE && this.versionMinor == 5.5);
this.isIE5up = (this.isIE && this.versionMajor >= 5);
this.isIE6x = (this.isIE && this.versionMajor == 6);
this.isIE6up = (this.isIE && this.versionMajor >= 6);
this.isIE4xMac = (this.isIE4x && this.isMac);
}
var browser = new BrowserDetectLite();
[/i][/i]