We Keep Coding

jQuery ui dialog box always positioned to top left

My jquery UI dialog box always gets positioned to top left no matter what I specify in the position attribute. I tried adding a css position to the div too. But it was of no use.
Can someone help me with this? Thanks.
$("<div>----Play again?---</div>").dialog({
title: 'Game Over!',
height: 'auto',
width: 'auto',
autoOpen: false,
draggable: true,
modal: false,
position: 'center',
buttons:{
"Yes": function() {
startGame();
$(this).dialog('close');
},
"No": function() {
alert('\nYour Score is: '+score+'\nGood Bye '+playerName+'!');
$(this).dialog('close');
}
}
});

I'm pretty sure you shouldnt need to set a position:
$("#dialog").dialog();
should centre by default.
I did have a look at the article, and also checked what it says on the official jquery-ui site about positioning a dialog : and in it were discussed 2 states of: initialise and after initialise.
Code examples - (taken from jQuery UI 2009-12-03)
Initialize a dialog with the position option specified.
$('.selector').dialog({ position: 'top' });
Get or set the position option, after init.
//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');
I think that if you were to remove the position attribute you would find it centres by itself else try the second setter option where you define 3 elements of "option" "position" and "center".

jQuery - Automatic change values after resizing the browser window

We have following code (addition, the presence of the plugin DataTables)
$('#myTable').dataTable( {
"scrollY": height, <-- auto height here
"scrollCollapse": true,
} );
I dont' know so well jquery and I have a problem with the automatic changing values.
I have a div element where the height is a percentage (for example: 50%) and
and I want to get this height in pixels. Ofcourse the height is changing as many times as the browser window is changed.
Unfortunately, I don't know how to do, Someone here can help? (preferably an example)
Update 1:
I tried so like that
var ch = $('#dataTableWrapper').height() - 110; // I subtracted the value of the height of my static elements in a div
$('#dataTableID').dataTable( {
"scrollY": ch,
"scrollCollapse": true,
} );
$(window).resize(function(){
ch = $('#dataTableWrapper').height() - 110; // same as above
$('.dataTables_scrollBody').css('height', ch);
});
Apparently it works, but if anyone had a more elegant solution I would ask about throwing code.

You can do like this:
$( window ).resize(function() {
var scroll = $("#yourDiv").height();
});

This might be a dumb thing to suggest, but are you just looking for a simple refactoring?
function getTableHeight() {
return $('#dataTableWrapper').height() - 110;
}
$('#dataTableID').dataTable( {
"scrollY": getTableHeight(),
"scrollCollapse": true,
} );
$(window).resize(function(){
$('.dataTables_scrollBody').css('height', getTableHeight());
});

jQuery height() function not working on element

I am currently in the process of putting together a jQuery touch carousel. I seem to have run into a slight problem when setting the height (or width) of an element, however.
Below is the relevant code from the function:
carousel = function( container, options )
{
this.settings = $.extend({
// General settings:
width: 600,
height: 400,
slides: 'div',
snapTo: true,
mouseSupport: true,
trackMovement: true,
slideWidth: 600,
slideHeight: 400,
// CSS classes:
wrapperCls: 'carousel_wrapper',
innerCls: 'carousel_scroll_inner'
}, options);
this.container = container;
this.scroller = null;
this.slides = this.container.children(this.settings.slides);
this.numSlides = this.slides.length;
this.scrollWidth = this.settings.width * this.numSlides;
this.container.addClass(this.settings.wrapperCls);
this.scroller = $('<div />').addClass(this.settings.innerCls);
this.container.wrapInner(this.scroller);
this.scroller.width(1500)
this.scroller.css('width', this.scrollWidth);
this.container.css({ width: this.settings.width, height: this.settings.height });
};
This is in turn called by doing something like:
$(function() {
var carousel1 = new carousel($('#myElement'));
});
#myElement definitely exists, and no error is thrown. this.scroller also contains the correct jQuery object which has been wrapped to the contents of this.container. The problem is that I am unable to set the CSS width or height of this.scroller, using either the width(), height() or css() functions.
What am I missing? I have put together a jsFiddle to demonstrate the problem. If you check the element inspector, you can see that the dimensions are never updated for the div.carousel_scroll_inner element.

