waarom werkt mijn troggle niet???

Status
Niet open voor verdere reacties.
phobia

phobia

Terugkerende gebruiker
Lid geworden
4 sep 2006
Berichten
1.777
Ik probeer met een knop een div te openen en te sluiten
openen en sluiten zijn 2 functies.

Code: 
<script type="text/javascript">
 
 function troggle() {
 var obj = document.getElementById( 'id' );
  if (obj.style.visibility=='hidden') {
  openen();
  }
  if (obj.style.visibility=='visible') {
  sluiten();
  }
  }
 
var x = 500;
var y = 180;
var inc = 2;
var z = 0;

function openen() {
	
	var obj = document.getElementById( 'id' );
  obj.style.visibility='visible';
  var againx, againy;
  var width = parseInt(obj.style.width);
  var height = parseInt(obj.style.height);
  if ( width < x ) {
    obj.style.width = width + inc + 'px';
    againx = true;
  }
  if ( height < y ) {
    obj.style.height = height + inc + 'px';
    againy = true;
  }
 
  if ( againx || againy ) {
    setTimeout ( 'openen()', 30 );
  }
}

function sluiten() {
	
	var obj = document.getElementById( 'id' );
  var againx, againy;
  var width = parseInt(obj.style.width);
  var height = parseInt(obj.style.height);
  if ( width > z ) {
    obj.style.width = width - inc + 'px';
    againx = true;
  }
  if ( height > z ) {
    obj.style.height = height - inc + 'px';
    againy = true;
  }
 
  if ( againx || againy ) {
    setTimeout ( 'sluiten()', 30 );
	  }
  else
  {
document.getElementById( 'id' ).style.visibility='hidden';
}
}
</script>
</HEAD>
<BODY>

<h1>Div sturen leren</h1>
<form id="form" >

	   		<input type="button" value="Show DIV" onclick="troggle()">
</form>
<div class="div" style="position: absolute;  visibility: hidden; background-color: black; width: 0px; height: 0px; z-index: 1; left: 10px; top: 177px;" id="id">
</div>
</BODY>
</HTML>
 
Omdat je m eerst opent, en direct weer sluit.

Volg de code:
[JS] function troggle()
{
var obj = document.getElementById( 'id' );

if (obj.style.visibility=='hidden')
{
openen();
}
if(obj.style.visibility=='visible')
{
sluiten();
}
}[/JS]
--> Je opent hem. Dan doe je de open() functie. De 'visibility' wordt direct naar 'visible' gezet.
--> De code gaat verder. Omdat je visibility op 'visible' staat, wordt direct de sluiten() functie aangeroepen!

Dit is beter:
[JS] function troggle()
{
var obj = document.getElementById( 'id' );

if (obj.style.visibility=='hidden')
{
openen();
}else{
sluiten();
}
}[/JS]
:thumb:
 
Heb het draaiende,

Maar hoe kan ik dit nou dynamisch maken?
want als ik troggle(strOBJ) mee geef, dan moet ik dat ook meegeven aan openen() en sluiten()

maar als ik dat doe loopt de code in de tomatensoep

of moet ik een functie toevoegen in de strOBJ op te halen?

strOBJ is dan de id van de Div...nu dus 'id'
 
Zoiets:
[JS]/* Vegras' meesterlijke toggleObjectWithNiceMotion() functie (...)
opent/sluit een div met een leuk effectje

input: een element's id (text)*/

function toggleObjectWithNiceMotion(id)
{
var obj = document.getElementById(id);

if(obj.style.visibility == 'visible')
{
toggleObject(obj, true);
}else{
toggleObject(obj, false);
}
}

var x = 500;
var y = 300;
var inc = 5;

function toggleObject(obj,close)
{
var w, h, go;

w = parseInt(obj.style.width);
h = parseInt(obj.style.height);
go = false;


if(close === false)
{
obj.style.visibility = 'visible';

if(w < x)
{
obj.style.width = w + inc + 'px';
go = true;
}
if(h < y)
{
obj.style.height = h + inc + 'px';
go = true;
}
}else{
if(w > 0)
{
obj.style.width = w - inc + 'px';
go = true;
}
if(h > 0)
{
obj.style.height = h - inc + 'px';
go = true;
}
}

if(go === true)
{
var f = function(){ toggleObject(obj, close); }
setTimeout(f, 15);
}else{
if(close === true)
{
obj.style.visibility = 'hidden';
}
}

}[/JS]
HTML: 
<input type="button" value="toggle DIV 1" onclick="toggleObjectWithNiceMotion('id');" />
<input type="button" value="toggle DIV 2" onclick="toggleObjectWithNiceMotion('geval');" />


<div class="div" style="position: absolute;  visibility: hidden; background-color: black; width: 0px; height: 0px; z-index: 1; left: 10px; top: 177px;" id="id">
<div class="div" style="position: absolute;  visibility: hidden; background-color: red; width: 0px; height: 0px; z-index: 1; left: 10px; top: 177px;" id="geval">
</div>
</div>
Het leukste is als je allebij de buttons direct na elkaar klikt :)
 
Laatst bewerkt:
okey, was ff lezen, maar ik snap de opzet.

ook cool dat ze samen openen.

heb er alleen nog obj.innerHTML = "";
aan toegevoegd om de Div leeg te maken tijdens het sluiten.
Anders loopt het niet mooi.
 
maar dit werkt dan weer niet????

Code: 
<HTML>
<HEAD>
 <TITLE>Div's leren besturen JAVA</TITLE>
 <style type="text/css">
.div {
		filter: alpha(opacity=50); // IE syntax 
			-moz-opacity: .50; // Mozilla 
			opacity: .50; // De rest;
		text-align: center;
		color: white;
}
</style>

 <script type="text/javascript">

function getXMLHTTP() { //fuction to return the xml http object
   
    var xmlhttp=false;  
    try {
        xmlhttp=new XMLHttpRequest();
    } catch(e) {        
        try {           
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {
            try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e1) {
                xmlhttp=false;
            }
        }
    }
            
    return xmlhttp;
}
 
function link(strURL) {

  var req = getXMLHTTP(); // fuction to get xmlhttp object

  if (req) {

    req.onreadystatechange = function() {

      if (req.readyState == 4) { //data is retrieved from server

        if (req.status == 200) { // which reprents ok status     
        
          document.getElementById('id').innerHTML=req.responseText;
        } else { 
          alert("There was a problem while using XMLHTTP:\n");
        }
      }            
    }        
    req.open("GET", strURL, true); //open url using get method
    req.send(null);

  }
}
 
function toggle(id)
{
   var obj = document.getElementById(id);
 
   if(obj.style.visibility == 'visible')
   {
      toggleObject(obj, true);
   }else{
      toggleObject(obj, false);
   }
}
 
var x   = 200;
var y   = 50;
var inc = 5;
 
function toggleObject(obj,close)
{
   var w, h, go;
 
   w  = parseInt(obj.style.width);
   h  = parseInt(obj.style.height);
   go = false;
 
 
   if(close === false)
   {
      obj.style.visibility = 'visible';
 
      if(w < x)
      {
         obj.style.width = w + inc + 'px';
         go = true;
      }
      if(h < y)
      {
         obj.style.height = h + inc + 'px';
         go = true;
      }
   }else{
		obj.innerHTML = "";
      if(w > 0)
      {
         obj.style.width = w - inc + 'px';
         go = true;
      }
      if(h > 0)
      {
         obj.style.height = h - inc + 'px';
         go = true;
      }
   }
 
   if(go === true)
   {
      var f = function(){ toggleObject(obj, close); }
      setTimeout(f, 15);
   }else{
      if(close === true)
      {
         obj.style.visibility = 'hidden';
      }
   }
 
}
</script>
</HEAD>
<BODY>

<h1>Div sturen leren</h1>
<form id="form" >

	   		<input type="button" value="Show DIV" onclick="link('test5.php');toggle('id')">
</form>
<div class="div" style="position: absolute;  visibility: hidden; background-color: black; width: 0px; height: 0px; z-index: 1; left: 10px; top: 122px;" id="id">
iets en blah blah<br>&nbsp;&nbsp;zus en zo en nog meer

</div>
<p>jfsakf;ajsf;jg;asf</p>
<p>&nbsp;</p>
<p>asdfhgasfgkasdv.sdv.c.sa</p>
</BODY>
</HTML>

test5.php is dan:
PHP: 
<span> test info voor de div test</span>

volgens mij zou dit toch gewoon moeten kunnen?
haha werkt wel, had alleen geen style aan de tekst mee gegeven.
met test5.php
PHP: 
<head>
<style type="text/css">
.style10 {
	background-color: #FFFFFF;
}
</style>
</head>

<span class="style10"> test info voor de div test</span>

llukt het wel, want nu is de tekst gekleurd!!!
 
Laatst bewerkt:
PHP: 
<head>
<style type="text/css">
.style10 {
    background-color: #FFFFFF;
}
</style>
</head>
 
<span class="style10"> test info voor de div test</span>
Klik om te vergroten...
Dat gaat dus niet, je kan niet zomaar even een <head> en </head> in je code neerzetten! Haal deze weg, dat zou beter zijn.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan