Solved

Jquery dialog is longer then its max-height by the hieght of its title bar.

Posted on 2010-09-05
8
1,166 Views
Last Modified: 2012-05-10
I have a asp.net application with a link on its master page that opens a Jquery dialog.  I want to set the dialogs max-height to the height of the content section of the master page so that it will be no higher then the content section.  The content of the dialog will vary based on the user who is logged in.  Some times it will require less room then the height of the content and sometime it will require more. The problem is that the dialogs actual height is always 43px more then its max-height  This difference is the total of the dialogs padding and the  height of its title bar.  In this instance the dialog extends 43px outside of the content area.  I have subtract 20 and 23 from the max-height but that's pretty sloppy and it messes up another calculation I do to determine the y position of the dialog so that the dialog is vertically centered in the content area so I have to subtract 23 there as well. Apparently the max-height of a dialog is only the max-height of it's content and doesn't take into account the title bar or padding.  I'd like to be able to do this with out using literal numbers so that if those numbers change in the future I don't have to track down every place they were used.  Any suggestions will be appreciated.
<%@ Master Language="VB" CodeFile="ClientTrack.master.vb" Inherits="ClientTrack" %>

<!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 runat="server">
    <title>Site Master Page</title>
    <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
   
    <link href="~/Styles/Master.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/Dialog.css" rel="stylesheet" type="text/css" />

    <script src="/WebApps/ClientTrack3.5/js/jquery/jquery-1.4.2.js" type="text/javascript"></script>    
    <script src="/WebApps/ClientTrack3.5/js/jquery/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script src="/WebApps/ClientTrack3.5/js/jquery/jQueryUI.js" type="text/javascript"></script>
    <script src="/WebApps/ClientTrack3.5/js/Master.js" type="text/javascript"></script>  
    <script type="text/javascript">
        window.onbeforeunload = confirmExit;
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WebServices/HelpService.asmx" />
            </Services>
        </asp:ScriptManager>
        <div id="divPageWrapper">
            <div id="divHeaderOne">
                <asp:Image runat="server" ID="HeaderImage" CssClass="HeaderOneImage" ImageUrl="~/Images/MasterHeader.gif"
                    AlternateText="Logo" />
            </div>
            <div id="divMenu">
                <asp:Menu CssClass="MainMenu" ID="MasterMenu" runat="server" DataSourceID="SiteMapDataSource1"
                    Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
                    <StaticSelectedStyle CssClass="StaticSelectedStyle" />
                    <StaticMenuItemStyle CssClass="StaticMenuItemStyle" ItemSpacing="0px" />
                    <StaticHoverStyle CssClass="StaticHoverStyle" />
                    <DynamicMenuStyle CssClass="DynamicMenuStyle" />
                    <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
                    <DynamicHoverStyle CssClass="DynamicHoverStyle" />
                </asp:Menu>
            </div>
            <div id="divHeaderTwo">
                <asp:Label ID="lblFormTitle" runat="server" Text="FormTitle"></asp:Label>
            </div>
            <div id="divHeaderThree">
                <asp:UpdatePanel ID="UpdatePanelDDL" runat="server">
                    <ContentTemplate>
                        Records For
                        <asp:DropDownList ID="ddlRecordsFor" runat="server" Width="150px" CssClass="RecordsFor" AutoPostBack="True">
                            <asp:ListItem>1</asp:ListItem>
                            <asp:ListItem>2</asp:ListItem>
                            <asp:ListItem>3</asp:ListItem>
                        </asp:DropDownList>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <div id="divSideBar">
                <asp:LinkButton ID="LogOff" runat="server">Log Off</asp:LinkButton>
                <a id="SpellCheck" onclick="checkspell()">Spell Check</a><br />
                <a id="YouAre" onclick="YouAre()">You Are</a>
                <asp:HyperLink ID="YouCan" runat="server">You Can</asp:HyperLink>
                <asp:HyperLink ID="WhoCan" runat="server">Who Can</asp:HyperLink>
                <asp:HyperLink ID="HowCan" runat="server">How Can</asp:HyperLink>
                <asp:UpdateProgress ID="UpdateProgressButton" runat="server">
                    <ProgressTemplate>
                        <div class="Progress">
                        </div>
                        <br />
                        <div class="PleaseWait"> Please Wait...</div>
                    </ProgressTemplate>
                </asp:UpdateProgress>
            </div>
            <div id="divMainContent">
                <asp:ContentPlaceHolder ID="cp1" runat="server">
                    Under Construction
                </asp:ContentPlaceHolder>
            </div>
            <div id="divFooter">
                <asp:UpdatePanel ID="UpdatePanelButton" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="btnDivideByZero" runat="server" Text="Divide by Zero" Width="125px" />
                        <asp:Button ID="btnPageNotFound" runat="server" Text="Page Not Found" Width="133px" />
                        <asp:Button ID="btnDatabaseError" runat="server" Text="Data base Error" Width="125px" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
        <div id="divHelp" visible="false"></div>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
    </form>
