javascript - How to float a modal window in jquery -

-

i using jquery ui create floating window. able create window. having trouble in making floating. want window should in top right corner of "body". (now can see on right @ bottom) , want make moving. when scroll page window should scroll along it. e.g. http://manos.malihu.gr/tuts/jquery-floating-menu.html

here code have done far.

please find code on http://jsfiddle.net/z8rw6/1/

javascript code:

$(document).ready(function(){   $("#dialog").dialog();   var $parent = $('#body'); var windowheight = $(window).height(); var parentabsolutetop = $parent.offset().top; var parentabsolutebottom = parentabsolutetop + $parent.height(); var topstop = parentabsolutetop + $( ".selector" ).dialog( "option", "height" ); $('#dialog').dialog({ width: 300,height: 600 }).dialog('widget').position({        my: 'right top',        at: 'right top',        of: $('#body')     });  $(window).scroll(function(event) {     var windowbottom = $(window).scrolltop() + windowheight;  if (windowbottom < topstop)      $('.selector').dialog({ dialogclass: 'myposition1' }); else if (windowbottom >= topstop && windowbottom <= parentabsolutebottom)     $('.selector').dialog({ dialogclass: 'myposition2' }); else     $('.selector').dialog({ dialogclass: 'myposition3' });  })

css code:

#page{     width:800px;     margin:0 auto; } .myposition1 { position: 'absolute',             top: '0px',             bottom: 'auto',             right: '0'  } .myposition2 {            position: 'fixed',             top: 'auto',             bottom: 'auto',             right: '0'         }  .myposition3 {          position: 'absolute',         top: 'auto',         bottom: '0px',         right: '0'         } #header{     border:1px solid blue;     height:15px;     margin:8px; } #body{     border:1px solid blue;     height:5600px;     margin:8px;     position: relative; } #footer{     border:1px solid blue;     height:15px;     margin:8px; } h1,h2{     padding:16px; }  #debug {     position: fixed;     bottom: 0;     right: 0;     height: 100px;     width: 100px;     color: red; }

html code:

<html> <head> <link href="css/style.css" rel="stylesheet" type="text/css">  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  <script language="javascript" type="text/javascript" src='javascript/behaviour.js'></script>  </head> <body style="font-size:62.5%;"> <div id="page">  <div id="header"><h1>header</h1></div>      <div id="body" >         <h1>content top -> when scrolling box should stop here (at line right above text)</h1>         <div id="dialog" title="detailed feedback">i'm in dialog </div>          <span style="position: absolute; bottom: 0; ">content bottom -> when scrolling down box should stop here (at line right below text)</span>      </div>     <div id="footer"><h1>footer</h1></div>     <div id="debug"></div> </div> </body> </html>

this should work html, though should increase #footer's height (like 400px) in css able confirm works :

var $d; $(document).ready(function(){         var dlg_width = 300;     var dlg_height = 200;     var dlg_offset_x = $("#page").width() - dlg_width + 100;     var dlg_margin_top = $("#header").outerheight(true); // includemargins=true     var dlg_margin_bottom = $("#footer").outerheight(true); // includemargins=true      $d = $('#dialog').dialog({         width: dlg_width,         height: dlg_height,         position: [dlg_offset_x, dlg_margin_top]     });      $(window).bind('scroll', function(evt){         var scrolltop = $(window).scrolltop();         var bottom = $(document).height() - scrolltop;             $d.dialog("option", {"position": [                 dlg_offset_x,                 ((dlg_margin_top - scrolltop > 0) ?                     dlg_margin_top - scrolltop :                         ((bottom - dlg_height > dlg_margin_bottom) ?                             0 :                             bottom - dlg_height - dlg_margin_bottom                         )                 )             ]});     }); });

​ can see live here : http://jsfiddle.net/5tfqy/10/

note there quircks though:

  • dialog sticks right of viewport, when should stick right of #body. did miss something, or limitation of dialog()?
  • dlg_margin_bottom = $("#footer").outerheight(true) isn't enough of value pixel-perfectly honour bottom-blue-line requirement. #body's margin , border sizes should added. tried keep simple not complicated.

Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c# - Copy ObservableCollection to another ObservableCollection -

-
how copy observablecollection item observablecollection without reference of first collection? here observablecollection item value changes affecting both collections. code private observablecollection<ratemodel> _allmetalrate = new observablecollection<ratemodel>(); private observablecollection<ratemodel> _metalrateondate = new observablecollection<ratemodel>(); public observablecollection<ratemodel> allmetalrate { { return this._allmetalrate; } set { this._allmetalrate = value; notifypropertychanged("metalrate"); } } public observablecollection<ratemodel> metalrateondate { { return this._metalrateondate; } set { this._metalrateondate = value; notifypropertychanged("metalrateondate"); } } foreach (var item in metalrateondate) allmetalrate.add(item); what causing , how can solve it? you need clone object referenced item before it's a...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more