We Keep Coding

Fancybox defaults issue with customized zoom

I'm setting up a custom zoom button and want to implement it. For some reason my defaults aren't applying to the popup.
I've tried including the out of the box structure, but to no avail.
jQuery(function($) {
$(document).ready(function() {
// Create template for zoom button
$.fancybox.defaults.tpl.zoom = '<button class="fancybox-button fancybox-zoom"><div class="zoom"><span class="zoom-inner"></span></div></button>';
// Choose what buttons to display by default
$.fancybox.defaults.buttons = [
'fullScreen',
'thumbs',
'zoom',
'close'
];
$( '.fancybox' ).fancybox({
onInit : function( instance ) {
// Make zoom icon clickable
instance.$refs.toolbar.find('.fancybox-zoom').on('click', function() {
if ( instance.isScaledDown() ) {
instance.scaleToActual();
} else {
instance.scaleToFit();
}
});
}
});
});});
Expected results is an understanding of how to implement the new zoom as well as other buttons.

The first step would be to learn to debug the code. Hit F12 to open developer tools and check Console tab. You will see this JS error message:
Uncaught TypeError: Cannot set property 'zoom' of undefined
And the reason is that you have used tpl instead of btnTpl property, so, replace that and it will work fine - https://codepen.io/anon/pen/OYaxeb?editors=1010
btw, you could also use $.extend() to tweak defaults:
$.extend(true, $.fancybox.defaults, {
btnTpl : {
// Create template for zoom button
zoom : '<button class="fancybox-button fancybox-zoom"><div class="zoom"><span class="zoom-inner"></span></div></button>'
},
// Choose what buttons to display by default
buttons : [
'fullScreen',
'thumbs',
'zoom',
'close'
]
});

edit Java Script to deviate a certain key and assign different values

