function kadabra php css tabbladen

Status
Niet open voor verdere reacties.
B

BertjeR

Gebruiker
Lid geworden
8 mei 2001
Berichten
13
Hallo

Op onderstaande vragen kom ik maar niet uit!!!

Ik denk dat iedereen deze functie kadabra wel kent.
Ik wil deze gaan gebruiken om meerdere uitklapbare delen te krijgen.
Hoeveel? Dat ligt eraan hoeveel er wordt opgevraagd.

Echter bij IE werkt de functie niet meer als er meer dan 30 results zijn.
Na 30 gaat alles dan open.

Weet iemand hier raad op??

Hier een stukje geknutselde code even:

test.php
Code: 
<script type="text/javascript">
  function kadabra(zap) {

   if (document.getElementById) {
   var abra = document.getElementById(zap).style;
    if (abra.display == "block") {
    abra.display = "none";
    } else {
    abra.display= "block";
   }
   return false;
   } else {
   return true;
  }
  }
</script>
<?
echo "<table border='0' width='100%'>";
$countstop = 0;    
    for($i=0; $i<=100; $i=$i+1)
    {
        $countstop = $countstop + 1;
        $stoptext = "text" . $countstop;
        echo "<table width='97%'>";
        echo "<tr>"; 
        echo "<th width='2%' align='left'>";
        ?>
        <a href="#" onclick="return kadabra('<?php echo $stoptext; ?>');">
        <? 
        echo "Name participant ".$i . "</th></a>";
        echo "<th width='1%' align='left'>Place participant " . $i . "</th>";
        echo "</tr>"; 
        echo "</table>";
        ?> 

        <style type="text/css">
        <?php echo "#" . $stoptext; ?> {
        display: none;
        }
        </style> 
            <?
        echo "<p id='text" . $countstop . "'>";
        echo "<table width='97%'>";
        /*
        Hier wil ik tabs maken met een eigen opmaak van een tabel maar dat is het volgende probleem. Zie code hieronder!!
        */
        echo "</table>";
        echo "</p>";
        echo "<BR>"; 
    }
echo "</table>"; 
?>

Voor het andere probleem
gecomment in bovenstaande code
de volgende code:
test.php
Code: 
<script type="text/javascript">
  function kadabra(zap) {

   if (document.getElementById) {
   var abra = document.getElementById(zap).style;
    if (abra.display == "block") {
    abra.display = "none";
    } else {
    abra.display= "block";
   }
   return false;
   } else {
   return true;
  }
  }
</script>
<?
include("tabsprofiel.php");
echo "<LINK REL='stylesheet' TYPE='text/css' MEDIA='all' HREF='tabsprofiel.css'>"; 
echo "<table border='0' width='100%'>";
$countstop = 0;    
    for($i=0; $i<=5; $i=$i+1)
    {
        $countstop = $countstop + 1;
        $stoptext = "text" . $countstop;
        echo "<table width='97%'>";
        echo "<tr>"; 
        echo "<th width='2%' align='left'>";
        ?>
        <a href="#" onclick="return kadabra('<?php echo $stoptext; ?>');">
        <? 
        echo "Name participant ".$i . "</th></a>";
        echo "<th width='1%' align='left'>Place participant " . $i . "</th>";
        echo "</tr>"; 
        echo "</table>";
        ?> 

        <style type="text/css">
        <?php echo "#" . $stoptext; ?> {
        display: none;
        }
        </style> 
            <?
        echo "<p id='text" . $countstop . "'>";
        echo "<table width='97%'>";

        $tabs = new tabs("tabs$i");

            $tabs->start("Personal data participant ".$i);
                echo $object->memberid."This is tab number 1, participant ".$i.".<br/>";
                echo $object->memberid."Here I want a dynamic table.<br/>";
            $tabs->end();

            $tabs->start("Hobbies participant ".$i);
                echo "<div class='tab-page' id='tabPage2$i'>";
                echo "<table width='97%'>";
                echo "<tr><td>This is not in the tab 2 for participant ".$i."</td>";
                echo "<td>This is not in the tab 2</td></tr>";
                echo "</table>";
                echo "</div>"; 
            $tabs->end();

            $tabs->start("Other stuff participant ".$i);
                echo "<tr>";
                echo "<td align='left'><b>Not working either</td>";
                echo "<td align='left' colspan = '3'><b>test 2</b></td>";
                echo "<td align='left'><b>test 2<b></td>";
                echo "<td align='left'><b>test 3</b></td>";
                echo "</tr>";
            $tabs->end();


        $tabs->run();

        echo "</table>";
        echo "</p>";
        echo "<BR>"; 
    }
echo "</table>"; 
?>

tabsprofiel.php
Code: 
<?
class tabs {
	var $name;
	var $tabs;
	var $active;
	var $current;

	function __construct($name){
		$this->name = $name;
	}

