• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

jQuery - positioning and hiding

 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65216
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
JQuery UI Dialog can be modal http://jqueryui.com/demos/dialog/#modal-message

Eric
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
hidden element can not be focus means you are calling focus to a element that is not visible.

Eric
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
load it off the page, set the position to a large negative number

Eric
 
Rob Hunter
Ranch Hand
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 832
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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).
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic