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.
Related
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();.
I am using the joomla built in function to create a tinyMCE editor on a page within a jQuery dialog box. However, the dialog box appears and the tinyMCE editor is like its in read only mode.
This is the php built in function that echos out the editor:
<div id="PhoneCallCard" title="Phone Call Card" style="display:none;">
<?php
$editor = JFactory::getEditor();
echo $editor->display('commentz', $this->content, '600', '100', '60', '20', false);
?>
</div>
This is my jQuery implementation of opening that dialog box:
jQuery("#PhoneCallCard").dialog({
height:500,
width:800,
modal: true,
close: function(ev, ui){
jQuery('#tablepanelfightclubrequests .trSelected').removeClass('trSelected');
},
open:function({ //Everything I tried to activate the tinyMCE
//tinyMCE.activeEditor.getBody().setAttribute('contenteditable', false);
//tinyMCE.execCommand('mceRemoveControl',false,'commentz');
//tinyMCE.execCommand('mceAddControl',false,'commentz');
//tinyMCE.execCommand('mceFocus', false, 'commentz');
}});
I also found similar problem here Why can't I type in TinyMCE in my jQueryUI modal dialog? and here TinyMCE and JQuery dialog: TinyMCE read only when modal:true in the Dialog but both can't solve my problem
I got same problem and fix by load dialog when page load.
For example:
jQuery(function() {
jQuery( "#dialog_desc" ).dialog({
modal: true,
width: 600,
height:500,
autoOpen: false,
});
}
when you want to open dialog:
jQuery( "#dialog_desc" ).dialog( "open" );
Hope this help!
i was get same error like that too...
my first code
$( "#f_edit_gallery" ).dialog({
autoOpen: false,
resizable: true,
show: "clip",
height:450,
width:850,
modal: true
});
after i delete option
show: "clip",
be like this
$( "#f_edit_gallery" ).dialog({
autoOpen: false,
resizable: true,
height:450,
width:850,
modal: true
});
tinyMCE run well after that
You should load the editor after the dialog is loaded. What you can do is:
Load the editor as you are doing now using $editor->display method
Before opening the jquery ui dialog, detach the editor
Display UI dialog and load editor again with slight time delay so that editor loads after dialog.
here is a sample code
use this code after the dialog open is triggered
if ((tinyMCE != undefined) && (tinyMCE.activeEditor != undefined)){
tinyMCE.activeEditor.remove();
setTimeout(function(){
tinyMCE.execCommand('mceAddControl', false, 'commentz');
},500);
}
You need settimeout when active TinyMCE, because, it need time waiting when dialog init.
for example :
$("#PositionShowDialog").dialog({
modal: true,
open: setTimeout('Change_TextareaToTinyMCE_OnPopup("#elementId");', 1000),
width: width,
......
If tinymce is loaded but you cannot type in it (like disabled) . You need set more time to setTimeout .
Sorry, my english skin not good
A small correction from the answer of Nagarjun makes the script work for me :
if ((tinyMCE != undefined) && (tinyMCE.activeEditor != undefined)){
tinyMCE.activeEditor.remove();
$("#dialogId").dialog('open');
setTimeout(function(){
tinyMCE.execCommand('mceAddControl', false, 'commentz');
},500);
}
ie : I need to remove tinyMCE before open the dialog and launch the timeout
I have a slide show with bet 20 - 40 images, but there is a significant delay before each image loads even though I've set them all to preload (I recently increased it to preload: '40'). What can I do to improve this?
The settings for the slideshow are:
$(function () {
$('.fancybox').fancybox({
autoResize: true,
autoCenter: true,
scrolling: 'no',
preload: '40',
helpers: {
overlay: {
closeClick: false
},
},
});
I'm using it in conjunction with this function:
function manipulateDOM1() {
changeObjectsTrendy();
NextImageTrendy();
}
function changeObjectsTrendy() {
document.getElementById("questionTrendy").innerHTML = textTrendy[textTrendyNumber];
}
function NextImageTrendy() {
if (imgTrendyNumber < NumberOfTrendyImages)
{
imgTrendyNumber++;
document.images["trendy"].src = trendy[imgTrendyNumber];
document.images["trendyControl"].src = trendyControl[imgTrendyNumber];
textTrendyNumber++;
document.getElementById["questionTrendy"].innerHTML = textTrendy[textTrendyNumber];
}
Problem solved :-D
I just saw that there had been a recent update to the js for the fancybox slideshow, and thankfully that's made a huge difference (there's now only a marginal delay) :-)
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
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