I am trying to customize show apps icon..
tried to edit the java script
var ShowAppsIcon = new Lang.Class({
Name: 'ShowAppsIcon',
Extends: DashItemContainer,
_init() {
this.parent();
this.toggleButton = new St.Button({ style_class: 'show-apps',
track_hover: true,
can_focus: true,
toggle_mode: true });
this._iconActor = null;
this.icon = new IconGrid.BaseIcon(_("Show Applications"),
{ setSizeManually: true,
showLabel: false,
createIcon: this._createIcon.bind(this) });
this.toggleButton.add_actor(this.icon.actor);
this.toggleButton._delegate = this;
this.setChild(this.toggleButton);
this.setDragApp(null);
},
_createIcon(size) {
this._iconActor = new St.Icon({ icon_name: 'view-app-grid-symbolic',
icon_size: size,
style_class: 'show-apps-icon',
track_hover: true });
return this._iconActor;
},
this script is working as a single script for the favorite apps icons and show apps icon.
I am Using Ubuntu 18.04.
I am trying to customize the "show-apps" Icon.
Here is the Java Script file. https://superuser.com/questions/1431374/ubuntu-18-04-customize-show-apps-icon
Please have a look on below imgaes with Show-Apps button at bottom right with yellow and green color.
Question: Is it possible to alter the attached Java Script file, so that I can customize the Width of the Show-Apps Icon size keeping Show-Apps Icon Height Unchanged from the script so that when I increase the Dock Icon Size from System Settings..I will have constant height but variable width only for show apps Icon based on entire dock height.

how show info_dialog set postion center in jqgrid

iam jqgrid ver 4.15 iam have a problem ..i want add inline record .
filed name is required
{ name: "Name", width: 200, editable: true ,
editrules: {required: true}
}
I want when show position center info_dialog jqGrid popup modal .
iam use help this links and other links but don't work
how to center jqGrid popup modal window?
plase see this demo https://jsfiddle.net/dnfk8hmr/178/
iam want error modal in aling center
enter image description here

You write about adding inline record. Inline editing means editing fields inside of jqGrid. Modal windows will be used in case of form editing. What editing mode you really need to use?
As a workaround I can suggest you to combine form editing with inline editing. You can use form editing for Add operation and inline editing for editing existing lines. The corresponding code could looks like
$("#grid").jqGrid({
...
navOptions: {
edit: false,
del: false,
search: false,
refresh: false
},
inlineNavOptions: {
add: false,
edit: true
},
formEditing: {
beforeShowForm: function ($form) {
var $dlgDiv = $form.closest(".ui-jqdialog"),
dlgWidth = $dlgDiv.width(),
dlgHeight = $dlgDiv.height(),
dlgStyle = $dlgDiv[0].style,
$gridDiv = $(this).closest(".ui-jqgrid"),
gridWidth = $gridDiv.width(),
gridHeight = $gridDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgStyle.top = Math.round((gridHeight - dlgHeight) / 2) + "px";
dlgStyle.left = Math.round((gridWidth - dlgWidth) / 2) + "px";
}
}
}).jqGrid("filterToolbar")
.jqGrid("navGrid")
.jqGrid("inlineNav");
see https://jsfiddle.net/dnfk8hmr/196/
UPDATED: If you want to position the dialog in the middle of window instead of the middle of grid and if you include jQuery UI JS file additionally to CSS then the code could be the following
formEditing: {
afterShowForm: function ($form) {
$form.closest(".ui-jqdialog").position({
my: "center",
at: "center",
of: window
});
}
}
see https://jsfiddle.net/dnfk8hmr/202/

kiosk app full screen

I have built a kiosk app for Chrome with app builder, but even if the key of doing a kiosk app is that it will be displayed at full screen, I don´t manage to get rid of the top bar (I have removed the homepage button etc. but can´t display it at total full screen). I`d like to know if there´s any commando for this in html or javascript and in which file it should be added.
In the backgroung.js file I´ve added the line "state: 'fullscreen' but it does not work (I've also added the permission for fullscreen in the manifest file):
var runApp = function() {
if (chrome.power) {
chrome.power.requestKeepAwake('display');
}
console.log(config);
chrome.app.window.create(
config ?
'exported_app_view.html' :
'designer_view.html',
{
id: 'KioskDesignerWindow',
width: 1100,
height: 720,
minWidth: 800,
minHeight: 600,
state: 'fullscreen'
},
function(win) {
if (!this.X) { return; }
var window = win.contentWindow;
window.onload = function() {
this.$addWindow(window);
var Y = this.X.subWindow(window, 'Kiosk Designer Window');
this.DOM.init(Y);
}.bind(this);
win.onClosed.addListener(function() {
this.$removeWindow(window);
}.bind(this));
}.bind(this));
}.bind(this);

Yes, you can do it with JavaScript. In background.js, your 3rd parameter to chrome.app.window.create is that callback function that has the win argument - add this line:
win.fullscreen();
https://developer.chrome.com/apps/app_window#type-AppWindow
If you hit escape while your app is running you may get the title bar back, but next time it runs it will go fullscreen again.

Applying style for YouTube Popup Player's popup Window

I had used Youtube Popup player for video player in my webapplication, iam trying to change the styles of popup window..but iam not able to do it..i had found cssClass property for applying styles.. here is the link for youtube popup player..http://lab.abhinayrathore.com/jquery_youtube/
How can i resolve it..

You can follow Arunkumar answer if you want to change the defaults of the plugin, so that you don't have to set the options everytime you want to initialize the plugin.
Or, you can set specific properties to each element with the plugin assigned, like this:
$(function () {
var options = {
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};
$("a.youtube").YouTubePopup(options);
});
DEMO
Or, instead of creating a variable options, you could just do something like this:
$(function () {
$("a.youtube").YouTubePopup({
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};);
});
Hope I could make it more understandable to you!

customize Popup using script
like
$(function () {
$.fn.YouTubePopup.defaults.fullscreen = 0;
$.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
$.fn.YouTubePopup.defaults.width='500';
$.fn.YouTubePopup.defaults.height='300';
$.fn.YouTubePopup.defaults.overlayOpacity='0.5';
});
You can able to change popup defaults above way.
Hope it helps:);