by Soulmonster January 2nd 2015, 8:38 am
Thanks! It helped, for the most part. If you look at the menu now:
http://www.saltvannsprat.com/h390-testmenyThe text of the menu and the border is now visible over the widget (depending upon screen resolution), but the color of the menu is hidden behind making the menu only semi transparent. When I open submenus (FISKER->KIRURGER) the complete submenu is visible over the widgets, so that works perfectly. Ideally, this could be fixed by just moving the widgets a bit down so there is no overlap between the new menu and the widget at the top.
I have also encountered another problem. 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?
EDIT: I just came to think that when I replace my current navbar with this new menu (with the premise that I really get it to work properly), then the new menu will be placed higher and might actually not overlap with the widgets after all. So the remaining problem with parts of the menu being concealed by the first widgets might not end up being a problem after all.