jQWidgets Forums
Forum Replies Created
-
Author
-
Hi Dimitar,
Check this link,I tried the alert popup from your site only.Please give a solution.
http://www.jqwidgets.com/jquery-alert-popup/Hi Dimitar,
Thanks.But issue is : I would like to see the icon before the message “Alert Message”.Am attaching the code along with this.Please give a solution.<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript” src=”../../scripts/jquery-1.7.2.min.js”></script>
<title>jQuery Alert</title>
<style type=”text/css”>
/* applied to the alert */
.jqx-alert
{
position: absolute;
overflow: hidden;
z-index: 99999;
margin: 0;
padding: 0;
}
/*applied to the header */
.jqx-alert-header
{
outline: none;
border: 1px solid #999;
overflow: hidden;
padding: 5px;
height: auto;
white-space: nowrap;
overflow: hidden;
background-color:#E8E8E8; background-image:-webkit-gradient(linear,0 0,0 100%,from(#fafafa),to(#dadada)); background-image:-moz-linear-gradient(top,#fafafa,#dadada); background-image:-o-linear-gradient(top,#fafafa,#dadada);
}
/*applied to the content*/
.jqx-alert-content
{
outline: none;
overflow: auto;
text-align: left;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
border-top: none;
}
</style>
<script type=”text/javascript”>
jqxAlert = {
// top offset.
top: 0,
// left offset.
left: 0,
// opacity of the overlay element.
overlayOpacity: 0.2,
// background of the overlay element.
overlayColor: ‘#ddd’,
// display alert.
alert: function (message, title) {
if (title == null) title = ‘Alert’;
jqxAlert._show(title, message);
},
// initializes a new alert and displays it.
_show: function (title, msg) {
jqxAlert._hide();
jqxAlert._handleOverlay(‘show’);
$(“BODY”).append(
‘<div class=”jqx-alert” style=”width: auto; height: auto; overflow: hidden; white-space: nowrap;” id=”alert_container”>’ +
‘<div id=”alert_title”></div>’ +
‘<div id=”alert_content”>’ +
‘<div id=”message”></div>’ +
‘<input style=”margin-top: 10px;” type=”button” value=”Ok” id=”alert_button”/>’ +
‘</div>’ +
‘</div>’);
$(“#alert_title”).text(title);
$(“#alert_title”).addClass(‘jqx-alert-header’);
$(“#alert_content”).addClass(‘jqx-alert-content’);
$(“#message”).text(msg);
$(“#alert_button”).width(70);
$(“#alert_button”).click(function () {
jqxAlert._hide();
});
jqxAlert._setPosition();
},
// hide alert.
_hide: function () {
$(“#alert_container”).remove();
jqxAlert._handleOverlay(‘hide’);
},
// initialize the overlay element.
_handleOverlay: function (status) {
switch (status) {
case ‘show’:
jqxAlert._handleOverlay(‘hide’);
$(“BODY”).append(‘<div id=”alert_overlay”></div>’);
$(“#alert_overlay”).css({
position: ‘absolute’,
zIndex: 99998,
top: ‘0px’,
left: ‘0px’,
width: ‘100%’,
height: $(document).height(),
background: jqxAlert.overlayColor,
opacity: jqxAlert.overlayOpacity
});
break;
case ‘hide’:
$(“#alert_overlay”).remove();
break;
}
},
// sets the alert’s position.
_setPosition: function () {
// center screen with offset.
var top = (($(window).height() / 2) – ($(“#alert_container”).outerHeight() / 2)) + jqxAlert.top;
var left = (($(window).width() / 2) – ($(“#alert_container”).outerWidth() / 2)) + jqxAlert.left;
if (top < 0) {
top = 0;
}
if (left < 0) {
left = 0;
}
// set position.
$(“#alert_container”).css({
top: top + ‘px’,
left: left + ‘px’
});
// update overlay.
$(“#alert_overlay”).height($(document).height());
}
}
</script>
<script type=”text/javascript”>
$(document).ready(function () {
jqxAlert.alert(‘Alert Message’);
})
</script>
</head>
<body>
</body>
</html>November 6, 2014 at 10:18 am in reply to: jqxexpander content hidden as default on form load jqxexpander content hidden as default on form load #62287Hi Nadezhda,
Thanks buddy,it is working.November 6, 2014 at 8:33 am in reply to: jqxexpander content hidden as default on form load jqxexpander content hidden as default on form load #62265Hi Nadezhda,
Thanks.That is fine but what i wanted is : when the multiple expanders get collapsed,the space in between the expanders should be collapsed along with them.i.e.By default there won’t be any space in between the two expanders.Please give a solution.November 6, 2014 at 6:14 am in reply to: jqxexpander content hidden as default on form load jqxexpander content hidden as default on form load #62253Hi Nadezhda,
Thanks.But now i had an another issue.Is it possible to put width and height in percentage.I tried,when am putting it in percentage it is not working but when I keep it in px it works.Am using multiple expanders in same page.Am attaching my code along with this.Please give a solution.<html>
<head>
<script type=”text/javascript”>
$(“#jqxExpander”).jqxExpander({width: ‘100%’,height: ‘50%’,theme: ‘energyblue’,expanded: false });$(“#jqxExpander1”).jqxExpander({width: ‘100%’,height: ‘50%’,theme: ‘energyblue’,expanded: false });
</script>
</head>
<body>
<div id=’jqxExpander’>
<div>Overview</div>
<div>More</div>
</div><div id=’jqxExpander1′>
<div>Header</div>
<div>Content</div>
</div>
</body>
</html>Thanks in advance.
-
AuthorPosts