473,326 Members | 2,337 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Please Help with DHTML Behavior events (in HTC File)


Hi,

I want to encapsulate code to change BUTTON elements on a webpage in one
place in an HTC file.

Here is the code in my HTC FIle:

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="MouseUp()" />
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="MouseOver()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="MouseOut()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="MouseDown()" />

<SCRIPT LANGUAGE="JScript">

function MouseOver()
{
runtimeStyle.padding = "1px 4px 4px 4px";
runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.Gradient(Gradie ntType=0,
StartColorStr=#bababa, EndColorStr=#ffffff)";
runtimeStyle.borderRightStyle = "solid";
runtimeStyle.borderRightWidth = "1px";
runtimeStyle.borderRightColor = "#7b9ebd";
runtimeStyle.borderTopStyle = "ridge";
runtimeStyle.borderTopWidth = "1px";
runtimeStyle.borderTopColor = "#7b9ebd";
runtimeStyle.borderLeftStyle = "ridge";
runtimeStyle.borderLeftWidth = "1px";
runtimeStyle.borderLeftColor = "#7b9ebd";
runtimeStyle.borderBottomStyle = "ridge";
runtimeStyle.borderBottomWidth = "1px";
runtimeStyle.borderBottomColor = "#7b9ebd";
}

function MouseOut()
{
runtimeStyle.padding = "1px 4px 4px 4px";
runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.Gradient(Gradie ntType=0,
StartColorStr=#bababa, EndColorStr=#ffffff)";
runtimeStyle.borderRightStyle = "solid";
runtimeStyle.borderRightWidth = "1px";
runtimeStyle.borderRightColor = "#7b9ebd";
runtimeStyle.borderTopStyle = "ridge";
runtimeStyle.borderTopWidth = "1px";
runtimeStyle.borderTopColor = "#7b9ebd";
runtimeStyle.borderLeftStyle = "ridge";
runtimeStyle.borderLeftWidth = "1px";
runtimeStyle.borderLeftColor = "#7b9ebd";
runtimeStyle.borderBottomStyle = "ridge";
runtimeStyle.borderBottomWidth = "1px";
runtimeStyle.borderBottomColor = "#7b9ebd";
}

function MouseDown()
{
runtimeStyle.padding = "0px 4px 4px 4px";
runtimeStyle.color = "black";
runtimeStyle.backgroundColor = "white";
runtimeStyle.borderRightStyle = "solid";
runtimeStyle.borderRightWidth = "1px";
runtimeStyle.borderRightColor = "#7b9ebd";
runtimeStyle.borderTopStyle = "ridge";
runtimeStyle.borderTopWidth = "1px";
runtimeStyle.borderTopColor = "#7b9ebd";
runtimeStyle.borderLeftStyle = "ridge";
runtimeStyle.borderLeftWidth = "1px";
runtimeStyle.borderLeftColor = "#7b9ebd";
runtimeStyle.borderBottomStyle = "ridge";
runtimeStyle.borderBottomWidth = "1px";
runtimeStyle.borderBottomColor = "#7b9ebd";
}

function MouseUp()
{
runtimeStyle.padding = "1px 4px 4px 4px";
runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.Gradient(Gradie ntType=0,
StartColorStr=#ffffff, EndColorStr=#bababa)";
runtimeStyle.color = "";
runtimeStyle.backgroundColor = "";
runtimeStyle.borderRightStyle = "solid";
runtimeStyle.borderRightWidth = "1px";
runtimeStyle.borderRightColor = "#7b9ebd";
runtimeStyle.borderTopStyle = "ridge";
runtimeStyle.borderTopWidth = "1px";
runtimeStyle.borderTopColor = "#7b9ebd";
runtimeStyle.borderLeftStyle = "ridge";
runtimeStyle.borderLeftWidth = "1px";
runtimeStyle.borderLeftColor = "#7b9ebd";
runtimeStyle.borderBottomStyle = "ridge";
runtimeStyle.borderBottomWidth = "1px";
runtimeStyle.borderBottomColor = "#7b9ebd";
window.alert('Up')
}

</SCRIPT>
</PUBLIC:COMPONENT>

and in my HTML File I just have this for testing:
<HTML>
<INPUT Type = "button" Style="behavior:url(SAFButton.htc);
padding: 1px 4px 4px 4px;
font-size: 10pt;
font-family: Verdana;
height: 22px;
filter: progid:DXImageTransform.Microsoft.Gradient(Gradien tType=0,
StartColorStr=#ffffff, EndColorStr=#bababa);
border-right: #7b9ebd 1px solid;
border-top: #7b9ebd 1px ridge;
border-left: #7b9ebd 1px ridge;
border-bottom: #7b9ebd 1px ridge;"
value="button">
</HTML>

Problem is, it seems the MouseOut event, and the mouseup events are not
being triggered.

Itried putting window.alert at the end of each handler and the mouseout
and mouseup events were never triggered.

But I can make these changes easily using inline event handling so why
can't it work in an htc file?

Any help or advice would be appreciated.

thanks, Philip
*** Sent via Developersdex http://www.developersdex.com ***
Aug 18 '06 #1
1 2713
I slightly modified your test to see that all things were actually
working just fine:

New HTC:

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="MouseUp()" />
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="MouseOver()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="MouseOut()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="MouseDown()" />
<SCRIPT LANGUAGE="JScript">
function MouseOver()
{
runtimeStyle.padding = "1px 4px 4px 4px";
runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.Gradient(Gradie ntType=0,
StartColorStr=#bababa, EndColorStr=#ffffff)";
runtimeStyle.borderRightStyle = "solid";
runtimeStyle.borderRightWidth = "1px";
runtimeStyle.borderRightColor = "#7b9ebd";
runtimeStyle.borderTopStyle = "ridge";
runtimeStyle.borderTopWidth = "1px";
runtimeStyle.borderTopColor = "#7b9ebd";
runtimeStyle.borderLeftStyle = "ridge";
runtimeStyle.borderLeftWidth = "1px";
runtimeStyle.borderLeftColor = "#7b9ebd";
runtimeStyle.borderBottomStyle = "ridge";
runtimeStyle.borderBottomWidth = "1px";
runtimeStyle.borderBottomColor = "#7b9ebd";
window.document.getElementById("results").innerHTM L = "MouseOver";
}

function MouseOut()
{
runtimeStyle.padding = "1px 4px 4px 4px";
runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.Gradient(Gradie ntType=0,
StartColorStr=#bababa, EndColorStr=#ffffff)";
runtimeStyle.borderRightStyle = "solid";
runtimeStyle.borderRightWidth = "1px";
runtimeStyle.borderRightColor = "#7b9ebd";
runtimeStyle.borderTopStyle = "ridge";
runtimeStyle.borderTopWidth = "1px";
runtimeStyle.borderTopColor = "#7b9ebd";
runtimeStyle.borderLeftStyle = "ridge";
runtimeStyle.borderLeftWidth = "1px";
runtimeStyle.borderLeftColor = "#7b9ebd";
runtimeStyle.borderBottomStyle = "ridge";
runtimeStyle.borderBottomWidth = "1px";
runtimeStyle.borderBottomColor = "#7b9ebd";
window.document.getElementById("results").innerHTM L = "MouseOut";
}

function MouseDown()
{
runtimeStyle.padding = "0px 4px 4px 4px";
runtimeStyle.color = "black";
runtimeStyle.backgroundColor = "white";
runtimeStyle.borderRightStyle = "solid";
runtimeStyle.borderRightWidth = "1px";
runtimeStyle.borderRightColor = "#7b9ebd";
runtimeStyle.borderTopStyle = "ridge";
runtimeStyle.borderTopWidth = "1px";
runtimeStyle.borderTopColor = "#7b9ebd";
runtimeStyle.borderLeftStyle = "ridge";
runtimeStyle.borderLeftWidth = "1px";
runtimeStyle.borderLeftColor = "#7b9ebd";
runtimeStyle.borderBottomStyle = "ridge";
runtimeStyle.borderBottomWidth = "1px";
runtimeStyle.borderBottomColor = "#7b9ebd";
window.document.getElementById("results").innerHTM L = "MouseDown";
}

function MouseUp()
{
runtimeStyle.padding = "1px 4px 4px 4px";
runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.Gradient(Gradie ntType=0,
StartColorStr=#ffffff, EndColorStr=#bababa)";
runtimeStyle.color = "";
runtimeStyle.backgroundColor = "";
runtimeStyle.borderRightStyle = "solid";
runtimeStyle.borderRightWidth = "1px";
runtimeStyle.borderRightColor = "#7b9ebd";
runtimeStyle.borderTopStyle = "ridge";
runtimeStyle.borderTopWidth = "1px";
runtimeStyle.borderTopColor = "#7b9ebd";
runtimeStyle.borderLeftStyle = "ridge";
runtimeStyle.borderLeftWidth = "1px";
runtimeStyle.borderLeftColor = "#7b9ebd";
runtimeStyle.borderBottomStyle = "ridge";
runtimeStyle.borderBottomWidth = "1px";
runtimeStyle.borderBottomColor = "#7b9ebd";
window.document.getElementById("results").innerHTM L = "MouseUp";
}
</SCRIPT>
</PUBLIC:COMPONENT>

New HTML:
<HTML>
<BODY>
<INPUT id="button" Type = "button"
Style="behavior:url('/Ajax/test.htc');
padding: 1px 4px 4px 4px;
font-size: 10pt;
font-family: Verdana;
height: 22px;
filter:
progid:DXImageTransform.Microsoft.Gradient(Gradien tType=0,
StartColorStr=#ffffff, EndColorStr=#bababa);
border-right: #7b9ebd 1px solid;
border-top: #7b9ebd 1px ridge;
border-left: #7b9ebd 1px ridge;
border-bottom: #7b9ebd 1px ridge;"
value="button"/>
<div id="results"></div>
</BODY>
</HTML>

All I did was put a DIV to accept new values from the events. The Alert
window is modal and can cause events to stop working down the chain.

But all appears to work to me.

BTW...Are you sure you want to IE specify yourself like that? No other
browser talks HTC....

Aug 18 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Aaron Bertrand - MVP | last post by:
Based on a complaint that one of my articles just links to the MS documentation, I'm writing a tutorial on FileSystemObject. However I'm currently getting stalled by this bug. Environment:...
3
by: coolsti | last post by:
Can someone help me enhance this code snippet which works only for IE so that it will also work for Firefox? I have been trying all sorts of things and have gotten to where I can capture the...
1
by: Buddy | last post by:
Hello, I need to know how can I generate a .resx file from code for different language culture. Basically the .resx file is in binary, is there anyway that I can generate a text file contains...
0
by: Andreas Klemt | last post by:
Hello, how can I easily solve the nested DataGrid problem working correctly with edit / update events? Is there any very simple example? Who has the same problems? Thanks in advance, Andreas
4
by: David Tilman | last post by:
I've created a web application using ASP .NET that creates tables similar to Gantt charts. There are 5 tables will 180 cells each, so there are about 900 cells on the web page. I had javascript in...
3
by: prabhupr | last post by:
Hi Folks Not sure if this is the right group, if not please re-direct me to the right one. Here is my question =============== When I compile my ASP.NET WEB project from VS 2005 (.NET...
5
by: Chris Lieb | last post by:
I am trying to add an event listener to the keyup event for some text inputs that I am creating dynamically. I have no problems getting it to work in Firefox, but IE just ignores them. I have...
0
by: pavan pothuru | last post by:
hi, I am pavan.My project is to develop a real time analyzer, which shows the real status of delivered mails,bounced mails and deferred mails.I done a script to display the wanted data.But we...
1
by: leenadiwan | last post by:
Friends, Im having problem with accessing a JS file placed in another folder from a JSP popup. I tried all the following: <SCRIPT LANGUAGE="JavaScript1.1" ...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.