Re: Problem with Html Dropdown and JavaScript - Web Development Discussion Boards

I used this a while back on an ASP project to encrypt path names so the user couldn't see them. It's in ASP.

http://www.4guysfromrolla.com/webtech/012000-1.shtml[^]

will give it a try. Thanks

I was born intelligent
Education ruined me!.

This is really good, and works fine. Thanks!

I was born intelligent
Education ruined me!.

Hi SPS,

Try some simple JavaScript Encryption (i.e.,) obfuscation trick. Try this URL:

http://dev.krook.org/cipher.html

Deepak Kumar Vasudevan
http://deepak.portland.co.uk/

Will look int it. Thanks for the reply!

I was born intelligent
Education ruined me!.

I have the ... Contents in the include file. And the problem now is I dont have control about the titles, description of individual files.. as my site is an information site, I want to have like that.

After a few days of work I managed to have a database of all the files with the title and description. Wow... it works fine is displaying the title of the page. And I managed to put the description too.

I have a doubt now, will the search engine robots be able to see these 'description picked from the database' properly?? I mean, will they be able to pick the title, desc of the page as I expect to pick it from the database?? Confused | :confused:

I was born intelligent
Education ruined me!.

Hi,

I have the following problem with JavaScript dropdown. Some of the items (TEXT displayed) are extremely large and because of the stylesheet applied, the text appears truncated.

When the dropdown is open, by clicking the down arrow and when the user is seeing the various items by scrolling the dropdown list, can I get the currently selected value in some Title Tooltip or JavaScript overlib MouseOver Trick.

I don't want that in onChange (which occurs when focus is blurred). As the user scrolls up and down with in the same Html Select box, I want to get hold of the currently selected text.

Deepak Kumar Vasudevan
http://deepak.portland.co.uk/

well....to be honest with you..the way you want to do this...its pretty mucho NOT POSSIBLE (at least as far as I know). But...the good news is...that I found a way around it.(if I were in your position, it'd work for me)

so here it goes..

since you cant apply mouseover events to the <option></option> tag..what I did was recreate with layers and images a dropdown list. Assuming that you are using some sort of dynamic script that will do all the anoying job, this is what I cam up with. I have an INPUT box called "selectbox" with an inicial value of "select a value". Next to it I put an image of a pulldown-menu-arrow which is a link that when clicked makes the layer "Layer" visible. Within Layer there is a table that contains, in rows, the values of your list. Each of these rows contains a linked value that when it is moseovered, makes another layer visible (Layer1)- Layer1 shows the description of the mouseovered item. When any of the items are clicked, the input box "selectbox" recieves the value of that item and finally hides Layer.

sounds confusing???
dont worry...Ive never been much of a teacher..so heres the script...

ready to work..just copy/paste it in an html and run it..you'll see,..

hope it works..luck.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body >

<form name="frm" method="get" action="">
<table width=289>
<tr>
<td width="162">
<nobr><input name="selectbox" type="text" value="select a value"><a href="javascript:void(0);" onClick="MM_showHideLayers('Layer','','show')"><img src="http://www.radiostatic.net/jon/help/arrow.gif" border=0 align="absmiddle"></a></nobr><br>
<div id="Layer" style="border: 1px solid #CCCCCC; position:relative; width:100%; height:100; z-index:1; overflow: auto; visibility: hidden;">
<table cellpadding=0 cellspacing="0" border=0>
<tr>
<td><a href="javascript:void(0);" onCLick="javascript:frm.selectbox.value='1';MM_showHideLayers('Layer1','','hide')" onmouseout="MM_showHideLayers('Layer1','','hide')" onmouseover="MM_showHideLayers('Layer1','','show');document.all.Layer1.innerHTML='<marquee>Description 1</marquee>';">1</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);" onCLick="javascript:frm.selectbox.value='2';MM_showHideLayers('Layer1','','hide')" onmouseout="MM_showHideLayers('Layer1','','hide')" onmouseover="MM_showHideLayers('Layer1','','show');document.all.Layer1.innerHTML='<marquee>Description 2</marquee>';">2</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);" onCLick="javascript:frm.selectbox.value='3';MM_showHideLayers('Layer1','','hide')" onmouseout="MM_showHideLayers('Layer1','','hide')" onmouseover="MM_showHideLayers('Layer1','','show');document.all.Layer1.innerHTML='<marquee>Description 3</marquee>';">3</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);" onCLick="javascript:frm.selectbox.value='4';MM_showHideLayers('Layer1','','hide')" onmouseout="MM_showHideLayers('Layer1','','hide')" onmouseover="MM_showHideLayers('Layer1','','show');document.all.Layer1.innerHTML='<marquee>Description 4</marquee>';">4</a></td>
</tr>
</table>
</div>
</td>
<td width="115">
<div id="Layer1" style="z-index:2; width:100%;height:100%; background:aliceblue"></div>
</td>
</tr>
</table>
</form>
</body>
</html>

<a href="http://www.radiostatic.net/jon/index.html" target=_new>GET TO KNOW ME</a>

Hi,

QUESTION 1:

I established one column on the data grid so that when the user click on that column, the corresponding row gets deleted. So, the data grid looks like this.

Current login: John
Delete Login Msg Title Posted (Heading)
Mary XXX 1/3/2002
Delete John XXX 1/7/2002 (Note that "Delete" is only enabled for rows which the "current user" created. ANd therefore he has right to delete them - but NOT other msg)
Jackson XXX 1/4/2002
Zapi XXX 1/2/2002
Delete John XXX 1/8/2002

The problem is, the "Delete" button appears on EVERY row - NOT just the rows that "John - the current user" has created. How can I fix this?

Here's my code - note that I had "AutoGenerateColumns=True":

<asp:datagrid id="dgForum" ..... OnItemCommand="Command">
<SelectedItemStyle .....></SelectedItemStyle>
<AlternatingItemStyle .....></AlternatingItemStyle>
<ItemStyle .....></ItemStyle>
<HeaderStyle .....></HeaderStyle>
<Columns>
<asp:TemplateColumn HeaderText="Detail">
<ItemTemplate>
<asp:LinkButton ID="Detail" text="Detail" CommandName="Detail" Runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>

QUESTION 2:
For HTML tables, changing the color on mouseover is simple:

<table>
<tr bgColor='SomeColor' OnMouseOver="bgColor='Red'" OnMouseOut="bgColor='SomeColor'" >
<td>some data</td>
</tr>
</table>

How can you do the same for data grid? Note that the code fragment I posted for question 1 does NOT has any <tr> tags for me to insert "OnMouseOver"....

Thanks.

norm

norm,

On question 1, you need to invoke a helper function in the code behind. You will have to set Autogenerate columns to false to customize the datagrid. Something similar to the following:

--.aspx page in the item template tag
<code><%# functionname(databinder.eval(container.dataitem("columnname")) %></code>

--code behind (sorry, but I am most familiar with VB)

<code>Function functionname(variable as string) as string
  If variable = 1 then
    return html code to generate the delete link
  else
    return "nbsp"
  End IF
End Function</code>

On questions 2, you would need to add a reference the code behid file to the html table and add attributes to that table.

<code>
Dim td1 as HTML.Column(????)
td1.Attributes.Add(onmouseover, "javacode")
</code>

I am not 100% sure on the syntax of this one, since I am trying to write this from memeory and I haven't done a lot of java coding yet in my applications, but take a look at the attributes add portion and it should point you in the right direction.

Hope this helps. Smile | :)

Jeremy Oldham

P.S. Did you ever get the problem with the cursor fixed?

Thanks. Sorry that it took so long to reply, I had to reinstall my machine last nite. I think most work should be done in onpage_load. Anyway, here's the feedback:

Question 1: Pseudo code only. I'm starting out on C# and VB.NET too.

'Note: I think the logic should best be implemented on Page_load dont you think?
Sub Page_load(variable as string) as string

Rows = Me.dgGrid.Rows

