Hi,
my team is working a application with online editor to change certain information on the page. an example is
http://www.350.com/pe this page has certain objects on it. when you mouseover one of the object then it shows a control panel on the top of that object. we could not simulate it.
previously we try to resolve it my having a DIV containing controls and hidden and when mouse over a object DIV we show the controls DIV above the control. the problem is when you mouseout of the object to the controls DIV then mouseout of the object fires that hides the controls.
secondly we try to resolve it by having a DIV inside each object in hidden state and when some body mouseover the object we show it and when mouseout of the object we hide it. but it is still not working. there was also a strange behaviour we could not understand that when we had the pointer on the boundry of the object then it continuously fires the mouseenter event. we also have attached Draggable and Sizable behavious from UI attached to the object so we can drag around or resize the object.
i want mouseenter and mouseout fired only once on the object also if one object DIV override another DIV with less z-index and when mouse goes from DIV below to DIV upper then below DIV should fire mouseout and above DIV fire mouseout.
any other suggestion is welcome that accomplishes this task. we just want to attach a control div to each control on the page and when mouse over then it should be activated and shown and when mouseout then it should deactivate or hidden.
below is the litter example we are trying. see that we created a DIV with this statement on startup in each object in this case 2 DIV on the page.
$('.EntryObject').find(":nth-child(1)").before("<div>controls</div>");
Many Thanks
Shahzad
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Testing.aspx.vb" Inherits="Testing" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery/Jquery_UI_Components/ui.core.js" type="text/javascript"></script>
<script src="js/jquery/Jquery_UI_Components/ui.draggable.js" type="text/javascript"></script>
<script src="js/jquery/Jquery_UI_Components/ui.resizable.js" type="text/javascript"></script>
<link href="js/jquery/Jquery_UI_Components/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css">
</link>
<style>
#Draggable { width:50px; height:50px; border-style:solid; border-color:Black; border-width:1px; }
#EntryObject {}
#OutObject {}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<div id="mydi" class="EntryObject" style="width:250px; border-style:solid; border-color:Blue; border-width:1px; height:150px">
<div>
this is a div
</div>
</div>
<br />
<div id="mydi2" class="EntryObject" style="width:250px; border-style:solid; border-color:Blue; border-width:1px; height:150px">
<div>
this is a second div
</div>
</div>
<br />
<br />
<input type="button" onclick="call1()" />
<script language="javascript" >
$("#mydi").draggable();
$("#mydi2").draggable();
$("#mydi").resizable();
$("#mydi2").resizable();
$('.EntryObject').find(":nth-child(1)").before("<div>controls</div>");
$('.EntryObject').find(":nth-child(1)").hide();
$('.EntryObject').bind('mouseenter', function(event)
{
if( event.stopPropagation )
{
event.stopPropagation();
} //For 'Good' browsers
else
{
event.cancelBubble = true;
} //For IE
$(this).html( $(this).html() + 'in');
$(this).find(":nth-child(1)").show();
});
$('.EntryObject').bind('mouseout', function(event)
{
if( event.stopPropagation )
{
event.stopPropagation();
} //For 'Good' browsers
else
{
event.cancelBubble = true;
} //For IE
$(this).find(":nth-child(1)").hide();
$(this).html( $(this).html() + 'out');
});
</script>
</body>
</html>