CODEWITHSUNDEEP
jquerycss
Greg
Greg

Reputation: 567

Making a Div Display When Clicked Wherever the Page is

I have one page site that scrolls. I have a navgation menu that remains at the top of the browser at all times. One of the list items is the contact page. I'd like to have a div fadeIn (which I have no trouble doing with jQuery), wherever you happen to be on the page. So I was wondering how do I define it's position? For instance, If I am scrolled half way down the page, and click the contact link, can it just appear right there vs say back up at the top of the page?

Upvotes: 0

Views: 285

Answers (1)

pdegand59
pdegand59

Reputation: 13039

You can use position:fixed; on your contact div. With a simple JS script, you can dynamically set the top and left attribute to position the div in the center of the screen.

fixed position is relative to the viewport. absolute position is relative to the document.

You can test these CSS properties on this w3school example. Reduce your browser height to add a scroll bar and compare the result of fixed vs absolute position.

EDIT : basic fixed position popup (Fiddle)

You can get the viewport size with $(window).width() or $(window).height(). Then you can get the popup div size with equivalent jQuery method on the jQuery object. And finally, you calculate the correct position with : (viewPortSize/2) - (divSize/2).

Please note that if the div is not visible (display:none for example), its size will be 0 ! That's why I call the .fadeIn() function before positioning the popup to be sure that the div will be visible.

Upvotes: 1

Related Questions