• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Sproutee Inc

Sproutee Inc

Websites, Ecommerce, SEO G Suite

  • Portfolio
  • Pricing
  • Contact

jQuery Dialog: sometimes it feels like a scroll, sometimes it don’t

You are here: Home / Web Design & Development / jQuery Dialog: sometimes it feels like a scroll, sometimes it don’t

I’ve made further refinements to the jQuery Dialog implementation discussed here. I’ve refactored my JavaScript to use vars for the buttons so I don’t have to maintain separate button instantiations for different browsers:

buttons = {"Cancel": function() {$(this).dialog("close");}, "Go":function() {add(id);}}
if($.browser.msie){
$("#addDialog").dialog({
autoOpen: false, bgiframe: true, buttons: buttons, modal: true
}).dialog("open");
}
else {
$("#addDialog").dialog({
autoOpen: false,bgiframe: true,buttons: buttons,>modal: true,overlay: {backgroundColor: '#000000', opacity: 0.5}}).dialog("open");
}

I've also reduced the amount of mark-up being generated in the JavaScript by setting .ui-helper-hidden on the element in the HTML, e.g.:

div id="addDialog" title="Make new thing" class="ui-helper-clearfix" form id="addForm" class="ui-helper-hidden"
fieldset
div class="yui-g"
div class="yui-u first"
label for="thingy"Thingy/label
label for="whatsit"Whatsit/label
/div
div class="yui-u"
input type="text" name="thingy" id="thingy"
input type="text" name="whatsit" id="whatsit"
/div
/div
/fieldset
/form
/div

Then I use jQuery to remove this class when the Dialog is opened:

$("#addForm").removeClass("ui-helper-hidden");

So, making progress getting tidied up and playing nice, and so far it is cooperating across the browsers I am supporting (FF and IE7). I did, however, run into a problem where the Dialog’s height and scrolling behaviour changed with each open and close. Two issues: 1) the height of the content area was shrinking or expanding with each open/close; 2) a scroll bar was present even when no visible content was available further down the content area. These issues were isolated to FF3, as IE7 was rendering the Dialog with the same height and no unnecessary scroll bar every time.

I resolved these issues by removing any minHeight or height options in the Dialog constructor and by removing the overflow property from .ui-dialog-content. If no minHeight/height are set in the Dialog constructor both FF3 and IE7 render the Dialog’s content wrapped nicely. If the overflow property is removed (set to ‘auto’) then scrolling never appears – yippee!

But wait, hold your horses, it doesn’t stop there. While my form dialog renders nicely without a minHeight/height option in the constructor, my confirmation dialog requires a minHeight of zero in order to wrap the Dialog’s content appropriately. I tried reproducing the same CSS values included in the form dialog (which sets a width and margin (on the form), wraps fields in a fieldset and includes a yui-g to space the fields), but to no avail. Could the icon classes be doing something funny? If I get to the bottom of this particular nugget I’ll be sure to share my findings with you, gentle reader, or please feel free to comment. For now, back to the drawing board.

  • Share
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)

22/01/2009 by Meg Smitley in Web Design & Development

Website Packages

Put your best foot forward.

Attract more leads with a professional website

Get started

Footer

Links

  • Home
  • About
  • Blog

Services

  • Free website audit
  • Web design & websites
  • Ecommerce websites

 

  • Marketing & SEO
  • G Suite
  • Hosting
  • Facebook
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
Copyright © 2023 Sproutee Inc · Privacy policy · Terms & conditions · Sitemap
This site tracks visits anonymously using cookies. We use this information to improve your experience of our site. You can opt-out if you choose.Accept Reject Read More
Privacy Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT