Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Shaun E on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript Bug 1

Status
Not open for further replies.
Vem786

Vem786

Technical User
Dec 2, 2003
52
US
Hi:
Can anyone look at the code & find what wrong it has.?
I have a HELLO button in a <table> tag & also written a function to redirect to Hello.html when HELLO button is pressed.

The problem that I have is:
1. The HELLO button is never seen as a button instead seen in similar pattern as item1, item2, item3.
2. When I click the HELLO, the function redirect() won't fire.

Thanks in advance.

The Code is as under.
----------------------------------------------------------

<HTML>
<head>
<style type=&quot;text/css&quot;>
<!--
body
{
margin:0px;
font-family : &quot;Verdana, Arial, Helvetica, sans-serif&quot;;
font-size : 12pt;

}
#ini0, #ini1, #ini2
{
border:2px solid #CCCCCC;
height:20px;
width:100px;
padding:10px;
background-color:#EEEEEE;
cursor:hand;
position:relative;
font:normal 12px &quot;Verdana, Arial, Helvetica, sans-serif&quot;;
}
#menu0, #menu1, #menu2
{
width:100px;
position:absolute;
visibility:hidden;
border:1px solid #CCCCCC;
cursor:hand;
font:normal 12px &quot;Verdana, Arial, Helvetica, sans-serif&quot;;
}

-->
</style>

<script language=&quot;text/javascript&quot;>
<!--
function redirect(url)
{
location.replace(url);
}
-->
</script>

<script language=&quot;tex/javascript&quot;>
var a = new Array();
var i = 0;
while (i!=3)
{
a = document.getElementById('menu'+i);
i++;
}

i = 0;
while (i!=a.length)
{
a.style.top=document.getElementById('ini'+i).offsetHeight;
a.style.left=document.getElementById('ini'+i).offsetWidth*i++;
}

function show(menu)
{
i = 0;

while (i!=a.length)
{
a.style.visibility='hidden';
i++;

}
if (a[menu])
a[menu].style.visibility='visible';
}
</script>
</head>

<body onClick=&quot;show('none')&quot;>
<span onMouseOver=&quot;show('0')&quot; id=&quot;ini0&quot;>item 1</span><span onMouseOver=&quot;show('1')&quot; id=&quot;ini1&quot;>item 2</span><span onMouseOver=&quot;show('2')&quot; id=&quot;ini2&quot;>item 3</span>
<form name=&quot;frm1&quot; action =&quot;Hello.html&quot; method=POST>

<table id=&quot;menu0&quot; onMouseLeave=&quot;show('none')&quot;>
<tr><td>Option A</td></tr>
</table>

<table id=&quot;menu1&quot; onMouseLeave=&quot;show('none')&quot;>
<tr><td>Option B</td></tr>
<tr><td>Option B</td></tr>
</table>

<table id=&quot;menu2&quot; onMouseLeave=&quot;show('none')&quot;>
<tr><td>Option C</td></tr>
<tr><td>Option C</td></tr>
<tr><td>Option C</td></tr>
</table>

<table>
<tr>
<td><input type=button value=HELLO size=10 onClick=&quot;javascript:redirect('Hello.html');&quot;>
</table>

</form>
</body>
</html>
 
Sort by date Sort by votes
Unfortunately, your code is riddled with bugs.

Line 36 and 45 should have language=&quot;javascript&quot;, not language=&quot;text/javascript&quot;. This is the main reason no scripts are being run.

Line 98: removed &quot;javascript:&quot; from the onClick tag (redundant code), and added </TD></TR> to the line (to complete the table).

That fixes the problem of the code not being called. Now there are plenty of other problems with the script code itself.

Maybe if you give an idea of what you wanted to happen, we can help tidy up the code a bit?

I wasn't quite sure what you meant by point 1, incidentally. However, if you meant that the button didn't appear in a similar position to items 1, 2, or 3, it is because there is no style on the surrounding table, as there is with items 1, 2, and 3.

Hope this helps!

Dan
 
Upvote 0 Downvote
Dan:
Thanks for the debug!!

But What I actually wanted to design was as shown below --

Item1 Item2 Item3 HELLO

So, now when I Click HELLO, it should redirect me to hello.html or whatever.

Thanks Once again!!!

 
Upvote 0 Downvote
onclick=&quot;location='hello.html'&quot;

Or, for compatibility with Netscape...

onclick=&quot;window.location.href='hello.html'&quot;

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Personally, I would use:

Code: 
<input type=&quot;button&quot; value=&quot;HELLO&quot; size=&quot;10&quot; onClick=&quot;document.location='hello.html';&quot;>

Dan
 
Upvote 0 Downvote
That is also incomplete HTML syntax. In some older browserts, an INPUT element won't show outside of a FORM element.

Further, it's repeating what I posted. It's also my DHTML menu in the opening post.
 
Upvote 0 Downvote
stormbind,

I didn't repeat the FORM tag, as it was included at the start and end of the original posting, and clearly for brevity, I was only showing the INPUT tag code, and not the whole script.

Furthermore, I wasn't trying to compete with your posting, I was simply showing an alternate way of doing things, which, depending on if he wanted to migrate his code to a frameset, would have made a lot of difference once executed.

I know nothing about your DHTML menu, as I haven't been following any other related threads to this post.

Dan
 
Upvote 0 Downvote
Hi Dan/Stormbind:
Thanks for the debug. But I guess I din't get my doubt straight. I want this HELLO thing aligned in the same row as Item1, Item2, Item3 as shown below for an idea ------------------------------
Item1 Item2 Item3 HELLO
-----------------------------

Now My point is eventhough this design is simple(already designed by Stormbind), how to get this HELLO Click working?? Because, HELLO is defined in the <span> tag now for the ABOVE design/pattern(along with Item1 etc) as <span id=&quot;ini3&quot; onMouseOver=&quot;show('3')&quot;><b>HELLO</b></span>

If the HELLO is defined as a BUTTON(as suggested by Dan, initially by me) inside the <table> tag, it wont appear in the SAME row as Item1, Item 2, Item 3, BUT instead fall in the second row.

Hope I'm clear enough to provoke some thought into this.
 
Upvote 0 Downvote
>> it wont appear in the SAME row

That's probably due to the FORM tag. Although you cannot see it, it's an anoying element that takes up space and it's the width of the page :/

You can start the <FORM> higher, say just below the <BODY> element. Then the <SPAN>Item 3</SPAN><INPUT> will be next to each other.

Note, however, that the FORM has a chunky margin :/

I used to hide the uncontrolled effects of the FORM by putting it where nothing renders, i.e. between TABLE or TR. Something like below. This seemed to work for me but don't know if I tested it in really old browsers :)

<TABLE>
<FORM>
<TR><TD>...</TD></TR>
</FORM>
</TABLE>

----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Thanks Dan!!

I tried your code & it worked!!!

This site is incredible, loaded with Topguns like you!!!
 
Upvote 0 Downvote
Yup. In the original the script was dropped in at the bottom of the page for the same reason.

However, van, please note that the script you're using appears to be one of the ealier demos I posted.


----------
I'm willing to trade custom scripts for... [see profile]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
864
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
455
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
445
Marclem
Marclem
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
818
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top