Programmatically adding hoverbehavior

I'm trying to convert some declarative code to its programmatic equivalent. I have the following. Am I missing something?

<control targetElement="objectElement">
<behaviors>
<hoverBehavior unhoverDelay="500" hoverElement="popup">
<hover>
<setProperty target="popupBehavior" property="PositioningMode" value="Absolute" />
<setProperty target="popupBehavior" property="x" value="50" />
<setProperty target="popupBehavior" property="y" value="50" />
<invokeMethod target="popupBehavior" method="show" />
</hover>
<unhover>
<invokeMethod target="popupBehavior" method="hide" />
</unhover>
</hoverBehavior>
</behaviors>
</control>

// <control targetElement="objectElement">
var objectControl =new Web.UI.Control(objectElement);
objectControl.initialize();
var objectControlBehaviors = objectControl.get_behaviors();

// <hoverBehavior unhoverDelay="500" hoverElement="popup">
var hoverBehavior =new Web.UI.HoverBehavior();
hoverBehavior.set_unhoverDelay(500);
hoverBehavior.set_hoverElement(popup);
objectControlBehaviors.add(hoverBehavior);

// <setProperty target="popupBehavior" property="PositioningMode" value="Absolute" />
var action =new Web.SetPropertyAction();
action.set_target(popupBehavior);
action.set_property("PositioningMode");
action.set_value("Absolute");
hoverBehavior.hover.addAction(action);

// <setProperty target="popupBehavior" property="x" value="50" />
var action1 =new Web.SetPropertyAction();
action1.set_target(popupBehavior);
action1.set_property("x");
action1.set_value("50");
hoverBehavior.hover.addAction(action1);

// <setProperty target="popupBehavior" property="y" value="50" />
var action2 =new Web.SetPropertyAction();
action2.set_target(popupBehavior);
action2.set_property("y");
action2.set_value("50");
hoverBehavior.hover.addAction(action2);

// <invokeMethod target="popupBehavior" method="show" />
var action3 =new Web.InvokeMethodAction();
action3.set_target(popupBehavior);
action3.set_method("show");
hoverBehavior.hover.addAction(action3);

// <unhover>
var unhoverBehavior =new Web.UI.HoverBehavior();
objectControlBehaviors.add(unhoverBehavior);

// <invokeMethod target="popupBehavior" method="hide" />
var action4 =new Web.InvokeMethodAction();
action4.set_target(popupBehavior);
action4.set_method("hide");
unhoverBehavior.unhover.addAction(action4);

Any help appreciated...

Hi,

it seems that you missed to call the initialize() method of the HoverBehavior.

You are missing the "popupBehavior" target, which needs to be attached, with the "id" set to "popupBehavior" to the <behaviors> tag under the <control> reference that you want to "pop up." For example, if you are wanting the "objectElement" to pop up, you would change that control reference in the following way:

<control targetElement="objectElement">
<behaviors>
<popupBehavior id="popupBehavior" ..the rest of the properties... />
</behaviors>
</control>

I was desperately looking on how to do this... and finally, I found the way... you got me started, so this is how to do it:

var test = document.getElementById("test");var p = document.getElementById("p");var popup =new Sys.UI.Control( p );

popup.initialize();

var objectControl =new Sys.UI.HyperLink(test);

objectControl.initialize();

var objectControlBehaviors = objectControl.get_behaviors();var pb =new Sys.UI.PopupBehavior();

pb.setOwner( popup );

pb.set_parentElement( objectControl );

pb.set_positioningMode(

"TopRight" );var invoke =new Sys.InvokeMethodAction();

invoke.set_target(pb);

invoke.set_method(

"show");var invokeu =new Sys.InvokeMethodAction();

invokeu.set_target(pb);

invokeu.set_method(

"hide");var behavior =new Sys.UI.HoverBehavior();

behavior.setOwner( objectControl );

behavior.initialize();

behavior.hover.addAction( invoke );

behavior.unhover.addAction( invokeu );

objectControlBehaviors.add( behavior );

And actually, here is the final version:

function

setHover( link, domPopup )

{

var popup =new Sys.UI.Control( domPopup );

popup.initialize();

var objectControl =new Sys.UI.HyperLink( link );

objectControl.initialize();

controls[index] = objectControl;

index++;

var objectControlBehaviors = objectControl.get_behaviors();var pb =new Sys.UI.PopupBehavior();

pb.setOwner( popup );

pb.set_parentElement( link );

pb.set_positioningMode( Sys.UI.PositioningMode.Absolute );

pb.set_x( 45 );

pb.set_y( 0 );

var invoke =new Sys.InvokeMethodAction();

invoke.set_target(pb);

invoke.set_method(

"show");var invokeu =new Sys.InvokeMethodAction();

invokeu.set_target(pb);

invokeu.set_method(

"hide");var behavior =new Sys.UI.HoverBehavior();

behavior.setOwner( objectControl );

behavior.set_hoverElement( domPopup );

behavior.initialize();

behavior.hover.addAction( invoke );

behavior.hover.add( populatePanel );

behavior.unhover.addAction( invokeu );

objectControlBehaviors.add( behavior );

}

Additional notes:

The popup div has to specific position:absolute. This might be a bug since you do not have to do that with the declarative syntax.

If you are dynamically creating and destroying these, make sure to do something like:

function

destroy()

{

for(var i = 0; i < index; i++ )

{

var b = controls[i].get_behaviors();

b =

null;

}

index = 0;

}

(I'm sure the right thing is to destroy the objects, but this works for my demo in an hour)

Hope this helps...

I'm getting closer whoever started this I'm trying very hard to make danz stuff work.

I'm getting closer whoever started this I'm trying very hard to make danz stuff work. First post was better Danz

Here you go, tested on firefox and ie6:

function CreateHoverOptions(popup_id, parentid, behaviorid, delayMS)
{
var popup_element = getObj(popup_id);
var popup_control = new Sys.UI.Control($(popup_id));
var parent = new Sys.UI.Control($(parentid));
var PopOptions = new Sys.UI.PopupBehavior();

PopOptions.set_id(behaviorid);
PopOptions.set_parentElement(getObj(parentid));
PopOptions.set_positioningMode("TopLeft");
popup_control.get_behaviors().add(PopOptions);

var HoverOptions = new Sys.UI.HoverBehavior();
HoverOptions.set_unhoverDelay(delayMS);
HoverOptions.set_hoverElement(popup_element);
parent.get_behaviors().add(HoverOptions);

var hoverAction = new Sys.InvokeMethodAction();
hoverAction.set_target(PopOptions);
hoverAction.set_method("show");
HoverOptions.hover.addAction(hoverAction);

var unhoverAction = new Sys.InvokeMethodAction();
unhoverAction.set_target(PopOptions);
unhoverAction.set_method("hide");
HoverOptions.unhover.addAction(unhoverAction);

PopOptions.initialize();
HoverOptions.initialize();
popup_control.initialize();
parent.initialize();
}

HOW to USE:
1. call following method in pageLoad()
CreateHoverOptions("OPTIONS", "image4", "beh", 1000);

HTML:
<div>
<img id="image4" src="http://pics.10026.com/?src=../images/tlogo.gif" />
</div>

<div id="OPTIONS" style="visibility:hidden;display:none;">
<div style="background-color:Yellow;">
<a href="http://links.10026.com/?link=javascript: alert('delete this pic');">[x]</a>
<a href="http://links.10026.com/?link=#">[e]</a>
</div>
</div

Has anyone updated the above code to the latest Ajax beta 1 or beta 2 version??

Thanks, Greg Benoit