Develop Reference

Handsontable in Handsontable Dropdown Height Adjustment

How to allow fixed height in this dropdown menu? (Column Car)
I have been fiddling endlessly to fix the height issue. I want a fixed height dropdown menu max 300px. I have used AutoRowSize height feature and other height features within the handsontable site, but none seem to have worked.
I have run out of ideas. Any suggestions or alternatives I can try?
I am using Handsontable in Handsontable feature (Found Here).
Fiddle http://jsfiddle.net/72dgoLva/3/
columns: [
{
type: 'handsontable',
handsontable: {
colHeaders: ['Marque', 'Country', 'Parent company'],
autoColumnSize: true,
data: manufacturerData,
getValue: function() {
var selection = this.getSelectedLast();
// Get always manufacture name of clicked row
return this.getSourceDataAtRow(selection[0]).name;
},
}
},
{type: 'numeric'}
]

.handsontableEditor .ht_master {
height: 300px;
overflow-y: auto !important;
width: calc(100% + 2px);
}
.handsontableEditor .ht_clone_top {
transform: none !important;
}
... seems to do the job. Updated fiddle.
I had to use !important to override inline styles placed by HoT on elements, on the fly. To limit the chances of this affecting other instances, prefix selectors with a specific identifier for this instance.

Vertical scrollbar taking last column width

I am using free jqgrid 4.14. I am having a problem with the vertical scrollbar in the tree grid.
I have defined a height for the tree grid. Now when the grids loads and I try to expand it this happens.
But as soon as I am resizing the window the scrollbar width is not taken from last column width instead it has it own. See
So, I thought of making load vertical scrollbar at start
.ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll }
but then also it is taking width from the column.
I am loading grid with these settings -
datatype: "jsonstring",
datastr: grid_data,
colNames: scopes.grid_header_column_value[grid_id],
colModel: scopes.gridcolumns[grid_id],
height: height,
viewrecords: is_pager_enable,
multiSort: true,
ignoreCase: true,
grouping: is_group_enable,
headertitles:true,
sortorder: sort_order,
sortable: false,
pager: "#" + pager_id,
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "jsonstring",
ExpandColumn: 'name'
Also, I am applying these properties -
$("#" + grid_id).closest('.ui-jqgrid-bdiv').width($("#" + grid_id).closest('.ui-jqgrid-bdiv').width() + 1);
$(".ui-jqgrid-sortable").css('white-space', 'normal');
$(".ui-jqgrid-sortable").css('height', 'auto');
$(".ui-jqgrid tr.jqgrow td").css('white-space', 'normal');
$(".ui-jqgrid tr.jqgrow td").css('height', 'auto');
$("div.ui-jqgrid-sdiv").after($("div.ui-jqgrid-bdiv"));
I am also using jqGridAfterLoadComplete event so that on loading also it performs the same operation which it should perform in resizing from here
So, how can force the vertical scrollbar to take width from outside of grid.
Update: Added image after the solution
Here is the image which specifies exactly what I want.
Here the scrollbar is not needed but still, it is initialized as empty without taking column width
Problem while resizing:
I am using jquery event when the window is resized so to resize the jqgrid according to the screen but here the problem is if I resize the window to smaller screen and expand the tree grid, scrollbar comes.
The code is for resizing is like this -
$(window).bind('resize', function () {
resizeGrid.call($('#' + grid_id));
});
resizeGrid = function () {
var newWidth = $(this).closest(".ui-jqgrid").parent().width();
$(this).jqGrid("setGridWidth", newWidth, true);
};
Like this -
here the scrollbar have extra space and it is coming outside the given space.
Also, now if I resize window to full size and collapse all the rows the empty is there for the scrollbar.
It looks like this -

Try to add the callback treeGridAfterExpandRow with the following code:
treeGridAfterExpandRow: function () {
this.fixScrollOffsetAndhBoxPadding();
}
I'm not sure that I exactly understand, which behavior you need to have. Probably the usage of two callbacks treeGridAfterExpandRow and treeGridAfterCollapseRow
treeGridAfterExpandRow: normalizeWidth,
treeGridAfterCollapseRow: normalizeWidth
with normalizeWidth defined as
var normalizeWidth = function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
this.fixScrollOffsetAndhBoxPadding();
if (!p.autowidth && (p.widthOrg === undefined || p.widthOrg === "auto" || p.widthOrg === "100%")) {
$self.jqGrid("setGridWidth", p.tblwidth + p.scrollOffset, false);
}
};
will more close to your requirements. The above code extend the width of the TreeGrid to the width of the scroll bar if the vertical scroll bar will be visible.

Content inside fancy box need to be responsive

I would like to create a gallery that is inside a fancy box , so firstly I downloaded all the content of the gallery and appended to the html container.
<div id="popup" style="display:none;"><div class="galleria"></div></div>
The jquery part
$("#hidden_content").instagram({
clientId: blockInstaSettings.clientId
, hash: hash
, userId: blockInstaSettings.userId
, next_url: insta_next_url
, show: 10
, image_size: image_size
, onComplete: function (photos, data) {
var album_html = "";
$.each(photos, function( index, val ) {
album_html += "<img src='" + val.images.standard_resolution.url + "' data-title='' data-description='" + val.caption.text.replace("'","’") + "' longdesc='" + val.link + "'>";
});
$(".galleria").html(album_html);
$('#block_instagram').on('click', function () {
openPop();
return false;
});
}
});
Notice that I set up the listener in the button that show the fancybox
function openPop(){
$.fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href' : '#popup'
});
Galleria.run('.galleria', {
transition: 'fade',
popupLinks: true,
show: no,
extend: function(options) {
Galleria.get(0).$('info-link').click();
}
});
}
Attempted to call galleria.run when fancybox's afterShow event; but it is still the same.
Also for CSS, it need to be :
.galleria{
width:700px;
height:500px;
}
Otherwise ,it can not generate the gallery
How to fix that?
Reference
My site:
http://internal001.zizsoft.com/be_pure/
(When you scroll to bottom, there is a slider showing instagram photos, click on the photo and you will see the gallery)
The plugin used:
http://galleria.io/
http://fancyapps.com/fancybox/

As others mentioned in the commants all those plugins you are using are responsive already. When i visit your site if i resize the window after opening the fancybox its not resized as defined as "responsive". I thought this is what you are worrying about. You can invoke this by resize galleria on window resize event. Please refer this resize script for galleria to achieve. Thanks
Update: (Essential code blocks from the referred link)
to re-initialize the galleria while window resize.
First, set up the resize function:
function ResizeGallery() {
gWidth = $(window).width();
gHeight = $(window).height();
gWidth = gWidth - ((gWidth > 200) ? 100 : 0);
gHeight = gHeight - ((gHeight > 100) ? 50 : 0);
$("#gallerycontainer").width(gWidth);
$("#gallery").width(gWidth);
$("#gallery").height(gHeight);
// Reload theme
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.js', { show: curIdx });
}
Then bind it to the window resize event:
var TO = false;
$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
});
This will essentially re-initialize by reloading the default theme. In this example, I am using the second parameter to specify which image to show- otherwise it will display the first image. Be aware that this may cause another instance of Galleria. I believe this to be a bug, and posted on their forums. You can remove the older instances as follows:
var gcount = Galleria.get().length;
if (gcount > 1) {
Galleria.get().splice(0, gcount - 1);
}
Run it after the loadTheme method. Use settimeout to delay it, because loadTheme takes some time to complete. I use 200ms. Ugly, but I need some of the features in Galleria. Hope this helps.

every thing is responsive and works good. Elaborate your problem .
if you want your popup thumbnails appear in middle of your popup use the following code
.galleria-thumbnails {
text-align: center;
width: 100% !important;
}
.galleria-image {
display: inline-block;
float: none !important;
}

I found that using the javascript to handle that worked best for me you could have your script calculate height and then do something like this where you initialized fancybox
fitToView : true,
autoSize : true,
width : 100%,
height : 'auto',
you can play with fitToView and autoSize till you get the desired effect much like pinterest

you can do this with a simple css trick .
in the responsive media screen you have to set the css as
.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img {
background-size: 100% auto !important;
}

How to determine where the current visible vertical location inside a jquery dialog is?

