How to draw the div at the right position

3 New Member

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

  
<body>

<table align="center" width="60%" height="100%" border="0" cellpadding="0" cellspacing="0">

    <tr height="100">

    <td width="20%" height="114">abc</td>

    <td width="80%">def</td>

    </tr>
 
  <tr id="fancyMenu">

    <td xindex="0">
 
    <a href="http://www.diendantinhoc.vn">Home</a> 

  <DIV class=expander style="display: none; FILTER: alpha(opacity=100); TOP: 9px; HEIGHT: 1px; op    acity: 0.99; MozOpacity: 0.99" xindex="0"></DIV>

  </td>
 
  <td xindex="1">

    <a href="http://www.thuvientinhoc.vn">My Photos</a> 

  <DIV class=expander style="display: none; filter: alpha(opacity=100); TOP: 9px; HEIGHT: 1px; opacity: 0.99; MozOpacity: 0.99" xindex="1"></DIV>

  </td>

  <td xindex="2">

<a href="http://www.anhkham.com">Skill</a>

  <DIV class=expander style="display: none; filter: alpha(opacity=100); TOP: 9px; HEIGHT: 1px; opacity: 0.99; MozOpacity: 0.99" xindex="2"></DIV>

  </td>

  </tr>
 
    <tr>

    <td colspan="2" width="18%"></td>

       </tr>
 
</table>
 
</body>

css

Expand|Select|Wrap|Line Numbers

 
body {

    font-family:arial;

}

#fancyMenu {

    position:relative;

    width:250px;

    margin:0 auto;

    padding:0;

    font:0.6em verdana,arial,helvetica;

    text-transform:uppercase;

}
 
#fancyMenu td {

    position:relative;

    padding:2px 2px 2px 6px;

    width:240px;

    border:1px solid #000;

    list-style-type:none;

    background-color:#FDFDFD;

    background-image:url(bg.png);

    margin:2px 0 0 0;

}
 
#fancyMenu td a {

    position:relative;

    display:inline-block;

    width:100%;

    height:100%;

    color:#525B53;

    text-decoration:none;

    z-index:10;

    margin:0;

}
 
#fancyMenu td>a {

    display:block;

}
 
#fancyMenu td a:hover {

    color:#FFF;

}
 
.expander {

    position:absolute;

    background-color:#000;

    width:250px;

    left:0px;

    height:1px;

    z-index:0;

    display:none;

    padding:0;

    font-size:1px;

    margin:0;

}

and js

Expand|Select|Wrap|Line Numbers

 
window.onload = fm_init;        // set up the onload event

var d = document;            // shortcut reference to the document object

var fm_textValues = new Array();    // array that will hold the text node values in the anchor tags

var fm_activeLI = new Array();    // array of boolean values that will tell us if the expander DIV elements are in a transitional state

var fm_expandObj = new Array();    // object array that we'll use to reference the expander DIV elements

var fm_liObj;            // object array that we'll use to reference the TD elements

var zInterval = new Array();        // the interval var we'll use for the expansion. array'd for each object for multiple running intervals

var kInterval = new Array();        // the interval var we'll use for the fade. array'd for each object for multiple running intervals
 
var fm_curOpacity = new Array();    // the current opacity value for each expander div

var fm_doFade = new Array();     // an array that we'll set as a function for passing through the setInterval for the fade

var fm_doExpansion = new Array();    // an array that we'll set as a function for passing through the setInterval for the expansion

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.
 
function fm_init() {

    // bail out if this is an older browser

    if(!d.getElementById)return;
 
    // reference the UL element

    ulObj = d.getElementById("fancyMenu");

    // create the array of TD elements that decend from the TR element

    fm_liObj  = ulObj.getElementsByTagName("td");

    // loop over the length of TD's and set them up for the script

    for(i=0;i<fm_liObj.length;i++) {

        // bogus xindex attribute is used to pass the index of the LI back to our event handlers so we know which object to reference

        // in the liObj array

        fm_liObj[i].xindex = i;

        // reference to the anchor tag in the LI

        aObj = fm_liObj[i].getElementsByTagName("a")[0];

        // set up the mouse events for the anchor tags.

        aObj.onmouseover = function() { fm_handleMouseOver(this.parentNode.xindex); }

        aObj.onmouseout = function() { fm_handleMouseOut(this.parentNode.xindex); }
 
        // get the "innerText" of the anchor tag

        fm_textValues[i] = aObj.innerHTML;
 
        // create the expander DIV element as a child of the current LI

        fm_expandObj[i] = fm_liObj[i].appendChild(d.createElement("div"));

        fm_expandObj[i].className = "expander";

        fm_expandObj[i].style.top = fm_liObj[i].offsetHeight/2 + "px";

        fm_expandObj[i].xindex = i;
 
        // initialize our intervals 

        zInterval[i] = null; kInterval[i] = null;

        // initialize the string index array, opacity array and activeLI array

        fm_stringIndex[i] = 1;

        fm_curOpacity[i] = 100;

        fm_activeLI[i] = 0;

    }

}
 
function fm_handleMouseOver(objIndex) {

    // do nothing if the user has already moused over this element

    if(fm_activeLI[objIndex])return;
 
    // set activeLI to true for this element

    fm_activeLI[objIndex]=1;

    // set the expander div up

    fm_expandObj[objIndex].style.display = "block";

    fm_expandObj[objIndex].style.height = "1px";

    fm_expandObj[objIndex].style.top = fm_liObj[objIndex].offsetHeight/2+"px";
 
    // create a reference var for the function to pass to the interval

    fm_doExpansion[objIndex] = function() { fm_expandDIV(objIndex); }

    zInterval[objIndex] = setInterval(fm_doExpansion[objIndex],10);

}
 
function fm_handleMouseOut(objIndex) {

    // do nothing if this is already running for the object

    if(kInterval[objIndex] != null) return;
 
    // reference to the anchor tag in the LI

    aObj = fm_liObj[objIndex].getElementsByTagName("a")[0];

    // blank out the innerHTML of the anchor tag

    aObj.innerHTML = "";

    // set the first letter of the text as the innerHTML of the anchor tag.

    //aObj.appendChild(d.createTextNode(fm_textValues[objIndex].substring(0,1)));

    aObj.innerHTML = fm_textValues[objIndex].substring(0,1);
 
    // create a reference var for the function to pass to the interval

    fm_doFade[objIndex] = function() { fm_fadeExpander(objIndex); }

    kInterval[objIndex] = setInterval(fm_doFade[objIndex],10);

}
 
function fm_expandDIV(objIndex) {

    // height and top arrays

    h = new Array(); y = new Array();

    // if the top of the expanding div is less than 0, go on...

    if(fm_expandObj[objIndex].offsetTop>=0) {

        // get the current top and height of the expanding div

        h[objIndex] = fm_expandObj[objIndex].offsetHeight;

        y[objIndex] = fm_expandObj[objIndex].offsetTop;

        // if the height is less than than the height of the parent LI, increment

        if(h[objIndex]<fm_liObj[objIndex].offsetHeight)h[objIndex]+=2;

        // decrement the top

        y[objIndex]--;

        // put the div where it needs to be

        fm_expandObj[objIndex].style.top = y[objIndex]+ "px";

        fm_expandObj[objIndex].style.height = h[objIndex] + "px";

    } else {

        // finished expanding. clear the interval, null out the function reference and the interval reference

        clearInterval(zInterval[objIndex]);

        fm_doExpansion[objIndex]=null;

        zInterval[objIndex] = null;

    }

}
 
function fm_fadeExpander(objIndex) {

    // MSIE uses an percentage (0-100%) for opacity values, while everything else uses a floating point

    // between 0 and 1. next lines adress the difference

    fm_curOpacity[objIndex]=d.all?fm_curOpacity[objIndex]:fm_curOpacity[objIndex]/100;

    // subtract 5 (or .5 if not MSIE) from the current opacity

    fm_curOpacity[objIndex]-=d.all?5:0.05;
 
    // set the opacity values in all their different flavors.

    fm_expandObj[objIndex].style.opacity = fm_curOpacity[objIndex];

    fm_expandObj[objIndex].style.MozOpacity = fm_curOpacity[objIndex];

    fm_expandObj[objIndex].style.filter="alpha(opacity=" + fm_curOpacity[objIndex] + ")";
 
    // reference to the anchor tag in the LI

    aObj = fm_liObj[objIndex].getElementsByTagName("a")[0];

    // if the current opacity is less than 60%, start adding the letters back in

    if(fm_curOpacity[objIndex]<(d.all?60:0.6)) {    

        aObj.appendChild(d.createTextNode(fm_textValues[objIndex].charAt(fm_stringIndex[objIndex])));

        fm_stringIndex[objIndex]++;

    }
 
    // if the opacity is less than 0 and the text has finished drawing, clean up

    if(fm_curOpacity[objIndex]<=0 && aObj.innerHTML==fm_textValues[objIndex]) {

        // clear the interval and null them out

        clearInterval(kInterval[objIndex]);

        kInterval[objIndex] = null;

        // hide the expander div

        fm_expandObj[objIndex].style.display = "none";
 
        // reset the expander div back to opaque

        fm_expandObj[objIndex].style.opacity = 0.99;

        fm_expandObj[objIndex].style.MozOpacity = 0.99;

        fm_expandObj[objIndex].style.filter="alpha(opacity=100)";

        // put the expander back at 1 pixel high and in the middle of the LI

        fm_expandObj[objIndex].style.height = "1px";

        fm_expandObj[objIndex].style.top = fm_liObj[objIndex].offsetHeight/2 + "px";

        // set the activeLI to false

        fm_activeLI[objIndex]=0;

        // reset the currentOpacity to 100

        // set the activeLI to false

        fm_activeLI[objIndex]=0;

        // reset the currentOpacity to 100

        fm_curOpacity[objIndex] = 100;

        // reset the stringIndex for the next go-round

        fm_stringIndex[objIndex] = 1;

        return;

    }

    // if this isnt MSIE, multiply the opacity value by 100 for the next go round.

    if(!d.all)fm_curOpacity[objIndex]*=100;

}

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

Subscribe Reply

3456

acoder

16,027

Recognized Expert Moderator MVP

What's the "right position"? Where do you want it to appear and where does it appear instead?

Oct 24 '08 #2

HoangTuanSu

New Member

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

Recognized Expert Moderator MVP

Get the target of the event to display it in the element/div being moused over.

Oct 24 '08 #4

HoangTuanSu

New Member

I'll try! Thanks for your help.

Oct 24 '08 #5

Similar topics

3035

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

7094

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

4196

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

2046

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

9206

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

4009

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

3328

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

5446

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

5574

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

7046

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7048

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

6741

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

5342

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

4485

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

2997

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

2986

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1300

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

563

php

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP