SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    expandable menu that runs sql

    I'm trying to put together this expandable menu that runs sql (using javascript and php). I've got the code below but I'm horrible with javascript and I can't get two things to work.

    I cannot figure out how to use the closall() function so that when the page opens all selections are closed.

    I'm trying to get the mouseover colors and clickable areas and the only way I know how to do that is with a table so I thought I'd put a quick table in between the <li> but can't figure out the whole onClick= to incorporate the # so that I can get rid of the <a href> tag part...

    Code:
    <?php
    require("connect.php");
    $connectmysql = mysql_connect($host,$user,$password) or die ($cantconnectmysqlmessage);
    $db = mysql_select_db($database,$connectmysql) or die ($cantconnectdatabasemessage);
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Remarks</title>
    <script type="text/javascript" language="javascript1.3">
    <!--
    function closeall()
    {
    var divs=document.getElementsByTagName('div')
    for(var i=0; i<divs.length; i++)
    divs[i].style.display='none';
    }
    function clicked(element)
    {
    var div=document.getElementById(element)
    if(div.style.display=='none')
    div.style.display='block';
    else
    div.style.display='none';
    return;
    }
    // -->
    </script>
    <link href="../HighVisibility/dstyles.css" rel="stylesheet" type="text/css" />
    </head>
    <body LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
    <div id='PageTop'>
      <div id='NavLogo'></div>
      <span id='ETranText'><!--<img src="images/MAXXFORCE_LOGO.png" border='0'></img>--></span></div>
    <div id='PageTopBottom1'></div>
    <div id='PageTopBottom2'></div>
    <div id='PageTopBottom3'></div>
    <div style='position: absolute; top: 145px; left: 10px;'>
      <ul type="disc">
    <?php
    $Disp1Query = "SELECT DISTINCT PREFIX FROM tblcr2md WHERE PREFIX <> '' ORDER BY PREFIX";
    $Disp1Result = mysql_query($Disp1Query) or die(mysql_error().'<br />'.$Disp1Query);
    while ($Row1 = mysql_fetch_assoc($Disp1Result))
    {
     $SupplierCode = $Row1["PREFIX"];
     echo"<li><table width=100%><tr><td style=\"Cursor:Hand\" onClick=\"clicked('".$SupplierCode."')\" onMouseOver=\"this.style.backgroundColor='#E4E7FF';\" onMouseOut=\"this.style.backgroundColor='#FFFFFF';\" ><a href=\"#\" onClick=\"clicked('".$SupplierCode."')\">".$SupplierCode."</a></td></tr></table></li>";
        echo"<div id='".$SupplierCode."'>";
        echo"<ul type='square'>";
        $Disp2Query = "SELECT DISTINCT NAV_PN FROM tblcr2md WHERE PREFIX = '".$SupplierCode."' ORDER BY NAV_PN";
     $Disp2Result = mysql_query($Disp2Query) or die(mysql_error().'<br />'.$Disp2Query);
     while ($Row2 = mysql_fetch_assoc($Disp2Result))
     {
         echo"<li>".$Row2["NAV_PN"]."</li>";
     }
        echo"</ul>";
        echo"</div>";
    }
    ?>
    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Location
    Kingdom of Saudi Arabia
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try below but uses jQuery...
    PHP Code:
    <?php
    require 'connect.php';
    $connectmysql    mysql_connect($host,$user,$password) or die ($cantconnectmysqlmessage);
    $db                mysql_select_db($database,$connectmysql) or die ($cantconnectdatabasemessage);

    //initial query
    $Disp1Query        "SELECT DISTINCT PREFIX FROM tblcr2md WHERE PREFIX <> '' ORDER BY PREFIX";
    $Disp1Result    mysql_query($Disp1Query) or die(mysql_error().'<br />'.$Disp1Query);

    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Remarks</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <link href="../HighVisibility/dstyles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        //<![CDATA[
        //uses jQuery which you can get from http://www.jquery.com
        $(function(){
            //uncomment below to hide clickable parent <li> on document open or load including children
            //$(".level-1").hide();
            //comment below to hide expanded <li> on document open or load
            $(".level-2").hide();
            
            //mouseover effect
            $(".level-1").mouseover(function(){
                $(this).css('background-color','#E4E7FF');
            });
            
            //mouseout effect
            $(".level-1").mouseout(function(){
                $(this).css('background-color','#FFFFFF');
            });
            
            //onclick handler : shows <div> content or expand
            $(".level-1").click(function(){
                $(".level-2").slideDown('slow');
            });
        });
        //]]>
    </script>
    <style type="text/css" media="screen">
        body { margin: 0; }
        .level-1 { width: 100%; cursor:hand; }
    </style>
    </head>
    <body style="margin:0;">
        <div id='PageTop'>
            <div id='NavLogo'></div>
            <span id='ETranText'><!--<img src="images/MAXXFORCE_LOGO.png" border='0'></img>--></span>
        </div>
        <div id='PageTopBottom1'></div>
        <div id='PageTopBottom2'></div>
        <div id='PageTopBottom3'></div>
        <div style='position: absolute; top: 145px; left: 10px;'>
              <ul type="disc">
                <?php if($Disp1Result):?>
                    <?php while($Row1 mysql_fetch_assoc($Disp1Result)):?>
                        <?php
                            $SupplierCode 
    $Row1["PREFIX"];
                            
                            
    $Disp2Query "SELECT DISTINCT NAV_PN FROM tblcr2md WHERE PREFIX = '".$SupplierCode."' ORDER BY NAV_PN";
                            
    $Disp2Result mysql_query($Disp2Query) or die(mysql_error().'<br />'.$Disp2Query);
                        
    ?>
                        <li class="level-1">
                            <a href="#"><?php echo $SupplierCode;?></a><br />
                            <div id="<?php echo $SupplierCode;?>" class="level-2">
                            <ul type='square'>
                                <?php if($Disp2Result):?>
                                    <?php  while($Row2 mysql_fetch_assoc($Disp2Result)):?>
                                        <li><?php echo $Row2["NAV_PN"];?></li>
                                    <?php endwhile;?>
                                <?php else:?>
                                    <li>No data for '$Dis2Result'.</li>
                                <?php endif;?>
                            </ul>
                            </div>
                        </li>
                    <?php endwhile;?>
                <?php else:?>
                    <li>No data for '$Dis1Result'.</li>
                <?php endif;?>
              </ul>
        </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's something else I've found that I can use. How do I get this to open collapsed every time it is opened?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
        <head>
        <title>Untitled Page</title>
        <script type="text/javascript">
        function ExpandCollapseTable(titleRow)
        {
            if(titleRow.parentNode.childNodes.length > 1)
            {
                 if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
                 {
                    for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
                    {
                        titleRow.parentNode.childNodes[i].style.display = "none";
                    }
                 }
                 else
                 {
                    for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
                    {
                        titleRow.parentNode.childNodes[i].style.display = "block";
                    }
                 }
            }
        }
        </script>
        </head>
        <body>
        <table border='0' bordercolor='#000000' width='100&#37;' cellspacing='0' cellpadding='0'>
          <tr onclick="ExpandCollapseTable(this);" style='cursor:pointer;'>
            <td colspan=3>Testing First Column</td>
          </tr>
          <tr>
            <td style='width: 100px'>1</td>
            <td style='width: 100px'>2</td>
            <td style='width: 100px'>3</td>
          </tr>
          <tr>
            <td style='width: 100px'>4</td>
            <td style='width: 100px'>5</td>
            <td style='width: 100px'>6</td>
          </tr>
          <tr>
            <td style='width: 100px'>7</td>
            <td style='width: 100px'>8</td>
            <td style='width: 100px'>9</td>
          </tr>
        </table>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump...


Bookmarks

Posting Permissions

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