The problem is that, here:
this.container.wrapInner(this.scroller);
jQuery will use a copy. So this.scroller is not the same element wrapped around whatever is below this.container. Try:
this.container.addClass(this.settings.wrapperCls);
this.scroller = $('<div />').addClass(this.settings.innerCls);
this.scroller.append(this.container.contents());
this.container.append(this.scroller);

Problem with dialog box using Jquery UI

dial and place are the two divisions which exist in the html code that calls the function.
I am able to open up both of them but not able to embed the graph using plot in the 'place' division after it is opening up via the 'Draw' button.
It works fine only when I open both the boxes initially.
function abcd (dial,place,xrange){
var dial = conv(dial)
var xr = document.getElementById("xrange");
var yr = document.getElementById("yrange");
var gtype = document.getElementById("pattern");
xr.value = ""; yr.value = ""; gtype.value = "Line" ;
var place = conv(place);
$(dial).dialog("close");
$(dial).dialog("open");
$(place).dialog({
autoOpen: false,
show: 'Explode',
height: 500,
width: 450,
modal: true})
$(dial).dialog({
autoOpen: false,
show: 'Explode',
height: 300,
width: 350,
modal: false,
buttons :
{ "Draw" : function() {
$((place)).dialog("open");
$(function () {
//manipulate input values to plot data
$.plot(document.getElementById(plac2), [ {data:d1roe,label:"abc"},
{data:d1roa, label:"xyz"} ], {
series: {stack: 0},
xaxis: {ticks: ticks},
ticks: ticks
});
});
//function open(xyz) {$(xyz).dialog("open");}
function conv (myid) {
return ( '#' + myid );
}

I figured out a quick fix for it.
The problem was that the dialog will open but will not be manipulated by flot because it was unable to extract the width and height of the dialog box. So before opening the dialog we can fix the height and width.
Specifying height in the style sheet of html did not work in my case.
$(dial).dialog({
autoOpen: false,
show: 'Explode',
height: 300,
width: 350,
modal: false,
buttons :
{ "Draw" : function() {
$(place).width(500); // can take this as an input as well
$(place).height(500);
$(place).dialog("open");
//ploting code
}})}

The key thing you need for flot to work is for your plac2 div to have a width and height, and be visible (i.e. drawn to the screen). So before you plot, try alerting whether your div has width and height:
var placeholder = document.getElementById(plac2);
alert($(placeholder).width()+','+$(placeholder).height());
//plotting code here
Let us know what happens.

nyroModal - how to configure the width and height of the modal box

I am trying to controll the width and height of the modal window, but I have no idea how to override the default settings.
I've been looking at the nmObject (http://nyromodal.nyrodev.com/), but my javascript knowledge is not that great and I have no idea what the correct way to implement this is.
Here is my attempt, but with a syntax error:
$.nmObj( sizes: { initW: 300, initH: 300 });
What am I doing wrong? :\
EDIT:
$(function() {
$('.nyroModal').nyroModal();
$.nmObj({sizes: { initW: 300, initH: 300 }});
});
No syntax errors atleast, but I don't think im using the function correctly

try:
$.nmObj({sizes: { initW: 300, initH: 300 }});
Hope it helps.

Looks like you're using nyroModal v2. For an iframe, you need to set the initial size in the CSS:
.nyroModalCont iframe {
width: 300px;
height: 300px;
}
There's a github issue for this, which is closed, so I think that's how it will work in this version.
Ivailo's answer applies to nyroModal v1, I believe.

Another way of doing it.
<script type="text/javascript">
$(document).ready(function() {
$.nyroModalSettings({
type: 'iframe',
height: 500,
width: 700,
resizable: true,
autoSizable: true,
titleFromIframe: true,
// modal: true,
// selIndicator: '#loading',
contentLoading: "" // use our own
});
$('a.nyroModalPhotos').nyroModal();
});
</script>

For this filter
.* Iframe filter
.* Before: filters.formFile
Locate in min.js the file is part of a string
load: function (nm) { nm.store.iframe = $('<iframe />').attr({ src: 'javascript:\'\';', id: 'nyromodal-iframe-' + (new Date().getTime()), frameborder: '0' })
and add
.css({ height: nm.sizes.h })
the result should be
load: function (nm) { nm.store.iframe = $('<iframe />').attr({ src: 'javascript:\'\';', id: 'nyromodal-iframe-' + (new Date().getTime()), frameborder: '0' }).css({ height: nm.sizes.h })