Zend - The PHP Company




HTML

Add Code


A a very nice window with minimize and maximize.  

Type: application
Added by: damtam
Entered: 08/12/2000
Last modified: 04/12/2000
Rating: **** (7 votes)
Views: 28441
Windows with maximize and minimize features. You can even include a window inside another. Better see the example...


<!--
The code is divided into 3 parts:
1st part is Javascript
2nd part is a style sheet (can be replaced or deleted...)
3rd part is the php code
these three parts shall be put before <BODY>

in your HTML page, use the following function to make a window:
<?php
//begining of the window
//faitcadredebut("thenameofmywindow_unique","title of the window", width);
?>
here put the html code you want to be inside your window (even another window!)
<?php 
//end of the window
//faitcadrefin(); 
?>
 please see the example to see the images to download

------------------1st part----------------
Javascript: show/hide border and contents
put this first javascript before <BODY>
--> 
<script language="JavaScript">
var blnBorder = false;
function setBorder(id,bOn)
{
    var oTab    = document.all.item(id+"Tab");
    var oTab1   = document.all.item(id+"Tab1");
    var oTab2   = document.all.item(id+"Tab2");
    var oTab3   = document.all.item(id+"Tab3");
    var oBorder = document.all.item(id+"Content");

    if (!oTab || !oTab1 || !oTab2 || !oTab3 || !oBorder) 
        return;

    if (bOn)
    {
        oBorder.style.borderColor = "#990033";
        oTab.bgColor = "#990033";
        oTab1.src    = "http://www.meshoraires.com/endevlpt/curve_mo2.gif";
        oTab2.color  = "#ffffee";
        if (oBorder.style.display == "none")
            oTab3.src = "http://www.meshoraires.com/endevlpt/expand_mo.gif";
        else
            oTab3.src = "http://www.meshoraires.com/endevlpt/collapse_mo.gif";
    }
    else
    {
        oBorder.style.borderColor = blnBorder? "#cccccc" : "#ffffff";
        oTab.bgColor = "#CCCCCC";
        oTab1.src     = "http://www.meshoraires.com/endevlpt/curve.gif";
        oTab2.color  = "#004000";
        if (oBorder.style.display == "none")
            oTab3.src = "http://www.meshoraires.com/endevlpt/expand.gif";
        else
            oTab3.src = "http://www.meshoraires.com/endevlpt/collapse.gif";
    }
}

function showHideContent(id,bOn)
{
    var bMO = false;
    var oContent = document.all.item(id+"Content");
    if(oContent.style.display != "none")
    {
        oContent.style.display = "none";
    } else {
        oContent.style.display = "";    
    };
}
</script><!--
------------------2nd part----------------
style sheet (just an exemple, feel free to
replace by your own)
put this script before <BODY>
--> 
<style type="text/css">     
     <!--
     body {
      color : #000000;
      background-color : white;
      font-family : Arial, Helvetica, sans-serif;
      font-size : 12px;
      }
      P, TABLE, TD {
      color : #000000;
      font-family : Arial, Helvetica, sans-serif;
      font-size : 12px;
      }
      input { font-family: Default;font-weight : normal;font-size : 10pt;}
      .largetxt {font-size : 12px;}
      .header {
      background-color : #000000;
      }
      .menu {
      color : white;
      background-color : #B00025;
      }
      
      a.lienmenu {color : white;
      text-decoration : none;}
      a.lienmenu:hover {color : #E9E9E9;}
      
      .menuclair {
      background-color : #FFFFFF;
      }
      .menumedium {
      background-color : #C05A61;
      }
      .menufonce {
      background-color : #74061E;
      }
      .blocfond {color : #000000;
      background-color : #E9E9E9;  
      }
      a.lienblocfond {color:#000000;text-decoration:none;}
      a.lienblocfond:hover {color:#B00025;
      }
      .bloctitre {
      color : #000000;
      background-color : #EFD9AF;font-weight : bold;
      border-bottom: 1px solid White; border-top: 1px solid White;
      }
      a.lienbloctitre {color:#000000; text-decoration:none; font-weight : bold;}
      a.lienbloctitre:hover {color:#B00025;
      }
      .fondtitre {
      color : #000000;
      background-color : #FAF4EA;
      }
      .titre1 {color : #000000; font-size : 20px;}
      .titre1 EM {font-weight : bold;font-style : normal;}
      .titre2 {color : #000000; font-size : 16px;}
      .titre2 EM {font-weight : bold;font-style : normal;}
      .titre3 {color : #000000; font-size : 12px; font-weight : bold;}
      .titre4 {color : #B00025; font-size : 12px; font-weight : bold;}
      
      .fondcol {background-color : #E9E9E9;}
      .fondpage {background-color : white;}
      
      a {color:#B00025;
      text-decoration:none;
      }
      a:hover {color:#000000;
      }
      a.entete {text-decoration:underline;
      color:#000000;
      }
           
      /*
      img.puce1 {display : none;} 
      img.puce2 {display : none;}
      img.flechecat {display : none;}
      img.flechelien {display : none;} */
      //
     -->
     </style>
<!------------------3rd part----------------
code to create the frames
in French, 
"fait" means make
"cadre" means frame
"debut" means start
"fin" means end
put this script before <BODY>
--> 
<?php

/////////////////////////////
// faitcadredebut
////////////////////////////////

function faitcadredebut($nomcadre,$titre,$taille){ ?>
<DIV id="<?php echo $nomcadre?>HLHolder" style="DISPLAY: none; HEIGHT: 0px"></DIV>
        <DIV id="<?php echo $nomcadre?>HL" onmouseover="setBorder('<?php echo $nomcadre?>HL',true);" onmouseout="setBorder('<?php echo $nomcadre?>HL',false);">
            <table width="<?php echo $taille?>px" border="0" cellpadding="0" cellspacing="0px"><tr><td><table class="<?php echo $nomcadre?>Tab" width="100%" border="0" cellpadding="0" cellspacing="0" style="cursor:hand" onmouseover="setBorder('<?php echo $nomcadre?>HL',true);" onmouseout="setBorder('<?php echo $nomcadre?>HL',false);"><tr id="<?php echo $nomcadre?>HLTab" valign="middle" bgcolor="#CCCCCC"><td align="right"><img id="<?php echo $nomcadre?>HLTab1" src="http://www.meshoraires.com/endevlpt/curve.gif" alt="" border="0" /></td><td align="left" width="100%" height="10"><font id="<?php echo $nomcadre?>HLTab2" face="verdana,arial,helvetica" size="1" color="#004000">
<B><?php echo $titre?></B>
</font>
                                </td>
                                <td align="left"><img id="<?php echo $nomcadre?>HLTab3" src="http://www.meshoraires.com/endevlpt/collapse.gif" alt="" border="0" style="cursor:hand;"  onClick="showHideContent('<?php echo $nomcadre?>HL',true);" /></td></tr></table>

                    <div id="<?php echo $nomcadre?>HLContent" style="display='none';width:100%;border-bottom:#000000 1px solid;border-left:#ffffff 1px solid;border-right:#ffffff 1px solid;">
                        <table cellspacing="0" cellpadding="0" border="0" BGCOLOR="#fff7d7" width="100%" >
                            <tr>
                                <td colspan="3" height="5" />
                            </tr>
                            <tr>
                                <td valign="TOP"></td>
                                <td width="3px"></td>
                                <td><font face="verdana,arial,helvetica" size="1">
<?php }; 

/////////////////////////////
// faitcadrefin
////////////////////////////////

function faitcadrefin(){ ?>
</font>
                                </td>
                            </tr>
                        </table>
                    </div>
                    </td>
                </tr>
            </table>
        </DIV>
</DIV><?php 
    
    


?>


Usage Example


See the example


Rate This Script





Search



This Category All Categories