Help with assign event to an HTMLObject

L

lala4life

My problem is that i have an unorderd list generated at runtime by a
recursive function

<UL>
<LI class="li_dir">Lo ultimo en Juegos
<UL>
<LI class="li_dir">Clasicos</LI>
<LI class="li_dir">Novedades</LI>
</UL>
</LI>
</UL>
<script type="text/javascript">
var mn = new GetLiveMenus(); // calling the js
</script>

..li_dir
{
vertical-align: middle;
margin: 2px;
border-style: hidden;
list-style-type: none;
list-style-image: url(/images/folder.gif);
list-style-position: outside;
}


i need to set click, mouseover and mouseout over each "LI" element
to do some task like highlight the desire element and send some
parameter with post. i program a js to do this but when assign the
events to each "LI" it always set the last "LI", following the
example if i put the mouse over the first LI (<LI class="li_dir">Lo
ultimo en Juegos ) highlight the last LI (<LI
class="li_dir">Novedades</LI>), could someone give me some hint about
this issue.

snippet of the code

// constructor
function GetLiveMenus(){

this.nodelist = document.getElementsByTagName("LI");

for (var i = 0; i < this.nodelist.length; i++ ){
var node = this.nodelist;

divNameDir = document.createElement("span");
divNameDir.className = "li_normal";
var id = 'idPick' + i;
divNameDir.setAttribute('id',id);

// alert(divNameDir); // debug.
divNameDir.onmouseover = function ()
{ GetLiveMenus.OnElement(id)}; // highlight li
divNameDir.onmouseout = function ()
{ GetLiveMenus.OutElement(id)};

try{
// alert(node.childNodes[0].nodeName) // debug.
if (node.childNodes[0].nodeName == "#text"){
divNameDir.appendChild(node.childNodes[0]);
node.insertBefore(divNameDir,node.firstChild);
}
}catch(e){
alert('exception in iteration ' + i + ', error: ' + e);
}
} // fin for

} // end constructor

GetLiveMenus.OnElement = function ( menu ) {
var ele = document.getElementById(idl);
ele.className = "li_normal_hover";
}

// style for highlight the element.
..li_normal_hover{
margin: 1px;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 0px;
padding-right: 5px;
background-color: #FCDB9E;
border-collapse: collapse;
border-color: #000;
border-style: dotted;
border-width: 1px;
color: #000;
cursor: pointer;
}

GetLiveMenus.OutElement = function (idl){
var ele = document.getElementById(idl);
ele.className = "li_normal";
}

..li_normal{
margin: 1px;
border-style: hidden;
border-width: 1px;
margin: 1px;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 0px;
padding-right: 5px;
position: relative;
vertical-align: text-top;
}
 
L

lala4life

My problem is that i have an unorderd list generated at runtime by a
recursive function

<UL>
<LI class="li_dir">Lo ultimo en Juegos
<UL>
<LI class="li_dir">Clasicos</LI>
<LI class="li_dir">Novedades</LI>
</UL>
</LI>
</UL>
<script type="text/javascript">
var mn = new GetLiveMenus(); // calling the js
</script>

.li_dir
{
vertical-align: middle;
margin: 2px;
border-style: hidden;
list-style-type: none;
list-style-image: url(/images/folder.gif);
list-style-position: outside;
}

i need to set click, mouseover and mouseout over each "LI" element
to do some task like highlight the desire element and send some
parameter with post. i program a js to do this but when assign the
events to each "LI" it always set the last "LI", following the
example if i put the mouse over the first LI (<LI class="li_dir">Lo
ultimo en Juegos ) highlight the last LI (<LI
class="li_dir">Novedades</LI>), could someone give me some hint about
this issue.

snippet of the code

// constructor
function GetLiveMenus(){

this.nodelist = document.getElementsByTagName("LI");

for (var i = 0; i < this.nodelist.length; i++ ){
var node = this.nodelist;

divNameDir = document.createElement("span");
divNameDir.className = "li_normal";
var id = 'idPick' + i;
divNameDir.setAttribute('id',id);

// alert(divNameDir); // debug.
divNameDir.onmouseover = function ()
{ GetLiveMenus.OnElement(id)}; // highlight li
divNameDir.onmouseout = function ()
{ GetLiveMenus.OutElement(id)};

try{
// alert(node.childNodes[0].nodeName) // debug.
if (node.childNodes[0].nodeName == "#text"){
divNameDir.appendChild(node.childNodes[0]);
node.insertBefore(divNameDir,node.firstChild);
}
}catch(e){
alert('exception in iteration ' + i + ', error: ' + e);
}
} // fin for

} // end constructor

GetLiveMenus.OnElement = function ( menu ) {
var ele = document.getElementById(idl);
ele.className = "li_normal_hover";

}

// style for highlight the element.
.li_normal_hover{
margin: 1px;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 0px;
padding-right: 5px;
background-color: #FCDB9E;
border-collapse: collapse;
border-color: #000;
border-style: dotted;
border-width: 1px;
color: #000;
cursor: pointer;
}

GetLiveMenus.OutElement = function (idl){
var ele = document.getElementById(idl);
ele.className = "li_normal";

}

.li_normal{
margin: 1px;
border-style: hidden;
border-width: 1px;
margin: 1px;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 0px;
padding-right: 5px;
position: relative;
vertical-align: text-top;

}
Click to expand...



Thank all, i solve my problem, work fine in both IE and mozilla

var ie55 = /msie/i.test( navigator.userAgent );
if (ie55){

divNameDir.onmouseover = function ()
{ GetLiveMenus.OnElement(window.event.srcElement) };
divNameDir.onmouseout = function ()
{GetLiveMenus.OutElement(window.event.srcElement) };
else{
divNameDir.onmouseover = function (e)
{ GetLiveMenus.OnElement(e.target) };
divNameDir.onmouseout = function (e)
{ GetLiveMenus.OutElement(e.target) };
 
P

Peter Michaux

My problem is that i have an unorderd list generated at runtime by a
recursive function
Click to expand...
<UL>
<LI class="li_dir">Lo ultimo en Juegos
<UL>
<LI class="li_dir">Clasicos</LI>
<LI class="li_dir">Novedades</LI>
</UL>
</LI>
</UL>
<script type="text/javascript">
var mn = new GetLiveMenus(); // calling the js
</script>
Click to expand...
.li_dir
{
vertical-align: middle;
margin: 2px;
border-style: hidden;
list-style-type: none;
list-style-image: url(/images/folder.gif);
list-style-position: outside;
}
Click to expand...
i need to set click, mouseover and mouseout over each "LI" element
to do some task like highlight the desire element and send some
parameter with post. i program a js to do this but when assign the
events to each "LI" it always set the last "LI", following the
example if i put the mouse over the first LI (<LI class="li_dir">Lo
ultimo en Juegos ) highlight the last LI (<LI
class="li_dir">Novedades</LI>), could someone give me some hint about
this issue.
Click to expand...
snippet of the code
Click to expand...
// constructor
function GetLiveMenus(){
Click to expand...
this.nodelist = document.getElementsByTagName("LI");
Click to expand...
for (var i = 0; i < this.nodelist.length; i++ ){
var node = this.nodelist;
Click to expand...

divNameDir = document.createElement("span");
divNameDir.className = "li_normal";
var id = 'idPick' + i;
divNameDir.setAttribute('id',id);
Click to expand...
// alert(divNameDir); // debug.
divNameDir.onmouseover = function ()
{ GetLiveMenus.OnElement(id)}; // highlight li
divNameDir.onmouseout = function ()
{ GetLiveMenus.OutElement(id)};
Click to expand...
try{
// alert(node.childNodes[0].nodeName) // debug.
if (node.childNodes[0].nodeName == "#text"){
divNameDir.appendChild(node.childNodes[0]);
node.insertBefore(divNameDir,node.firstChild);
}
}catch(e){
alert('exception in iteration ' + i + ', error: ' + e);
}
} // fin for
Click to expand...
} // end constructor
Click to expand...
GetLiveMenus.OnElement = function ( menu ) {
var ele = document.getElementById(idl);
ele.className = "li_normal_hover";

// style for highlight the element.
.li_normal_hover{
margin: 1px;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 0px;
padding-right: 5px;
background-color: #FCDB9E;
border-collapse: collapse;
border-color: #000;
border-style: dotted;
border-width: 1px;
color: #000;
cursor: pointer;
}
Click to expand...
GetLiveMenus.OutElement = function (idl){
var ele = document.getElementById(idl);
ele.className = "li_normal";

.li_normal{
margin: 1px;
border-style: hidden;
border-width: 1px;
margin: 1px;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 0px;
padding-right: 5px;
position: relative;
vertical-align: text-top;
Click to expand...
}
Click to expand...

Thank all, i solve my problem, work fine in both IE and mozilla

var ie55 = /msie/i.test( navigator.userAgent );
Click to expand...


Using navigator.userAgent is a big no-no. This can be spoofed and so
your script will stop working. It is probably true that no one is
bothering to spoof this anymore but there is a far better technique.

if (ie55){

divNameDir.onmouseover = function ()
{ GetLiveMenus.OnElement(window.event.srcElement) };
divNameDir.onmouseout = function ()
{GetLiveMenus.OutElement(window.event.srcElement) };
else{
divNameDir.onmouseover = function (e)
{ GetLiveMenus.OnElement(e.target) };
divNameDir.onmouseout = function (e)
{ GetLiveMenus.OutElement(e.target) };
Click to expand...

There are many event libraries that will take care of this cross
browser stuff for you. It is arguable if JavaScript libraries are a
good idea or not and it has been argued here many times; however, for
event and ajax it seems that libraries are very successful. For
example,

I don't know why Yahoo! resorts to browser sniffing but this library
is pretty good
<URL: http://developer.yahoo.com/yui/event/>

I removed the browser sniffing.
<URL: http://forkjavascript.org/event/docs>

PEter
 
R

Richard Cornford

Peter said:
Using navigator.userAgent is a big no-no.
Click to expand...

It also lacks any technical foundation as the HTTP 1.1 specification
makes it very clear that the User-Agent header (the value reflected in
the - navigator.userAgent - property) is not a source of information, by
doing no more than suggesting that a particular format could be used in
it. Treating something that is specified as not being a source of
information as if it was a source of information is something that
people should not need to be told is a bad idea.
This can be spoofed and so your script will stop working. It is
probably true that no one is bothering to spoof this anymore ...
Click to expand...
<snip>

Nonsense, it is still virtually standard for all non-mainstream browser
to spoof IE's UA string in their UA headers. Pretty much the only
browsers that can get away with not spoofing IE are
Mozilla/FireFox/Gecko, Opera, Safari and maybe Konqueror. for the rest
the very fact that nobody has ever even looked at them is enough to
guarantee that if they were honest about identifying themselves they
would start to look needlessly broken in the face of misguided UA string
sniffing.

Richard.
 
L

lala4life

My problem is that i have an unorderd list generated at runtime by a
recursive function
<UL>
<LI class="li_dir">Lo ultimo en Juegos
<UL>
<LI class="li_dir">Clasicos</LI>
<LI class="li_dir">Novedades</LI>
</UL>
</LI>
</UL>
<script type="text/javascript">
var mn = new GetLiveMenus(); // calling the js
</script>
.li_dir
{
vertical-align: middle;
margin: 2px;
border-style: hidden;
list-style-type: none;
list-style-image: url(/images/folder.gif);
list-style-position: outside;
}
i need to set click, mouseover and mouseout over each "LI" element
to do some task like highlight the desire element and send some
parameter with post. i program a js to do this but when assign the
events to each "LI" it always set the last "LI", following the
example if i put the mouse over the first LI (<LI class="li_dir">Lo
ultimo en Juegos ) highlight the last LI (<LI
class="li_dir">Novedades</LI>), could someone give me some hint about
this issue.
snippet of the code
// constructor
function GetLiveMenus(){
this.nodelist = document.getElementsByTagName("LI");
for (var i = 0; i < this.nodelist.length; i++ ){
var node = this.nodelist;
divNameDir = document.createElement("span");
divNameDir.className = "li_normal";
var id = 'idPick' + i;
divNameDir.setAttribute('id',id);
// alert(divNameDir); // debug.
divNameDir.onmouseover = function ()
{ GetLiveMenus.OnElement(id)}; // highlight li
divNameDir.onmouseout = function ()
{ GetLiveMenus.OutElement(id)};
try{
// alert(node.childNodes[0].nodeName) // debug.
if (node.childNodes[0].nodeName == "#text"){
divNameDir.appendChild(node.childNodes[0]);
node.insertBefore(divNameDir,node.firstChild);
}
}catch(e){
alert('exception in iteration ' + i + ', error: ' + e);
}
} // fin for
} // end constructor
GetLiveMenus.OnElement = function ( menu ) {
var ele = document.getElementById(idl);
ele.className = "li_normal_hover";
}
// style for highlight the element.
.li_normal_hover{
margin: 1px;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 0px;
padding-right: 5px;
background-color: #FCDB9E;
border-collapse: collapse;
border-color: #000;
border-style: dotted;
border-width: 1px;
color: #000;
cursor: pointer;
}
GetLiveMenus.OutElement = function (idl){
var ele = document.getElementById(idl);
ele.className = "li_normal";
}
.li_normal{
margin: 1px;
border-style: hidden;
border-width: 1px;
margin: 1px;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 0px;
padding-right: 5px;
position: relative;
vertical-align: text-top;
}
Click to expand...
Click to expand...

Thank all, i solve my problem, work fine in both IE and mozilla
Click to expand...
var ie55 = /msie/i.test( navigator.userAgent );
Click to expand...

Using navigator.userAgent is a big no-no. This can be spoofed and so
your script will stop working. It is probably true that no one is
bothering to spoof this anymore but there is a far better technique.

if (ie55){
Click to expand...
divNameDir.onmouseover = function ()
{ GetLiveMenus.OnElement(window.event.srcElement) };
divNameDir.onmouseout = function ()
{GetLiveMenus.OutElement(window.event.srcElement) };
else{
divNameDir.onmouseover = function (e)
{ GetLiveMenus.OnElement(e.target) };
divNameDir.onmouseout = function (e)
{ GetLiveMenus.OutElement(e.target) };
Click to expand...

There are many event libraries that will take care of this cross
browser stuff for you. It is arguable if JavaScript libraries are a
good idea or not and it has been argued here many times; however, for
event and ajax it seems that libraries are very successful. For
example,

I don't know why Yahoo! resorts to browser sniffing but this library
is pretty good
<URL:http://developer.yahoo.com/yui/event/>

I removed the browser sniffing.
<URL:http://forkjavascript.org/event/docs>

PEter
Click to expand...


Thanks for the advice, i did't that my js can be spoffed.
 
D

dhtmlkitchen

My problem is that i have an unorderd list generated at runtime by a
recursive function

<UL>
<LI class="li_dir">Lo ultimo en Juegos
<UL>
<LI class="li_dir">Clasicos</LI>
<LI class="li_dir">Novedades</LI>
</UL>
</LI>
</UL>
<script type="text/javascript">
var mn = new GetLiveMenus(); // calling the js
</script>

.li_dir
{
vertical-align: middle;
margin: 2px;
border-style: hidden;
list-style-type: none;
list-style-image: url(/images/folder.gif);
list-style-position: outside;
}

i need to set click, mouseover and mouseout over each "LI" element
to do some task like highlight the desire element and send some
parameter with post. i program a js to do this but when assign the
events to each "LI" it always set the last "LI", following the
example if i put the mouse over the first LI (<LI class="li_dir">Lo
ultimo en Juegos ) highlight the last LI (<LI
class="li_dir">Novedades</LI>), could someone give me some hint about
this issue.

snippet of the code

// constructor
function GetLiveMenus(){

this.nodelist = document.getElementsByTagName("LI");

for (var i = 0; i < this.nodelist.length; i++ ){
var node = this.nodelist;

divNameDir = document.createElement("span");
divNameDir.className = "li_normal";
var id = 'idPick' + i;
divNameDir.setAttribute('id',id);

// alert(divNameDir); // debug.
divNameDir.onmouseover = function ()
{ GetLiveMenus.OnElement(id)}; // highlight li
divNameDir.onmouseout = function ()
{ GetLiveMenus.OutElement(id)};

try{
// alert(node.childNodes[0].nodeName) // debug.
if (node.childNodes[0].nodeName == "#text"){
divNameDir.appendChild(node.childNodes[0]);
node.insertBefore(divNameDir,node.firstChild);
}
}catch(e){
alert('exception in iteration ' + i + ', error: ' + e);
}
} // fin for

} // end constructor

GetLiveMenus.OnElement = function ( menu ) {
var ele = document.getElementById(idl);
ele.className = "li_normal_hover";

}

// style for highlight the element.
.li_normal_hover{
margin: 1px;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 0px;
padding-right: 5px;
background-color: #FCDB9E;
border-collapse: collapse;
border-color: #000;
border-style: dotted;
border-width: 1px;
color: #000;
cursor: pointer;
}

GetLiveMenus.OutElement = function (idl){
var ele = document.getElementById(idl);
ele.className = "li_normal";

}

.li_normal{
margin: 1px;
border-style: hidden;
border-width: 1px;
margin: 1px;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 0px;
padding-right: 5px;
position: relative;
vertical-align: text-top;

}
Click to expand...


It would be more efficient to capture the li's bubbled events on the
menu, not the LI itself. You can do this by adding the event listener
to the UL and catch the bubbled mouseover for the LI.

You can keep a reference to the Active Object. It will initially be
null.

If you're using nested menus, you can use a composite to build the
tree dynamically.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Need help with code on website (noob) 2
I need help fixing my website 2
Help with Visual Lightbox: Scripts 2
Is it possible an iframe can overlapp another? 3
Help with my responsive home page 2
Help needed with code 5
Buttons lining up 1

Members online

Total: 30 (members: 1, guests: 29)
Robots: 115

Forum statistics

Threads
473,776
Messages
2,569,602
Members
45,185
Latest member
GluceaReviews

Latest Threads

Top