Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 377
  • Last Modified:

Mouse Over functionality

Hi Experts,
         
           I have the attached table on my jsp page. As you can see, this is not a pretty table. What I want to achieve is that:
     * Right now I am displaying an equation like 10/100=10%.
 
     What I want is: Just to display 10% in every cell but when a user rolls his mouse over the value, it should display the calculation 10/100=10% in a small pop up like display.

      Right now I have no clue how to do this. please help me out.
     
Tabbbbb.PNG
0
aman0711
Asked:
aman0711
  • 3
1 Solution
 
avdejCommented:
I suppose, the simplest and proven way to achieve the desired behavior is to do the following:
(See the modified line in the attached code snippet)

1. place information you want to display on mouseOver into a value of 'title' attribute of a <TD> element.
2. reduce data amount within <TD></TD> as you've mentioned above.

At run time a value of 'title' attribute will be displayed as "Tooltip" in most browsers.
If it you need more styling/displaying options then you will have to extend this solution by means of JavaScript/CSS.

3. Write JS/CSS code that meet your need and embed it into the page source at a proper place.
4. For each <TD> element generate/add:
   a)  a unique 'id' attribute.
   b) onmouseover="javascript:{funcName}('{ID}')" AND onmouseout="javascript:{funcName}('{ID}')" entries
where:
   {funcName} is the name of your JS mouse event handler (see 3.)
   {ID} is the value of id attribute of that particular <TD> element.

I wish you a lot of success,
Avdej

<TD align="center" title="<%= totalMetrics==0 ? "NA" : rs1.getInt(5)+"/"+rs1.getInt(6)+"="+rs1.getFloat(7)+"%" %>"><%= totalMetrics==0 ? "NA" : rs1.getFloat(7)+"%" %></TD>

Open in new window

0
 
aman0711Author Commented:
Thank you Avdej :-)
0
 
aman0711Author Commented:
Thank you so much :-)
0
 
aman0711Author Commented:
Code and snapshot to be replaced in the question:



<table border="1" cellspacing="1" bgcolor="#FFFFFF" style="font-size:0.9em" width="500">
        <tr>
                <th align="center"><b>App</b></th>
                <%
                        Calendar cal = Calendar.getInstance();
                        SimpleDateFormat sdf = new SimpleDateFormat("MMM");
                        cal.set(Calendar.MONTH, Calendar.JULY);
                        for (int i = 0; i < 12; i++) {
                                  java.util.Date month = cal.getTime();
                                 
                                                                    
                %>
                <TH align="center"><%=sdf.format(month)%></TH>
                <%
                            
                        cal.roll(Calendar.MONTH, 1);
                        }
                %>
        </tr>
        <%
                Connection conn = null;
                conn = db.getConnection();
                       
                String sql = "";
                PreparedStatement pstmt, subpstmt = null;
                ResultSet rs, rs1 = null;
 
                sql = "Select DISTINCT App from SAMPLE_TABLE";
                pstmt = conn.prepareStatement(sql);
                rs = pstmt.executeQuery();
                while (rs.next()) {
        %>
        <TR><TD><%=rs.getString(1)%></TD>
                <%
                                String subquery = "Select * from( Select * from SAMPLE_TABLE2 WHERE APPL IN ('"
                                + rs.getString(1)
                                + "') ORDER BY YEAR , DECODE(UPPER(MONTH), 'JAN', 7, 'FEB', 8, 'MAR', 9, 'APR', 10, 'MAY', 11, 'JUN', 12, 'JUL', 1, 'AUG', 2, 'SEP', 3, 'OCT', 4, 'NOV', 5, 'DEC', 6) ) WHERE ROWNUM<=12 and ASP='xyz'";
                                subpstmt = conn.prepareStatement(subquery);
                                rs1 = subpstmt.executeQuery();
                                while (rs1.next()) {
                %>
                <%
                        int totalMetrics = rs1.getInt(6);
                        %>
                <TD align="center"><%= totalMetrics==0 ? "NA" :  (rs1.getInt(5)+"/"+rs1.getInt(6)+"="+rs1.getFloat(7)+"%") %></TD>
                <%
                }
                %>
        </TR>
        <%
                }
                rs.close();
                rs1.close();
                pstmt.close();
                subpstmt.close();
                conn.close();
        %>
</table>

Open in new window

Tabbbbb.PNG
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now