Форум: "Потрепаться";
Текущий архив: 2004.06.13;
Скачать: [xml.tar.bz2];

Вниз

JavaScript - глюки с менюшкой   Найти похожие ветки 

← →
VictorT ©   (2004-05-25 16:35) [0]

Выдаёт ошибки в NN7 и криво работает в Опере6.
Код скрипта:

var isNetscape = (navigator.appName == "Netscape");

function MenuCall(Content, MenuID)
{
   document.write("<div class=menu2 id="+MenuID+" STYLE=\"position:absolute; visibility:hidden;\" onMouseover=\"MenuActivate(""+MenuID+"")\" onMouseOut=\"MenuKill(""+MenuID+"")\"><nobr>"+Content+"</nobr></div>");
}

function MenuActivate(MenuID)
{
   if (isNetscape)
       //Тут в NN7 вылазит ошибка document.MenuID has no properties
       eval("document[""+MenuID+""].style.visibility = "hidden"");
   else
       eval("document.all[""+MenuID+""].style.visibility = "visible"");
}
function MenuKill(MenuID)
{
   if (isNetscape)
       //Тут в NN7 вылазит ошибка document.MenuID has no properties
       eval("document[""+MenuID+""].style.visibility = "hidden"");
   else
       eval("document.all[""+MenuID+""].style.visibility = "hidden"");
}

В работе: http://www.galexpo.lviv.ua/dental/

---

← →
VictorT ©   (2004-05-26 11:05) [1]

Удалено модератором

---

← →
pasha_golub ©   (2004-05-26 11:17) [2]

Code of menu.js->>>

// ultimate browser sniffer from netscape
// see http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html for docs

// convert all characters to lowercase to simplify testing
var agt=navigator.userAgent.toLowerCase();

   // *** BROWSER VERSION ***
   // Note: On IE5, these return 4, so use is_ie5up to detect IE5.
   var is_major = parseInt(navigator.appVersion);
   var is_minor = parseFloat(navigator.appVersion);

   // Note: Opera and WebTV spoof Navigator.  We do strict client detection.
   // If you want to allow spoofing, take out the tests for opera and webtv.
   var is_nav  = ((agt.indexOf("mozilla")!=-1) && (agt.indexOf("spoofer")==-1)
               && (agt.indexOf("compatible") == -1) && (agt.indexOf("opera")==-1)
               && (agt.indexOf("webtv")==-1) && (agt.indexOf("hotjava")==-1));
   var is_nav2 = (is_nav && (is_major == 2));
   var is_nav3 = (is_nav && (is_major == 3));
   var is_nav4 = (is_nav && (is_major == 4));
   var is_nav4up = (is_nav && (is_major >= 4));
   var is_navonly      = (is_nav && ((agt.indexOf(";nav") != -1) ||
                         (agt.indexOf("; nav") != -1)) );
   var is_nav6 = (is_nav && (is_major == 5));
   var is_nav6up = (is_nav && (is_major >= 5));
   var is_gecko = (agt.indexOf("gecko") != -1);

   var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
   var is_ie3    = (is_ie && (is_major < 4));
   var is_ie4    = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );
   var is_ie4up  = (is_ie && (is_major >= 4));
   var is_ie5    = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
   var is_ie5_5  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
   var is_ie5up  = (is_ie && !is_ie3 && !is_ie4);
   var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
   var is_ie6    = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
   var is_ie6up  = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);

   // KNOWN BUG: On AOL4, returns false if IE3 is embedded browser
   // or if this is the first browser window opened.  Thus the
   // variables is_aol, is_aol3, and is_aol4 aren"t 100% reliable.
   var is_aol   = (agt.indexOf("aol") != -1);
   var is_aol3  = (is_aol && is_ie3);
   var is_aol4  = (is_aol && is_ie4);
   var is_aol5  = (agt.indexOf("aol 5") != -1);
   var is_aol6  = (agt.indexOf("aol 6") != -1);

   var is_opera = (agt.indexOf("opera") != -1);
   var is_opera2 = (agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);
   var is_opera3 = (agt.indexOf("opera 3") != -1 || agt.indexOf("opera/3") != -1);
   var is_opera4 = (agt.indexOf("opera 4") != -1 || agt.indexOf("opera/4") != -1);
   var is_opera5 = (agt.indexOf("opera 5") != -1 || agt.indexOf("opera/5") != -1);
   var is_opera5up = (is_opera && !is_opera2 && !is_opera3 && !is_opera4);

   var is_webtv = (agt.indexOf("webtv") != -1);

   var is_TVNavigator = ((agt.indexOf("navio") != -1) || (agt.indexOf("navio_aoltv") != -1));
   var is_AOLTV = is_TVNavigator;

   var is_hotjava = (agt.indexOf("hotjava") != -1);
   var is_hotjava3 = (is_hotjava && (is_major == 3));
   var is_hotjava3up = (is_hotjava && (is_major >= 3));
   //var is_safari = (agt.indexOf("safari") != -1);
   var is_safari = (agt.indexOf("applewebkit") != -1);
   // *** JAVASCRIPT VERSION CHECK ***
   var is_js;
   if (is_nav2 || is_ie3) is_js = 1.0;
   else if (is_nav3) is_js = 1.1;
   else if (is_opera5up) is_js = 1.3;
   else if (is_opera) is_js = 1.1;
   else if ((is_nav4 && (is_minor <= 4.05)) || is_ie4) is_js = 1.2;
   else if ((is_nav4 && (is_minor > 4.05)) || is_ie5) is_js = 1.3;
   else if (is_hotjava3up) is_js = 1.4;
   else if (is_nav6 || is_gecko) is_js = 1.5;
   // NOTE: In the future, update this code when newer versions of JS
   // are released. For now, we try to provide some upward compatibility
   // so that future versions of Nav and IE will show they are at
   // *least* JS 1.x capable. Always check for JS version compatibility
   // with > or >=.
   else if (is_nav6up) is_js = 1.5;
   // NOTE: ie5up on mac is 1.4
   else if (is_ie5up) is_js = 1.3

   // HACK: no idea for other browsers; always check for JS version with > or >=
   else is_js = 0.0;


// *** PLATFORM ***
var is_win   = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );
// NOTE: On Opera 3.0, the userAgent string includes "Windows 95/NT4" on all
//        Win32, so you can"t distinguish between Win95 and WinNT.
var is_win95 = ((agt.indexOf("win95")!=-1) || (agt.indexOf("windows 95")!=-1));

// is this a 16 bit compiled version?
var is_win16 = ((agt.indexOf("win16")!=-1) ||
          (agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1) ||
          (agt.indexOf("windows 16-bit")!=-1) );  

var is_win31 = ((agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("win16")!=-1) ||
               (agt.indexOf("windows 16-bit")!=-1));

// NOTE: Reliable detection of Win98 may not be possible. It appears that:
//       - On Nav 4.x and before you"ll get plain "Windows" in userAgent.
//       - On Mercury client, the 32-bit version will return "Win98", but
//         the 16-bit version running on Win98 will still return "Win95".
var is_win98 = ((agt.indexOf("win98")!=-1) || (agt.indexOf("windows 98")!=-1));
var is_winnt = ((agt.indexOf("winnt")!=-1) || (agt.indexOf("windows nt")!=-1));
var is_win32 = (is_win95 || is_winnt || is_win98 ||
               ((is_major >= 4) && (navigator.platform == "Win32")) ||
               (agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1));

var is_os2   = ((agt.indexOf("os/2")!=-1) ||
               (navigator.appVersion.indexOf("OS/2")!=-1) ||  
               (agt.indexOf("ibm-webexplorer")!=-1));

