we are using the Flowplayer (Documentation) in one of our webprojects.
I want to change (or hide) the canvas after the video has started. I can hook it to the clip-event "onStart", but I can't access the canvas object/plugin.
I already tried:
$f('playerid').getPlugin('canvas').hide()
$f('playerid').getCanvas().hide()
My player settings are:
var player_settings = {
key: '...',
logo: {
url: '',
fullscreenOnly: false,
displayTime: 0
},
clip: {
url: '...',
autoPlay: false,
scaling: 'orig'
},
canvas:{
background: 'url(...) center center no-repeat',
backgroundGradient: 'none'
}
};
But nothing seems to work. Any ideas?
getPlugin('canvas') is definitely a right way to get the canvas handler, and you can manipulate its appearance via call like:
getPlugin('canvas').css('', '');
In your case to hide the canvas, may be you can try getPlugin("canvas").css({backgroundImage: ""});.
See more ref in this post
Related
I've confirmed that Square's code now works with pages served as application/xhtml+xml and with the exact same code Chrome works though Waterfox (and Firefox) do not load the iframes for the form fields. I've verified this in the DOM (they're not hidden, the original placeholder elements are still there).
Chrome requests the f.js file, Gecko browsers do not.
The placeholder elements that the iframe elements are supposed to replace are still in the DOM.
There are no error messages in the developer consoles in Waterfox 56, Firefox 64, Chrome 71 or Opera 12.1.
I've disabled prototypes for testing.
The browsers yield the same results for local and live testing.
The var sqPaymentForm = new SqPaymentForm(...); object is different for Gecko browsers.
What Gecko has for sqPaymentForm:
_handleDomContentLoaded
clientController
env
errorLogger
options
What Gecko does not have for sqPaymentForm:
build
_handleDomContentLoaded
Ironically I have limited access to IE11. I won't have time to setup the Mac until later on Friday mid-afternoon. Here are a couple cropped screenshots:
Firefox 56
IE 11
Here is the sqPaymentForm object (with obvious basic obfuscation):
var sqPaymentForm = new SqPaymentForm(
{
applicationId: 'sandbox-abc',
locationId: 'CBASEE123',
applePay: {elementId: 'sq-apple-pay'},
callbacks:
{
methodsSupported: function (methods)
{
if (methods.applePay && methods.applePay === true) {var element = document.getElementById('pay-button-area'); element.style.display = 'block';}
},
cardNonceResponseReceived: function(errors, nonce, cardData)
{
if (errors)
{
var errorDiv = document.getElementById('errors');
errorDiv.innerHTML = '';
errors.forEach(function(error) {var p = document.createElement('p'); p.innerHTML = error.message; errorDiv.appendChild(p);});
}
else
{
id_('card-nonce-submit').setAttribute('disabled','true');
id_('card_brand').value = cardData.card_brand;
id_('cc_end').value = cardData.last_4;
id_('cc_month').value = cardData.exp_month;
id_('cc_year').value = cardData.exp_year;
id_('zip').value = cardData.billing_postal_code;
document.getElementById('card-nonce').value = nonce;
payment_submit();
}
},
unsupportedBrowserDetected: function() {console.log('Error: unsupported browser.');},
createPaymentRequest: function ()
{
return {currencyCode: 'USD', countryCode: 'US', requestShippingAddress: false, total: {amount: '1.00', label: 'JAB Creations', pending: false},lineItems: [{amount: '1.00', label: 'Subtotal', pending: false},{amount: '0.00', label: 'Tax', pending: false}]};
},
},
cardNumber: {elementId: 'sq-card-number', placeholder: '0000 0000 0000 0000'},
cvv: {elementId: 'sq-cvv', placeholder: 'CVV'},
env: {},
excludeCanvas: {},
expirationDate: {elementId: 'sq-expiration-date', placeholder: 'MM/YY'},
inputClass: 'sq-input',
inputStyles: [
// Because this object provides no value for mediaMaxWidth or mediaMinWidth, these styles apply for screens of all sizes, unless overridden by another/ input style below.
{
backgroundColor: 'transparent',
color: ($('input[type="text"]').length > 0) ? window.getComputedStyle($('input[type="text"]')[0]).getPropertyValue('color') : '#fff',
fontFamily: 'sans-serif',//localStorage.getItem('input_style_font-family')
fontSize: '18px',//localStorage.getItem('input_style_font-size'),
fontWeight: 'bold',//localStorage.getItem('input_style_font-weight')
lineHeight: '18px',//localStorage.getItem('input_style_line-height'),
padding: '0'
},
// These styles are applied to inputs ONLY when the screen width is 400px
// or smaller. Note that because it doesn't specify a value for padding,
// the padding value in the previous object is preserved.
{
mediaMaxWidth: '400px',
fontSize: '48px',
lineHeight: '18px'
}],
maxTouchPoints: {},
inputEventReceived: function(inputEvent)
{
switch (inputEvent.eventType)
{
case 'focusClassAdded':
// Handle as desired
console.log(document.getElementsByClassName('sq-input--focus')[0]);
break;
case 'focusClassRemoved':
// Handle as desired
console.log(document.getElementsByClassName('sq-input--focus')[0]);
break;
case 'errorClassAdded':
// Handle as desired
break;
case 'errorClassRemoved':
// Handle as desired
break;
case 'cardBrandChanged':
// Handle as desired
break;
case 'postalCodeChanged':
// Handle as desired
break;
}
},
postalCode: {elementId: 'sq-postal-code', placeholder: 'Postal Code'}
});
How do I get the other browsers to load the iframe form fields? This certainly seems like a bug and I'm happy to report back any information that would help with troubleshooting.
Update 1
Running for (i in SqPaymentForm) {console.log('SqPaymentForm.'+i);} reveals the SqPaymentForm object in a different light. The SqPaymentForm.isSupportedBrowser function returns f() (from the only (JavaScript) request from the Square server) however the other browsers return the following:
SqPaymentForm.isSupportedBrowser
()
length: 0
name: "bound "
<prototype>: function ()
I'm focusing my efforts on determining how browsers are "supported" by the convolutedly minimized code from Square.
Update 2
The SqPaymentForm.isSupportedBrowser() function returns true in Chrome and Waterfox. Going off of this documentation (https://docs.connect.squareup.com/payments/sqpaymentform/setup#step-4-render-sqpaymentform) I receive the following error:
paymentForm is not defined.
There is some ambiguity in the troubleshooting I did though after roughly an hour I decided to use setTimeout:
setTimeout(function()
{
sqPaymentForm.build();
sqPaymentForm.recalculateSize();
},2000);
...and it worked. So apparently either the Square developers specifically test with Chrome and/or Chrome will either wait until the method exists and execute it or it's load-related timing is somehow better.
So I would like to now ask: how do I adjust my code to not require having to rely on setTimeout?
My helper window is implemented like that:
updWindow = new BrowserWindow({
width: 400,
height: 200,
resizable: false,
show: false,
center: true,
maximizable: false,
minimizable: false,
title: 'Apdate Available'
});
updWindow.on('close', function () {
});
updWindow.loadURL(url.format({
pathname: path.join(__dirname, 'updateAvailable.html'),
protocol: 'file:',
slashes: true
}));
updWindow.setMenuBarVisibility(false);
When I click "x" button at window header the window will be closed and destroyed. So I will not be able to open it again using updWindow variable. Is there a way to keep window object for new opennings without reinitializations? I still want to use "x" button for this purpose.
My app is targeted to Mac OS.
You can use the function preventDefault on the event Electron will hand your handler over, i.e. like this:
updWindow.on("close", (evt) => {
evt.preventDefault(); // This will cancel the close
updWindow.hide();
});
This is mentioned in the Electron documentation, namely here.
Using this solution, you will later be able to un-hide the window by calling updWindow.show();.
New to Galleria - and trying to evaluate it for an angular system, ripping its image data from a google spreadsheet..
http://codepen.io/kylane/pen/amqWPw
function readytogo() {
window.alert('This is just a prototype');
Galleria.configure({
transition: 'fade',
imageCrop: true,
fullscreenDoubleTap: true,
responsive: true,
trueFullscreen: true,
autoplay: 10000,
lightbox: true,
swipe: 'auto',
showCounter: false,
showInfo: true
});
Galleria.run('#galleria');
$('#galleria').fadeIn('slow');
}
window.onload = readytogo;
Without the window.alert, the gallery won't render - and I'm not sure why.
Any advice would be greatly appreciated!
Turned out, I wasnt waiting for the google sheet JSON to load before rendering...
... my bad.
I'm having a problem loading my nestedlist data when this list is shown inside of a panel.
Here is my code:
var titleBar = Ext.create("Ext.TitleBar", {
id: 'mainNavigationBar',
xtype : 'titlebar',
layout: 'hbox',
docked: 'top',
title : 'cSenchaTitleBar',
items:[
{
xtype:"button",
text:"Menu",
align:"left",
listeners:{
tap: function(){
nestedListxx.showBy(this);
}
}
},
]
});
var nestedList =
Ext.create('Ext.NestedList', {
displayField: 'text',
title:"cSenchaMenu",
store: "oNavStore",
id: 'mainNestedList',
xtype : 'nestedlist',
width:250,
useTitleAsBackText: false,
});
var nestedListxx = Ext.create("Ext.Panel", {
width:260,
items:nestedList
});
The problem is the following:
Say that if I change
nestedListxx.showBy(this); to nestedList.showBy(this);
It works like a charm, only there are no sleek black borders around the nested list.
But if I change it back it does show the nestedlist with the nice borders but without any data.
I know for sure that I forgot to set some key configuration, only the question is: which ones
You probably need to set a layout to your Ext.Panel.
Try :
var nestedListxx = Ext.create("Ext.Panel", {
width:260,
layout:'fit',
items:nestedList
});
Hope this helps
I'm trying to get a slide animation on a button inside a container but I'm unable to do it.
By the way, fade and flip was working fine.
I want to do animation like shown below when all buttons are shown.
Here's the image of what I am trying to achieve:
EDIT :
I am running the below code inside initialize() event of the container.
Ext.Anim.run(this.getComponent('btnId'),'flip',{
out: true,
delay: 1000,
duration: 500,
});
Ext.Anim.run(Ext.getCmp('btnId'), 'slide', {
direction: 'left',
duration: 1000
})
But the important thing is to ensure you require Ext.Anim in your application. Put this in your main app.js
Ext.requires('Ext.Anim');
or
Ext.application({
name: 'myapp',
requires: [
'Ext.Anim'
]
});
Hi #user1452041 try this please,
Ext.Anim.run(Ext.getCmp('btnId'), 'slide', {
direction: 'left'
})
direction attribute depend you if you want to left or right
I hope this helps. :) Ciao