Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Php CSS and tabs

    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
    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 "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
    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";
            }
        }
    }
    ?>
    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; }  
    }
    Can someone help me?
    Last edited by Bert_R; 11-10-2009 at 10:26 PM.

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Sounds like a job for jQuery...

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

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I understand.
    But there they are loading new html's and that is not what I want.

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried something with jQuery
    but then the function kadabra isn't working anymore.

    Someone knows the answer?

  • #5
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is some code I tried.
    The tabs are not in collapsing kadabra function

    Code:
    <!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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •