Solved

Mouse Over functionality

Posted on 2009-04-08
5
346 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
  • 3
5 Comments
 
LVL 3

Accepted Solution

by:
avdej earned 500 total points
Comment Utility
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
Comment Utility
Thank you Avdej :-)
0
 
LVL 10

Author Closing Comment

by:aman0711
Comment Utility
Thank you so much :-)
0
 
LVL 10

Author Comment

by:aman0711
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Java Flight Recorder and Java Mission Control together create a complete tool chain to continuously collect low level and detailed runtime information enabling after-the-fact incident analysis. Java Flight Recorder is a profiling and event collectio…
Viewers learn how to read error messages and identify possible mistakes that could cause hours of frustration. Coding is as much about debugging your code as it is about writing it. Define Error Message: Line Numbers: Type of Error: Break Down…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

772 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now