Regardless of what height argument I use, my window keeps a steady height of about 250px. The console.log statement outputs 600 when I pass 600 to show, e.g. getIFrameWindow().show({height: 600}), so I know my height argument is being passed and received correctly, but my window doesn't render with it's correct height.
getIframeWindow : function () {
return {
show :function(args) {
args=args||{};
win = new Ext.Window({
width :args.width||200,
height :args.height||200,
items :[{
border : false,
xtype : 'iframepanel',
defaultSrc : args.src||'_blank.htm'
}]
});
console.log(win.height);
win.show();
},
try this :
width :args.width * 1.0 ||200,
height :args.height * 1.0 ||200,
args.width and args.height will become numbers
Related
I made one helper for open new popup window on click and I have a problem with setup default values inside object. I need to calculate position for TOP and LEFT position for popup to center new popup. Here is complete code:
/*
$(element).onPopup(options); - Open Popup window
-Ths function open new popup window on your browser
EXAMPLE:
----------------------------------------------
Google
$("a#link").onPopup({
name : "Popup Window",
width : 800,
height : 600
});
OPTIONS:
----------------------------------------------
attr // attribute where is located link
name // name of popup window
width // max width
height // max height
left // position left (px)
top // position top (px)
resizable // resizable 1 or 0
location // display location 1 or 0
fullscreen // open in full screen 1 or 0
scrollbars // display scroll bars 1 or 0
titlebar // display title bar 1 or 0
toolbar // display tool bar 1 or 0
directories // display directories 1 or 0
*/
$.fn.onPopup=function(options){
var s = {
attr : "href",
name : "Popup Window",
width : 700,
height : 600,
left : ($(window).width()/2)-(this.width/2),
top : ($(window).height()/2)-(this.height/2),
resizable : 0,
location : 0,
fullscreen : 0,
scrollbars : 1,
titlebar : 0,
toolbar : 0,
directories : 0
},
$element = this;
s = $.extend(s,options);
$element.on("click",function(e) {
e.stopPropagation(); e.preventDefault();
window.open(
$(this).attr(s.attr), s.name, "width="+s.width+", height="+s.height+", directories="+s.directories+", toolbar="+s.toolbar+", titlebar="+s.titlebar+", scrollbars="+s.scrollbars+", fullscreen="+s.fullscreen+", location="+s.location+", resizable="+s.resizable+", top="+s.top+", left="+s.left
);
});
};
And here is where is my problem:
var s = {
/*...*/
width : 700,
height : 600,
left : ($(window).width()/2)-(this.width/2),
top : ($(window).height()/2)-(this.height/2),
/*...*/
},
How to pass width/height to another object to work?
One way is to create the object first then add extra properties that reference other properties in the object
var s = {
attr : "href",
name : "Popup Window",
width : 700,
height : 600,
left : null, //calculated if not user provided
top : null //calculated if not user provided
....
};
// update user settings
s = $.extend(s,options);
// calculate based on actual values
if(s.left === null){
s.left = ($(window).width()/2)-(s.width/2);
}
if(s.top === null){
s.top = ($(window).height()/2)-(s.height/2);
}
Also note you should return this.each(.. and run your business there so you have separate instances when selector includes more than one element as well as make the plugin chainable with other jQuery methods
According to your API in the code comments you want the caller to be able to specify their own left and top positions.
You therefore need to check whether any values have been given at all, and only then calculate the default position based on the configured width and height.
var s = {
... // defaults, *not including* "left" and "top"
};
// override the defaults with the user-supplied options
// NB: no need to re-assign to `s` - `$.extend` overwrites
// the contents of the first parameter
$.extend(s, options);
// then calculate `left` and `top` if they weren't supplied
if (s.left === undefined) {
s.left = ($(window).width() - s.width) / 2;
}
if (s.top === undefined) {
s.top = ($(window).height() - s.height) / 2;
}
I want to set the pop up according to window size , alignment like top-left ,top-right, center ,bottom-left ,bottom-right ,bottom-center .how can we set element according to browser window
but the these things fails if i want to select bottom left position .my pop up goes out of window .
example : top : 5% according to window size
left: 45% according to window size
$(id).css('top', '5%');
$(id).css('left', '45%');
i also want to know .what is the meaning of
winH/2-$(id).height()/2
You can do the following to change an elements css on resize:
winH is the window size
winH/2-$(id).height()/2 is window size divided by 2 subtract chosen div height divided by 2
$(window).resize(function()
{
var winH= $(window).height();
if (windowHeight > 400)
{
$(".testDiv").css({
"height" : "20%",
"width" : "20%",
"margin-left": "45%",
"margin-top" : "5%"
});
}
});
JSFIDDLE EXAMPLE
I have two issues. I have a grid on a page which is contained within a Kendo window. I need the size of the grid rows to increase/decrease to ensure it fills the whole height of the window. I also have a grid on a different page which is just inside a Div that needs to be resized to fit the height of its container on the document window resize.
I have the following code given to me by Kendo support, but it doesn't do what I need it to do. It only sets the grid to be 100% of its container. But this leaves white space underneath the rows. I want to have no white space and for the rows to dynamically change their height so they all fit within the space together for one of them, and dynamically change the pageSize after calculating how many rows would fit in the size of the window for the other.
One of the grids is a top ten grid and the other is a list of all employees grid.
$(window).resize(function() {
var gridElement = $("#grid"),
newHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function(){
otherElementsHeight += $(this).outerHeight();
});
gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
});
Apologies for the amount of text but I've been stuck on this for days and wanted to give you as much info as possible.
EDIT: horizontal resizing works as intended out of the box. Why is the height any different? :S
EDIT2: Here is the code im using for my grid, this resides in the kendo window's content section
#(Html.Kendo().Grid<DataModels.UI.OperatorPickRatesChartModel>()
.Name("topTenPickersChart")
.Columns(columns =>
{
columns.Bound(b => b.operatorId).Title("Operator Id");
columns.Bound(b => b.averagePicksLastThirty).Title(" Average Picks Last Thirty");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Field(b => b.operatorId).Editable(false);
model.Field(b => b.averagePicksLastThirty).Editable(false);
})
.Read("operatorTopTenPickRates", "DashBoard")
.Events(events => events.Error("error"))
.PageSize(10)
)
.Filterable()
)
For the following solution you need to have the table inside an HTML element that uses 100% of the area (width and height). For getting it what I do is define the HTML as:
<div id="container">
<div id="grid"></div>
</div>
and the following CSS style:
#container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Not, once the window is resized we need to do some maths...
$(window).resize(function () {
// Get container height
var containerH = $("#container").height();
// Get Grid height
var tableH = grid.element.height();
// Get Grid body height (the remaining is header and footer)
var bodyH = grid.table.height();
// The new height of the body is:
grid.table.height(containerH - tableH + bodyH - 1);
});
JSFiddle showing it here: http://jsfiddle.net/OnaBai/dB5CF/
EDIT: If your grid is inside a kendo window, then you have to:
You don't need the CSS definition.
You are not resizing $(window) but kendoWindow so I will put that code inside Kendo Window resize event handler.
You need to set an initial width for Kendo Window.
So your code should be something like:
$("#container").kendoWindow({
width : 400,
resize: function (e) {
console.log("resize", e);
var containerH = $("#container").height();
var tableH = grid.element.height();
var bodyH = grid.table.height();
grid.table.height(containerH - tableH + bodyH - 1);
}
});
var grid = $("#grid").kendoGrid({
dataSource: {
data : createRandomData(100),
pageSize: 10,
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
},
editable : false,
pageable : true,
columns : [
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 90, title: "Last Name" },
{ field: "City", width: 100 }
]
}).data("kendoGrid");
And the modified JS Fiddle here: http://jsfiddle.net/OnaBai/dB5CF/2/
I'm working with a custom scrolling div jQuery plugin. I want the div to fill 100% of the width of its parent to change size depending on the browser window size.
The script takes a given width parameter, and uses it throughout the script. The customizable parameters of the script seem to only allow me to specify the width in pixels, as an integer:
$.fn.hoverscroll.params = {
vertical: false, // Display the list vertically or not
width: 1280, // Width of the list
height: 230, // Height of the list
arrows: true, // Display arrows to the left and top or the top and bottom
arrowsOpacity: 0.4, // Maximum opacity of the arrows if fixedArrows
fixedArrows: false, // Fix the displayed arrows to the side of the list
rtl: false, // Set display mode to "Right to Left"
debug: false // Display some debugging information in firebug console
};
I tried quoting the percentage, '100%', but that didn't work. Is there a way to use a percentage here?
If not, is there a way to use a script like the one below, which determines the width of the window, make the script output the width in pixels, and use that integer as the width parameter in the jQuery script?
<script type="text/javascript">
function alertSize() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
//window.alert( myWidth );
}
</script>
For reference, here is the full script of the plugin that I'm using:
http://rascarlito.free.fr/hoverscroll/js/hoverscroll/jquery.hoverscroll.js
If you want the width of the hoverscroll region to be some percentage of a container on ready, you can always use jQuery. Wrap your start-up routine in a ready() expression:
$(document).ready(function() {
var w = $(window).width();
var p = 0.95 /* Your percentage */
$.fn.hoverscroll.params = {
width: w * p, // Width of the list
...
};
// Start your hoverscroll like normal;
});
That ... is just there to indicate "the other stuff goes here." I didn't want to fill the answer up with repetitious code.
Although in normal practice, you would never modify the defaults in place, but pass them as arguments:
$(document).ready(function() {
var w = $(window).width();
var p = 0.95 /* Your percentage */
$('#mylist').hoverscroll({
width: w * p // Width of the list
});
});
Note that I'm only passing in the width; everything else uses the defaults. You only have to set the ones that differ from the defaults-- in this example, I've only set the width.
I have a site. I want to make 3 vertical divs with equal height. For this purposes I change the height of last block in each column/div.
For example, the naming of 3 columns are:
.leftCenter
.rightCenter
.right
Now I wrote a code which set the equal height for .leftCenter and .rightCenter:
var left = $('.leftCenter').height();
var center = $('.rightCenter').height();
var news = $('#newItemsList').height();
if (center < left)
$('.rightCenter').height(center + (left-center));
else if (center > left)
$('#newItemsList').height(news + (center-left));
news is the latest subblock in left column (there are 3 images in it). So, if central div is bigger than left div, I change the height of news to make them equal. This code works in Firefox, but doesn't work in Chrome. That's the first question. And the last is: how to make equal 3 divs (including right one).
I needed to make elements equal in height and width so I made the following function that allows you to define a height, or width, or really whatever at it. refType would be used if you sent a min-height and needed it to match the height of the tallest element.
elemsEqual = function (options) {
var defaults = {
'type' : 'height',
'refType' : '',
'elements' : [],
'maxLen' : 450
},
settings = $.extend({}, defaults, options),
max = 0;
$(settings.elements.join(",")).each(function () {
max = Math.max( max, parseInt( $(this).css(settings.type) ) );
if(settings.refType.length) max = Math.max( max, parseInt( $(this).css(settings.refType) ) );
});
max = ((max < settings.maxLen) ? max : settings.maxLen);
$(settings.elements.join(",")).css(settings.type, max + "px");
};
elemsEqual({elements : ['#selector1','#selector2', ... '#selectorN'], type : 'height'});
Well I have this so far:
//Get the height of the right column since it starts at a different Y position than the other two
var right=$('.right').outerHeight(1)-$('.left').children('header').outerHeight(1)-$('.left .innav').outerHeight(1);
//Get the max of the 3
var height_max=Math.max($('.leftCenter').outerHeight(1),$('.rightCenter').outerHeight(), right);
//Apply the max to all 3
$('.rightCenter').height(height_max-3); //-3 to accommodate for padding/margin
$('.right').height(height_max);
$('.leftCenter').height(height_max);
The only problem is that it does not make #newItemsList as tall as the parent, .leftCenter. It also assumes that the right div will be largest, so I don't know if it will still work if it isn't the biggest of the 3.