By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,848 Members | 3,202 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,848 IT Pros & Developers. It's quick & easy.

How to draw the div at the right position

P: 3
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
Share this Question
Share on Google+
4 Replies


acoder
Expert Mod 15k+
P: 16,027
What's the "right position"? Where do you want it to appear and where does it appear instead?
Oct 24 '08 #2

P: 3
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
Expert Mod 15k+
P: 16,027
Get the target of the event to display it in the element/div being moused over.
Oct 24 '08 #4

P: 3
I'll try! Thanks for your help.
Oct 24 '08 #5

Post your reply

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