Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Mouse Over functionality

Posted on 2009-04-08
5
Medium Priority
?
372 Views
Last Modified: 2012-05-06
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
Comment
Question by:aman0711
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 3

Accepted Solution

by:
avdej earned 2000 total points
ID: 24102570
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
 
LVL 10

Author Comment

by:aman0711
ID: 24107410
Thank you Avdej :-)
0
 
LVL 10

Author Closing Comment

by:aman0711
ID: 31568217
Thank you so much :-)
0
 
LVL 10

Author Comment

by:aman0711
ID: 25852166
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is the second of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers the basic installation and configuration of the test automation tools used by…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
This theoretical tutorial explains exceptions, reasons for exceptions, different categories of exception and exception hierarchy.
Suggested Courses

661 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question