Help with Php CSS and tabs

[Bert_R]

Hi

I am a little stuck with a menu with tabs.
In each tab I want a dynamic table with data.
I think its somewhere in the CSS but how??

Here is a snippet of my code:
test.php

<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 "This is tab number 1, participant ".$i.".<br/>";
                echo "Here I want a dynamic table.<br/>";
            $tabs->end();

            $tabs->start("Hobbies participant ".$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 tab 2</td></tr>";
                echo "</table>"; 
            $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

<?
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";
        }
    }
}
?>

tabsprofiel.css

.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; }  
}

Can someone help me?

[Fumigator]

Sounds like a job for jQuery...

http://jqueryui.com/demos/tabs/#ajax

[Bert_R]

Ok I understand.
But there they are loading new html's and that is not what I want.

[Bert_R]

I tried something with jQuery
but then the function kadabra isn't working anymore.

Someone knows the answer?

[Bert_R]

Here is some code I tried.
The tabs are not in collapsing kadabra function

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Tab Pane Demo 2 (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- tab.css -->
<style>
.dynamic-tab-pane-control.tab-pane {
  position:  relative;
  width:    100%;    /* width needed weird IE bug */
  margin-right:  -2px;  /* to make room for the shadow */
}

.dynamic-tab-pane-control .tab-row .tab {

  width:        70px;
  height:        16px;
  background-image:  url( "lunaImage/tab.png" );
  
  position:    relative;
  top:      0;
  display:    inline;
  float:      left;
  overflow:    hidden;
  
  cursor:      Default;

  margin:      1px -1px 1px 2px;
  padding:    2px 0px 0px 0px;
  border:      0;

  z-index:    1;
  font:      11px Tahoma;
  white-space:  nowrap;
  text-align:    center;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
  width:        74px !important;
  height:        18px !important;
  background-image:  url( "lunaImage/tab.active.png" ) !important;
  background-repaet:  no-repeat;

  border-bottom-width:  0;
  z-index:    3;
  padding:    2px 0 0px 0;
  margin:      1px -3px -3px 0px;
  top:      -2px;
  font:        11px Tahoma;
}

.dynamic-tab-pane-control .tab-row .tab a {
  font:        11px Tahoma;
  color:        Black;
  text-decoration:  none;
  cursor:        default;
}

.dynamic-tab-pane-control .tab-row .tab.hover {
  font:        11px Tahoma;
  width:        70px;
  height:        16px;
  background-image:  url( "lunaImage/tab.hover.png" );
  background-repaet:  no-repeat;
}


.dynamic-tab-pane-control .tab-page {
  clear:      both;
  border:      1px solid rgb( 145, 155, 156 );
  background:    rgb( 252, 252, 254 );
  z-index:    2;
  position:    relative;
  top:      -2px;

  font:        11px Tahoma;
  color:        Black;

  filter:      progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#fff4f3ee, GradientType=0)
          progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=2, Direction=135);
  
  /*244, 243, 238*/
  /* 145, 155, 156*/
  
  padding:    10px;
}

.dynamic-tab-pane-control .tab-row {
  z-index:    1;
  white-space:  nowrap;
}
</style>
<!-- tabpane.js -->
<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;
  }
  }


// This function is used to define if the browser supports the needed
// features
function hasSupport() {

  if (typeof hasSupport.support != "undefined")
    return hasSupport.support;
  
  var ie55 = /msie 5\.[56789]/i.test( navigator.userAgent );
  
  hasSupport.support = ( typeof document.implementation != "undefined" &&
      document.implementation.hasFeature( "html", "1.0" ) || ie55 )
      
  // IE55 has a serious DOM1 bug... Patch it!
  if ( ie55 ) {
    document._getElementsByTagName = document.getElementsByTagName;
    document.getElementsByTagName = function ( sTagName ) {
      if ( sTagName == "*" )
        return document.all;
      else
        return document._getElementsByTagName( sTagName );
    };
  }

  return hasSupport.support;
}

///////////////////////////////////////////////////////////////////////////////////
// The constructor for tab panes
//
// el : HTMLElement    The html element used to represent the tab pane
// bUseCookie : Boolean  Optional. Default is true. Used to determine whether to us
//            persistance using cookies or not
//
function WebFXTabPane( el, bUseCookie ) {
  if ( !hasSupport() || el == null ) return;
  
  this.element = el;
  this.element.tabPane = this;
  this.pages = [];
  this.selectedIndex = null;
  this.useCookie = bUseCookie != null ? bUseCookie : true;
  
  // add class name tag to class name
  this.element.className = this.classNameTag + " " + this.element.className;
  
  // add tab row
  this.tabRow = document.createElement( "div" );
  this.tabRow.className = "tab-row";
  el.insertBefore( this.tabRow, el.firstChild );

  var tabIndex = 0;
  if ( this.useCookie ) {
    tabIndex = Number( WebFXTabPane.getCookie( "webfxtab_" + this.element.id ) );
    if ( isNaN( tabIndex ) )
      tabIndex = 0;
  }
  this.selectedIndex = tabIndex;
  
  // loop through child nodes and add them
  var cs = el.childNodes;
  var n;
  for (var i = 0; i < cs.length; i++) {
    if (cs[i].nodeType == 1 && cs[i].className == "tab-page") {
      this.addTabPage( cs[i] );
    }
  }
}

WebFXTabPane.prototype.classNameTag = "dynamic-tab-pane-control";

WebFXTabPane.prototype.setSelectedIndex = function ( n ) {
  if (this.selectedIndex != n) {
    if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )
      this.pages[ this.selectedIndex ].hide();
    this.selectedIndex = n;
    this.pages[ this.selectedIndex ].show();
    
    if ( this.useCookie )
      WebFXTabPane.setCookie( "webfxtab_" + this.element.id, n );  // session cookie
  }
};
  
WebFXTabPane.prototype.getSelectedIndex = function () {
  return this.selectedIndex;
};
  
WebFXTabPane.prototype.addTabPage = function ( oElement ) {
  if ( !hasSupport() ) return;
  
  if ( oElement.tabPage == this )  // already added
    return oElement.tabPage;

  var n = this.pages.length;
  var tp = this.pages[n] = new WebFXTabPage( oElement, this, n );
  tp.tabPane = this;
  
  // move the tab out of the box
  this.tabRow.appendChild( tp.tab );
      
  if ( n == this.selectedIndex )
    tp.show();
  else
    tp.hide();
    
  return tp;
};
  
WebFXTabPane.prototype.dispose = function () {
  this.element.tabPane = null;
  this.element = null;    
  this.tabRow = null;
  
  for (var i = 0; i < this.pages.length; i++) {
    this.pages[i].dispose();
    this.pages[i] = null;
  }
  this.pages = null;
};



// Cookie handling
WebFXTabPane.setCookie = function ( sName, sValue, nDays ) {
  var expires = "";
  if ( nDays ) {
    var d = new Date();
    d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 );
    expires = "; expires=" + d.toGMTString();
  }

  document.cookie = sName + "=" + sValue + expires + "; path=/";
};

WebFXTabPane.getCookie = function (sName) {
  var re = new RegExp( "(\;|^)[^;]*(" + sName + ")\=([^;]*)(;|$)" );
  var res = re.exec( document.cookie );
  return res != null ? res[3] : null;
};

WebFXTabPane.removeCookie = function ( name ) {
  setCookie( name, "", -1 );
};








///////////////////////////////////////////////////////////////////////////////////
// The constructor for tab pages. This one should not be used.
// Use WebFXTabPage.addTabPage instead
//
// el : HTMLElement      The html element used to represent the tab pane
// tabPane : WebFXTabPane  The parent tab pane
// nindex :  Number      The index of the page in the parent pane page array
//
function WebFXTabPage( el, tabPane, nIndex ) {
  if ( !hasSupport() || el == null ) return;
  
  this.element = el;
  this.element.tabPage = this;
  this.index = nIndex;
  
  var cs = el.childNodes;
  for (var i = 0; i < cs.length; i++) {
    if (cs[i].nodeType == 1 && cs[i].className == "tab") {
      this.tab = cs[i];
      break;
    }
  }
  
  // insert a tag around content to support keyboard navigation
  
  
  var a = document.createElement( "A" );
  this.aElement = a;
  a.href = "#";
  a.onclick = function () { return false; };
  while ( this.tab.hasChildNodes() )
    a.appendChild( this.tab.firstChild );
  this.tab.appendChild( a );

  
  // hook up events, using DOM0
  var oThis = this;
  this.tab.onclick = function () { oThis.select(); };
  this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); };
  this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); };
}

WebFXTabPage.prototype.show = function () {
  var el = this.tab;
  var s = el.className + " selected";
  s = s.replace(/ +/g, " ");
  el.className = s;
  
  this.element.style.display = "block";
};

WebFXTabPage.prototype.hide = function () {
  var el = this.tab;
  var s = el.className;
  s = s.replace(/ selected/g, "");
  el.className = s;

  this.element.style.display = "none";
};
  
WebFXTabPage.prototype.select = function () {
  this.tabPane.setSelectedIndex( this.index );
};
  
