Notifications when using appendContainer

[my_2000Participant]

<script type="text/javascript">
$(document).ready(function () {
   $("#jqxNotification").jqxNotification({width: 250, appendContainer: "#Notearea",opacity: 0.9,autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 6000, template: "info"});
   var names=["7","8","9","10","11"];
   for (var v = 0; v <names.length; v++) {
       $("#notificationContent").html(names[v]);
       $("#jqxNotification").jqxNotification("open");
   }
});
</script>

<div style="width:250px;position:absolute;right:5px; top:50px;z-index:900;" id="Notearea"></div>
<div id="jqxNotification"><div id="notificationContent"></div></div>

If I remove the appendContainer it works fine, does the appendContainer do something else which could cause this?

[ivailoParticipant]

Hi my_2000,

We tested this code and it seems to be correct.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[my_2000Participant]

my page

[ivailoParticipant]

Hi my_2000,

With the same code try to change positions of the notification and container.
It have to return correct result.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[my_2000Participant]

thanks
If I remove the appendContainer display

my page

1 pic -> local IE IIS
2 pic -> Internet IE tomcat
3 pic -> Internet chrome tomcat

WHY??????????????????

[ivailoParticipant]

Hi my_2000,

Please try to increase the notification’s z-index.
You can try different values until the result goes acceptable.

.jqx-notification{
    z-index:999999999 !important;
}

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[my_2000Participant]

Can you give an example!Thanks!!!!

[ivailoParticipant]

Hi my_2000,

Please try this demo.
Your problem is not occurred in the major browsers.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[my_2000Participant]

success!!!!!!
Error code

<div style="width:250px;position:absolute;right:5px; top:0px;z-index:900;" id="Notearea"></div>
<div id="jqxNotification"><div id="notificationContent"></div></div>
<div id='jqxWidget'><div id="jqxgrid"></div></div>

Correct code

<div id="jqxNotification"><div id="notificationContent"></div></div>
<div id='jqxWidget'><div id="jqxgrid"></div></div>
<div style="width:250px;position:absolute;right:5px; top:0px;z-index:900;" id="Notearea"></div>

[Author]

Posts