472,989 Members | 2,687 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > how to draw the div at the right position

Join Bytes to post your question to a community of 472,989 software developers and data experts.

How to draw the div at the right position

I have just got a javascript code from my friend. I've modified it for my purpose but a problem happens. First, here's my code

html
Expand|Select|Wrap|Line Numbers
  1.  
  2. <body>
  3. <table align="center" width="60%" height="100%" border="0" cellpadding="0" cellspacing="0">
  4.     <tr height="100">
  5.     <td width="20%" height="114">abc</td>
  6.     <td width="80%">def</td>
  7.     </tr>
  8.  
  9.   <tr id="fancyMenu">
  10.     <td xindex="0">
  11.  
  12.     <a href="http://www.diendantinhoc.vn">Home</a> 
  13.   <DIV class=expander style="display: none; FILTER: alpha(opacity=100); TOP: 9px; HEIGHT: 1px; op    acity: 0.99; MozOpacity: 0.99" xindex="0"></DIV>
  14.   </td>
  15.  
  16.   <td xindex="1">
  17.     <a href="http://www.thuvientinhoc.vn">My Photos</a> 
  18.   <DIV class=expander style="display: none; filter: alpha(opacity=100); TOP: 9px; HEIGHT: 1px; opacity: 0.99; MozOpacity: 0.99" xindex="1"></DIV>
  19.   </td>
  20.   <td xindex="2">
  21. <a href="http://www.anhkham.com">Skill</a>
  22.   <DIV class=expander style="display: none; filter: alpha(opacity=100); TOP: 9px; HEIGHT: 1px; opacity: 0.99; MozOpacity: 0.99" xindex="2"></DIV>
  23.   </td>
  24.   </tr>
  25.  
  26.     <tr>
  27.     <td colspan="2" width="18%"></td>
  28.        </tr>
  29.  
  30. </table>
  31.  
  32.  
  33. </body>
  34.  
css
Expand|Select|Wrap|Line Numbers
  1. body {
  2.     font-family:arial;
  3. }
  4. #fancyMenu {
  5.     position:relative;
  6.     width:250px;
  7.     margin:0 auto;
  8.     padding:0;
  9.     font:0.6em verdana,arial,helvetica;
  10.     text-transform:uppercase;
  11. }
  12.  
  13. #fancyMenu td {
  14.     position:relative;
  15.     padding:2px 2px 2px 6px;
  16.     width:240px;
  17.     border:1px solid #000;
  18.     list-style-type:none;
  19.     background-color:#FDFDFD;
  20.     background-image:url(bg.png);
  21.     margin:2px 0 0 0;
  22. }
  23.  
  24. #fancyMenu td a {
  25.     position:relative;
  26.     display:inline-block;
  27.     width:100%;
  28.     height:100%;
  29.     color:#525B53;
  30.     text-decoration:none;
  31.     z-index:10;
  32.     margin:0;
  33. }
  34.  
  35. #fancyMenu td>a {
  36.     display:block;
  37. }
  38.  
  39. #fancyMenu td a:hover {
  40.     color:#FFF;
  41. }
  42.  
  43. .expander {
  44.     position:absolute;
  45.     background-color:#000;
  46.     width:250px;
  47.     left:0px;
  48.     height:1px;
  49.     z-index:0;
  50.     display:none;
  51.     padding:0;
  52.     font-size:1px;
  53.     margin:0;
  54. }
  55.  
  56.  
and js
Expand|Select|Wrap|Line Numbers
  1. window.onload = fm_init;        // set up the onload event
  2. var d = document;            // shortcut reference to the document object
  3. var fm_textValues = new Array();    // array that will hold the text node values in the anchor tags
  4. var fm_activeLI = new Array();    // array of boolean values that will tell us if the expander DIV elements are in a transitional state
  5. var fm_expandObj = new Array();    // object array that we'll use to reference the expander DIV elements
  6. var fm_liObj;            // object array that we'll use to reference the TD elements
  7. var zInterval = new Array();        // the interval var we'll use for the expansion. array'd for each object for multiple running intervals
  8. var kInterval = new Array();        // the interval var we'll use for the fade. array'd for each object for multiple running intervals
  9.  
  10. var fm_curOpacity = new Array();    // the current opacity value for each expander div
  11. var fm_doFade = new Array();     // an array that we'll set as a function for passing through the setInterval for the fade
  12. var fm_doExpansion = new Array();    // an array that we'll set as a function for passing through the setInterval for the expansion
  13. var fm_stringIndex = new Array();    // used to track each indexOf in the fm_textValues array as the text is written back into the anchor tags.
  14.  
  15.  
  16. function fm_init() {
  17.     // bail out if this is an older browser
  18.     if(!d.getElementById)return;
  19.  
  20.     // reference the UL element
  21.     ulObj = d.getElementById("fancyMenu");
  22.     // create the array of TD elements that decend from the TR element
  23.     fm_liObj  = ulObj.getElementsByTagName("td");
  24.     // loop over the length of TD's and set them up for the script
  25.     for(i=0;i<fm_liObj.length;i++) {
  26.         // bogus xindex attribute is used to pass the index of the LI back to our event handlers so we know which object to reference
  27.         // in the liObj array
  28.         fm_liObj[i].xindex = i;
  29.         // reference to the anchor tag in the LI
  30.         aObj = fm_liObj[i].getElementsByTagName("a")[0];
  31.         // set up the mouse events for the anchor tags.
  32.         aObj.onmouseover = function() { fm_handleMouseOver(this.parentNode.xindex); }
  33.         aObj.onmouseout = function() { fm_handleMouseOut(this.parentNode.xindex); }
  34.  
  35.         // get the "innerText" of the anchor tag
  36.         fm_textValues[i] = aObj.innerHTML;
  37.  
  38.         // create the expander DIV element as a child of the current LI
  39.         fm_expandObj[i] = fm_liObj[i].appendChild(d.createElement("div"));
  40.         fm_expandObj[i].className = "expander";
  41.         fm_expandObj[i].style.top = fm_liObj[i].offsetHeight/2 + "px";
  42.         fm_expandObj[i].xindex = i;
  43.  
  44.         // initialize our intervals 
  45.         zInterval[i] = null; kInterval[i] = null;
  46.         // initialize the string index array, opacity array and activeLI array
  47.         fm_stringIndex[i] = 1;
  48.         fm_curOpacity[i] = 100;
  49.         fm_activeLI[i] = 0;
  50.     }
  51. }
  52.  
  53.  
  54. function fm_handleMouseOver(objIndex) {
  55.     // do nothing if the user has already moused over this element
  56.     if(fm_activeLI[objIndex])return;
  57.  
  58.     // set activeLI to true for this element
  59.     fm_activeLI[objIndex]=1;
  60.     // set the expander div up
  61.     fm_expandObj[objIndex].style.display = "block";
  62.     fm_expandObj[objIndex].style.height = "1px";
  63.     fm_expandObj[objIndex].style.top = fm_liObj[objIndex].offsetHeight/2+"px";
  64.  
  65.     // create a reference var for the function to pass to the interval
  66.     fm_doExpansion[objIndex] = function() { fm_expandDIV(objIndex); }
  67.     zInterval[objIndex] = setInterval(fm_doExpansion[objIndex],10);
  68. }
  69.  
  70. function fm_handleMouseOut(objIndex) {
  71.     // do nothing if this is already running for the object
  72.     if(kInterval[objIndex] != null) return;
  73.  
  74.     // reference to the anchor tag in the LI
  75.     aObj = fm_liObj[objIndex].getElementsByTagName("a")[0];
  76.     // blank out the innerHTML of the anchor tag
  77.     aObj.innerHTML = "";
  78.     // set the first letter of the text as the innerHTML of the anchor tag.
  79.     //aObj.appendChild(d.createTextNode(fm_textValues[objIndex].substring(0,1)));
  80.     aObj.innerHTML = fm_textValues[objIndex].substring(0,1);
  81.  
  82.     // create a reference var for the function to pass to the interval
  83.     fm_doFade[objIndex] = function() { fm_fadeExpander(objIndex); }
  84.     kInterval[objIndex] = setInterval(fm_doFade[objIndex],10);
  85. }
  86.  
  87. function fm_expandDIV(objIndex) {
  88.     // height and top arrays
  89.     h = new Array(); y = new Array();
  90.     // if the top of the expanding div is less than 0, go on...
  91.     if(fm_expandObj[objIndex].offsetTop>=0) {
  92.         // get the current top and height of the expanding div
  93.         h[objIndex] = fm_expandObj[objIndex].offsetHeight;
  94.         y[objIndex] = fm_expandObj[objIndex].offsetTop;
  95.         // if the height is less than than the height of the parent LI, increment
  96.         if(h[objIndex]<fm_liObj[objIndex].offsetHeight)h[objIndex]+=2;
  97.         // decrement the top
  98.         y[objIndex]--;
  99.         // put the div where it needs to be
  100.         fm_expandObj[objIndex].style.top = y[objIndex]+ "px";
  101.         fm_expandObj[objIndex].style.height = h[objIndex] + "px";
  102.     } else {
  103.         // finished expanding. clear the interval, null out the function reference and the interval reference
  104.         clearInterval(zInterval[objIndex]);
  105.         fm_doExpansion[objIndex]=null;
  106.         zInterval[objIndex] = null;
  107.     }
  108. }
  109.  
  110. function fm_fadeExpander(objIndex) {
  111.     // MSIE uses an percentage (0-100%) for opacity values, while everything else uses a floating point
  112.     // between 0 and 1. next lines adress the difference
  113.     fm_curOpacity[objIndex]=d.all?fm_curOpacity[objIndex]:fm_curOpacity[objIndex]/100;
  114.     // subtract 5 (or .5 if not MSIE) from the current opacity
  115.     fm_curOpacity[objIndex]-=d.all?5:0.05;
  116.  
  117.     // set the opacity values in all their different flavors.
  118.     fm_expandObj[objIndex].style.opacity = fm_curOpacity[objIndex];
  119.     fm_expandObj[objIndex].style.MozOpacity = fm_curOpacity[objIndex];
  120.     fm_expandObj[objIndex].style.filter="alpha(opacity=" + fm_curOpacity[objIndex] + ")";
  121.  
  122.     // reference to the anchor tag in the LI
  123.     aObj = fm_liObj[objIndex].getElementsByTagName("a")[0];
  124.     // if the current opacity is less than 60%, start adding the letters back in
  125.     if(fm_curOpacity[objIndex]<(d.all?60:0.6)) {    
  126.         aObj.appendChild(d.createTextNode(fm_textValues[objIndex].charAt(fm_stringIndex[objIndex])));
  127.         fm_stringIndex[objIndex]++;
  128.     }
  129.  
  130.     // if the opacity is less than 0 and the text has finished drawing, clean up
  131.     if(fm_curOpacity[objIndex]<=0 && aObj.innerHTML==fm_textValues[objIndex]) {
  132.         // clear the interval and null them out
  133.         clearInterval(kInterval[objIndex]);
  134.         kInterval[objIndex] = null;
  135.         // hide the expander div
  136.         fm_expandObj[objIndex].style.display = "none";
  137.  
  138.         // reset the expander div back to opaque
  139.         fm_expandObj[objIndex].style.opacity = 0.99;
  140.         fm_expandObj[objIndex].style.MozOpacity = 0.99;
  141.         fm_expandObj[objIndex].style.filter="alpha(opacity=100)";
  142.         // put the expander back at 1 pixel high and in the middle of the LI
  143.         fm_expandObj[objIndex].style.height = "1px";
  144.         fm_expandObj[objIndex].style.top = fm_liObj[objIndex].offsetHeight/2 + "px";
  145.         // set the activeLI to false
  146.         fm_activeLI[objIndex]=0;
  147.         // reset the currentOpacity to 100
  148.         // set the activeLI to false
  149.         fm_activeLI[objIndex]=0;
  150.         // reset the currentOpacity to 100
  151.         fm_curOpacity[objIndex] = 100;
  152.         // reset the stringIndex for the next go-round
  153.         fm_stringIndex[objIndex] = 1;
  154.         return;
  155.     }
  156.     // if this isnt MSIE, multiply the opacity value by 100 for the next go round.
  157.     if(!d.all)fm_curOpacity[objIndex]*=100;
  158. }
  159.  
the black block isn't ... repainted in the right place. I think there're some problems in the fm_expandDIV( ) function but don't know where it is. Anyone help me?

Sr for my English skill :(
Thanks 4 your helps!
Oct 24 '08 #1
4 3432
acoder
16,027 Expert Mod 8TB
What's the "right position"? Where do you want it to appear and where does it appear instead?
Oct 24 '08 #2
What's the "right position"? Where do you want it to appear and where does it appear instead?
Sr for my English skill :( When the mouse is over one of items of the menu, i want it to paint the black rectangle in that item. But with the code above, the rectangle appears at the left top. And i don't know why!
Oct 24 '08 #3
acoder
16,027 Expert Mod 8TB
Get the target of the event to display it in the element/div being moused over.
Oct 24 '08 #4
I'll try! Thanks for your help.
Oct 24 '08 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

21
Draw an Image on my Form
by: DraguVaso | last post by:
Hi, I have an inherited DataGrid, that does lots of extra stuff. For exemple drawing a backgroundimage in every cell. The problem is that it's taking too much time (using gdi+), so I want to do...
.NET Framework
9
Draw line from label to right margin
by: Haines Brown | last post by:
I would like to have a label followed by a line to the right margin, such as this: Label: _____________________________________________________________ There are ways to define lines having...
HTML / CSS
7
How to draw a line
by: saathujaya | last post by:
Hi, I'm new to javascript.I want to draw line,circle using JavaScript vector-draw library.Following is my coding,but it doesn't work.Please help me to improve that.... <html> <body> <script...
Javascript
1
Re-draw Control
by: --== Alain ==-- | last post by:
Hi, I have a question about drawing windowed control. For example, i have a windowed control, let's called it C1 (as container for example). its width = 300 px and height = 200 px. C1...
C# / C Sharp
5
Draw Ellipse in Access Image Control
by: lgeastwood | last post by:
I have tweaked the PictureBox97.mdb (Stephen Lebans <www.lebans.com>) code to nicely draw lines, rectangles and circles to the specs that I input. I'm at a loss though with trying to setup an...
Microsoft Access / VBA
9
Is it possible to draw lines between two froms?
by: zhaow | last post by:
Hi, All Greetings! I want to develop as appllication that requires a line-drawing function in the blank area between two forms. I have looked up the MSDN, it says that a graphics object need a...
C# / C Sharp
12
How to display a DIB or draw it into a Bitmap
by: active | last post by:
I've been looking on the Internet for a way to convert a DIB to a Bitmap without success. Now I'm wondering if that is the approach I should be taking. All I want to do is display the DIB or...
Visual Basic .NET
10
Freehand draw rectangle
by: kimiraikkonen | last post by:
Hi, If previous post was missing, here's the complete one: I'm trying to draw a rectange on a picturebox image using mouse move event but the problem is that the rectangle selection / drawing...
Visual Basic .NET
1
How to draw images to a memory bitmap and then draw that bitmap ontop of a picture bo
by: martinsmith160 | last post by:
Hi all I am trying to create a level builder tool for a final year project and im having some problems drawing. I have placed a picture box within a panel so i can scroll around the image which is...
C# / C Sharp
2
isladogs
Access Europe meeting on Wed 4 Oct - The future of Access
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
Microsoft Access / VBA
0
How to find best mobile app development company in usa
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
Mobile Development
0
tracyyun
Can faster file sharing be achieved by connecting computers simultaneously via WiFi and LAN cables
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
Networking - Hardware / Configuration
4
NeoPa
Send Current Object to PDF
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
Microsoft Access / VBA
1
Report value list
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
Microsoft Access / VBA
0
isladogs
Access Europe Meeting - Wed 1 Nov - Using SQL Server skills to extend Access
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
Microsoft Access / VBA
3
Finding a record, and then saving a new record after the record has been amended.
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
Microsoft Access / VBA
0
NeoPa
VBA Class Basics (Report Class)
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
Microsoft Access / VBA
4
Take a Database to the Next Level
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...
Microsoft Access / VBA

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!