webForumDet fria alternativet
Logga in / Bli medlem

Problem med expanderbar meny i Firefox!

JavaScript

15 svar · 828 visningar · startad av tico

ticoMedlem sedan dec. 200417 inlägg
Frågan#1

God Jul & Gott nytt år!
Jag är nybörjare på detta så vissa saker kanske är självklara för er. Jag har ett litet problem som jag inte kan lösa och frågar därför om hjälp.

Jag har en expanderbar meny som visas korrekt (eller som jag vill) i IE. I firefox fungerar menyn lite konstigt.

Menyn ska fungera så att en bild visas före ett alternativ ex. *alternativ 1. När man klickar på bilden eller texten så expanderas menyn och underalternativ visas, vidare så ändras bilden före huvudalternativet. Inga konstigheter.

Problem 1- Om jag bara öppnar meny-dokumentet i FF så fungerar menyn lite konstigt. Texten går inte att klicka på. Utan menyn expanderas enbart om man klickar på bilden. Annars fungerar den som det ska.

Problem 2- Om jag lägger menyn i en Frame så fungerar den inte alls vissa gånger. Ibland fungerar den som ovan (prob 1) och i de flesta fall fungerar den inte alls.
Jag bifogar min indexfil samt menykoden.
Tack på förhand.....

Mvh
Tico
------------------------------------------------------------------
"Frames"-filen ser ut såhär:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MainEducationPage</title>
</head>
<frameset rows="150,*" framespacing="0" frameborder="NO" border="0">
<frame src="" name="top" frameborder="No" scrolling="no" noresize marginwidth="0" marginheight="0" framespacing="0">
<frameset cols="150,*" framespacing="0" frameborder="NO" border="0">
<frame src="expanderbarmeny.html" name="menu" frameborder="No" scrolling="no" noresize marginwidth="0" marginheight="0"

framespacing="0">
<frame src="" name="main" frameborder="No" scrolling="auto" noresize marginwidth="0" marginheight="0" framespacing="0">
</frameset>
</frameset>
<noframes>Please upgrade your browser.
</noframes>
</html>
------------------------------------------------------------------------
Min menykod:

<html>

<head>

<title>Expanderbar meny</title>

<style>

#huvud {font-family: verdana; font-size: 8pt; text-decoration: none; color: #000000; cursor: hand}
#sub {font-family: verdana; font-size: 8pt; text-decoration: none; color: #000000; cursor: hand}
#u1 {font-family: verdana; font-size: 8pt; text-decoration: none; color: #000000; cursor: hand}
#u2 {font-family: verdana; font-size: 8pt; text-decoration: none; color: #000000; cursor: hand}
#u3 {font-family: verdana; font-size: 8pt; text-decoration: none; color: #000000; cursor: hand}
#u5 {font-family: verdana; font-size: 8pt; text-decoration: none; color: #000000; cursor: hand}

</style>

<script language="JavaScript">

function visadolj1(obj) {

if(obj.style.display=='none') {
obj.style.display='block'
var x = 1
}
else {
obj.style.display='none'
var x = 2
}
var bild = new Image()
bild.src = "knapp.ut.gif"
var oldbild = new Image()
oldbild.src = "knapp.in.gif"
if(x == 1) {
document.images["a1"].src = bild.src
}
if(x == 2) {
document.images["a1"].src = oldbild.src
}
}

function visadolj2(obj) {

if(obj.style.display=='none') {
obj.style.display='block'
var x = 1
}
else {
obj.style.display='none'
var x = 2
}
var bild = new Image()
bild.src = "knapp.ut.gif"
var oldbild = new Image()
oldbild.src = "knapp.in.gif"
if(x == 1) {
document.images["a2"].src = bild.src
}
if(x == 2) {
document.images["a2"].src = oldbild.src
}
}

function visadolj3(obj) {

if(obj.style.display=='none') {
obj.style.display='block'
var x = 1
}
else {
obj.style.display='none'
var x = 2
}
var bild = new Image()
bild.src = "knapp.ut.gif"
var oldbild = new Image()
oldbild.src = "knapp.in.gif"
if(x == 1) {
document.images["a3"].src = bild.src
}
if(x == 2) {
document.images["a3"].src = oldbild.src
}
}

function visadolj5(obj) {

if(obj.style.display=='none') {
obj.style.display='block'
var x = 1
}
else {
obj.style.display='none'
var x = 2
}
var bild = new Image()
bild.src = "knapp.ut.gif"
var oldbild = new Image()
oldbild.src = "knapp.in.gif"
if(x == 1) {
document.images["a5"].src = bild.src
}
if(x == 2) {
document.images["a5"].src = oldbild.src
}
}
</script>

</head>

<body>

<div id="huvud" onclick="visadolj1(u1)"><img src="knapp.in.gif" name="a1"> Avdelning 1</div>
<div id="u1" style="display: none">
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 1</a><br>
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 2</a><br>
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 3</a><br>
</div>

<div id="huvud" onclick="visadolj2(u2)"><img src="knapp.in.gif" name="a2"> Avdelning 2</div>
<div id="u2" style="display: none">
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 1</a><br>
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 2</a><br>
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 3</a><br>
</div>

<div id="huvud" onclick="visadolj3(u3)"><img src="knapp.in.gif" name="a3"> Avdelning 3</div>
<div id="u3" style="display: none">
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 1</a><br>
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 2</a><br>
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 3</a><br>
</div>

<div id="huvud"><img src="knapp.neutral.gif" id="a4"> <a href="http://www.mozilla.se" target="main" id="huvud">Avdelning 4</a></div>

<div id="huvud" onclick="visadolj5(u5)"><img src="knapp.in.gif" name="a5"> Avdelning 5</div>
<div id="u5" style="display: none">
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 1</a><br>
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 2</a><br>
   <img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main" id="sub">Länk 3</a><br>
</div>

</body>

</html>

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#2

Här har jag ändrat lite här och där:

<html>

<head>

<title>Expanderbar meny</title>

<style type="text/css">
#meny { font: 8pt Verdana, sans-serif; }
#meny div { cursor: pointer; }
#meny a { text-decoration: none; color: #000000; }
#meny ul { margin: 0; padding: 0; list-style: none; }
</style>

<script language="JavaScript">
// Dölj menyerna för dem som har JavaScript aktiverat
document.write('<style type="text/css">\n\
#meny ul { display: none; }\n\
</style>');

function visadolj(menyNo) {
	var menyObj = document.getElementById("u" + menyNo);

	if(menyObj.style.display != 'block') {
		menyObj.style.display = 'block'
		document.images["a" + menyNo].src = "knapp.ut.gif";
	} else {
		menyObj.style.display = 'none'
		document.images["a" + menyNo].src = "knapp.in.gif";
	}
}
</script>

</head>

<body>

<div id="meny">

<div onclick="visadolj(1)"><img src="knapp.in.gif" name="a1">Avdelning 1</div>
<ul id="u1">
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 1</a></li>
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 2</a></li>
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 3</a></li>
</ul>

<div onclick="visadolj(2)"><img src="knapp.in.gif" name="a2">Avdelning 2</div>
<ul id="u2">
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 1</a></li>
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 2</a></li>
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 3</a></li>
</ul>

<div onclick="visadolj(3)"><img src="knapp.in.gif" name="a3">Avdelning 3</div>
<ul id="u3">
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 1</a></li>
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 2</a></li>
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 3</a></li>
</ul>

<div><img src="knapp.neutral.gif" id="a4">
	<a href="http://www.mozilla.se" target="main">Avdelning 4</a>
</div>

<div onclick="visadolj(5)"><img src="knapp.in.gif" name="a5">Avdelning 5</div>
<ul id="u5" style="display: none">
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 1</a></li>
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 2</a></li>
   <li><img src="knapp.neutral.gif"> <a href="http://www.mozilla.se" target="main">Länk 3</a></li>
</div>

</div>

</body>

</html>
Troxys avatarTroxyMedlem sedan mars 20041 505 inlägg
#3

dectgap, hur gör man för att man bara ska kunna öppna en meny åt gången? Dvs. öppnar man en meny ska den som är öppen stängas.

Jag använder nämligen ett menysystem som liknar det du postade.

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#4

Helst ska man skilja mellan funktionaliteten, som bör ligga i JavaScript-koden, och strukturen, som bör ligga i HTML-koden.
Här är en sådan meny jag har byggt:
http://roslund.homeip.net/mattias/tester/jsMeny2
Den använder dessutom cookies för att hålla reda på vilken meny som var öppen när man lämnade sidan.

ticoMedlem sedan dec. 200417 inlägg
#5

Tackar så mycket. Fungerar utmärkt.

Jag har en till fråga - Hur kan jag lättast ändra färg på länken som har valts. Jag har använt stilmallen förut där länken blev ex. röd när man klickat på den, problemet var att så fort man klickade någonstans så ändrade den färg till ursprungsfärgen.
Mvh
Tico

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#6

Lägg till följande mellan JavaScript-taggarna:

var lastSelectedLink = null;

window.onload = function() {
	for(var i in document.links) {
		document.links[i].onclick = function() {
			if(lastSelectedLink)
				lastSelectedLink.className = "";
			this.className = "selectedLink";
			lastSelectedLink = this;
		}
	}
}
ticoMedlem sedan dec. 200417 inlägg
#7

Hej igen dectgap!
Jag har provat scriptet men får den inte att fungera. Jag tror jag gör ngt fel. Jag använder exakt den kod du föreslog för menyn samt det senare scriptet men det händer inget.
Glömmer jag att göra ngt? Kom ihåg att jag bara är nybörjare.

Mvh
Tico

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#8

Så här blir det när det är klart:
http://member.webforum.nu/4192/tico.html
Jag lade bara till en iframe för att länkarna skulle kunna öppnas någonstans.

ticoMedlem sedan dec. 200417 inlägg
#9

Nu fungerar allt som jag vill.
Tack för all hjälp.
Om man vill lägga till lite funktioner, hur svårt skulle det vara att t.ex. lägga till en NEXT knapp som för en vidare till nästa underkategori? Om man t.ex. befinner sig i Underkategori 1 och klickar på knappen för att komma vidare till Underkategori 2.
Mvh
Tico

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#10

Är det så här du menar?
http://member.webforum.nu/4192/tico2.html

Problemet är nu att undermenyn inte automatiskt öppnas när man besöker en länk som finns i den genom att trycka på knappen "Next", men om det i övrigt fungerar som du vill ska det gå att ordna.

ticoMedlem sedan dec. 200417 inlägg
#11

Fungerar mycket bra. Försöker nu göra en previous-knapp där funktionen bör vara snarlik som goToNextLink (tycker jag), men mina bristande kunskaper räcker inte till.
Bör inte funktionen se ut så här? :
----------------------
function goToPreviousLink(){
if(!lastSelectedLink)
followLink(document.links[0]);
else{
for(var i = document.links.length; i>o; i--)
if(document.links *== lastSelectedLink){
if(document.links[i-1])
followLink(document.links[i-1]);
break;
}
}

}
-----------------------------
Om !LastselectedLink så kan den väl ge en Alert eller helt enkelt börja vid första länken, inte så viktigt då jag mest gör detta för att lära mig. Men resterande del av funktionen bör väl fungera? Vad gör jag för fel?

Och kan man lägga knappen i en annan Frame eller iFrame? hur fungerar det i så fall? (Kan inte hitta information på nätet om det)

Jag vill ändå tacka för hjälp, jag har lärt mig massor.

Mvh
Tico*

ticoMedlem sedan dec. 200417 inlägg
#12

ok. Nu fungerar funktionen som jag vill. Blandade ihop 0 (noll) med o.
Men hur gör man när man har knappen i en Frame eller iFrame. Fungerar det likadant?

Palles avatarPalleMedlem sedan apr. 20003 174 inlägg
#13

Flyttad från HTML, XHTML & CSS.

mvh Palle
Moderator webForum

CaleMedlem sedan mars 200490 inlägg
#14

Helst ska man skilja mellan funktionaliteten, som bör ligga i JavaScript-koden, och strukturen, som bör ligga i HTML-koden.
Här är en sådan meny jag har byggt:
http://roslund.homeip.net/mattias/tester/jsMeny2
Den använder dessutom cookies för att hålla reda på vilken meny som var öppen när man lämnade sidan.

Hej (hoppas det är ok att låna tråden då det rör samma ämne)

Snygg och enkel meny :)
jag lånade den o det funkar ju bra, simpelt är det också till skillnad från annat jag tittat på :)

men nu till mitt problem, inget jättekomplicerat o det är nog ett vanligt problem antar jag..

menyn funkar fint i ie o ff ända tills jag flyttar in den på min sida..
då ser det bra ut i ie men i ff händer följande:
menyn är helt öppnad redan från början o det går inte att stänga någonting..
jag misstänker att det jag med <div> o css att göra..
jag har bl.a. en <div> som gör sidan smalare, o då måste ju menyn ligga i den..
kan det ha med förändrade mått att göra?

menyn inlagd på sidan:
http://www.bergsland.net/new/gallery.htm

lös meny:
http://www.bergsland.net/new/dommeny.htm

Edit:
Nu uppstod ett problem till, när jag har ditt javascript med så slutar det andra att fungera, det som ska öppna ett nytt fönster (Template-länkarna)

dectgaps avatardectgapMedlem sedan sep. 20021 655 inlägg
#15

Jag borde jobba vidare på den där menyn litegrand, men för att få det att funka för din del kan du göra på följande sätt:
Leta upp style-elementet i head (<style type="text/css">...), och flytta upp det hela innan ditt link-element.
Då fungerar det även i FireFox.

CaleMedlem sedan mars 200490 inlägg
#16

ok, jo det funkade.. jag la den innan jag länkade till min css-fil..
varför fungerar det? alltså, jag vill förstå :)

om jag vill lägga allt i min css-fil, ska det ligga först där då eller?

nästa fråga då, varför slutade mitt popup-script att fungera när jag lade in ditt script?

Edit:
Nu funkar det.. jag tog scriptet från Expanderbar meny o utseende från jsMeny2 så fick jag fram samma effekt som det är i jsMeny2. (utan cookies, men de ville jag ändå inte ha med)
fast nu fungerar även mitt popup.script :)

268 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
128 ms — deklarationer (db)
0 ms — hämta statistik (cache)
138 ms — hämta tråd, inlägg och bilagor (db)
126 ms — ändringar (db)