WebFXTabPage.prototype.dispose = function () {
  this.aElement.onclick = null;
  this.aElement = null;
  this.element.tabPage = null;
  this.tab.onclick = null;
  this.tab.onmouseover = null;
  this.tab.onmouseout = null;
  this.tab = null;
  this.tabPane = null;
  this.element = null;
};

WebFXTabPage.tabOver = function ( tabpage ) {
  var el = tabpage.tab;
  var s = el.className + " hover";
  s = s.replace(/ +/g, " ");
  el.className = s;
};

WebFXTabPage.tabOut = function ( tabpage ) {
  var el = tabpage.tab;
  var s = el.className;
  s = s.replace(/ hover/g, "");
  el.className = s;
};


// This function initializes all uninitialized tab panes and tab pages
function setupAllTabs() {
  if ( !hasSupport() ) return;

  var all = document.getElementsByTagName( "*" );
  var l = all.length;
  var tabPaneRe = /tab\-pane/;
  var tabPageRe = /tab\-page/;
  var cn, el;
  var parentTabPane;
  
  for ( var i = 0; i < l; i++ ) {
    el = all[i]
    cn = el.className;

    // no className
    if ( cn == "" ) continue;
    
    // uninitiated tab pane
    if ( tabPaneRe.test( cn ) && !el.tabPane )
      new WebFXTabPane( el );
  
    // unitiated tab page wit a valid tab pane parent
    else if ( tabPageRe.test( cn ) && !el.tabPage &&
          tabPaneRe.test( el.parentNode.className ) ) {
      el.parentNode.tabPane.addTabPage( el );      
    }
  }
}

function disposeAllTabs() {
  if ( !hasSupport() ) return;
  
  var all = document.getElementsByTagName( "*" );
  var l = all.length;
  var tabPaneRe = /tab\-pane/;
  var cn, el;
  var tabPanes = [];
  
  for ( var i = 0; i < l; i++ ) {
    el = all[i]
    cn = el.className;

    // no className
    if ( cn == "" ) continue;
    
    // tab pane
    if ( tabPaneRe.test( cn ) && el.tabPane )
      tabPanes[tabPanes.length] = el.tabPane;
  }
  
  for (var i = tabPanes.length - 1; i >= 0; i--) {
    tabPanes[i].dispose();
    tabPanes[i] = null;
  }
}


// initialization hook up

// DOM2
if ( typeof window.addEventListener != "undefined" )
  window.addEventListener( "load", setupAllTabs, false );

// IE 
else if ( typeof window.attachEvent != "undefined" ) {
  window.attachEvent( "onload", setupAllTabs );
  window.attachEvent( "onunload", disposeAllTabs );
}

else {
  if ( window.onload != null ) {
    var oldOnload = window.onload;
    window.onload = function ( e ) {
      oldOnload( e );
      setupAllTabs();
    };
  }
  else 
    window.onload = setupAllTabs;
}
</script>

<script>


</script>
</head>
<body>

<p>This page reloads as soon as the page is loaded... look at the memory consuption.</p>

<?
//echo "<table border='0' width='100%'>";  
$countstop = 0;    

for($i=1; $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 "<div class='tab-pane' id='tabPane1$i'>";
          echo "<div class='tab-page' id=''tabPage1$i'>";
            echo "<h2 class='tab'>General</h2>";
            
            echo "<table><tr><td>";
              echo "$i This is text of tab 1. This is text of tab 1. This is text of tab 1."; 
              echo "$i This is text of tab 1. This is text of tab 1. This is text of tab 1."; 
              echo "$i This is text of tab 1. This is text of tab 1. This is text of tab 1.";
            echo "</td></tr></table>";
            
          echo "</div>";

          echo "<div class='tab-page' id='tabPage2$i'>";
            echo "<h2 class='tab''>Security</h2>";
                ?>    
                <table border="0" width="100%" id="table1<? echo $i; ?>">
                    <tr>
                        <td><? echo $i; ?></td>
                        <td><? echo $i; ?></td>
                        <td><? echo $i; ?></td>
                        <td><? echo $i; ?></td>
                    </tr>
                    <tr>
                        <td><? echo $i; ?></td>
                        <td><? echo $i; ?></td>
                        <td><? echo $i; ?></td>
                        <td><? echo $i; ?></td>
                    </tr>
                    <tr>
                        <td align="center" colspan="4"><? echo $i; ?></td>
                    </tr>
                </table>
                <?    
          echo "</div>";
        echo "</div>";
        echo "</p>";
        
}
 
?>
</body>
</html>