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
Swathi JainSwathi Jain 

I want to implement onmouseover functionality in visualforce.

Hi,

This is swathi,

i want to put some links in vf page with respect to different pageblocksections 

If user put the mouse on pageblock section , i want to show the links in side of the side bar and , if user clicks the links it need to be open in iframe ,

I am new to force , please help me asap

 

I have page like this 

<apex:page>

<apex:pageblock>

<apex:pageblocksection title="PG1">

<apex:commandlink src="www.google.com"/>

<apex:commandlink src="www.facebook.com"/>

</apex:pageblocksection>

</apex:pageblock>

</apex:page>

If i put the mouse on the PG1 section all the links need to visible and if i clicks the links these need to visible in iframe

Can you please reply me asap . Please.\\

 

I am trying by this way but not easily getting 

Pls refer the following code :

 

<apex:page>


<script>
function test()
{
document.getElementById('{!$Component.pb.pbs.pan}').style.display='block';
</script>


<apex:pageBlock id="pb">
<apex:pageBlockSection title="PG1" onmouseover="test();"  id="pbs">


<apex:outputPanel id="pan" style="display:none;">
<a href="www.google.com" target="_blank">Hi</a>
<a href="www.facebook.com" target="_blank">Hii</a>
</apex:outputPanel>


</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

which is not easily getting in my environment..

please answer me 

b-Forceb-Force

It seems your javascript funcion has some error 

 

function test()
{
document.getElementById('{!$Component.pb.pbs.pan}').style.display='block';

}
</script>

 

Also define script in header section 

 

Thanks,

bForce
IsaygarciaIsaygarcia

Use HTML and jQuery

 

or

 

Using the rendered attribute (see Standard Component Reference for more info) and AJAX (rerender attribute) to show/hide a output panel on Block layout (see apex:outputPanel )  containing the urls. 

 

Something like this :

 

<apex:page controller="myController">
<apex:form>
<apex:actionFunction name="show" action="{!show}" rerender="pb"/>
<apex:actionFunction name="hide" action="{!hide}" rerender="pb"/>

<apex:pageBlock id="pb" onmouseover="show()" onmouseout="hide()">
<apex:outputPanel id="panel" rendered="{!isRendered}">

<a href="some_url">Text</a>

 </apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page>

Controller:
public myController {
public myController{ }

public boolean isRendered {get; set;}

public void show(){
isRendered = true;
}

public void hide(){
isRendered = false;
}
}

 

 

You can adjust the PageBlock using CSS (or tables)  making it a SideBar. 
Navatar_DbSupNavatar_DbSup

Hi,

 

Try the below code snippet as reference:

 

----------------- VF Page-------------------

<apex:page controller="cls_onmouseovertest" >

 

 

<script>

function test()

{

document.getElementById('{!$Component.pb.pbs.pan}').style.display='block';

}

 

</script>

 

 

<apex:pageBlock id="pb">

<apex:pageBlockSection title="PG1" onmouseover="test()"  id="pbs">

 

 

<apex:outputPanel id="pan" style="display:none;">

<apex:form >

<apex:commandLink value="Hi" action="{!changeurl}"  reRender="chk"/><br/>

<apex:commandLink value="Hii" action="{!changeurl1}" reRender="chk"/>

</apex:form>

 

</apex:outputPanel>

 

 

</apex:pageBlockSection>

</apex:pageBlock>

<apex:outputPanel id="chk">

<apex:iframe src="{!displayurl}"  scrolling="true"   />

</apex:outputPanel>

 

</apex:page>

 

-------------------------- Apex Controller -----------------------

 

public class cls_onmouseovertest

{

    public string displayurl{get;set;}

    public cls_onmouseovertest()

    {

        displayurl='';

    }

    public void changeurl()

    {

         displayurl='http://www.force.com';

    }

    public void changeurl1()

    {

         displayurl='http://www.facebook.com';

    }

}

 

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

Based on above answers i updated likethis my code 

Page is like 

<apex:page controller="cls_onmouseovertest" sidebar="false">
<apex:form >
<apex:actionFunction name="show" action="{!show}" rerender="pb"/>
<apex:actionFunction name="hide" action="{!hide}" rerender="pb"/>
<table>
<tr>
<td width="200" valign="top">

<apex:pageBlock >
<apex:pageBlockSection id="pb" onmouseover="show()" onmouseout="hide()" title="Refresh Tools" collapsible="false" showHeader="true">


<apex:outputPanel id="panel" rendered="{!isRendered}">

<apex:commandLink value="Google" action="{!google}" reRender="chk"/><br/>
<apex:commandLink value="Service" action="{!Service}" reRender="chk" /><br/>
<apex:outputLink value="http://www.facebook.com" target="_blank">Facebook</apex:outputLink>


</apex:outputPanel>


</apex:pageBlockSection>
</apex:pageBlock>
</td>
<td width="1200">
<apex:outputPanel id="chk">
<apex:iframe src="{!displayurl}" scrolling="true" height="1500" />
</apex:outputPanel>
</td></tr></table>
</apex:form>
</apex:page>

 

Class is 

public class cls_onmouseovertest
{

 

public boolean isRendered {get; set;}

public void show(){
isRendered = true;
}

public void hide(){
isRendered = false;
}

public string displayurl{get;set;}
public cls_onmouseovertest()
{
displayurl='';
}
public void  google()
{
displayurl='https://www.google.com';
}
public void service()
{
displayurl='https://sws.gsa.gov/sws/swsLogin.do';
}

}

But the out put i am looking something like this 

http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

Is it possible like this 

 


IsaygarciaIsaygarcia

You can use that, upload it as Statick resource and then make a reference to it as a script.