Region that Expands on top onmouseover

[Joel]

Do you have a region that could expand to the width of its items, on top of the other regions, when the mouse is placed on the region?

[Jorge Sousa]

Hi

That can be done with TIWCGJQRegion.JQEvents.OnMouseOver.Script

And executes a local browser script, ie, doesn't go to server, are you interested? We can find you a script.

Also can be done with TIWCGJQRegion.JQEvents.OnMouseOver.OnEvent but this will call server, which is not advisable for mouse over.

Regards

cgdevtools

[Joel]

Yes. I am interested in the local broswer script.

[Jorge Sousa]

Ok

Give me a few time, and I'll post it here.

Regards

cgdevtools

[Jorge Sousa]

Joel

I was about to check this out

Do you have a region that could expand to the width of its items, on top of the other regions, when the mouse is placed on the region?

As I understood, if the mouse is placed on the region, the region will resize to the accomodate al the items in it?

Could you please detail a little more. Thanks

Regards

cg

[Joel]

Basically I have a treeview in a region on the left side of a page. Some of the treeview items are quite wide so you can not read them until you place your mouse on the region. Then it expands the region. This is what my web devs are doing in Java script in the template.

I was wanting to get away from having to write so much java script, but Maybe I just need to keep doing this if there is not an easier way with your tools. See what you think with the code below.


$(function(){
//tree view tests
var newTreeMaskHeight
var newTreeContainerWidth

function setInitialTreeView(){
if(document.getElementById('IWTVROLEContainer')){
var f = $("#webDeskFooterWrapper");
var tc = $("#IWTVROLEContainer");
//var window_width = $(window).width();
var offset_f = f.offset();
var offset_tc = tc.offset();
footerTop = offset_f.top
treeContainerTop = offset_tc.top
newTreeMaskHeight = (footerTop - treeContainerTop) - 20;
newTreeContainerWidth = $("#IWTVROLEContainer").width();
// $("#IWRBODYSIDEMENUTREECL01").height(newTreeMaskHeight);
// $("#IWRBODYSIDEMENUTREECL01").css({"overflow":"hidden"});
$("#IWTVROLE").css({"height":newTreeMaskHeight});
}
}

function setTreeViewHoverOverStatus(){
if(document.getElementById('IWTVROLEContainer')){
newTreeContainerWidth = $("#IWTVROLEContainer").width();
$("#IWTVROLE").css({"position":"absolute"});
$("#IWTVROLE").css({"z-index":"998"});
//$("#IWTVEQUIPTREE").css({"width":"auto"});
$("#IWTVROLE").css({"width":newTreeContainerWidth+15});
$("#IWTVROLE").css({"height":newTreeMaskHeight});
$("#IWTVROLE").css({"padding-right":"20"});
$("#IWTVROLE").css({"padding-bottom":"5"});
$("#IWTVROLE").css({"overflow-y":"scroll"});
$("#IWTVROLE").css({"border":"1px solid #e5e5e5"});

//$("#IWCBTICKETITEMSTATUS").css({"visibility":"hidden"});
}
}
function setTreeViewHoverOutStatus(){
if(document.getElementById('IWTVROLEContainer')){
$("#IWTVROLE").css({"position":"relative"});
$("#IWTVROLE").css({"overflow":"hidden"});
$("#IWTVROLE").width(160);
$("#IWTVROLE").css({"overflow-y":"hidden"});
$("#IWTVROLE").css({"padding-right":"0"});
$("#IWTVROLE").css({"padding-bottom":"0"});
$("#IWTVROLE").css({"border":"1px solid #F3F3F3"});

//$("#IWCBTICKETITEMSTATUS").css({"visibility":"visible"});
}




}
setInitialTreeView();

$(window).resize(function(){
setInitialTreeView();
});
$("#IWTVROLEContainer").resize(function(){
setInitialTreeView();
// setTreeViewHoverOverStatus();
});
$("#IWTVROLE").resize(function(){
setInitialTreeView();
// setTreeViewHoverOverStatus();
});


$('#IWTVROLEContainer a').click(
function(){
setTreeViewHoverOverStatus();
}
);

$('#IWTVROLE').hover(
function(){ setTreeViewHoverOverStatus(); }
,
function(){ setTreeViewHoverOutStatus(); }
);

});

[Jorge Sousa]

Hi

Why don't you try to use our JQTooltip? It does precisely that.

And if you're using JQTreeView, we can adapt it internally.

What do you think?

Regards

cgdevtools

[Joel]

Thanks. I will try the tooltip.