I am trying to use method readyCallback() in iFrameResizer, but it does not seem to work. When I add the callback to parent iframe object, it is never called:
iFrameResize({
log : true,
checkOrigin: false,
minHeight : 800,
maxHeight : 4000,
readyCallback: function(){
// (!) never called
console.log('ready parent callback .. ');
},
messageCallback: function(data){
// works OK
console.log('message callback .. ');
console.log(data);
},
initCallback: function(){
// works OK
window.scrollTo(0,0);
alert("OK initiated");
},
resizedCallback : function(info){
// works OK
console.log(info);
scrollTo(0, info.iframe.offsetTop);
},
heightCalculationMethod : 'taggedElement'
}, '#iframe123');
The iframeResizer.contentWindow.js inside iframe element loads and works OK.
Am I missing something? Thank you.
Turns out that method readyCallback was in wrong place. Here is working setup:
Parent page with iframe element:
iFrameResize({
log : true,
checkOrigin: false,
minHeight : 800,
maxHeight : 4000,
messageCallback: function(data){
console.log('message callback .. ');
console.log(data);
// scroll to top edge of iframe element
scrollTo(0, data.iframe.offsetTop);
},
initCallback: function(){
console.log("OK initiated");
window.scrollTo(0,0);
},
resizedCallback : function(info){
console.log(info);
scrollTo(0, info.iframe.offsetTop);
},
heightCalculationMethod : 'taggedElement'
}, '#iframe123');
Inside iframe element with loaded iframeResizer.contentWindow.js:
// solution 1:
window.iFrameResizer = {
readyCallback: function(){
// scroll parent to top edge of iframe element
window.parentIFrame.scrollToOffset(0,0);
}
}
// solution 2:
window.iFrameResizer = {
readyCallback: function(){
if('parentIFrame' in window){
parentIFrame.sendMessage('Loaded iframe ['+window.parentIFrame.getId()+'].');
}
}
}
// load content window at the end
<script src="/js/iframeResizer.contentWindow.js"></script>
Related
When I input a Calendar event, I set type like public and personal.
And, when I get it, I want personal event to be colored yellow.
I successfully input it and while coloring there is a problem and I get the following error message:
url : callCalendar is that Home Controller's method for get all Schedule List.
I do not know where to start.
Here is my code so far:
displayEventTime: true,
eventLimit : true,
selectable: true,
selectHelper: true,
events: function( start, end, timezone, callback ) {
alert("entering events function");
var event = new Array();
$.ajax({
url : 'callCalendar',
data : {
String : 'ss'
},
success : function(response){
for (var i = 0; i < response.length; i++) {
event.push({
title : response[i].title,
start : response[i].start_date,
})
if(response[i].type=='personal'){
alert("Type = personal");
color: 'yellow'
}
color: 'yellow'
}
color: 'yellow'
callback(event);
}
});
color: 'yellow'
},
Add 'type' attribute to your events and try to use eventRender.
Example:
$('#calendar').fullCalendar({
//some your code
eventRender: function(calEvent, htmlElem, view) {
switch(calEvent.type) {
case 'public':
htmlElem.addClass('public_event');
break;
case 'personal':
htmlElem.addClass('personal_event');
break;
}
},
//some your code
});
My toggle navigation menu is working on a desktop view but when I run this demo on mobile view it does'nt works.
Please find the url : http://dev.genuusdemo.com/msite/index1.html
Please find the code of this :
script :
<script type="text/javascript">
$(function() {
$('#gx-sidemenu').gxSideMenu({
mode: isMobile.any() ? 'tiny' : 'normal', // normal | tiny
interval: 300, // animations' interval
direction: 'left', // left | right
openOnHover: false, // true | false
clickTrigger: true, // true | false
followURLs: true, // true | false
trigger: ".gx-menu-open.list", // class or id of trigger element
startFrom: 60, // start pixel from corner on hover trigger
startClosed: true, // menu opens on document load
scrolling: true, // menu scrollable (iScroll plugin needed!)
urlBase: '/sidemenu/', // document base URL
backText: 'Prev | Back', // Back button text
onOpen: function() { }, // Open callback
onClose: function() { } // Close callback
});
$('pre.snippet').snippet("javascript", { style: 'ide-kdev' });
$('pre.snippet-html').snippet("html", { style: 'ide-kdev' });
});
</script>
I use GMAP3 plugin to render driving direction. And would like to add a clear button so it can be clear but I haven't been able to find the right syntax in GMAP3. Here is the my js code, modified from the sample in gmap3.net. I have markers plotted already and latlng are retreived from plotted markers instead of from clicks position on the map.
function removePath() {
$(mapID).gmap3({
action: 'clear',
name: 'directionRenderer'
// tag: 'path' // works too with tag instead of name
});
function updatePath() {
$(mapID).gmap3({
action: 'getRoute',
options: {
origin: m1.getPosition(),
destination: m2.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function (results) {
if (!results) return;
$(mapID).gmap3({
action: 'setDirections',
directions:results,
});
}
});
};
function updateDirection(mm) { // Directions between m1 and m2
var mmID = $(mm).prop('id');
...
if (mmID == 'clearDirection') {
...
removePath();
return;
};
...
if (m1 && m2) { updatePath(); };
};
function initmap() {
$(mapID).gmap3(
{
action: 'init',
options: defaultMapOptions
},
// add direction renderer to configure options (else, automatically created with default options)
{ action: 'addDirectionsRenderer',
preserveViewport: true,
markerOptions: { visible: false },
options: {draggable:true},
tag: 'path'
},
// add a direction panel
{ action: 'setDirectionsPanel',
id: 'directions'
}
);
};
A is in place in HTML documents as directions panel. It has a a wrapper which is hidden when the route is cleared by using jquery css property change. The wrapper div's display property is changed back to 'block' whenever value is assigned to either m1 or m2.
<body>
...
<div id="direction_container" class="shadowSE">
....
<div id="directions"></div>
....
</div>
</body>
Its absolutely working fine.
$map.gmap3({ action: 'clear', name: 'directionRenderer' });
*Instructions-
If you later draw the route then you must write below code otherwise directions not display.
$map.gmap3({ action: 'addDirectionsRenderer', preserveViewport: true,
markerOptions: { visible: false} },
{ action: 'setDirectionsPanel', id: 'directions' });
Thanks...
Use this:
$(mapID).gmap3({action:"clear", name:"directionRenderer"});
The chosen answer above didn't work for me. I'm unsure if it's version related, but the solution I'm using is more simple:
$(your-selector).gmap3({clear: {}});
Afterwards, you can draw a new route without reconnecting the directions rendered with the map.
I have found many references on how to create a 'loading' message or mask when loading data in to a grid in Ext JS 4 via a data store / proxy (I am using direct type).
So I had added this in my controller at one point (because I was NOT getting a loading message previously) :
init: function() {
var store = this.getEncountersStore();
store.on({
beforeload: function(store,operation,eopts) {
Ext.getBody().mask('Loading...');
},
load: function(store,records,success,operation,eopts) {
Ext.getBody().unmask();
}
});
}
That seems to work for me in my MVC application, however, next I added a task manager timer to automatically refresh the grid data every 10 seconds:
this.runningTask = Ext.TaskManager.start ({
run: this.loadEncounterData,
interval: 10000,
scope: this
});
loadEncounterData: function() {
var store = this.getEncountersStore();
store.load({
params: {
},
callback: function(r,options,success) {
if(success == true)
...
} //callback
}); //store.load
I noticed that there were now TWO 'loading' mask messages on the screen!
So, I removed my 'store.on' code block above from my controller init, and now I have only one message.
So where does the other message come from?
Is it part of a Grid?:
Ext.define('ESDB.view.encounter.List', {
extend: 'Ext.grid.Panel',
...
I found a page that seems to asking the same question, though I was not able to figure out how to get it to work, or how to do it according to ExtJS 4 / MVC.
loadMask is not a config in Grid panel.
You can add as a config in gridpanel
viewConfig : {
loadMask: false
}
The loadMask is part of the gridView.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.View-cfg-loadMask
GridPanel components all have a gridView component that defines various things to do with the table view in the panel.
To prevent a loadMask on a grid, you set config for loadMask to false, IE:
Ext.define('ESDB.view.encounter.List', {
extend: 'Ext.grid.Panel',
loadMask : false,
...
You could change your load function to just load the store:
loadEncounterData: function() {
var store = this.getEncountersStore();
store.load();
...
Then you could use the following approach to automatically handle the loadMask whenever the grid store loads.
Using Ext.util.DelayedTask is handy to prevent the loadMask from appearing if the load takes less than 500ms.
Ext.define('ESDB.view.encounter.List', {
extend: 'Ext.grid.Panel',
...
initComponent: function() {
var me = this;
me._mask = new Ext.LoadMask(me, {msg: 'Loading...'});
me._maskd = new Ext.util.DelayedTask(function() {
me._mask.show();
});
me.store = Ext.create('Ext.data.Store', {
...
listeners: {
beforeload: function() {
me._maskd.delay(500);
...
},
load: function() {
me._maskd.cancel();
me._mask.hide();
...
}
}
});
...
I'm trying to create TinyMCE Menu Button which should open multiple popup window manager. It works fine but the button image doesn't appear.
here is the code. Am I doing something wrong?
(function() {
tinymce.create('tinymce.plugins.shortcodes', {
init : function(ed, url) {
ed.addCommand('scTypography', function() {
ed.windowManager.open({
file : url + '/dialog.htm',
width : 800 + ed.getLang('example.delta_width', 0),
height : 500 + ed.getLang('example.delta_height', 0),
inline : 1
});
});
ed.addCommand('scColumns', function() {
ed.windowManager.open({
file : url + '/dialog.htm',
width : 800 + ed.getLang('example.delta_width', 0),
height : 500 + ed.getLang('example.delta_height', 0),
inline : 1
});
});
ed.addCommand('scButtons', function() {
ed.windowManager.open({
file : url + '/dialog.htm',
width : 800 + ed.getLang('example.delta_width', 0),
height : 500 + ed.getLang('example.delta_height', 0),
inline : 1
});
});
},
createControl : function(n, cm) {
switch (n) {
case 'shortcodes':
var c = cm.createMenuButton('shortcodes', {
title : 'My menu button',
image : '/btn.png'
});
c.onRenderMenu.add(function(c, m) {
var sub;
sub = m.addMenu({title : 'Some item 3'});
sub.add({title : 'Typography', onclick : function() {
tinyMCE.activeEditor.execCommand('scTypography');
}});
sub.add({title : 'Layout Columns', onclick : function() {
tinyMCE.activeEditor.execCommand('scColumns');
}});
sub.add({title : 'Buttons', onclick : function() {
tinyMCE.activeEditor.execCommand('scButtons');
}});
});
// Return the new menu button instance
return c;
}
return null;
},
});
tinymce.PluginManager.add('shortcodes', tinymce.plugins.shortcodes);
})();
I'm not dev, but trying to understand this part to use in Wordpress theme.
Any one can help please?
While the URL to the toolbar image is absolute, you can use the value of the url supplied in init() function that is the URL to the plugin location. For example
image : url + '/btn.png'
Additional to Bretts answer you may need to put the button explicitly into the button config part of the tinymce init.
Example:
I added my own ßplugins buttons to the tinymce UI using this code onInit in my own plugins:
// Register my_button
ed.addButton('my_button', {
title : 'Click me!',
cmd : 'my_command',
image : url + "my_image.png";
});
and here the relevant part of the tinymce init
theme_advanced_buttons1:"style,bold,italic,underline",
theme_advanced_buttons2: "cleanup,save,preview,my_button", // <-- here