Scriptregel gevraagd-opgelost+ — Forum

wilbie Startte dit onderwerp 06 mei 2008, 21:09 3 berichten

Hallo,

Kan iemand mij een scriptregel geven om de tabkolom naar rechts te verschuiven.
(m.a.w. de tabkolom zou naar het paneel moeten schuiven).
Zie voorbeeld door op url te klikken: http://users.telenet.be/varia.be/TabsPanel1.html

Hartelijk dank bij voorbaat voor de hulp.

Wilbie

Laatst gewijzigd door wilbie op 07 mei 2008, 08:57, 1 keer totaal gewijzigd.

Citeer

coderunner 06 mei 2008, 23:28 Aubauke - Aentwaerepe 1.828 berichten

wilbie schreef:... Kan iemand mij een scriptregel geven om de tabkolom naar rechts te verschuiven.
(m.a.w. de tabkolom zou naar het paneel moeten schuiven).

Beste Wilbie,

Door de linker marge van je ".tab" in je "Internal (of "Embedded") Style Sheet" te definiëren

.tab{
color: navy;
background-color: white;
border: thin solid navy;
position: vertical,absolute;
left: 200;
margin-left:90;
height: ;
top: 500;
width: 120;
text-align: center;
font: 9pt Verdana,sans-serif;
z-index: 2;
padding: 3;
overflow: ;
cursor: pointer;
cursor: hand;

De waarde aanpassen tot de "tabkolom" staat waar je hem wil

.

Zorg er ook voor dat je "Internal (of "Embedded") Style Sheet" <style type="text/css"> ... </style> TUSSEN <head> ... </head> staat en NIET tussen <body> ... </body> zoals in je bovenstaand voorbeeld!

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Citeer

wilbie Startte dit onderwerp 07 mei 2008, 12:41 3 berichten

Hallo Coderunner,

Hartelijk bedankt voor je reactie en voor het scriptregeltje.
Ik heb gedaan wat je gezegd hebt en alles werkt prima.

Hartelijk dank voor deze hulp.

Kun je mij nog even helpen met onderstaand probleem ?

Ik had ook graag een tableborder er rond willen maken, zoals dit voorbeeld laat zien: http://users.telenet.be/varia.be/tag.gif

Kun je mij ook zo een scriptregel geven voor een tableborder te maken
voor deze layout:http://users.telenet.be/varia.be/TabsPanel1.html

Hartelijk bedankt voor de hulp die ik van jou al gekregen heb en misschien nog ga krijgen.

Wilbie

Citeer

coderunner 07 mei 2008, 19:09 Aubauke - Aentwaerepe 1.828 berichten

Beste wilbie,

wilbie schreef:... Ik heb gedaan wat je gezegd hebt en alles werkt prima.
Hartelijk dank voor deze hulp.

Dat is graag gedaan en bedankt om dit hier te melden.
Het gaat hier niet over een scriptregel maar over css opmaak

wilbie schreef:... Ik had ook graag een tableborder er rond willen maken, zoals dit voorbeeld laat zien: http://users.telenet.be/varia.be/tag.gif

Kun je mij ook zo een scriptregel geven voor een tableborder te maken
voor deze layout:http://users.telenet.be/varia.be/TabsPanel1.html

Ook hier weer: Het gaat hier niet over een scriptregel maar over css opmaak

Ziehier de volledige html en css code voor hetgeen je bedoelt. Om het geweizigde allemaal hier uit te leggen zou een beetje veel zijn

Code: Selecteer alles

<html>
	<head>
		<title>TabsPanel</title>

			<script language="JavaScript">
			   var currentPanel;
			   
			   function showPanel(panelNum) {
			      //hide visible panel, show selected panel, 
			      //set tab
			      if (currentPanel != null) {
			         hidePanel();
			      }
			      document.getElementById 
			         ('panel'+panelNum).style.visibility = 'visible';
			         currentPanel = panelNum;
			         setState(panelNum);
			   }
			   
			   function hidePanel() {
			      //hide visible panel, unhilite tab
			      document.getElementById
			        ('panel'+currentPanel).style.visibility = 
			         'hidden';
			      document.getElementById
			        ('tab'+currentPanel).style.backgroundColor = 
			        '#ffffff';
			      document.getElementById
			        ('tab'+currentPanel).style.color = 'navy';
			   }
			   
			   function setState(tabNum) {
			      if (tabNum==currentPanel) {
			         document.getElementById 
			           ('tab'+tabNum).style.backgroundColor = 
			           '#ddddff';
			         document.getElementById
			           ('tab'+tabNum).style.color = 'red';
			      }
			      else {
			         document.getElementById
			           ('tab'+tabNum).style.backgroundColor = 
			           '#ffffff';
			         document.getElementById
			           ('tab'+tabNum).style.color = 'navy';
			      }
			   }
			   
			   function (tab) {
			      tab.style.backgroundColor = 'ddddff';
			   }
			   </script>

		<style type="text/css">
	
	      .tab{
	         color: navy;
	         background-color: white;
	         border: thin solid navy;
	         position: vertical,absolute;
	         left: 200;
	         top: 500;
	         width: 110;
	         text-align: center;
	         font: 9pt Verdana,sans-serif;
	         z-index: 2;
	         padding: 3;
	         overflow: ;
	         cursor: pointer;
	         cursor: hand;
	      }
	
	      .panel{
	         position: absolute;
	         margin-left:35;
	         top: 72;
	         left: 220;
	         width: 680;
	         z-index: 1;
	         height: 500;
	         visibility: hidden;
	         font: 12pt Verdana,sans-serif;
	         color: white;
	         padding-top: 60;
	         overflow: auto;
	      }
	
		  .outerborder {
		     border: medium double #000000;
		     padding-top:45;
		     padding-bottom:45;
		     margin-left:90;
		     width: 810;
		     height: 505;
		     background-color: black;
		  }
	
		  .border {
		      margin-left:2;
		      border-top: thin solid #FFFFFF;
		      border-right: thin solid #FFFFFF;
		      border-bottom: thin solid #FFFFFF;
		      width:800;
		      height: 500;
		      background-color: black;
	      }
	
		  .bordermenu {
		      border: medium double #FFFFFF;
		      width:120;
		      height: 495;
		      background-color: black;
		   }
		</style>
	</head>


<body>


<br><br><br>        
<body onLoad="showPanel(1)">
<div class="outerborder">
	<div class="border">
		<div class="bordermenu">
			<div id="tab1" class="tab" onClick = "showPanel(1);" onMouseOver="(this);" onMouseOut="setState(1)">Tab One</div>
			<div id="panel1" class="panel">Paneel 1</div>
	
			<div id="tab2" class="tab" onClick = "showPanel(2);" onMouseOver="(this);" onMouseOut="setState(2)">Tab Two</div>
			<div id="panel2" class="panel">Paneel 2</div>
	
			<div id="tab3" class="tab" onClick = "showPanel(3);" onMouseOver="(this);" onMouseOut="setState(3)">Tab Three</div>
			<div id="panel3" class="panel">Paneel 3</div>
	
			<div id="tab4" class="tab" onClick = "showPanel(4);" onMouseOver="(this);" onMouseOut="setState(4)">Tab Four</div>
			<div id="panel4" class="panel">Paneel 4</div>
	
			<div id="tab5" class="tab" onClick = "showPanel(5);" onMouseOver="(this);" onMouseOut="setState(5)">Tab Five</div>
			<div id="panel5" class="panel">Paneel 5</div>

		</div>	
	</div>
</div>

</body>
</html>

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Citeer

wilbie Startte dit onderwerp 07 mei 2008, 20:04 3 berichten

Beste Coderunner,

Zéér hartelijk bedankt voor hetgeen je belangeloos gedaan hebt voor mij.
De opmaak ziet er gewoon fantastisch uit.
En zo vlug !!!
Dat is een teken dat ik hier te maken heb met een prof op dit gebied.
Misschien dat we elkaar nog eens 'treffen' op dit forum.
Alvast nogmaals hartelijk bedankt.

Wilbie
Afbeelding

Citeer

coderunner 07 mei 2008, 20:55 Aubauke - Aentwaerepe 1.828 berichten

wilbie schreef:Beste Coderunner,
Zéér hartelijk bedankt voor hetgeen je belangeloos gedaan hebt voor mij.
De opmaak ziet er gewoon fantastisch uit.
En zo vlug !!!
Dat is een teken dat ik hier te maken heb met een prof op dit gebied.
Misschien dat we elkaar nog eens 'treffen' op dit forum.
Alvast nogmaals hartelijk bedankt.

Beste Wilbie,

Dat is graag gedaan en nogmaals bedankt om dit hier te melden.

mvg,
Coderunner

Bedank de perso(o)n(en) die je volledig op vrijwillige basis een antwoord geeft(geven) en/of beantwoord ten minste een reaktie op jouw vraag. Zo weten andere gebruikers EN de moderator dat je "probleem" al dan niet is opgelost. Alvast bedankt.

Citeer

Schrijf gerust een antwoord