Develop Reference

jqxWidget jqxwindow open script working only once

I have JS code for jqxWindow which works only one time:
$(document).ready(function () {
$("#jqxwindow1 ").jqxWindow({ height: 800, width: 1212, maxWidth: 1600, maxHeight: 900, animationType: 'none', theme: 'fresh', autoOpen: false });
$("#jqxwindow2 ").jqxWindow({ height: 800, width: 1212, maxWidth: 1600, maxHeight: 900, animationType: 'none', theme: 'fresh', autoOpen: false });
$("#jqxwindow3 ").jqxWindow({ height: 800, width: 1212, maxWidth: 1600, maxHeight: 900, animationType: 'none', theme: 'fresh', autoOpen: false });
$("#jqxwindow4 ").jqxWindow({ height: 800, width: 1212, maxWidth: 1600, maxHeight: 900, animationType: 'none', theme: 'fresh', autoOpen: false });
$("#jqxwindow5 ").jqxWindow({ height: 800, width: 1212, maxWidth: 1600, maxHeight: 900, animationType: 'none', theme: 'fresh', autoOpen: false });
$('div[id^="test"] p').click(function() {
var string = "#jqxwindow" + $(this).text().split('|')[0];
//alert("The window is opened : " + string);
var opened = $(string).jqxWindow('isOpen');
var action = 'close';
if (opened == false)
action = 'open';
$(string).jqxWindow(action);
$(string).jqxWindow('bringToFront');
});
});
I was searching but every solution didn't work for me.
LE:
Uncaught TypeError: $(...).jqxWindow is not a function
on line
var opened = $(string).jqxWindow('isOpen');

I resolved:
Just put before (document) jQuery and in function put argument $. ex. down:
jQuery(document).ready(function ($) {
//function code
}
And now it's work.

Center Draggable Jquery Dialog

For the last few hours I've been trying to have an animated dialog that will initiate a puff animation, is draggable and when closed will center again when opened. As of now I have it so the animation initiates, it's draggable but when I close and open it, it's fixed in the same position it was dragged to.
I've tried using the open function, complete function in show/hide, setting the div/dialog in a function, using position: center and yeah...
Anyway, here is the code:
frm_location.jsp:
//this is in an "a" tag, can't seem to get it to display properly
id="NEW_LOCATION_BUTTON" href="javascript:openDialog('#dialog-form','#popupBoxCancel','orange-theme','625');" class="btn_sel">
jQueryDialog.js:
function openDialog(_dialog, _cancel, _theme, _size) {
jQuery(document).ready(function ($) {
$(_dialog).dialog({
autoOpen: true,
width: _size,
modal: true,
position: "center",
resizable: false,
draggable: true,
dialogClass: _theme,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
$(_cancel).click(function() {
$(_dialog).dialog("close");
});
}

Take a look at this. I'm not sure how you're reopening the dialog, but this should do. jsfiddle code
<div id='dialog'>PUFF</div>
<button id='reopen'>OPEN DIALOG</button>
$(function () {
$('#reopen').click(function () {
$( "#dialog" ).dialog({ position: 'center'});
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: true,
width: 200,
modal: true,
position: "center",
resizable: false,
draggable: true,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
});

Horizontally Center a jQuery dialog window

I have an example here.
When I open the window, it is vertically centered, but the horizontal center is far down. I want to get it centered on the screen when it pops up.
This is the jscript...
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 1011,
height: 'auto',
show: 'fade',
hide: 'fade',
buttons: {
"Dismiss": function() {
$(this).dialog("close");
}
}
});
I've tried using position: 'middle',, but it didn't work.

look at the documentation of position
http://api.jqueryui.com/dialog/#option-position
here is how you use it:
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 1011,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center top", of: window },
buttons: {
"Dismiss": function() {
$(this).dialog("close");
}
}
});
I read through the documentation. I wanted the dialog box to be
centered, in the middle of the page... not centered, and at the very
top. Just in the middle of the page. I've tried center left, center
center ...How come there's just no center middle? – webfrogs Sep 6 '13
at 22:58
Someone please come back... – webfrogs Sep 7 '13 at 2:04
You can use any of the following to make it in the middle of the page
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 1011,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center middle", of: window },
buttons: {
"Dismiss": function() {
$(this).dialog("close");
}
}
});
OR
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 1011,
height: 'auto',
show: 'fade',
hide: 'fade',
position: ['center', 'middle'],
buttons: {
"Dismiss": function() {
$(this).dialog("close");
}
}
});

how can I hide a part of javascript from IE

This is my javascript function to open a jquery dialog.
('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
show: 'slide',
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
How can I hide the part show: 'slide, from IE ?

var options = {
autoOpen: false,
modal: true,
resizable: false,
width: 800,
height: 700,
close: function() {
}
};
if ( ! $.browser.msie){
options ['show'] = 'slide';
}
$('#dialog').append(iframe).appendTo("body").dialog(options);

try this
if ( ! $.browser.msie){
$( "#dialog" ).dialog( "option", "show", "slide" )
}

jquery has removed support for jQuery.browser.msie from version >= 1.9
so
var opts = {
autoOpen : false,
modal : true,
resizable : false,
show : 'slide',
width : 800,
height : 700,
close : function() {
}
};
if (!/msie/.test(window.navigator.userAgent)) {
opts.show = 'slide';
}
('#dialog').append(iframe).appendTo("body").dialog(opts);
$('#dialog_click').click("callback", function() {
$('#dialog').dialog('open');
return false;
});

$('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 800,
height: 700,
close: function() {
}
});
if(!$.browser.msie) {
$( "#dialog" ).dialog( "option", "show", "slide" );
}

There are several workarounds for this (conditional comments for the whole script, altering the property later, etc) but noone has posted a solution that does EXACTLY what you asked: excluding a portion of javascript only in IE.
Then take a look at this:
('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
/*#cc_on #*/
/*#if (true)
#else #*/
show: 'slide',
/*#end #*/
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
IE won't include show: 'slide',, while non-IE browsers won't read the Conditional Compilation Statements , so the condition will fall in the (not-commented) else part.
Read more on Conditional Compilation Statements

There is several thing you can do.
First there are conditional comments , ie
<!--[if !IE ]>
<script>
$('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
show: 'slide',
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
</script>
<![endif]-->
Or you can check jquery browser variable , as other guys are pointing.
Also if you are going this way, and you really want to target old version of IE you can use some functions specific to it ( like attachEvent )

jQuery UI Overlay Repeat Fix For "Auto" Dimensions

A while ago, I had a problem with pop-up dialogs that had a height going beyond the background. The translucent overlay stopped in the middle and everything underneath was black. My friend fixed it for me. He said:
"For the dialog issue I used 900px for width and height. There's no way to accomplish the fix purely with CSS because the values eventually get overwritten when the javascript is called to display the dialog. What we need to do is after opening/creating the dialog is to resize the background overlay to the dimensions of the page. You can see this in the index.html for bonus features."
Unfortunately, this fix doesn't apply when the width and height are set to 'auto'.
Can someone please help me here? Thanks.
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
width: '900',
height: '900',
modal: true,
title: 'Bonus Features',
beforeClose: function(){ $(this).remove(); }
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
adjustJQueryDialogOverlay();
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});

function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});