peppericious1 Posted March 25, 2012 Share Posted March 25, 2012 Hi Larry and forum users. I just got 'Modern Javascript' and am eager to get stuck into it. I need to implement a modal dialog quickly for a project I'm working on, however, and am having an issue I don't know how to resolve. The modal dialog as discussed in ch.9 contains just a little text. Mine, however, will be used to display a comprehensive list of terms and conditions of several hundred words. The problem is that when the user scrolls the page down through the terms and conditions, the light-grey modal mask background does not expand. You can see the problem here. What can I do to get the mask to fill the entire browser window when the user scrolls down? And one more thing... What if the user has javascript turned off. Can I simply link to a page in the href tag as a fallback?... Thanks in advance for your help. Link to comment Share on other sites More sharing options...
HartleySan Posted March 26, 2012 Share Posted March 26, 2012 peppericious1, that's a good-looking site template you have going at the moment. I hope your site turns out the way you want it. Normally, I think the mask you are talking about is called an "overlay div". If you do a Web search with that term, you will undoubtedly find lots of relevant links. To be more specific though, you need to dynamically set the height of the overlay div using a JS property. The following will give you the height of the entire page, regardless of the browser: document.body.clientHeight Simply set the height of the overlay div to that, and you're good to go. I should point out that I use IE6 at work, and when I looked at your site from IE6, the ToS weren't centered, and I couldn't see any overlay div at all. On Chrome at home, I was able to reproduce the problem you speak of though. To answer your other question, you are exactly right in that you use the normal href attribute as a fallback. Generally, when you set up a JS event to handle an anchor tag mouse click, you want to end the function called by the event handler with "return false". That way, if JS is enabled, the JS solution will kick in, and the browser's default behavior will be suppressed. Of course, if JS is not enabled, then the normal href link will be followed. Hope that helps. Please let us know if you need any additional assistance. 1 Link to comment Share on other sites More sharing options...
peppericious1 Posted March 26, 2012 Author Share Posted March 26, 2012 The following will give you the height of the entire page, regardless of the browser: document.body.clientHeight Simply set the height of the overlay div to that, and you're good to go. Thanks, HartleySan, for your kind comments about the site and for your help which is very informative. However, when you say 'Simply set the height of the overlay div...', could you tell me exactly how I should do that?... As yet, I have not done *any* js coding (hence my purchase of Larry's book), so a couple of pointers would be much appreciated. TIA Link to comment Share on other sites More sharing options...
Larry Posted March 26, 2012 Share Posted March 26, 2012 Chapter 9 does explain how to set CSS properties using JavaScript. Also, just to confirm, have you read the first eight chapters? Link to comment Share on other sites More sharing options...
peppericious1 Posted March 26, 2012 Author Share Posted March 26, 2012 Chapter 9 does explain how to set CSS properties using JavaScript. Also, just to confirm, have you read the first eight chapters? ... so that's what I have to do - to change the height of the modal mask div by referring to document.body.clientHeight as HartleySan suggested, is that right? No, I have only flicked through the table of contents thus far as I only received your book on Thursday of last week. I was working on the project above before the book arrived and must get it off my desk before I can dig in to the book... Link to comment Share on other sites More sharing options...
HartleySan Posted March 27, 2012 Share Posted March 27, 2012 Sorry to not fully answer your question. I was kind of assuming that you knew how to make the actual assignment. As an example, if you have a div in your HTML with an ID of "overlay", you could do something like the following: var overlayDiv = document.getElementById('overlay'); overlayDiv.style.height = document.body.clientHeight; That should work. 1 Link to comment Share on other sites More sharing options...
peppericious1 Posted March 27, 2012 Author Share Posted March 27, 2012 Sorry to not fully answer your question. I was kind of assuming that you knew how to make the actual assignment. As an example, if you have a div in your HTML with an ID of "overlay", you could do something like the following: var overlayDiv = document.getElementById('overlay'); overlayDiv.style.height = document.body.clientHeight; That should work. That's great, HartleySan, thanks. I'll give it a go right away and if I'm still in trouble, will post back. p.s. I see from your signature that you're in Japan... I lived in the south of Honshu for 2 years back in the early 90s… a wonderful time. Mata ato de, ne! Link to comment Share on other sites More sharing options...
HartleySan Posted March 28, 2012 Share Posted March 28, 2012 Yeah, in Yokohama. Edit: That's already written in my avatar area. Whoops! Hehe. Link to comment Share on other sites More sharing options...
Recommended Posts