For Each row in Rows
If row("column1")='James' Then 'Do you think this is the way to go?
row("column2").visible = true 'Is this the right property to use? If not, which?
else
row("column2").visible = false
Next

End Sub

Question 2:

Dim td1 as HTML.Column(????) 'Column?? U mean 'Rows' do you? How exactly will you code this?
td1.Attributes.Add(onmouseover, "javacode") 'How can you pass parameter to event handler?

... let's see, do u think this will work?

Page_Load(..)
...
Rows = Me.dgGrid.Rows
For Each row in Rows
row.Attributes.Add(OnMouseOver, "SetHighlite") 'Referencing client side script? Any problem?
Next
...
End Sub

Can you give a small functional code snippet on eventhandler SetHighlite? I'm not familiar with clientside scripting "object" model... I think for highlite:

bgColor='Blue';

but not good at Javascripts.

QUESTION 3:

The cursor problem? Yes, it's solved. You want to know how?

norm,

Instead of the Page_onload portion, you should use the datagrid's OnItemDatabound method. Then you would use somthing like:

If e.Item.ItemType = E.Item.ItemType.Item or e.Item.ItemType = e.Item.ItemType.AlternatingItem then
   If e.Item("Column1") = "James" then
      e.Item("Column2") = " "
   End If
End If

You cannot his the column, bcause it will hide all rows in the column and not just the single cell.

As far as the javascript code, I cannot help you alot because again I do not know much java. Basically though you are adding either the javascript code or the javascript function name and parameters in place of the SetHighlite part below.

row.Attributes.Add(onmouseover, "SetHighlite")

If you need to pass parameter or variables the concatenate them.

row.Attributes.Add(onmouseover, "SetHighlite(" & variable1 & ")")

Hopefully someone here can help you with the javascript.

As far as the cursor problem, I still think that whatever you are doing with a cursor in SQL could be solved with a properly written SQL statement and that it would probably be more sufficient. If you want me to take a look at it, I would be more than willing to help out. Smile | :)

Jeremy

Jeremy Oldham

norm,

I looked at your first post again this morning and tested a few things on my server. I have also attached a good link to help with some of the javascript I used in the code below. Hope this helps. I used a datagrid with AutogenerateColumns set to True.

<br />
Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As  System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound<br />
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then<br />
            e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor='Silver'")<br />
            e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='White'")<br />
            If e.Item.DataItem("ShowMobile") Then<br />
                e.Item.Cells(6).Text = "Yes"<br />
            Else<br />
                e.Item.Cells(6).Text = " "<br />
            End If<br />
        End If<br />
    End Sub<br />

In this sample I do two things. 1) If it is a Item or alternating Item, then I add the javascript to highlight the row onMouseOver and unhighlight onMouseOut. e.Item refers to the current row of the datagrid. 2) I check the "ShowMobile" column of the current row and if it is true as returned from the database, then I change the text of a cell to Yes, if not, I blank the text out of the cell. You should be able to do something similar for your Delete button.

Be very careful about the javascript as it seems to be case sensative.

http://aspalliance.com/Colt/Articles/Article3.aspx[^]

Good Luck!

Jeremy Oldham

damn, just tried the code and also found a reference from: http://www.dotnetjohn.com/articles/articleid12.aspx

I set up the event handler for DataGrid's OnItemDataBound event as indicated in the tutorial. Code fragment:

e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor='Silver'");
e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='white'");

The browser is complaining: error: Object required: "this"

I am having the same problem with HTML table row (btw, can you access HTML table and set its width? Intellisense does not offer Width property on code behind: this.FindControl("myHtmlTab").Width not supported)!

anyway, error message is the same when I mouseover. "this" object is NOT allowed... I have no idea why... If I remove "this", the browser stop bitching, but at the same time, I dont get any mouseover effect.

Also, onmouseout='white' in the code fragment --> But my datagrid uses alternating color for alternating rows... any suggestion?

The center of the problem has always been "this" object!?!

norm

Norm,

Is there a test page I could look at? I would like to see the html code that is being built by the .aspx page. When you tried the demo on the link I gave you earlier, did you get the same error message? If so, then you probably haven't enable the Java Virtual Machine on the web browser.