var is_mac    = (agt.indexOf("mac")!=-1);
var is_mac68k = (is_mac && ((agt.indexOf("68k")!=-1) ||
                          (agt.indexOf("68000")!=-1)));
var is_macppc = (is_mac && ((agt.indexOf("ppc")!=-1) ||
                           (agt.indexOf("powerpc")!=-1)));

// popup an error window if agent is less than 5.0
//if ((is_mac && is_ie4) || (is_mac && is_nav4) || (is_win && is_ie4) || (is_win && is_nav4) && (getCookie("hide_upgrade_window") != "true")) {
// createWindow("/upgradebrowser.php","upgrade_me","statusbar,menubar,height=400,width=470,resizable");
//}

/* function or opening a popup window */

function createWindow(cUrl,cName,cFeatures) {
var xWin = window.open(cUrl,cName,cFeatures);
xWin.focus();
}


---

← →
pasha_golub ©   (2004-05-26 11:23) [3]

Продолжение -->>


function getObject(objectName)
{
 var objItem;
 
 if (document.all)
   objItem = document.all[objectName];
 else
 {
   objItem = document.getElementById(objectName);
   if (objItem==null)
     objItem= document.getElementsByName(objectName)[0];
   if (document.getElementsByName(objectName).length>1)
     objItem=document.getElementsByName(objectName);
 }

 return objItem;
}

function getName (object)
{
 return (object.name) ? object.name : object.id;
}

function alterDivs (obj)
{
 while (obj)
 {
   if (obj.tagName == "DIV")
   {
     obj.className = "MENUITEM";
     obj.onmouseover = menuItemHighlight;
     obj.onmouseout = menuItemDeHighlight;
     obj.style.cursor = "default";
   }
   else
     alterDivs (obj.firstChild);
   
   obj = obj.nextSibling;
 }    
}

function createRollOver (divId, minWidth, minHeight)
{
 div = getObject (divId);
 div.className = "MENUTITLE";
 div.onmouseover = menuHighlight;
 div.onmouseout = menuPreDeHighlight;
 div.style.cursor = "default";
 
 menu = getObject (divId + "_menu");
 menu.className = "MENU_SHOW";
 
 if (minWidth && menu.offsetWidth < minWidth)
   menu.style.width = minWidth;
   
 if (minHeight && menu.offsetHeight < minHeight)
   menu.style.height = minHeight;

 menu.maxHeight = menu.offsetHeight;
 menu.time = 10;
 menu.acc = menu.maxHeight / Math.pow (menu.time / 2, 2);
 menu.step = 0;
 menu.thisHeight = 0;
 menu.style.top = -menu.offsetHeight + "px";
 
 menu.onmouseover = function()
 {
   my_parent = getObject (divId);
   my_parent.onmouseover();
 }
 
 menu.onmouseout = function()
 {
   my_parent = getObject (divId);
   my_parent.onmouseout();
 }

 alterDivs (menu.firstChild);

container = getObject (divId + "_container");
container.style.visibility = "visible";

}

function menuHighlight ()
{
 if (this.my_timer)
 {
   clearTimeout (this.my_timer);
   this.my_timer = null;
 }
 
 if (this.className != "MENUTITLE_SELECTED")
 {
   this.className = "MENUTITLE_SELECTED";
   
   objMenu = getObject (getName (this) + "_menu");
   
   if (objMenu.my_timer)
   {
     clearTimeout (objMenu.my_timer);
     objMenu.my_timer = null;
   }

   objMenu.direction = 1;
   objMenu.style.zIndex = 20;
   objMenu.my_timer = setTimeout ("menuScroll ("" + getName (objMenu) + "")", 100);
 }
}

function menuScroll (divId)
{
 div = getObject (divId);
 //alert(divId);
 
 //ShowDiv(window, divId, "");
 
 if (div.my_timer)
 {
   clearTimeout (div.my_timer);
   div.my_timer = null;
 }
 
 div.step += div.direction;
 
 if (div.step < (div.time / 2))
 {
   div.thisHeight = .5 * div.acc * Math.pow (div.step, 2);
   div.style.top = (-div.offsetHeight + div.thisHeight) + "px";
 }
 else
 {
   div.thisHeight = (div.maxHeight) - .5 * div.acc * Math.pow (div.time - div.step, 2);
   div.style.top = (-div.offsetHeight + div.thisHeight) + "px";
 }

 if (((div.direction == 1) && (div.step < div.time)) || ((div.direction == -1) && (div.step > 0)))
   div.my_timer = setTimeout ("menuScroll ("" + divId + "")", 10);
}

function menuPreDeHighlight ()
{
 this.my_timer = setTimeout ("menuDeHighlight ("" + getName (this) + "")", 200);
}

function menuDeHighlight (divId)
{
 obj = getObject (divId);
 clearTimeout (obj.my_timer);
 obj.my_timer = null;

 obj.className = "MENUTITLE";
 
 objMenu = getObject (divId + "_menu");
 objMenu.style.zIndex = 19;
 
 if (objMenu.my_timer)
   clearTimeout (objMenu.my_timer);

 objMenu.direction = -1;
 objMenu.my_timer = setTimeout ("menuScroll ("" + divId + "_menu")", 10);
}

function menuItemHighlight()
{
 this.className = "MENUITEM_SELECTED";
}

function menuItemDeHighlight()
{
 this.className = "MENUITEM";
}

function createRollOvers ()
{
//тута добавляем столько менюшек, скок нуно
createRollOver ("menu_about");
createRollOver ("menu_tests");
createRollOver ("menu_require");

}


---

← →
pasha_golub ©   (2004-05-26 11:29) [4]

использование, page.html -->>

<html>
<head>
<script language="JavaScript" src="menu_script.js"></SCRIPT>
...
</head>
<body>
  <table width=770 border=0 bgcolor=#828099>
<tr>
<!-- отступ -->
<td width="10">
</td>

<!-- Элемент меню -->
<td width="150">
 <div id="menu_about" name="menu_about" >
NAME OF MENU</div>
<!-- Это контейнер, который создали -->  
<div class="MENU_CONTAINER" id="menu_about_container">
           <div id="menu_about_menu" name="menu_about_menu">

                 <table cellspacing=0 cellpadding=0 border=0 width=200 class="MENUITEM">
                   <tr>
                     <td>
                      <ul class="menu_ul">
                        <li>FIRST ITEM</li>
                               <li>Second ITEM etc.</li>
                       </ul>
                     </td>
                   </tr>
                 </table>                  
  </div>
          </div>
</td>
...
</table> <!-- End of navigation panel -->
....
</html>


---

← →
PVOzerski ©   (2004-05-26 11:30) [5]

Есть же для nn6+/Mozilla document.getElementById(name) А для поддержки более ранних нетскейпов (4.xx) можно еще дублировать div"ы layer"ами.

---

← →
pasha_golub ©   (2004-05-26 11:31) [6]

Думаю, все понятно. В скрипте много лишнего, но я его из рабочего проекта вытащил, а чистить влом.

Если хочется посмотреть живую страницу, то http://www.farata.kr.ua/testsonline/

Вверху менюшки, удачи!

---

← →
VictorT ©   (2004-05-26 12:05) [7]

2 pasha_golub ©
Шо-то многовато кода... хочется своего и маленького.

2 PVOzerski ©
Спасибо, то что надо.

---

← →
VictorT ©   (2004-05-26 13:08) [8]

Сделал так, теперь ошибок не выдаёт:

menu.js

function MenuCall(Content, MenuID)
{
   document.write("<div class=menu2 id=\""+MenuID+"\" onMouseover=\"MenuActivate(""+MenuID+"")\" onMouseOut=\"MenuKill(""+MenuID+"")\"><nobr>"+Content+"</nobr></div>");
}

function MenuActivate(MenuID)
{
   document.getElementById(MenuID).style.visibility = "visible";
}
function MenuKill(MenuID)
{
   document.getElementById(MenuID).style.visibility = "hidden";
}

index.html

. . . . . . . . . . . .
<LINK href="dental.css" rel="stylesheet" type="text/css">
<script language="javascript" src="menu.js"></script>
. . . . . . . . . . . .
<span class=menu1 onmouseover=" MenuActivate("m1")" onMouseOut="MenuKill("m1")">
<a href="1" class=menu1  title="Тематичні розділи, цільова аудіторія, рекламна компанія">
 Про виставку </a></span><script  name="PopupMenu" language="javascript">
<!--
MenuContent=    "<A href=\"2\" title=\"Графік роботи, фото Палацу Містецтв, карта, інформація - як доїхати\"> Час і місце проведення</A><BR>"+
                "<A href=\"3\"> Про місто Львів</A>";
MenuCall(MenuContent, "m1");
// --></script>
. . . . . . . . . . . .

dental.css

. . . . . . . . . . . .
.menu2
{
. . . . . . . . . . . .
   position: absolute;
   visibility: hidden;
}
. . . . . . . . . . . .

Но есть теперь другая проблема. Подменю у меня должно появляться справа от пунктов меню, в ИЕ это так и происходит, а в НН и Опере - снизу
Посмотреть можно тут: http://www.galexpo.lviv.ua/dental/

---

← →
VictorT ©   (2004-05-26 13:09) [9]

Сделал так, теперь ошибок не выдаёт:

menu.js

function MenuCall(Content, MenuID)
{
   document.write("<div class=menu2 id=\""+MenuID+"\" onMouseover=\"MenuActivate(""+MenuID+"")\" onMouseOut=\"MenuKill(""+MenuID+"")\"><nobr>"+Content+"</nobr></div>");
}

function MenuActivate(MenuID)
{
   document.getElementById(MenuID).style.visibility = "visible";
}
function MenuKill(MenuID)
{
   document.getElementById(MenuID).style.visibility = "hidden";
}

index.html

. . . . . . . . . . . .
<LINK href="dental.css" rel="stylesheet" type="text/css">
<script language="javascript" src="menu.js"></script>
. . . . . . . . . . . .
<span class=menu1 onmouseover=" MenuActivate("m1")" onMouseOut="MenuKill("m1")">
<a href="1" class=menu1  title="Тематичні розділи, цільова аудіторія, рекламна компанія">
 Про виставку </a></span><script  name="PopupMenu" language="javascript">
<!--
MenuContent=    "<A href=\"2\" title=\"Графік роботи, фото Палацу Містецтв, карта, інформація - як доїхати\"> Час і місце проведення</A><BR>"+
                "<A href=\"3\"> Про місто Львів</A>";
MenuCall(MenuContent, "m1");
// --></script>
. . . . . . . . . . . .

dental.css

. . . . . . . . . . . .
.menu2
{
. . . . . . . . . . . .
   position: absolute;
   visibility: hidden;
}
. . . . . . . . . . . .

Но есть теперь другая проблема. Подменю у меня должно появляться справа от пунктов меню, в ИЕ это так и происходит, а в НН и Опере - снизу
Посмотреть можно тут: http://www.galexpo.lviv.ua/dental/

---

← →
pasha_golub ©   (2004-05-26 18:20) [10]

Витя, кода много, но там тебе нужно-то всего три функции, остальное все лишнее. Прояви усидчивость и почисть его. ;-) А код универсальный, работает под всем шо я смог найти

---

Страницы: 1 вся ветка

Форум: "Потрепаться";
Текущий архив: 2004.06.13;
Скачать: [xml.tar.bz2];

Наверх

Память: 0.52 MB
Время: 0.036 c