Search jQuery

jQuery Forum

Screen name:
anilsandhya

anilsandhya's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Same UI box appears on different link.
[3Replies]
- 14-Nov-2012 06:22 PM
- Forum: Using jQuery UI
I am new to javascript and jquery.
Below i have a code where when you hover on the link a UI window opens with sample text.
The problem is that i want to make different contents to appear in hover UI window when you hover on different link. The code below displayed the 2nd content even when i hover on first link.
Please help.
here is the code.
2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <meta charset="UTF-8" />
6. <title>jQuery UI Dialog: Position relative to mouse event</title>
8. 
9. <style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
10. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
12. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
14. <style type="text/css">
15. .ui-dialog-titlebar-close { display: none; }
16. code { font-size: 2em; }
17. </style>
19. </head>
20. <body>
22. <h1>Placing dialog box next to mouse hover</h1>
24. <a href="#" style="font-size: 2em;">hover mouse over this link1</a>
26. <div class="dialog" title="jQuery UI Dialog1" style="display:none">
27. <p>positioned relative to mousemove event, using the position utility</p>
28. <code><pre>.dialog({
29. position: {
30. my: 'left1',
31. at: 'right1',
32. of: event1
33. }
34. });</pre></code>
35. </div>
37. <h1>Placing dialog box next to mouse hover</h1>
39. <a href="#" style="font-size: 2em;">hover mouse over this link2</a>
41. <div class="dialog" title="jQuery UI Dialog2" style="display:none">
42. <p>positioned relative to mousemove event, using the position utility</p>
43. <code><pre>.dialog({
44. position: {
45. my: 'left2',
46. at: 'right2',
47. of: event2
48. }
49. });</pre></code>
50. </div>
52. <script>
53. var dlg = $("div.dialog").dialog({
54. autoOpen: false,
55. draggable: false,
56. resizable: false,
57. width: 350
58. });
60. $("a").mouseover(function() {
61. dlg.dialog("open");
62. }).mousemove(function(event) {
63. dlg.dialog("option", "position", {
64. my: "left top",
65. at: "right bottom",
66. of: event,
67. offset: "20 20"
68. });
69. }).mouseout(function() {
70. dlg.dialog("close");
71. });
72. </script>
75. </body>
76. </html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend