Develop Reference

How to autoFit the first column in a Kendo TreeList ONLY if columnwidth < maxInt?

I have a Kendo TreeList and want to autoFit the first column onDatabound and onExpand. But if the column is going to be brighter than maxInt, it should not fit (and stay the same width).
So I want something like
var width = /*treelist.columns[0].width*/;
var max = /*some int*/;
if(width < max){
treelist.autoFitColumn(0);
}
But I didn't find a simple getWidth() method
Furthermore, it would be nice if there is way to set the width manually (in order to set the max width onDatabound).

This will get the width of the first column:
dataBound:function(e){
let column = $('td').first()
let columnWidth = column[0].clientWidth

ExtJS auto-resize form

I'm using Extjs5 and I have a form where I wish it to be auto resize according to it's container.
Currently, I have:
container->items->layout:vbox->items->layout:{type:column,columns:2}->items->my forms(consist of comboboxes and textfields)
when I resize to a small width, I wish it to be one column. Currently it will remain 2 columns and the space will be too small to fit 2 column design. Is there a way to resize it to 1 column?

If you want to achieve this with a column layout, you can listen for the resize event and adjust the column percentages in the handler function. The handler function could look like:
formResize = function (item, width, height, oldWidth, oldHeight, eOpts) {
if (!item.narrow) return;
if (oldWidth === undefined) oldWidth = 9999999;
if (oldHeight === undefined) oldHeight = 9999999;
item.suspendLayouts();
if (width <= item.narrow && oldWidth > item.narrow) {
item.items.each(function (item, i) {
if (!item.originalColumnWidth) item.originalColumnWidth = item.columnWidth;
item.columnWidth = 1;
});
}
if (width > item.narrow && oldWidth <= item.narrow) {
item.items.each(function (item, i) {
item.columnWidth = item.originalColumnWidth;
});
}
item.resumeLayouts(true);
};
This requires a property called narrow to be defined on the panel that is being adjusted. You could set narrow=700 to use a single column layout when the width is less than 700 and keep the original layout otherwise. The originalColumnWidth is saved on the first execution so it can be restored if the form is resized to be wide enough for multiple columns.
See fiddle here with an example form.
(A similar result can be achieved using the responsive plugin. See fiddle).

Bootstrap responsive iframe with auto height calculation

I need to embed link in iFrame contents of the iframe are responsive and i want iframe to auto adjust to the height of iFrame so that whole iframe page is visible.
http://quran.ksu.edu.sa/m.php
Fiddle http://jsfiddle.net/ww09rtbb/3/
I am not sure how to do it so that all content of iframe are visible.
Not sure if there is any build in css property to do it or i have to use jquery for it
UPDATED:
I have somehow managed to do it with jquery
http://jsfiddle.net/ww09rtbb/5/
I am calculating and multiplying width by 1.8
var ifrmw = $('.content-wrapper' ).width();
var iframeh= ifrmw * 1.8;
//alert(iframeh);
$('.iframecls').css('min-height',iframeh);
This can further be improved to to get exact height of iframe

I ran into a similar issue, and I had to write a function that checks for the height of the iframe every 200 milliseconds using setInterval():
function adjustIframeHeight(iframe, minHeight, fix){
var height = 0, $frame = $(iframe);
if(typeof fix=='undefined') fix = 0;
setInterval(function(){
if( typeof $frame.contents()!=null && typeof $frame.contents() !='undefined' && $frame.contents() !=null && $frame.attr('src')!='') {
curHeight = $frame.contents().find('body').height();
$frame.css('height', height + fix); // you might need to add some extra values like +20px.
} else {
$frame.css('height', minHeight); // minimum height for the iframe.
}
},200);
}
Then call it like this:
$(function(){
adjustIframeHeight('#iframeID', 200, 0);
});

How I can get an Image height and divide it by 2 using Jquery

Hi I need to set height of an image to half using j query, So that on click it expands to auto height, How is this possinble please guide.
Currently I used a class with property height: 202px and on click I change that class with another one containing height: auto property, But this does not work fine on responsive views.
So I need to divide the height:auto property by 2, How can i do this with j query, Please guide me with example
Here is my css
.how-we-do .expand-image {
height: auto
}
.how-we-do .expand-image2 {
height:202px ;
}
Here is my jquery code
$('.expand-image').each(function () {
$(this).removeClass('expand-image');
$(this).addClass('expand-image2');
});

You can use .height() to half the height of an on-screen image. .height() takes a function, the second parameter of which will be the current height of the element.
Return this value halved and you have what you need:
$('img').height(function(_,v){ return v/2; });
JSFiddle

Quickfix:
$('img').height() / 2

You can try this.
var cheight = $('.parendiv').innerHeight();
$('img').css({
'height' : cheight + 20
});

JQuery/JQueryUI hortizontal divider

recently for a website I am working on I wanted to create a horizontal divider capable of resizing two elements on a page using jquery.
Basically:
Content
___Divider_____
Content
When: the divider is dragged, it should resize the "Content" elements either side of it to the users desired size.
Here is what i have so far.
<div id="WorkRequests"></div>
<div id="Divider" style="height:10px; padding:5px; cursor:n-resize;"><hr /></div>
<div id="WorkRequest_Ajax"></div>
And the script:
var totalHeight = $("#Divider").parent().height();
function ResizePage(divPosition) {
var validDrag = true;
// Math
var minPercent = totalHeight * 0.25;
var minBuffer = totalHeight * 0.05;
var topHeight = divPosition.top - $("#content").position().top;
var bottomHeight = (totalHeight - divPosition.top);
// Check Drag
if (topHeight < minPercent) {
validDrag = false;
$("#WorkRequests").height(minPercent + minBuffer);
}
if (bottomHeight < minPercent) {
validDrag = false;
$("#WorkRequest_Ajax").height(minPercent + minBuffer);
}
// Set Heights
if (validDrag) {
$("#WorkRequests").height(topHeight);
$("#WorkRequest_Ajax").height(bottomHeight);
}
return validDrag;
}
$("#Divider").draggable({ axis: "y", drag: function (event, ui) { return ResizePage($(this).position()); } });
However when I drag the divider it simply jumps around and locks at either extremity, I have tried many different calculations etc, but I am afraid I just simply do not understand the factors in resizing both elements.
So does anyone know a jquery plugin that will do this for me, or how i can fix my attempt?
Thanks,
Alex.

You may also checkout the UI.Layout jQuery plugin. Here's a demo.

You should just use the jquery resizable interaction : http://jqueryui.com/demos/resizable/
It's easy enough to restrict the dragging areas so you can only resize horizontally (but I think what you actually need is a vertically resizable area)