A table row will not have a width property. You can set the width by either setting it for the table or for the columns (td element) in the table, but not the row (tr element).

To get the actual color of the item or alternating items background, the following should work:

<br />
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then<br />
            If e.Item.ItemType = ListItemType.Item Then<br />
                'Set Background for List Item<br />
                e.Item.BackColor = System.Drawing.Color.Blue<br />
                e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='Blue'")<br />
            Else<br />
                'Set Background for Alternating List Item<br />
                e.Item.BackColor = System.Drawing.Color.LightBlue<br />
                e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='LightBlue'")<br />
            End If<br />
            e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor='Silver'")<br />
            If e.Item.DataItem("ShowMobile") Then<br />
                e.Item.Cells(6).Text = "Yes"<br />
            Else<br />
                e.Item.Cells(6).Text = " "<br />
            End If<br />
        End If<br />

I have tried to access the color properties listed in the datagrid's html coding, but have been unsucessful.

Jeremy Oldham

Thanks alot Jeremy. I just got home after a long day. Just got your message... let me work on it a little and I will let you know what's going on.

norm

1. Your code snippet on mouseover is very helpful. I will try it now.
2. Just check my browser setting. I use Internet Explorer 6.0 and under:
Options
>Security
>Security Setting
>Microsoft VM
>Java Permissions
>Low Safety

So, I doubt that the problem is with my browser setting.

My aspx code (Ask me for a complete file if you wish I can send it to you):

<table id="tblNavMenu" width="220" align="left" runat="server">
<tr onmousedown="Login()" id="rwLogin" onmouseover="document.getElementByID(rwLogin).bgColor='LightSteelBlue'" style="CURSOR: hand" onmouseout="document.getElementByID(rwLogin).bgColor='Ivory'">
<td align="middle"><font face="Verdana" color="darkslategray" size="2"><b>Login</b></font>
</td>
</tr>
<tr onmousedown="Logout()" id="rwLogout" onmouseover="this.bgColor='LightSteelBlue'" style="CURSOR: hand" onmouseout="this.bgColor='Ivory'">
<td align="middle"><font face="Verdana" color="darkslategray" size="2"><b>Logout</b></font>
</td>
</tr>
<tr onmousedown="NewReg()" id="rwRegister" onmouseover="this.bgColor='LightSteelBlue'" style="CURSOR: hand" onmouseout="this.bgColor='Ivory'">
<td align="middle"><font face="Verdana" color="darkslategray" size="2"><b>Register</b></font>
</td>
</tr>
<tr onmousedown="UnReg()" id="rwUnReg" onmouseover="this.bgColor='LightSteelBlue'" style="CURSOR: hand" onmouseout="this.bgColor='Ivory'">
<td align="middle"><font face="Verdana" color="darkslategray" size="2"><b>UnRegister User
Account</b></font>
</td>
</tr>
<tr onmousedown="ChangeProfile()" id="rwChangeProfile" onmouseover="this.bgColor='LightSteelBlue'" style="CURSOR: hand" onmouseout="this.bgColor='Ivory'">
<td align="middle"><font face="Verdana" color="darkslategray" size="2"><b>Change Personal
Profile</b></font>
</td>
</tr>
<tr onmousedown="TransferMasterForum()" id="rwForum" onmouseover="this.bgColor='LightSteelBlue'" style="CURSOR: hand" onmouseout="this.bgColor='Ivory'">
<td align="middle"><font face="Verdana" color="darkslategray" size="2"><b>Forums</b></font>
</td>
</tr>
<tr onmousedown="GoHome()" id="rwHome" onmouseover="this.bgColor='LightSteelBlue'" style="CURSOR: hand" onmouseout="this.bgColor='Ivory'">
<td align="middle"><font face="Verdana" color="darkslategray" size="2"><b>Home</b></font>
</td>
</tr>
</table>

That's it. Note that I did things differently in row 1 (in comparison with the rest of the grid. I use the "document" object - but none worked anyway.)

Thanks.

norm

Help! error: Object required "this".

I just did testing on your code in regards to onmouseover. I sufferred from the same problem working with DataGrid's "item" as data row <tr> on my HTML table.

Following is a few things I tried, I keep getting:

error: Object required: 'this'

I have tried many things and I really cant solve this. Help!

CASE 1: HTML table row

<tr onmousedown="Login()" id="rwLogin" onmouseover="document.getElementByID(rwLogin).style.backgroundColor='LightSteelBlue'" style="CURSOR: hand" onmouseout="document.getElementByID(rwLogin).style.backgroundColor='Ivory'">
<td align="middle"><font face="Verdana" color="darkslategray" size="2"><b>Login</b></font>
</td>
</tr>

CASE 2: HTML table row

<tr onmousedown="Logout()" id="rwLogout" onmouseover="this.style.backgroundColor='LightSteelBlue'" style="CURSOR: hand" onmouseout="this.style.backgroundColor='Ivory'">
<td align="middle"><font face="Verdana" color="darkslategray" size="2"><b>Logout</b></font>
</td>
</tr>

CASE 3: HTML table row

<tr onmousedown="NewReg()" id="rwRegister" onmouseover="this.bgColor='LightSteelBlue'" style="CURSOR: hand" onmouseout="this.bgColor='Ivory'">
<td align="middle"><font face="Verdana" color="darkslategray" size="2"><b>Register</b></font>
</td>
</tr>

CASE 4: DataGrid Item

//Set mouseover and mouseout attributes:
foreach( DataGridItem item in this.dgForum.Items)
{
//Mouseout:
if (item.ItemType==ListItemType.Item)
{
item.Attributes.Add("OnMouseOut", "this.style.backgroundColor='Snow'");
}
else
{
item.Attributes.Add("OnMouseOut", "this.style.backgroundColor='GhostWhite'");
}

//Mouseover:
item.Attributes.Add("OnMouseOver", "this.style.backgroundColor='Red'");

}

norm

norm,

If you don't mind, email me your .aspx page and I will take a look. Or if this is on an external site, I can try to hit it and see if I get the same result. Were you able to properly see the code in the Article link Demo I posted earlier? Also, send me the table structure and two or three lines of data so that I can test it in my test database.

Jeremy Oldham

thankyou so much. I will send it to you in three hours or so!

norm

Jeremy, what's your email?

norm

Thanks for the feedback, i got some many junk mail from spammers aronud the world that i missed your reply.

I've got QUESTION 1 and QUESTION 3. The remaining problem is QUESTION 2.

//Event handler for DataGrid's OnItemDataBound: When user mouseover/mouseout a row.
protected void ItemDataBound(Object sender, DataGridItemEventArgs e)
{
if (e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.AlternatingItem)
{
//BUG
//e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor='LightSteelBlue'");
//e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='Ivory'");
}
}

But the browser keeps complaining about "this" object. Error message is:
Error: Object required: "this"

I was advised to check browser setting for Java VM - which I set to LOW - the problem persists and I doubt that Java VM setting is the problem. I have not been able to solve this problem.

norm

I am adding video to my personal website. All the video files are AVI files.

I am using it like this.

<embed src="ABC.AVI" height="250" width="33%" controller="true" autoplay="false" playeveryframe="false" pluginspage="oops.html" loop="false" />

1. I want to disable the right-click on the video. How to do that?
Reason : So that people won't use Full Screeen or Zoom 200%

2. How to stop the audio stream via this tag? (Embed)
I just want to give the video not audio. (mute audio)

Follow live World Cup Cricket scores here[^]

try this:

<embed src="http://localhost/mov_panels/AALogoAnimation.mov" width="250" height="75" type="video/quicktime" />

norm

If I had a suggestion for an addition to the HTML standard how would I go about proposing it?

Do I contact someone directly at the W3C?

Paul Watson wrote:
"At the end of the day it is what you produce that counts, not how many doctorates you have on the wall."

George Carlin wrote:
"Don't sweat the petty things, and don't pet the sweaty things."