function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Manasa GuptaManasa Gupta 

How to make popup scrollable and also movable?

I have a popup which i need make it scrollable and movable(meaning one should be able to move it to any postion on the page).

 

<

styletype="text/css">

      

.customPopup{

           

background-color: grey;

           

border-style: solid;

           

border-width: 3px;

           

border-color:white;

           

left: 50%;

           

padding:10px;

           

position: absolute;

           

z-index: 9999;

           

scrollbar=yes;

           

resizable=no;

           

/* These are the 3 css properties you will need to tweak so the pop

            up displays in the center of the screen. First set the width. Then set

            margin-left to negative half of what the width is. You can also add

            the height property for a fixed size pop up.*/

           

width: 40%;

           

margin-left: -3%;

           

top:70%;

        }

</style>

these are all the attributes i have added for my popup block.

 

Navatar_DbSupNavatar_DbSup

Hi,


You can try below code

 

<style type='text/css'>
.dragme { cursor: move }
</style>

<script type='text/javascript'>
var ie = document.all;
var nn6 = document.getElementById &&! document.all;

var isdrag = false;
var x, y;
var dobj;

function movemouse( e ) {
 if( isdrag ) {
   dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
   dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
   return false;
 }
}

function selectmouse( e ) {
 var fobj       = nn6 ? e.target : event.srcElement;
 var topelement = nn6 ?  HTML  :  BODY ;
 while (fobj.tagName != topelement && fobj.className !=  dragme ) {
   fobj = nn6 ? fobj.parentNode : fobj.parentElement;
 }

 if (fobj.className== dragme ) {
   isdrag = true;
   dobj = document.getElementById( styled_popup );
   tx = parseInt(dobj.style.left+0);
   ty = parseInt(dobj.style.top+0);
   x = nn6 ? e.clientX : event.clientX;
   y = nn6 ? e.clientY : event.clientY;
   document.onmousemove=movemouse;
   return false;
 }
}

function styledPopupClose() {
 document.getElementById( styled_popup ).style.display =  none ;
}

document.onmousedown=selectmouse;
document.onmouseup=new Function( isdrag=false );
</script>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 50px; left: 50px;'>

<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='media/x11_title.gif' class='dragme'></td>
<td><a href='javascript&colon;styledPopupClose();'><img height='23' width='24' src='media/x11_close.gif'
border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url( media/x11_body.gif ) no-repeat top left; width: 380px; height: 277px;'>
Drag my window title to see me moving :-)
</td></tr>
</table>

</div>

<input type='submit' onClick='document.getElementById( styled_popup ).style.display= block ' value=' Fire! '>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 
Manasa GuptaManasa Gupta

How do i incorporate it with my code

 

My pop block is as below:

 

<apex:pageBlockSection>

             

<b/><apex:commandButtonvalue="Search Dealer"action="{!showPopup}"rerender="popup"/>

              

<apex:outputPanelid="popup">

              

<apex:pageMessages/>

                 

<apex:outputPanelstyleClass="customPopup"layout="block"rendered="{!displayPopUp}">

                   

                 

<apex:outputLabelvalue="Dealer Name"for="dName"/>

                 

<apex:inputTextid="dname"value="{!dealerName}"/>

                 

                 

                  

<b><apex:commandButtonid="search"value="Find"action="{!searchDealer}"reRender="dealer"/></b>

----

</apex:pageBlockSection>

 

here block called popup wrks as pop up

 

please let me know if u need more info.
Jyothi Reddy 16Jyothi Reddy 16
Hi Navatar_DbSup,
the code draggable popup not working , and i want in popup window i want to display labels and those are draggable ,when i click the label the colo will change how it is