Help with CSS menu

Dear all,

I am currently working on a new menu to replace my custom navbar. See here: http://www.saltvannsprat.com/h390-testmeny

The new menu that I am working on, is the black meny. After some struggling I have finally been able to make the menu appear on top, although the right part of it is still hidden under the widget (depending upon screen resolution). I don't consider this to be a problem, though, since the new menu will replace the old menu and hence be positioned above the widgets.

The menu I am making is fairly large in content and I actually exceeded the HTML content limit on my HTML test page. One of the reasons for this is that the HTML contains the following javascript (that opens a pop-up box when hovering over fishes in the menu) which contains lots of data in the form of variable data (only two such variable data in the script below, I removed the others):

Code:

    <script>
            (function() {
            var data = {

    "A. achilles" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Expert.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Volum: <em>>700 liter og >1,8 m</em>.<br><hr><em><strong><div align="center"><a href="http://www.saltvannsprat.com/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

    "Z. veliferum" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Volum: <em>>900 liter og >2,4 m</em>.<br><hr><em><strong><div align="center"><a href="http://www.saltvannsprat.com/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

    "Z. xanthurum" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Volum: <em>>450 liter og >1,5 m</em>.<br><hr><em><strong><div align="center"><a href="http://www.saltvannsprat.com/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

            };
    var cells = document.getElementById('data-table').getElementsByTagName('td'), i = 0, c;
    for(; (c = cells[i++]); ) {
        var id = c.getAttribute('rel');
        if(data[id]) {
            var x = document.createElement('div');
            x.className = 'popup-data';
            x.innerHTML = data[id];
            c.appendChild(x);
        }
    }
    })();</script>

Can I change this so the javascript is called from a separate javascript file rather than being embedded in the HTML code? I tried creating a new javascript in the javascript console, but it doesn't seem to work. Does the HTML require some call function for the javascript to function?

Alternatively, could all the variable data be locaced in an external file?

You can create a new JavaScript and leave everything unchecked so it will not be loaded anywhere on your forum. No matter if a script is loaded or not, it will be assigned a source ID that'll look like "12345.js" and you can link that source through HTML <script> tags.

Bloodbath wrote:[quotelink="http://www.avacweb.com/t2289-help-with-css-menu#21731"]You can create a new JavaScript and leave everything unchecked so it will not be loaded anywhere on your forum. No matter if a script is loaded or not, it will be assigned a source ID that'll look like "12345.js" and you can link that source through HTML <script> tags.

Thank you! My main problem now is that the sub menus (e.g. the table that opens when FISKER -> Kirurger) is quite large and one often has to scroll down to see all fishes (depending upon screen size/resolution, surely). So I am thinking about moving this new menu to the very top of my forum, above the banner. Any thoughts on this? How can this be done?

EDIT: I managed to position it where I want it. But I still need to lower the logo downwards.

New problem! I was starting to add information for the sub menus, basically pasting in more tables with fishes when I got an error message that the HTML file is too large. I am using the HTML. I am using the HTML Pages Management and there obviously is some limit to how large HTML files it can handle.

Is there somewhere else I can have the HTML code? Secondly, when I replace the custom navbar I already have, can I place the new menu anywhere I like it?

You can indeed upload the HTML file to a separate server and link the page through an <iframe> element, though if you do that, your page's JavaScript will not be able to interact with it, means you'll have to include the entire JavaScript you want to use on that HTML file as well -- and any data used by forumotion will also not be accessible to the iframe, either.

Bloodbath wrote:[quotelink="http://www.avacweb.com/t2289-help-with-css-menu#21758"]You can indeed upload the HTML file to a separate server and link the page through an <iframe> element, though if you do that, your page's JavaScript will not be able to interact with it, means you'll have to include the entire JavaScript you want to use on that HTML file as well -- and any data used by forumotion will also not be accessible to the iframe, either.

So I would need to include CSS and Javascripts in the external HTML files? Any suggestion on where to host such external HTML files?

I recommend using 000webhost since there's where I'm hosting my servers. Or x10hosting maybe

gill wrote:[quotelink="http://www.avacweb.com/t2289-help-with-css-menu#21770"]I recommend using 000webhost since there's where I'm hosting my servers. Or x10hosting maybe

I personally use x10hosting, but if you have the money, @Agathos I would really recommend paying for a professional host (and not a shared one).

I checke dout x10hosting but it wouldn't allow more registrations from my country

Anyway, I don't really need web hostng, do I? All I need is a public server that can host my files so that my HTML page on Forumtion can embed these when required. So any good file sharing service would do the trick, or am I wrong?

EDIT: I tried making a HTML file with one of the tables form my menu. I took the HTML code (from the HTML console) and copied in the relevant CSS (from the CSS console) into a new HTML file. I then tried to open this file in my web browser to see that it would look okay. The formattign seemed to be correct but for some reason, the java script didn't work.

What did your browser console tell you? You can open it by pressing Ctrl+Shift+J on Chrome, on Firefox by inspecting an element and switching to the Console tab.

Bloodbath wrote:[quotelink="http://www.avacweb.com/t2289-help-with-css-menu#21774"]What did your browser console tell you? You can open it by pressing Ctrl+Shift+J on Chrome, on Firefox by inspecting an element and switching to the Console tab.

I found this error but believe it is unrelated: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

Here's the complete HTML page:

And here's the HTML code (but without the large table code found within the <table> tags and with a reduced no. of var data entries):

Code:

[panda=html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
.datagrid2 table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  z-index: 999;
}

.datagrid2 {
  font: normal 12px/150% Verdana, Arial, Helvetica, sans-serif;
  color: #999;
  overflow: scroll;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 1050px; 
  height: 800px;
  z-index: 999;
  border: 1px solid #222;
  background-color: #111;
  background-image: linear-gradient(#444, #111);
}

.datagrid2 table td, .datagrid2 table th {
  padding: 2px 2px !important;
  z-index: 990 !important;
}

.datagrid2 table tbody td {
  color: #00557F;
  border: 1px solid #222;
  font-size: 12px;
  font-weight: normal;
  z-index: 999 !important;
}

.datagrid2 table tbody td:first-child {
  border-left: none;
}

.datagrid table2 tbody tr:last-child td {
  border-bottom: none;
}
</style>
</head>

<div class="datagrid2">
                            
   <p class="headline-table">
                    Gylter er det norske navnet på fisker fra familien Labridae. Denne familien er stor og variert med over 600 arter fordelt på 82 slekter. Gylter er generelt små (< 20 cm), fargerike og fredelige fisker og egner seg dermed godt i akvarier. De er også hovedsaklig kjøttetere.             
   </p>
                            
   <table id="data-table">
        </table>
</div>


<script>
        (function() {
        var data = {

"A. caeruleopunctatus" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Volum: <em>>1000 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"A. lineatus" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Volum: <em>>200 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"A. meleagrides" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Volum: <em>>500 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"A. neoguinaicus" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Volum: <em>>300 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"B. anthioides" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Volum: <em>>300 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"B. bimaculatus" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>150 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"B. masudai" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>250 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"B. sepiacaudus" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>200 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"C. fasciatus" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Hard.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Volum: <em>>500 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"C. aurantidorsalis" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>300 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"C. bathyphilus" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>250 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"C. cyanopleura" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>300 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"C. exquisitus" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>300 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"C. filamentosus" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>250 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"C. laboutei" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>250 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"C. lineatus" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>250 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"W. nigropinnata" : 'Revs-trygg: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br>Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Average.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Volum: <em>>150 liter</em>.<br><hr><em><strong><div align="center"><a href="/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

        };
var cells = document.getElementById('data-table').getElementsByTagName('td'), i = 0, c;
for(; (c = cells[i++]); ) {
    var id = c.getAttribute('rel');
    if(data[id]) {
        var x = document.createElement('div');
        x.className = 'popup-data';
        x.innerHTML = data[id];
        c.appendChild(x);
    }
}
})();</script>
</body>
</html>

Are there no JavaScript errors? Could you try copying just the script into a JSHint and show me the outcome?

try replacing

})();</script>

with

});</script>

_Twisted_Mods_ wrote:[quotelink="http://www.avacweb.com/t2289-help-with-css-menu#21783"]try replacing

})();</script>

with

});</script>

Actually, yes, I see the issue now.

You are defining [ic]data[/ic] within a closure -- this means that the variable is only visible when the function executes, which will be only once. The event handler cannot read [ic]data[/ic], even if they were defined within the same scope as during the runtime, [ic]data[/ic] will be undefined. Try using [ic]window.data = ...[/ic] instead.

Slightly embarrased here. There was nothing wrong with the java script, the following CSS was missing:

Code:

[panda=css].popup-data {
          position:absolute;
          z-index: 999;
          background: #FFEECA;
          color: #111;
          padding: 5px;
          border: 1px solid #000;
          display: none;
          max-width: 300px;
          font-size: 11px;
        }

#data-table td:hover .popup-data, .tech-word:hover .popup-data {
      display: block;
        }

I used 000webhost to host gylter.html. It's the fourth possible selection on the menu FISKER. As you can see, it works now: http://www.saltvannsprat.com/h390-testmeny. I still miss some CSS; but that should be managable

I have made a lot of progress on this, mostly thanks to others, and I am happy with how it works on computers, but unfortunately, it does not work nicely using tablets, although it should. Can anyone spot what the problem is?

I think I figured out what the problem was when using hand-held devices, so that problem is sort of solved now.

Anyway, the menu is now finished and can be seen here (unless yuo are on a phone, in which it will not be visible): http://www.saltvannsprat.com/h390-testmeny

It works really nice. BUT, then I decided to add it to my forum on all the pages, and not just on a test page. I tried both adding it to widgets and into the templates. with both methods it works, the menu appears where it should be and all, but it horribly slows down the forum making it un-navigable! I even get this error message in my browser at times:

[ic]Request limit exceeded

It appears that your computer has made too many requests on the same page recently. Please make sure your antivirus is up to date.

If you have any questions about this message, feel free to contact the support [/ic]

Is there any solutions to this?

Are you sure you aren't creating AJAX requests in your script?

Not just ajax but any requests to your forums url can cause this.
This includes iframes, scripts, stylesheets, images etc...

There are no AJAX requests in the menu. It is pure HTML and CSS (with one small JS). The problem is that the menu became too large in terms of lines of code (there is a size limit in the FM HTML console), so I had to split it up into about 50 separate HTML pages and then embed these using iframe tags. So I basically have a skeleton structure for the menu in HTML which I can add to a widget or the templates to have it included on my forum, and this skeleton structure then gets the additional HTML content of the menu from about 50 separate HTML pages. To make these embedded pages look right using <iframe> I had to include the CSS and the JS in all of these files (because I had to chose to not use "forum header and footer", which I believe contains the forums CSS and JS). So whenever the menu is loaded, which is whenever a page is refreshed or when one navgates my forum, all of these 50 pages are loaded from the <iframe> tags, containing 50 copies of the same CSS and JS file.

So ideally, I would like the browser to only load the content of the menu whenever one hovers over the menu. This means members could browse the forum, read and post, normally, without the browser having to load all of this data all the data, and then ONLY when a member decides to use the menu will this data be loaded.

OR, I would like to be able to have a larger HTML file on FM so I could include the whole menu in one file without having to split up into so many additional pages.

OR, I would like to be able to extract the CSS and JS from the 50 separate pages and keep them in the JS console and FM CSS file. I have tried putting the JS in teh JS console, but i doesn't work AND makes the default Lastest Topics widget fail.

I just tried adding the entire menu to the templates (without splitting it into 50 separate files and using <iframe>, but the tenmplate console also has a size limitations (about 1680 lines of code)

And there's a limitation on the HTML code length in widgets, too.

This means, I suppose, that I can't add my entire menu to my forum in one complete code, it must be broken up somehow and stored in separate pieces that are then combined using <iframe>.

What I can do, though, is to prevent the CSS and JS from being loaded 50+ times every time a page is loaded on my forum, by keeping these elements in the CSS and JS sections and not on each HTML page. Maybe this will make the menu load quicker and stop the sluggishness. I could also consider making the images smaller, I suppose. Any other ideas?

That will be why then.
The character limit of a html page is 64000 characters, I really don't see you hitting that with just a menu. What is the error message your are getting?

Agathos wrote:[quotelink="http://www.avacweb.com/t2289p15-help-with-css-menu#22091"]And there's a limitation on the HTML code length in widgets, too.

This means, I suppose, that I can't add my entire menu to my forum in one complete code, it must be broken up somehow and stored in separate pieces that are then combined using <iframe>.

What I can do, though, is to prevent the CSS and JS from being loaded 50+ times every time a page is loaded on my forum, by keeping these elements in the CSS and JS sections and not on each HTML page. Maybe this will make the menu load quicker and stop the sluggishness. I could also consider making the images smaller, I suppose. Any other ideas?

Loading 50 pages with each the same CSS styles is redundant. Just use the FM stylesheet to include all of your CSS, and create a new JavaScript that contains all of your minified JS.