---
title: "Knapp som gör saker onsynliga/synliga"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/170744-knapp-som-gör-saker-onsynliga-synliga/page2"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Boye"
published: "2008-04-12T11:34:53.000Z"
updated: "2008-07-23T12:15:01.000Z"
replies: 38
views: 2531
page: 2
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/170744-knapp-som-gör-saker-onsynliga-synliga"
---

# Knapp som gör saker onsynliga/synliga

_Sida 2 av 2._

## #21 — sod, 2008-06-21T06:26Z

Hej..
fel tråd

Permalänk: https://www.webforum.nu/p/2119317

## #22 — Boye, 2008-06-22T11:30Z

Okej..hej :)

Bump..

Permalänk: https://www.webforum.nu/p/2119445

## #23 — Web-Tor, 2008-06-23T06:44Z

Den här tror jag skall innehålla det du vill:
<http://member.webforum.nu/1123/boye.html>

Jag har inte lagt ner något arbete på att göra koden speciellt snygg och den är bara testad i IE6.

Permalänk: https://www.webforum.nu/p/2119551

## #24 — Boye, 2008-06-23T09:33Z

Tack igen! Precis så jag ville ha det! :)

Jo i IE och Safari funkar den fint. 
Tyvärr så kan man inte alls klicka på knappen (Visa/Dölj tabell) i Morzilla Firefox  - det händer inget då. 
I Opera fungerar det mesta förutom att allt område som kommer nedanför "Här kan du klicka utan att det händer något." på skärmen fungerar det inte att stänga på. 

Vet du hur man löser detta också? :)

Permalänk: https://www.webforum.nu/p/2119575

## #25 — Web-Tor, 2008-06-23T09:49Z

> **Boye skrev:**
>
> Vet du hur man löser detta också?

Nej, jag har bara IE på den här datorn.

Ps. Du kan testa att ändra till *onclick="toggle('');"* på tabellen.

Permalänk: https://www.webforum.nu/p/2119577

## #26 — Boye, 2008-06-23T11:37Z

> **Web-Tor skrev:**
>
> Nej, jag har bara IE på den här datorn.
> 
> Ps. Du kan testa att ändra till *onclick="toggle('');"* på tabellen.

Okej. Jag testade det också men tyvärr gör det ingen skillnad :(

Permalänk: https://www.webforum.nu/p/2119594

## #27 — HiDensity, 2008-06-23T14:53Z

> **Boye skrev:**
>
> Jag undrar hur man gör något **onsynligt** och sedan en knapp som gör det synligt om man trycker på den?

> **Boye skrev:**
>
> Går det att göra så att tablet blir **onsynligt** igen om jag klickar var som helst förutom på tablet?

Känner mig tvingad att påpeka att det heter osynligt och inte o**n**synligt.

Permalänk: https://www.webforum.nu/p/2119613

## #28 — Boye, 2008-06-23T21:48Z

> **HiDensity skrev:**
>
> Känner mig tvingad att påpeka att det heter osynligt och inte o**n**synligt.

Tack, det ska jag komma ihåg, behöver bättra på min stavning :)

Permalänk: https://www.webforum.nu/p/2119713

## #29 — Boye, 2008-06-24T20:31Z

Koden fungerar verkligen helt magnifikt i de flesta webläsarna. Det är precis som jag vill ha det med skyddat område, bild som ändrar sig när man trycker upp och ner knapp osv, blev mycket bättre än jag kunde tänka :)

Men tyvärr, som sagt så fungerar inte knappen i Firefox. Jag är inte så duktigt på javascript ännu, men jag har försökt mitt aldra bästa, testat allt möjligt jag kan komma på, letat över hela nätet och sökt jättemycket, men jag lyckas inte få knappen att reagera i Firefox endå.

Jag vill helst inte störa dig med mer hjälp för jag har redan fått så mycket jättebra hjälp innan. Men detta är verkligen jätteviktigt för mig och jag har ingen aning om hur jag själv ska kunna gå vidare.

Så därför undrar jag om du kanske skulle ladda ner Firefox (tar bara någon minut) och ta en titt på det? Vore fantastiskt :)

Permalänk: https://www.webforum.nu/p/2119879

## #30 — Web-Tor, 2008-06-24T21:06Z

