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
B2000B2000 

JQuery Mouseover and Mouseout

I am trying to use JQuery to display some text when some other text is moused over but it is not working.  Here is my current code.  Thanks.

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function(){
  j$('[id$=hideshow]').mouseover(function(){
    j$('[id$=description]').show();
  });
  j$('[id$=hideshow]').mouseout(function(){
    j$('[id$=description]').hide();
  });
});
</script>

TABLE
<td style="text-align:left;vertical-align:middle;">
<apex:outputText value="{!wISL.ms.Name}" id="hideshow" /> 
<apex:outputText value=" {!wISL.ms.Service_Description__c}" id="description"/>
</td>

 

Rahul SharmaRahul Sharma

Hi Brian Conlon,

 

Would like to know what is not working in your case.

 

After looking your code I noticed that by default description is been displayed and is only made hidden after mouse out.

Make it hidden by default so that it works exactly the way you may need.

 

<apex:outputText value="{!wISL.ms.Name}" id="hideshow" /> 
<apex:outputText value=" {!wISL.ms.Service_Description__c}" id="description" style="display: none;"/>

 
TrinayTrinay

Hi Brian,

 

   I check out your code its working for me.

   If you r using standard controller you have to add the object record id to the URL,

       For eg, https://c.ap1.visual.force.com/apex/billdetails?id=Record_Id

 

 

 

<apex:page standardController="loginInfo__c">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function()
{
  j$('[id$=hideshow]').mouseover(function()
  {
    j$('[id$=description]').show();
  });
  j$('[id$=hideshow]').mouseout(function()
  {
    j$('[id$=description]').hide();
  });
});
</script>

  <apex:outputText value="{!loginInfo__c.Name}" id="hideshow" />
  <apex:outputText value="{!loginInfo__c.LastName__c}" id="description"/>
 
</apex:page>

 

Thanks,

Trinay
B2000B2000

Trinay thanks for your response.  The page is a custom controller.  The values are in a wrapper class with ms being a custom object.  The values are in a table so I thought I might need the "each" selector to get the correct row.  I modified the code as follows and still no success.

 

<apex:page controller="ProServ">

j$(document).ready(function(){
  j$('[id$=hideshow]').mouseover.each(function(i){
    j$(this)('[id$=description]').show();
  });
  j$('[id$=hideshow]').mouseout.each(function(i){
    j$(this)('[id$=description]').hide();
  });


<table style="table-layout:fixed; width:1020px;" border="1">
  <apex:variable var="wISLIdx" value="{!0}"/>
  <apex:repeat value="{!wIncludedServiceList}" var="wISL"> 
  <tr >
    <td style="text-align:left;vertical-align:middle;">
      <apex:outputText value="{!wISL.ms.Name}" id="hideshow" /> 
      <apex:outputText value=" {!wISL.ms.Service_Description__c}" id="description" style="display: none;"/>
    </td>