	function start($name){
		if (empty($this->active)){ $this->active = $name; }
		$this->current = $name;
		ob_start();
	}

	function end(){
		$this->tabs[$this->current] = ob_get_contents();
		ob_end_clean();
	}

	function run(){
		if (count($this->tabs) > 0){
			
            echo "<DIV CLASS='tabs'>\n";
			$jsClear = "";
			foreach($this->tabs as $tabname => $tabcontent){
				$tabid = "tab_".$this->name."_$tabname";
				$contentid = "tabcontent_".$this->name."_$tabname";
				$jsClear .= "\tdocument.getElementById('$tabid').className = 'tab_inactive';\n";
				$jsClear .= "\tdocument.getElementById('$contentid').style.display = 'none';\n";
			}
			echo "<script type=\"text/javascript\">\n";
			
            echo "function tab_".$this->name."(id){\n";
			echo "$jsClear";
			echo "\tdocument.getElementById('tab_".$this->name."_'+id).className = 'tab_active';\n";
			echo "\tdocument.getElementById('tabcontent_".$this->name."_'+id).style.display = '';\n";
			echo "}\n";
			echo "</script>\n";
			
            foreach($this->tabs as $tabname => $tabcontent){
				$tabid = "tab_".$this->name."_$tabname";
				$contentid = "tabcontent_".$this->name."_$tabname";
				    echo "<DIV CLASS='";
				    if ($this->active == $tabname){ 
                        echo "tab_active"; 
                    }else{ 
                        echo "tab_inactive"; 
                    }
				    echo "' ID='$tabid' ";
				    echo "onClick=\"tab_".$this->name."('$tabname');\">$tabname</DIV>\n";
			    
            }
            echo "<DIV STYLE='float: left; clear:both;'></DIV>\n";
			foreach($this->tabs as $tabname => $tabcontent){
				$contentid = "tabcontent_".$this->name."_$tabname";
                $dataid = "tabdata_".$this->name."_$tabname";
				echo "<DIV ID = '$contentid' CLASS='tab_content' STYLE='display: ";
				if ($this->active == $tabname){ echo "block"; }else{ echo "none"; }
				echo ";'>$tabcontent</DIV>\n";
			}
			echo "</DIV>\n";
            echo "<DIV STYLE='clear: both;'></DIV>\n";
		}
	}
}
?>

en de css
tabsprofiel.css
Code: 
.tabs {
	width: 750px;
	margin: 10px;
}

.tab_active {
	-moz-border-radius: 5px 5px 0px 0px;
	border-color: #aaa;
	border-width: 1px;
	border-style: solid;
	background-color: #fff;
	color: #000;
	float: left;
	width: 150px;
	cursor: default;
	font-weight: bold;
	padding: 2px;
	font-size: 10pt;
	text-align: left;
}

.tab_inactive {
	-moz-border-radius: 5px 5px 0px 0px;
	border-color: #aaa;
	border-style: solid;
	border-width: 1px;
	background-color: #ddd;
	color: #777;
	float: left;
	width: 150px;
	cursor: default;
	padding: 2px;
	font-size: 10pt;
	text-align: left;
}

.tab_content {
    -moz-border-radius: 0px 10px 10px 10px;
	width: 90%;
	border-color: #aaa;
	border-style: solid;
	border-width: 1px;
	color: #000;
	float: left;
    text-align: left;
	padding: 10px; 
    thead { padding: .3em; }   
}

Wie weet er raad op 1 van de vragen??
Heb dit al op veel forums staan maar nog geen oplossend antwoord gehad op 1 van de vragen.

Bert
 
Laatst bewerkt:
Hallo BertjeR,

Het eerste probleem:
verwijderen:
PHP: 
 <style type="text/css">
        <?php echo "#" . $stoptext; ?> {
        display: none;
        }
        </style>
en de regel:
PHP: 
echo "<p id='text" . $countstop . "'>";
wijzigen in:
PHP: 
 echo "<p id='text" . $countstop . "' style='display: none'>";

Dan zou het moeten werken.

Probleem twee zijn fouten in de HTML code:
In verschillende tabellen mis je <tr><td> en </td></tr>. Ook bij <b> </b> zit het niet overal goed.
In IE bron weergave gebruiken en HTML code controleren die door de PHP code is gegenereerd.
Code mist ook <html><body> en </body></html>
Ik heb een snel gewijzigde test.php gezipt toegevoegd.
 

Bijlagen

Werkt

Hey Peter

Dank je.

Heb het voor elkaar nu.
Zeker dank ervoor. Was inmiddels met jQuery toggle begonnen.
Maar kan het niet uitstaan wanneer zaken niet werken. Graag zie ik
zulke zaken opgelost dan.

De zip die je stuurde was nog niet helemaal correct maar je antwoord wel.

Bert
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan