File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes jQuery - positioning and hiding Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "jQuery - positioning and hiding" Watch "jQuery - positioning and hiding" New topic
Author

jQuery - positioning and hiding

Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 818
I have a webpage that you need to scroll down in order to see all the content in most cases. I want to display a hidden div tag (300pts by 300pts) in the center of the displaying portion of the webpage AND have the rest of the content grayed out until I click a button within the div tag to hide the tag and un-gray the "background" display. Basically I was wondering how I could accomplish this using jQuery? Thanks in advance for any help given. :-)
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61187
    
  66

If it's hidden, how can you click on it? Your description is unclear.

But yeah, if it can be done with javaScript, it can be done with jQuery.

A "curtain" is easy. Stretch an absolutely positioned div over the entire document and give it an opacity value and high z-index.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
JQuery UI Dialog can be modal http://jqueryui.com/demos/dialog/#modal-message

Eric
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 818
Here's an example of what I'm trying to do. Go to www.monster.com and click login on the right. It's pretty much like that - page grayed out/disabled in the background and login section centered on page. For the login section, however, I'm trying to use a div tag and an embedded iframe (that goes to another website altogether for validation). So in the div tag above the iframe I want to have a place to exit out of the login page (i.e. hide the surrounding div tag and the grayed out panel div on the back). Is this possible? I was getting an error earlier mentioning something about hidden element cannot gain focus? Thanks again guys.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
hidden element can not be focus means you are calling focus to a element that is not visible.

Eric
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 818
Eric, I have a div wrapper around a iframe whereby the div is set to display: none or visibility: hidden because I don't want that section of code displayed. The iframe loads a page and this is where the error comes in about focus. Is there a way to hide the div and iframe and still load the page in the iframe without page errors? Thanks again.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
load it off the page, set the position to a large negative number

Eric
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 818
Thanks Eric. Just wondering if you've gotten this sort of thing to work using negative values for positioning before? First attempts I've made still causes the div tag to display in the viewable area of the page. Would you happen to have a working example of doing this? It looks straightforward enough but doesn't seem to be working (testing initially on IE7). Thanks again.
Rob Hunter
Ranch Hand

Joined: Apr 09, 2002
Posts: 818
Here's the solution I'm using. Instead of having the iframe hidden on startup I insert the iframe tag into the div tag at the time I need the iframe to appear, just after the div tag is made visible. Once the page loads with the div tag set to display: none there's no problem. Using the DOM, I insert the iframe tag after I click a button and make the div tag visible. Seems to work fine in IE 7 (haven't tested elsewhere yet).
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: jQuery - positioning and hiding