javascript - Popup window to always appear fixed to top edge BUT scrolls with entire page if content larger than screen height? -


let me try , make sense. have search page returns lots of search results google. each of search results have trigger (via icon using onmouseover) access more info in popup window pops right of search results, google. here want popup window:

  • no matter if looking @ first search result @ top of page, or last search result way down @ bottom of page, want popup window align top edge of screen, regardless of vertically on page (similar fixed)

  • but, if popup window happens contain more data vertical screen height allows, instead of popup window creating scrollbars internally, want popup window scroll right along else on page (similar absolute)

  • the problem fixed chops off data goes below bottom of visible browser window height making inaccesible without internal scrollbars. absolute, popup scrolls along other stuff on page great , want, appears @ top of page, when @ bottom of page, making invisible user if results list long.

its trying combine 2 methods in way. summarize:

  • when trigger popup via onmouseover, popup window should affix top edge no matter vertically, if content vertically taller screen allows, should able scroll entire page down see rest of it. should not have use internal scrollbars within popup window fixed.

is possible , how should go it? thanks!

you're going need javascript.

first, make set popup divs position: absolute. act fixed in can go anywhere on page through left , top, still scrolls page.

on link hover, make js detect browser's scroll position (through window.offsety or $(window).scrolltop() in jquery). apply offset popup:

$('.link').on('click', function () {     $('.preview').css('top', $(window).scrolltop()); });

remember tweak other css properties of popup suit needs - however, of can done in css; js need top property.

fiddle: http://jsfiddle.net/gwvnx/


Comments

Post a Comment

Popular posts from this blog

monitor web browser programmatically in Android? -

i've got tricky question here. need users make payment bank (namely barclaycard) in uk. so, have https url , add parameters (such amount pay, order reference, etc) url, start http connection intent.actionview, redirect user browser can enter credit card details on bank's webpage , make payment our account successfully. far ? the code use below (i changed values privacy reasons) problem is, need app when user has completed/failed/cancelled payment. barclaycardautomatically redirects particular url when payment has succeeded, 1 if failed. there no way of knowing when barclaycard payment has succeeded go android app somehow ? button cardbutton = (button) findviewbyid(r.id.card_button); cardbutton.setonclicklistener(new view.onclicklistener() { @override public void onclick(view arg0) { string prehashstring = new string(); string prohashstring = new string(); string shapassphrase = new string(); shapassphrase = "gsvth£h70zkh...
Read more

Shrink a YouTube video to responsive width -

i have youtube video embedded on our website , when shrink screen tablet or phone sizes stops shrinking @ around 560px in width. standard youtube videos or there can add code make go smaller? you can make youtube videos responsive css. wrap iframe in div class of "videowrapper" , apply following styles: .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } the .videowrapper div should inside responsive element. padding on .videowrapper necessary keep video collapsing. may have tweak numbers depending upon layout.
Read more

wpf - PdfWriter.GetInstance throws System.NullReferenceException -

i'm trying create pdf document using itextsharp 5.3.4 using following document document = new document(); filestream stm = new filestream(filename, filemode.create); pdfwriter writer = pdfwriter.getinstance(document, stm); i'm getting system.nullreferenceexception following stack trace: system.nullreferenceexception occurred hresult=-2147467261 message=la référence d'objet n'est pas définie à une instance d'un objet. source=itextsharp stacktrace: à itextsharp.text.version.getinstance() innerexception: i've verified neither document nor stm null, , if select "continue" in vs12 document created - exception thrown. updated itextsharp 5.4.0 , it's still occurring. can't find information on anywhere - got ideas? make sure not catching exceptions. nullreferenceexception can 1 caught , handled inside itextsharp, don't care it. fact can continue supports theory. change following setting verify: debug -> exceptions ...
Read more