Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   problem with spry tabs in popup window (http://www.dreamweaverclub.com/forum//showthread.php?t=42871)

bizzeca 04-24-2012 03:32 PM

problem with spry tabs in popup window
 
The spry tabs works fine if the page is directly accessed, however, when the page is accessed through the pop-up window (image below) the spry tabs are not click-able and all the contents are displayed all at once.

http://i301.photobucket.com/albums/n...CSSproblem.jpg

I am using a local server so I do not have a url link.

CSS Code

Code:

@charset "UTF-8";

/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Horizontal Tabbed Panels
 *
 * The default style for a TabbedPanels widget places all tab buttons
 * (left aligned) above the content panel.
 */

/* This is the selector for the main TabbedPanels container. For our
 * default style, this container does not contribute anything visually,
 * but it is floated left to make sure that any floating or clearing done
 * with any of its child elements are contained completely within the
 * TabbedPanels container, to minimize any impact or undesireable
 * interaction with other floated elements on the page that may be used
 * for layout.
 *
 * If you want to constrain the width of the TabbedPanels widget, set a
 * width on the TabbedPanels container. By default, the TabbedPanels widget
 * expands horizontally to fill up available space.
 *
 * The name of the class ("TabbedPanels") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabbedPanels container.
 */
.TabbedPanels {
        margin: 0px;
        padding: 0px;
        float: left;
        clear: none;
        width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
        margin: 0px;
        padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
        position: relative;
        top: 1px;
        float: left;
        padding: 4px 10px;
        margin: 0px 1px 0px 0px;
        font: bold 0.7em sans-serif;
        background-color: #DDD;
        list-style: none;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #999;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        -moz-user-select: none;
        -khtml-user-select: none;
        cursor: pointer;
}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
        background-color: #CCC;
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
        background-color: #EEE;
        border-bottom: 1px solid #EEE;
}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
        color: black;
        text-decoration: none;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
        clear: both;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #CCC;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        background-color: #EEE;
}

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {
        padding: 4px;
}

/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
}

/* Vertical Tabbed Panels
 *
 * The following rules override some of the default rules above so that the
 * TabbedPanels widget renders with its tab buttons along the left side of
 * the currently active content panel.
 *
 * With the rules defined below, the only change that will have to be made
 * to switch a horizontal tabbed panels widget to a vertical tabbed panels
 * widget, is to use the "VTabbedPanels" class on the top-level widget
 * container element, instead of "TabbedPanels".
 */

/* This selector floats the TabGroup so that the tab buttons it contains
 * render to the left of the active content panel. A border is drawn around
 * the group container to make it look like a list container.
 */
.VTabbedPanels .TabbedPanelsTabGroup {
        float: left;
        width: 10em;
        height: 20em;
        background-color: #EEE;
        position: relative;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #CCC;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTab {
        float: none;
        margin: 0px;
        border-top: none;
        border-left: none;
        border-right: none;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTabSelected {
        background-color: #EEE;
        border-bottom: solid 1px #999;
}

/* This selector floats the content panels for the widget so that they
 * render to the right of the tabbed buttons.
 */
.VTabbedPanels .TabbedPanelsContentGroup {
        clear: none;
        float: left;
        padding: 0px;
        width: 30em;
        height: 20em;
}


bizzeca 04-24-2012 03:33 PM

PHP Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Business Permit Processing with Focus on Fire Inspection Certificate System | Kompanyeros 2011</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />

<link rel="stylesheet" type="text/css" media="screen" href="images/Azulmedia.css" />
<style type="text/css">
<!--
.style20 {font-size: x-small}
-->
</style>
<script src="SpryAssets/SpryTabbedPanels2.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style23 {color: #000000}
.style25 {font-size: 1em}
.style26 {color: #E3E9F1}
.style5 {color: #BDBDBD; font-weight: bold; }
.style8 {    color: #BDBDBD;
    font-size: 12px;
    font-weight: bold;
}
.style12 {    font-size: 9px;
    font-style: italic;
}
.style13 {font-size: 9px}
-->
</style>
</head>

<body>
<form action='forFSIC_toFireMarshal.php' method='post'>
<!-- wrap starts here -->
<div id="wrap">
<div id="header">
  <h1 id="logo">PasigCity<span class="gray">FireDepartment</span></h1>    
      <h2 id="slogan">Fire Safety Inspection Certificate System</h2>        
        
    <img src="images/logo bfp.png" alt="pfd logo" width="100" height="100" />
    <!-- Menu Tabs -->
            
    
</div>
                
    <div></div>
    <div class="align-left"></div>
    <!-- content-wrap starts here -->
    <div id="content-wrap">     
    
        <div id="****">
        
            
            
            
            
        <div class="box">
                
        <h1 align="center">Application Information</h1>
                
                
                  <table width="600" border="0">
                    <tr>
                      <td width="35%"><div align="left">IO No.</div></td>
                      <td width="5%">:</td>
                      <td><?php echo $row['IOno'?></td>
                    </tr>
                    <tr>
                      <td><div align="left">Applicant Name</div></td>
                      <td>:</td>
                      <td><?php echo $row['APPsurname'] . ", " $row['APPfirstname'] . " " $row['APPmiddleinit']; ?></td>
                    </tr>
                    <tr>
                      <td><div align="left">Business Name</div></td>
                      <td>:</td>
                      <td><?php echo $row['BIname']; ?></td>
                    </tr>
                    <tr>
                      <td><div align="left">Business Tel. No.</div></td>
                      <td>:</td>
                      <td><?php echo $row['BItelno']; ?></td>
                    </tr>
                    <tr>
                      <td><div align="left">Business Street</div></td>
                      <td>:</td>
                      <td><?php echo $row['BIaddressno'] . " " $row['BIaddressst']; ?></td>
                    </tr>
                    <tr>
                      <td><div align="left">Business Barangay</div></td>
                      <td>:</td>
                      <td><?php echo $row['BIaddressbrgy']; ?></td>
                    </tr>
                  </table>
        
          </div>
      <a name="SampleTags"></a>
        
        <div class="box">
            <table width="875" height="613" border="0">
            <tr>
            <h1 align="center"><strong>Business Occupancy Checklist Form </strong></h1>
              <td width="500" bordercolor="#212B5C" bgcolor="#212B5C"><div align="left">
                <div id="TabbedPanels1" class="TabbedPanels">
                  <ul class="TabbedPanelsTabGroup">
                    <li class="TabbedPanelsTab style23 style25" tabindex="0">General Information</li>
                    <li class="TabbedPanelsTab style25 style23" tabindex="0">Bldg. Construction</li>
                    <li class="TabbedPanelsTab style25 style23" tabindex="0">Exit Details</li>
                    <li class="TabbedPanelsTab style25 style23" tabindex="0">Means of Egress</li>
                    <li class="TabbedPanelsTab style25 style23" tabindex="0">Lighting and Signs</li>
                    <li class="TabbedPanelsTab style25 style23" tabindex="0">Features of Fire Protection</li>
                    <li class="TabbedPanelsTab style25 style23" tabindex="0">Bldg. Service Equipment</li>
                    <li class="TabbedPanelsTab style23 style25" tabindex="0">Hazardous Areas</li>
                    <li class="TabbedPanelsTab style23 style25" tabindex="0">Operating Features</li>
                    <li class="TabbedPanelsTab style23 style25" tabindex="0">Defects and or Deficiencies Noted During Inspection</li>
                    <li class="TabbedPanelsTab style23 style25" tabindex="0">Recommendations</li>
                  </ul>
                  
    <div class="clear"></div>
    <!-- content-wrap ends here -->        
    </div>    

<!-- wrap ends here -->
</div>

<!-- footer starts here -->    
<div id="footer-wrap">
    
    <div class="footer-left">
        <p class="align-left">            
        &copy; 2011 Business Permit Processing with Focus on Fire Inspection Certificate System | Kompanyeros</p>
  </div>
    
<div class="footer-right">
        <p class="align-right">
        <a href="index.html">Home</a> |
          <a href="index.html">Help</a></p>
  </div>
    
</div>
<!-- footer ends here -->    
</form>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>


Removed some of the codes because it exceeds the allowed amount.


All times are GMT. The time now is 11:38 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com