Det är två saker som strulat i FF:
1\. FF klarar inte *block* på table. [Lösning](http://www.webdeveloper.com/forum/showthread.php?t=90503)
2\. FF stödjer inte *cancelBubble*. [Lösning](http://www.reloco.com.ar/mozilla/compat.html)

Permalänk: https://www.webforum.nu/p/2119887

## #31 — HiDensity, 2008-06-24T21:16Z

> **Web-Tor skrev:**
>
> Det är två saker som strulat i FF:
> 1\. FF klarar inte *block* på table. [Lösning](http://www.webdeveloper.com/forum/showthread.php?t=90503)
> 2\. FF stödjer inte *cancelBubble*. [Lösning](http://www.reloco.com.ar/mozilla/compat.html)

Är det en FF-brist eller är det som vanligt hemsnickrade IE-grejor?

Permalänk: https://www.webforum.nu/p/2119892

## #32 — Kriko, 2008-06-25T02:01Z

Ptja, det verkar vara så att varken IE eller FF gör rätt i det här fallet gällande display-egenskapen.
Både block och table-row är korrekt CSS.

Permalänk: https://www.webforum.nu/p/2119909

## #33 — Boye, 2008-06-27T11:04Z

> **Web-Tor skrev:**
>
> Det är två saker som strulat i FF:
> 1\. FF klarar inte *block* på table. [Lösning](http://www.webdeveloper.com/forum/showthread.php?t=90503)
> 2\. FF stödjer inte *cancelBubble*. [Lösning](http://www.reloco.com.ar/mozilla/compat.html)

Tack för svar :)

1\. Det här med table är inte så viktigt, jag kan lika bra lägga en div med funktionerna och sedan lägga tablet inuti såhär:

```
<html>
<head>
	<script type="text/javascript">
	function toggle(strAction){
		obj = document.getElementById('foo');

		if(strAction == "show"){
			show(obj);
		}else if (strAction == "hide"){
			hide(obj);
		}else if (strAction == "none"){
			//sdf
		}else{
			if(obj.style.display == "none"){
				show(obj);
			}else{
				hide(obj);
			}
		}
		window.event.cancelBubble = true;
 
	}

	// Show
	function show(obj){
		obj.style.display = "block";
	}
	// Hide
	function hide(obj){
		obj.style.display = "none";
	}
 
	
	</script>
</head>
<body onclick="toggle('hide');">
	<h1>Klicka var som helst på sidan för att dölja tabellen</h1>
	<br />
	<a href="#" onclick="toggle();return false;">Visa/Dölj tabell</a>
	<br />
	<div id="foo" style="display:none;" onclick="toggle('none');"><table style="border:5px solid #555;"><tr><td>Tabell som man kan klicka i utan att det händer något.</td></tr></table></div>
		
	<br />
	<div style="border:1px dotted #555;" onclick="toggle('none');">Här kan du klicka utan att det händer något.</div>
</body>
</html>
```

 
Men enbart det får inte knappen att öppna i Firefox. Dock så märkte jag att om jag inte har style="display:none;", så att "Tabell som man kan klicka i utan att det händer något" är öppen i början så stängs den var man än klickar i Firefox. 

2\. Jag läste igenom det dokumentet, men tyvärr förstår jag inte exakt hur jag ska göra. Jag menar har aldrig använt javascript tidigare, jag försöker lära mig men det är inte så lätt i början.

Jag hittade i alla fall att jag ska använda något som heter stopPropagation() i samband med cancelBubble, men frågan är bara hur eller var jag ska lägga in det. Jag testade runt lite t ex såhär:

```
<html>
<head>
	<script type="text/javascript">
	function toggle(strAction){
		obj = document.getElementById('foo');

		if(strAction == "show"){
			show(obj);
		}else if (strAction == "hide"){
			hide(obj);
		}else if (strAction == "none"){
			//sdf
		}else{
			if(obj.style.display == "none"){
				show(obj);
			}else{
				hide(obj);
			}
		}
		window.event.cancelBubble = true;
		stopPropagation = true;
 
	}

	// Show
	function show(obj){
		obj.style.display = "block";
	}
	// Hide
	function hide(obj){
		obj.style.display = "none";
	}
 
	
	</script>
</head>
<body onclick="toggle('hide');">
	<h1>Klicka var som helst på sidan för att dölja tabellen</h1>
	<br />
	<a href="#" onClick="toggle();return false;">Visa/Dölj tabell</a>
	<br />
	<div id="foo" style="display:none;" onclick="toggle('none');"><table style="border:5px solid #555;"><tr><td>Tabell som man kan klicka i utan att det händer något.</td></tr></table></div>
		
	<br />
	<div style="border:1px dotted #555;" onClick="toggle('none');">Här kan du klicka utan att det händer något.</div>
</body>
</html>
```

 
Men det gav inget resultat direkt.

Har du lust att förklara lite närmare hur jag ska göra? :)

Permalänk: https://www.webforum.nu/p/2120335

## #34 — Web-Tor, 2008-06-27T11:41Z

Det här borde fungera i både FF och IE:
<http://member.webforum.nu/1123/boye_ff.html>

Permalänk: https://www.webforum.nu/p/2120344

## #35 — Boye, 2008-06-27T13:44Z

Jaaaaaa! :D Det funkade perfekt i alla webläsare, tack så jättemycket för all hjälp! :)

Permalänk: https://www.webforum.nu/p/2120374

## #36 — Web-Tor, 2008-06-27T15:38Z

Toppen! Då kan du markera tråden som löst. :)

Permalänk: https://www.webforum.nu/p/2120390

## #37 — Boye, 2008-07-23T09:42Z

Föresten min popup ruta hamnar tyvärr under vissa div:ar på vissa sidor. Finns det något sätt som jag kan få min pop-up ruta att alltid ligga överst? :)

Permalänk: https://www.webforum.nu/p/2126924

## #38 — Web-Tor, 2008-07-23T10:25Z

Om det handlar om \<div\>-taggar som skall visas i en viss ordning så testa att använda [z-index](http://www.w3schools.com/Css/pr_pos_z-index.asp).

Permalänk: https://www.webforum.nu/p/2126929

## #39 — Boye, 2008-07-23T12:15Z

Ah tack, det löste saken :)

Permalänk: https://www.webforum.nu/p/2126938

---

Tråden på webben: https://www.webforum.nu/amne/javascript/170744-knapp-som-gör-saker-onsynliga-synliga/page2  
Föregående sida: https://www.webforum.nu/amne/javascript/170744-knapp-som-gör-saker-onsynliga-synliga.md