function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Kumaresan M 2Kumaresan M 2 

Issues with custom pop up in Visual force page (without StandardStyleSheet) ?

In my project we have custom pop up section which will render during "onmouseover" event and it will go off if "onmouseout" happens. Its implemented in Javascript. (No action functions). The issue that we are facing here is we do want to scroll down/up in the pop up section, on which i need help in doing ? As soon as i moved out from the element, pop up goes off. Please help me to get any ideas ?

User-added image

Target element code:
<apex:outputPanel rendered="{!c.isSecondaryControlsPresent}" id="controls"  onmouseover="showMultFunction(this);" onmouseout="showMultFunction1(this);" onclick="javascript:void(0);">

In js fucntion it will make some other panel to render in Vf page.
Sagarika RoutSagarika Rout
Hi,
Just for giving idea whether you could able to implement , based on your requirement,
you can go for a custom pop up , which will display required information on click of text.

Below is the code

<apex:page controller="ControllerPopup">
  <style type="text/css">
        .custPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            width: 770px;
            margin-left: -380px;
            top:75px;
        }
        .popupBackground{
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }
   </style>
 <apex:form >
     <apex:pageBlock >
       <apex:pageBlockSection >
           <apex:commandButton value="Open Popup" action="{!displayPopUp}" reRender="panel"/>
       </apex:pageBlockSection>
     </apex:pageBlock>
     <apex:outputPanel id="panel">
     <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!isDisplayPopup}" />
      <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!isDisplayPopup}" >
       <apex:pageBlock >
         <apex:pageBlockSection >
           <apex:commandButton value="Cancel" action="{!Cancell}" reRender="panel"/>
         </apex:pageBlockSection>
       </apex:pageBlock>
     </apex:outputPanel>
   </apex:outputPanel>
 </apex:form>
</apex:page>
///////////////////////////////////////////
Controller: 
public with sharing class ControllerPopup {
  public boolean isDisplayPopUp{get;set;}
  public ControllerPopup (){
    //isDisplayPopUp = false;
  }
  public pageReference displayPopUp(){
      isDisplayPopUp = true;
      return null;
  }
  public pageReference Cancell(){
      isDisplayPopUp = false;
      return null;
  }
}

Thanks,
Sagarika
Kumaresan M 2Kumaresan M 2
My Client wants to have things in 100% javascript (Through mouse over events alone). Thanks for your reply.