</body>
</html>

/*css for master page*/
body
{
	margin: 0;
}

#divPageWrapper
{
	/* width: 1000px; */
	background: url(../Images/MasterHeaderBackround.jpg) repeat-y left top;
	background-color: #E1E1E1;
}

#divHeaderOne
{
	background: url(../Images/MasterBackround.jpg) repeat;
	height: 55px;
}

.HeaderOneImage
{
	margin-left: 10px;
	height: 55px;
}

#divMenu
{
	background: url(../Images/MasterMenuBackround.gif) repeat;
	height: 20px;
}

.StaticMenuItemStyle
{
	/* Defines the look of main menu items. */
	color: white;
	font-size: 16px;
	font-weight: bold;
	border-left: solid 1px white;
	text-align: center;
}

.StaticHoverStyle, .StaticSelectedStyle
{
	/* Defines the look of hover main menu items */
	background-color: silver;
}

.DynamicMenuStyle
{
	z-index: 1;
}

.DynamicMenuItemStyle
{
	/*Defines the sub menu items*/ 
	z-index: 1;
	color: white;
	font-size: 16px;
	font-weight: bold;
	background-color: silver;
	padding: 4px 2px 4px 3px;
}

.DynamicHoverStyle
{
	/*Defines the hover style of sub menus Currently does nothing.*/
	background-color: #808080;
	color: White;
}

/*.DynamicHoverStyle a
{
	 Removes the underline from links in the sub menus Currently does nothing.
	text-decoration: none;
}*/

#divHeaderTwo, #divHeaderThree
{
	background-color: #8FC3EA; /* Medium Blue*/
	/* width: 500px; */
	font-weight: bold;
	font-size: 35px;
	color: #00467F;
	float: left;
	border-bottom: solid 2px Gray;
}

#divHeaderTwo
{
	text-indent: 7px;
}

#divHeaderThree
{
	text-align: right;
}

#divHeaderThree .RecordsFor
{
	margin-right: 9px;
}

#divSideBar
{
	width: 102px;
	float: left;
}

#divSideBar a
{
	font-size: 18px;
	color: yellow;
	margin-left: 4px;
	margin-top: 10px;
	display: block;
	text-decoration: none;
	cursor: pointer;
}

#divMainContent
{
	/* width: 890px; */
	min-height: 549px;
	float: left;
}

#divFooter
{
	background-color: #D7E9F7;
	text-align: center;
	clear: both;
	padding-top: 2px;
	padding-bottom: 3px;
}

.Progress
{	background-position: center;
	min-height: 288px;
	width: 102px;
	background-image: url('../Images/PleaseWait.gif');
	background-repeat: repeat-y;
	margin-top: 15px;
	height: 19px;
}

.PleaseWait
{
	color: #FFFFFF;
	text-align: center;

/*css for dialog*/
div.ui-dialog 
{
    overflow: visible !important; /*Without this the width of the dialog shrinks to the width of the content.*/
	width: 420px !important;
	background: url(../Images/PopupBackround.jpg) repeat;
}

div.ui-dialog-content
{
	font-family: 'Lucida Calligraphy';
	padding: 10px;
	font-weight: bold;
	color: #FFFF00;
	min-height: 113px;
	width: 400px !important;
	text-align: center;/**/
}

div.ui-dialog-titlebar 
{
    width: 420px; /*Set the width of the title bar. It must be 20px more then the width of the content because the content has 10px padding*/
    background: url('../Images/Dialog/titlebarRight.png') no-repeat right; /*Places a rounded graphic in the right of the title bar*/
    height: 23px !important; /*Set the height of the title bar*/
	position: relative; /*If this is not set the closing X will not be positioned correctly*/
}

span.ui-dialog-title
{
	display: block;
	font-size: 18px;
	text-align: center;
	height: 23px;
	background: url('../Images/Dialog/titlebar.png') repeat-x top;
	margin: 0 9px; /*Set the left and right margins of the title.  If there is no margins the graphic set in the last line will go over the rounded end graphics.*/
	position: relative;
	padding-top: 1px;
	font-weight: bold;
	color: #00467F; /* Dark Blue*/
}

a.ui-dialog-titlebar-close
{
	/*Configure the closing X*/
	position: absolute;
	top: 2px;
	right: 10px;
	font-size: large;
	font-weight: bold;
	color: #00467F; /*Dark Blue*/
	text-decoration: none;
}

div.ui-dialog-container 
{
	background: url('../Images/Dialog/titlebarLeft.png') no-repeat top left; /*Places rounded graphic in the top left of the dialog (In the title bar)*/
}

div.ui-resizable-handle 
{
    /*If not set the shadow graphic could be resized.*/
    z-index: -1 !important;
}

/*The following 7 style rules place a shadow graphic aroung the dialog box.*/
div.ui-resizable-nw 
{
    background: url('../Images/Dialog/Shadow/shadow_01.png') no-repeat top right !important; 
    width: 117px !important;
    height: 112px !important;
    top: -42px !important;
    left: -62px !important;
}

div.ui-resizable-ne 
{
    background: url('../Images/Dialog/Shadow/shadow_03.png') no-repeat top left !important;
    width: 115px !important;
    height: 112px !important;
    top: -42px !important;
    right: -63px !important;
}

div.ui-resizable-e 
{
    background: url('../Images/Dialog/Shadow/shadow_06.png') repeat-y top left !important;
    width: 117px !important;
    height: auto !important;
    top: 70px !important;
    right: -65px !important;
    bottom: 46px !important;
}

div.ui-resizable-se 
{
    background: url('../Images/Dialog/Shadow/shadow_14.png') no-repeat top right !important;
    width: 117px !important;
    height: 113px !important;
    right: -65px !important;
    bottom: -67px !important;
}

div.ui-resizable-s 
{
    background: url('../Images/Dialog/Shadow/shadow_08.png') repeat-x bottom !important;
    width: 313px !important;
    height: 111px !important;
    right: -63px !important;
	bottom: -65px !important;
    left: 55px !important;
}

div.ui-resizable-sw 
{
    background: url('../Images/Dialog/Shadow/shadow_07.png') no-repeat top right !important;
    width: 115px !important;
    height: 111px !important;
    bottom: -65px !important;
    left: -60px !important;
}

div.ui-resizable-w 
{
    background: url('../Images/Dialog/Shadow/shadow_04.png') repeat-y top left !important;
    width: 115px !important;
    height: auto !important;
    top: 70px !important;
    bottom: 46px !important;
    left: -60px !important;
}

div.ui-dialog-buttonpane
{
	width: 400px;
	text-align: center;
	background-color: Black;
	height: 20px;
	vertical-align: middle;
	padding: 5px 10px 12px 10px;/**/
}

div.ui-dialog-buttonpane button
{
	font-size: medium;
	font-weight: bold;
	color: #00467F;  /*Dark Blue*/
}

a
{
	color: #99FF33;
	text-decoration: underline;
	cursor: pointer;
}

//JavaScript for dialog
var Message = ""
var MessageTitle
function YouAre() 
{
    if (MessageTitle == "You Are") 
    {
        $('div#divHelp').dialog("open")
    }
    else 
    {
            $get("ctl00_UpdateProgressButton").style.display = "block";
            $get("ctl00_UpdateProgressButton").style.visibility = "visible";
            $('div#divHelp').dialog("close")
            HelpService.YouAre(YouAreCallBack);
            var t = setTimeout("SetHelpDialog(100,200)", 2000);
    }
}

function YouAreCallBack(result) 
{
    if (result.substring(0,5) == "Error")
    {
        divHelp.title = result.substring(0, 5);
        MessageTitle = "Error";
    }
    else
    {
        divHelp.title = "You Are";
        MessageTitle = "You Are";
    }
        Message = result;
}

function SetHelpDialog(x, y) 
{
    divHelp.innerHTML = Message;
    
    $('div#divHelp').dialog({
        height: "auto",
        modal: true,
        overlay: { background: '#fff', opacity: '0.7'}
    });

    var HeadersHeight = $('#divHeaderOne').outerHeight() + $('#divMenu').outerHeight() + $('#divHeaderTwo').outerHeight();
    var ContentHeight = $('#divMainContent').outerHeight();
    var ContentWidth = $('#divMainContent').outerWidth();
    var SideBarWidth = $('#divSideBar').outerWidth();
    
    $('div#divHelp').css("overflow", "scroll");
    $('div#divHelp').css("overflow-x", "hidden");
    //Set the maximium hieght of the content minus 20 to account for the padding and 23 to account for the title bar.
    $('div#divHelp').css("max-height", ((ContentHeight) - 20 -23) + "px"); 
    var divHelpWidth = $('#divHelp').outerWidth();
    var divHelpHeight = $('div#divHelp').outerHeight();
    var xPosition = SideBarWidth + (ContentWidth - divHelpWidth) / 2;
    //When calculating the yPosition 23, the height of the title bar must be subtracted.
    var yPosition = HeadersHeight + (ContentHeight - divHelpHeight - 23) / 2;
    $('#divHelp').dialog('option', 'position', [xPosition, yPosition]);

    var divHelpInner = $("#divHelp > div");
    divHelpInner.css("float", "left");
    divHelpInner.css("width", $("#divHelp > div").width());
    divHelpInner.css("float", "none");
    divHelpInner.css("text-align", "left");
    alert("HeadersHeight = " + HeadersHeight + "\r\nContentHeight = " + ContentHeight + "\r\ndivHelpHeight = " + $('div#divHelp').outerHeight() + "\r\nyPosition = " + yPosition);
    $get("ctl00_UpdateProgressButton").style.display = "none";
}

Open in new window

0
Comment
Question by:leskelly
  • 4
  • 4
8 Comments
 
LVL 15

Expert Comment

by:SRigney
ID: 33608595
I had this same problem.  The max-height and max-width prevent manual resizing to larger than that, but do not prevent the dynamic content from making the dialog larger than you intend.

You can add the an function when the dialog is opened and set the size in there to the max size if it's bigger than the max-size.
0
 

Author Comment

by:leskelly
ID: 33610478
Thanks for you suggestion.  What is the an function?
0
 
LVL 15

Expert Comment

by:SRigney
ID: 33611488
sorry, that was supposed to be the open function.

Also, I see you are setting the div itself to have a max height, that does not work in IE, you want to do it with the jQuery UI setting of maxheight.

http://jqueryui.com/demos/dialog/#option-maxHeight

The open function that you want is also in the jQuery dialog
http://jqueryui.com/demos/dialog/#event-open

in there add a check to see if this.height > maxHeightValue then
this.height = maxHeightValue.

I kept the maxHeightValue in my own variable, but you may be able to dig it out of the options setting for the dialog.
0
 

Author Comment

by:leskelly
ID: 33612098
Thanks for the clarification.
I am using IE but I find the reverse to be true.  If I set the max height using:
$("#divHelp").dialog("option", "maxHeight", ContentHeight - 20 -23);
The dialog expands to the size if the content however if I use:
$('div#divHelp').css("max-height", ((ContentHeight) - 20 -23) + "px");
The height is as I want it.

I'm trying to get a basic dialog open event working just to test it out but I'm having no success.  I modified my code so a alert box should appear when the dialog open.  Below is the code.  Do you see anything wrong with my syntax?

    $('div#divHelp').dialog({
        open: function(event, ui) {
           alert("Opening");
        },
        height: "auto",
        modal: true,
        overlay: { background: '#fff', opacity: '0.7'}
    });
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 15

Expert Comment

by:SRigney
ID: 33612807
I ran your open method and it worked for me.  In IE clear your cache.  IE is notorious for caching things and missing out on changes.
0
 

Author Comment

by:leskelly
ID: 33612858
Still not working though other changes I've made are working.  I'm using IE 8 if that makes any difference.
0
 

Accepted Solution

by:
leskelly earned 0 total points
ID: 33618596
I've found a solution that works for me.  What I do is get the padding and title bar height using:
$('div#divHelp').parent().find('div.ui-dialog-content').css('padding-top').replace("px", "");
$('div#divHelp').parent().find('div.ui-dialog-content').css('padding-bottom').replace("px", "");
$('div#divHelp').parent().find('div.ui-dialog-titlebar').css('height').replace("px", "");

I then use the values to adjust the max height of the dialog.
0
 
LVL 15

Expert Comment

by:SRigney
ID: 33618875
Awesome, I'm glad you got it working.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now