uitschuifmenu werkt in IE en niet in FF

Status
Niet open voor verdere reacties.
Een ander script gebruiken. Het script waar jij naar linkt maakt gebruik van VBScript:
<Script Language="VBscript">
Klik om te vergroten...
Dat werkt alleen in IE:
When employed in Microsoft Internet Explorer, VBScript is similar in function to JavaScript, as a language to write executable functions that are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page, to perform tasks not possible in HTML alone. Other web browsers such as Firefox, and Opera do not have built-in support for VBScript. This means that where client-side script is required on a web site, developers almost always use JavaScript for cross-browser compatibility.
Klik om te vergroten...
 
bedankt voor je reactie. Weet je toevallig een script met dit soort uitschuifknopjes?
 
Zo'n menu is erg makkelijk te maken met CSS en een klein beetje Javascript. Ik heb hier de code even vertaald naar JS (van VBS af), maar eigenlijk is deze code verschrikkelijk slecht. Leejoo-code is meestal zo'n 10 jaar geleden geschreven en nooit geupdate. Maargoed, hier het idee:
Verander dit
HTML: 
<Script Language="VBscript">
      <!--
      Option Explicit
      DIM menuID,menuObj,cellBk
      SUB ShowHide(menuID)
      menuObj = "Link" & menuID
      cellbk = "Head" & menuID
      // CHECK IF OPEN
      if document.all.item(menuObj).className = "LINKSON" then    'IF MENU OPEN THEN CLOSE
      document.all.item(menuObj).className = "LINKSOFF"
      document.all.item(cellBk).style.backgroundColor = "#0000FF"   ' SET CELL BACKGROUND COLOUR BLUE           
      ELSE
      document.all.item(menuObj).className = "LINKSON"               ' OPEN MENU   
      document.all.item(cellBk).style.backgroundColor = "#3366FF"  ' SET CELL BACKGROUND COLOUR RED           
      END IF
      END SUB
      -->
      </Script>
naar
HTML: 
<script type='text/javascript'>

   var menuID, menuObj, cellBk;

   function ShowHide(menuID)
   {
      menuObj = document.getElementById("Link" + menuID);
      cellBk = document.getElementById("Head" + menuID);

      if(menuObj.className == "LINKSON")
      {
         menuObj.className = "LINKSOFF";
         cellBk.style.backgroundColor = "#0000FF";
      }else{
         menuObj.className = "LINKSON";
         cellBk.style.backgroundColor = "#3366FF";
      }
   }
</script>
dat zou moeten werken.

Nogmaals, ik raad je aan om een ander script te vinden (een efficient script kan in zo'n 30 regels denk ik zo).



:thumb:
 
Laatst bewerkt:
Bedankt vegras, ik denk dat ik ergens iets mis in de code. De volledige code komt namelijk boven de knopjes in de pagina te staan.
Ben al klein weekje aan het zoeken voor een goed script, echter nog niets gevonden. (Behalve dat Leejoo script)
 
Laatst bewerkt:
achter het woord javascript ( <script type='text/javascript> ) miste een ' dat zorgde ervoor dat ik code op de pagina te zien kreeg. Dit even voor anderen die misschien het script ook gebruiken.

Ik kan nu de knopjes wel aanklikken in FF en het werkt ook. Echter er komt geen handje in beeld waardoor je ziet dat het een aanklikknopje is. Weet iemand hier nog een oplossing voor? Het lijken nu net dode knopjes.
Bij submenu (als menu uitgeklapt is) is handje overigens wel zichtbaar
 
Ah, goed gezien. Heb het gelijk even veranderd.

Over je handje-vraag: er is een css property genaamd 'cursor'. Zie hier. In de code staat echter wel een cursor: hand;. Nu heb ik even geen tijd om er helemaal in te duiken, mischien dat iemand anders het ziet.


:thumb:
 
De hand is wel zichtbaar in IE echter in FF is deze er niet. Waardoor knopjes dode knopjes lijken.
 
Oh, op die manier. Kan je eens je volledige html pagina hier neerzetten?


:thumb:
 
HTML: 
<html>
<head>
	<title>thermografie</title>
<meta name="AUTHORS" content=".."><meta name="COPYRIGHT" content="...">
<meta name="description" content="...">
<meta name="keywords" content="...">

<!--knopjes links-->

<style>
      <!--
      a.nav:link   { font-family: Verdana,Arial,San Serif; font-size: 12px; text-decoration: none; color: #000000 }
      a.nav:visited { font-family: Verdana,Arial,San Serif; font-size: 12px; text-decoration: none; color: #000000 }
      a.nav:active { font-family: Verdana,Arial,San Serif; font-size: 12px; text-decoration: none; color: #000000 }
      a.nav:hover  { font-family: Verdana,Arial,San Serif; font-size: 12px; text-decoration: none; color: #660000 }
      .HEADING     { cursor: hand; font-family: Verdana,Arial,San Serif; font-size: 12px; color: #FFFFFF; 
       background-color: #943534; font-weight: none; 
       border: 2 solid #660000 }
      .LINKSOFF    { display: none; font-family: Verdana,Arial,San Serif; font-size: 12px; color: #660000 }
      .LINKSON     { display: inline; font-family: Verdana,Arial,San Serif; font-size: 12px; color: #FF0000 }
      -->
      </style>
     
 
<script type='text/javascript'>
 
   var menuID, menuObj, cellBk;
 
   function ShowHide(menuID)
   {
      menuObj = document.getElementById("Link" + menuID);
      cellBk = document.getElementById("Head" + menuID);
 
      if(menuObj.className == "LINKSON")
      {
         menuObj.className = "LINKSOFF";
         cellBk.style.backgroundColor = "#943534";
      }else{
         menuObj.className = "LINKSON";
         cellBk.style.backgroundColor = "#660000";
      }
   }
</script>


<!--hier stopt knopjes links-->

</head>
<body bgcolor="ffffff" topmargin="0" leftmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">

<font face="Arial, Helvetica, sans-serif" color="#000033" size="-1">



<!-- knopjes links-->
<div align="left">
        <left>
      <table>
      <td ID="head0" ALIGN="center" width="113" height="15" CLASS="HEADING" ONCLICK="ShowHide(0)">IR training</td>
      </tr>
      <tr>
      <td ALIGN="center" bgcolor="#cccccc">
      <!-- Menu 1 -->
      <div ID="Link0" CLASS="LINKSOFF">
      <a CLASS="nav" href="blanco.html">Level 1 training</a><br>
      <a CLASS="nav" href="blanco.html">Level 2 training</a><br>
      <a CLASS="nav" href="blanco.html">Level 3 training</a><br>  
      <a CLASS="nav" href="blanco.html">Camera handling</a><br>
      <a CLASS="nav" href="blanco.html">Training op maat</a><br><br>     
      </div>
      </td>
      </tr>
      <tr>
      <td ID="head1" ALIGN="center" CLASS="HEADING" ONCLICK="ShowHide(1)">Research</td>
      </tr>
      <tr>
      <td ALIGN="center" bgcolor="#cccccc">
      <!-- Menu 2 -->
      <div ID="Link1" CLASS="LINKSOFF">
      <a CLASS="nav" href="blanco.html"><b>Menu2</b></a><br>
      <a CLASS="nav" href="blanco.html">Sub1</a><br>
      <a CLASS="nav" href="blanco.html">Sub2</a><br>
      <a CLASS="nav" href="blanco.html">Sub3</a><br>
      <a CLASS="nav" href="blanco.html">Sub4</a><br>
      <a CLASS="nav" href="blanco.html">Sub5</a><br>   
      </div>
      </td>
      </tr>
      <tr>
      <td ID="head2" ALIGN="center" CLASS="HEADING" ONCLICK="ShowHide(2)">....</td>
      </tr>
      <tr>
      <td ALIGN="center" bgcolor="#cccccc">
      <!-- Menu 3 -->
      <div ID="Link2" CLASS="LINKSOFF">
      <a CLASS="nav" href="blanco.html"><b>Menu3</b></a><br>
      <a CLASS="nav" href="blanco.html">Sub1</a><br>
      <a CLASS="nav" href="blanco.html">Sub2</a><br>
      <a CLASS="nav" href="blanco.html">Sub3</a><br>
      <a CLASS="nav" href="blanco.html">Sub4</a><br>
      <a CLASS="nav" href="blanco.html">Sub5</a><br>   
      </div>
      </td>
      </tr>
      <tr>
      <td ID="head3" ALIGN="center" CLASS="HEADING" ONCLICK="ShowHide(3)">....</td>
      </tr>
      <tr>
      <td ALIGN="center" bgcolor="#cccccc">
      <!-- Menu 4 -->
      <div ID="Link3" CLASS="LINKSOFF">
      <a CLASS="nav" href="blanco.html"><b>Menu4</b></a><br>
      <a CLASS="nav" href="blanco.html">Sub1</a><br>
      <a CLASS="nav" href="blanco.html">Sub2</a><br>
      <a CLASS="nav" href="blanco.html">Sub3</a><br>
  

<!-- Onder deze regel moet uw tekst beginnen!!! (VOOR dit punt geen tekst invoeren.)-->
<blockquote>







<!-- Hier moet tekst stoppen!!! (NA dit punt geen tekst meer invoeren.)-->

</font>
</body>
</html>
 
Aha. Maar, mn firefox zegt dit:
Waarschuwing: Fout tijdens het parsen van waarde voor ‘cursor’. Declaratie genegeerd.
Bronbestand: file:///C:/Users/Gebruiker/Desktop/test.html
Regel: 16
Klik om te vergroten...
Regel 16:
HTML: 
      .HEADING     { cursor: hand; font-family: Verdana,Arial,San Serif; font-size: 12px; color: #FFFFFF;
Klik om te vergroten...
Het correcte cursor-waarde is pointer.

Dit wordt dus je style:
HTML: 
<style>
      <!--
      a.nav:link   { font-family: Verdana,Arial,San Serif; font-size: 12px; text-decoration: none; color: #000000 }
      a.nav:visited { font-family: Verdana,Arial,San Serif; font-size: 12px; text-decoration: none; color: #000000 }
      a.nav:active { font-family: Verdana,Arial,San Serif; font-size: 12px; text-decoration: none; color: #000000 }
      a.nav:hover  { font-family: Verdana,Arial,San Serif; font-size: 12px; text-decoration: none; color: #660000 }
      .HEADING     { cursor: pointer; font-family: Verdana,Arial,San Serif; font-size: 12px; color: #FFFFFF; 
       background-color: #943534; font-weight: none; 
       border: 2 solid #660000 }
      .LINKSOFF    { display: none; font-family: Verdana,Arial,San Serif; font-size: 12px; color: #660000 }
      .LINKSON     { display: inline; font-family: Verdana,Arial,San Serif; font-size: 12px; color: #FF0000 }
      -->
      </style>


:thumb:
 
thanks voor je hulp.
Overigens, bovenaan die regel met DOCTYPE heb ik er niet in staan. De site is gebouwd met frames. Die regel met DOCTYPE staat in het topframe en niet in dit mainframe.
 
yes, het werkt. Probleem is opgelost. Ontzettend bedankt voor je hulp.
:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan