Please Help with DHTML Behavior events (in HTC File)

G

Guest

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(GradientType=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(GradientType=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(GradientType=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(GradientType=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
 
T

Tom Cole

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(GradientType=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").innerHTML = "MouseOver";
}

function MouseOut()
{
runtimeStyle.padding = "1px 4px 4px 4px";
runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.Gradient(GradientType=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").innerHTML = "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").innerHTML = "MouseDown";
}

function MouseUp()
{
runtimeStyle.padding = "1px 4px 4px 4px";
runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.Gradient(GradientType=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").innerHTML = "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(GradientType=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....
 

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

I Need Help with making a function that draws in a canvas using location data. 1
invalid pointer creating a div popup with javascript 0
Why do mouseup events sometimes fire if the mouse is not released? 2
Creating Table with Javascript abd Adding Events dynamically to each 0
slow response in table cells <TD> to mouseover with IE6 but fine inFirefox. 4
dom inspector 4
Complete dhtml windowing-system in 600 lines (24kb)* 0
Prototype's Event.stopObserving() Fails in Firefox 2.0 1

Members online

Total: 27 (members: 1, guests: 26)
Robots: 217

Forum statistics

Threads
473,764
Messages
2,569,566
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top