I have a case where I am using a jquery ui dialog and I have any html table in the dialog where the dialog is fixed height:
$("#modalDialogContainer").dialog({
resizable: false,
height: 700,
autoOpen: false,
width: 1050,
modal: true,
I call an AJAX query from a button click and I want to use jquery UI blockUI plugin to show a "loading" message. Something like this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
The issue I have is that the content in the dialog is longer than the height of the dialog
and I given the dialog is FIXED height so that causes the dialog to have a vertical scroll bar.
Having the scroll bar is fine (that's actually what I want) but the knock on effect is that
because of that depending if the user has scrolled down or not, the blockUI message is not centered (or even visible on the screen) vertically.
Question: Is there anyway I can detect what is visible areas inside a dialog that has a vertical scroll bar to vertically align the block message properly?
Above as you can see its hard coded to be 200px from the top so it works great if the user hasn't scrolled down but you can't see the message if the user has scrolled down the whole way
In short, if i am at the top of the scroll, then i would have this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
if i am at the bottom of the scroll, then i would want this:
$("#myTableInsideDialog").block({
css: {
top: '',
bottom: "200px",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});

I wouldn't alternate between top AND bottom properties:
For a window sized 1000px, top:800 == bottom:200
The important question, is how you can find out your scroll distance from the top. For that lets use a function:
function calcTopLocal() {
var s = $('#modalDialogContainer').scrollTop() + 'px';
return s;
}
Now, to apply it to your block:
$("#myTableInsideDialog").block({
css: {
top: calcTopLocal()
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
This can be refactored many ways. The significant detail is using scrollTop() and applying styling.
response to MKaama:
My proposed answer has no loops, no timers, and no suggestions of repeated action. There is no
Repeatedly calling a js function just to keep the position fixed is an overkill, a waste of CPU

If you want to add an loading message when the ajax is requesting the data, you can append a <div> on the dialog containing the message you want to display. Then you can apply a relative position to the dialog and an absolute position to the <div> and with margin:auto the div remains in the center of dialog always, even if you scroll the dialog.
jsFiddle demo
$("#modalDialogContainer").dialog({
resizable: true,
height: 300,
autoOpen: true,
width: 300,
modal: true,
buttons: {
'call ajax': function(){
// insert the loading div to the dialog
$(this).parent().append("<div class='loading' />");
$.ajax({
type: 'json',
url: 'jsonRequest.php',
complete: function(){
// remove the loading div
$('.loading').remove();
},
success: function(){
//do what you want
}
});
}
}
});
the CSS file should be something like this
#modalDialogContainer{
position: relative;
}
#myTableInsideDialog{
height: 1000px;
width: 100%;
}
.loading{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
...
}

there is a useful plugin that can tell if an element is visile on screen or not ( scrolled to ) , you may simply use it , the function returns true for visible areas on screen :
Here is a quick demo:
http://opensource.teamdf.com/visible/examples/demo-basic.html
Here is the source page :
http://www.teamdf.com/web/194/jquery-element-onscreen-visibility
usage as simple as:
$('#element').visible()

Use
$('#modalDialogContainer').scrollTop()
to find the amount of user's scroll.
You can then show your message with
{ top: $('#modalDialogContainer').scrollTop()+'px' }
And it will always be visible for them, and appear at the top of what they are looking at :)

Why bother with the height of the content at all?
I mean, isn't an easier solution to the problem possible by putting a "BlockUI" on the JQuery Dialog. Since you have a fixed height there, your block UI would most certainly be fixed as well. There is no way the scroll can now affect your message.
A crude example is hosted here in fiddle. It gives you both experiences so you can see how it behaves.
For example, you can put the block UI on the following class.
var container = ".ui-dialog";
$(container).block({
message: '<h1>Processing</h1>'
});
$.ajax({
url: "/echo/json/",
data: {
json: {},
delay: 5
}
}).done(function() {
console.log("Done with ajax");
$(container).unblock();
});

Width and height issue with fancybox

When I've added this code no setting on width and height works
jQuery(document).ready(function() {
$('a.iframe').fancybox();
});
What are the options to get around it?

Take a look at the documentation here: http://fancybox.net/api
You're using inline content, so make sure that you're setting the autoDimensions option to false along with the width and height settings.
UPDATE: I tested the following solution successfully:
$('a.fbtag').fancybox({
autoDimensions: false,
height: 300,
width: 400
});
This assumes that the class name of the link you're opening is 'fbtag'.

Fancy Box width and Height always varies with the media type.
If we provide 5 * 5 pixel image - Fancy Box will show up with dimensions of Image Dimensions.
To counter the effect of media dimensions and define the default width & height for Fancy Box
Try this:
$.fancybox.open(collection.toJSON(), {
afterShow :function(){},
maxHeight : 600,
minWidth : 500
});
FancyBox width will be minimum - 500 pixels.
FancyBox Height will be proportional to the FancyBox data with maximum Height of 600 pixels.

For example
$.fancybox({
'content':"This will be the content of the fancybox",
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});

$(document).ready(function() {
$(".fancy-ajax").fancybox({
type: 'ajax',
autoDimensions: false,
'autoSize': false,
'height': 'auto'
});
});
The above codes worked for me. However, I was designing in Twitter Bootstrap.

you can do this two way
With iframe
$(document).ready(function () {
$(".fancybox").fancybox({
width:600,
height:400,
type: 'iframe',
href : 'url_here'
});
})
Without iframe
$(document).ready(function () {
$(".fancybox").fancybox({
width:600,
height:400,
autoDimensions: false,
});
})