Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts

    Draggable search pane

    Code:
    <table>
    			         <tr>
    			            <td valign="top">&nbsp;</td>
    			            <td id='gridTD' style="vertical-align:top;">
    				            <iframe name="exportIF" id="exportIF" src="" style="visibility:hidden;" width="0" height="0"></iframe>
    
    				            <div id='reportmain' style="position:relative;">
    				               <div id="advancedsearch" class="ui-jqgrid ui-widget ui-corner-all" 
    				                  style="margin:35px; padding:10px; position: absolute; left:0px; 
    				                     top:75px; font-size:8pt; z-index:99; 
    				                     background-color:#DDECF7; color:#0E539E; width:600px">
    				                  <table width="100%" cellpadding=0 cellspacing=0 border=0>
    				                     <tr>
    				                        <td align=left>
    				                           <div onmouseover='$("#advancedsearch").draggable("enable");'   onmouseout='$("#advancedsearch").draggable("option","disabled",true)'
    				                           style='cursor:move; width:20px; height:20px;'>
    				                              <img src="images/move.png"/>
    				                           </div>
    				                        </td>
    
    				                        <td align="right">
    				                           <span class='ui-jqgrid ui-icon ui-icon-circle-close' 
    				                                 style="left:" onclick='toggleAdvancedSearch();'>
    				                           </span>
    				                        </td>
    				                     </tr>
    				                  </table>
    				                  <div style="padding:5px; height:300px; background-color:#DDECF7; 
    				                              color:#0E539E; font-size:9pt;">
    				                     <form id="advancedsearchform">
    				                        <table class="ui-jqgrid ui-widget">
    
    				                           <tr>
    				                              <td align='center'>
    				                                 <input type="button" style='border:1px solid #0E539E; 
    				                                       background-color:#FFF;' name='Apply' value='Apply Filter'
    				                                       onclick='applyAdvSearch();'>&nbsp;&nbsp;&nbsp;&nbsp;
    				                                 <b>All Demographics</b>&nbsp;
    				                                 <sup>
    				                                    <input name='all_check'  type=checkbox 
    				                                       onclick="if(this.checked==true){
    				                                                   selectNoneorAllAdvSrch(null,'all');
    				                                                }
    				                                                else{
    				                                                   selectNoneorAllAdvSrch(null,'none');
    				                                                }">
    				                                 </sup>
    				                              </td>
    
    				                           </tr>
    				                           <tr>
    				                              <td>
    				                                 <div style="overflow-y:auto; overflow-x:hidden; height:275px;
    				                                             width:575px; border:1px solid #555;">
    				                                    <table class="advsearch" id="advsearchbox">
    				                                    </table><!-- table gender -->
    				                                 </div>
                                              </td>
                                           </tr>				  
    				                        </table><!-- table adv_search_demo_outer-->

    I've tried the following:

    Code:
    $("#advsearchbox").draggable({disabled: false});
    $("#advsearchbox").draggable();
    and nothing works.

    The box starts as hidden and then appears after link is clicked. I just want to drag the box.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    It's invisible I think because there's nothing within the table, so you can't see it to drag it. If I add some code into your table:

    Code:
    <table class="advsearch" id="advsearchbox">
    <tr>
    <td>Some text</td>
    </tr>
    </table><!-- table gender -->
    then it's draggable with:

    Code:
    $(document).ready(function(){
    	$("#advsearchbox").draggable();
    })

  • #3
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts
    The table starts as invisible, but we can click a link to get it to pop up.

    That works. But when it pops up, it's not draggable.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •