I need to programmatically set the focus to an editor instance after initializing it.
The box gets focus and you can start typing but the external toolbar is not shown unless you click in the editor frame.
I tryed to change some css settings and the toolbar is shown but it disappear when clicking on editor frame.
var toolbar = $('#' + ed.id + '_external').hide().appendTo("#tiny_toolbar");
toolbar.show();
toolbar.css('top','50px');
toolbar.css('display','block');
$(".defaultSkin,.mceExternalToolbar").css("position","").css("z-index","1000");
Is there a way to simulate the editor click via js code so the toolbar would be displayed correctly?
Update:
No, I'm not wrong!
The tiny iframe appear on different top,left of my text container.
This code will explain better which is the problem.
<html>
<head>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.js"></script>
<script src="js/lib/tiny/tiny_mce.js"></script>
<script type="text/javascript">
function initTiny(){
tinyMCE.init({
language: false,
mode: "none",
theme: "advanced",
dialog_type: "modal",
theme_advanced_buttons1: ",bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "none",
theme_advanced_path: "none",
theme_advanced_toolbar_location: "external",
setup: function (ed) {
ed.onInit.add(function (ed) {
var visible = 1;
var tout = null;
var $toolbar = $('#' + ed.id + '_external');
$toolbar.css('top', '50px');
$toolbar.css('display', 'block');
$toolbar.hide();
$toolbar.show();
var show = function () {
tout && clearTimeout(tout);
tout = setTimeout(function () {
tout = null;
$toolbar.css({
top: "50px",
display: 'block'
});
visible = 1;
}, 250);
};
$(ed.getWin()).bind('click', function () {
if (ed.isHidden()) {
show();
}
});
})
}
});
}
$(document).ready(function(){
initTiny();
$('#content3').click(function(){
tinyMCE.execCommand("mceAddControl", false, 'content3');
});
$('html').click(function(){
tinyMCE.execCommand("mceRemoveControl", false, 'content3');
});
});
</script>
</head>
<body>
<div id="tiny_toolbar" class="defaultSkin" style="position:relative;"> toolbar </div>
<div id="content3" style="top:120px;left:180px;width:180px;height:200px;border:1px solid;position:absolute;">
<p>CONTENT 3!</p>
</div>
</body>
</html>
No, I'm not wrong!
The tiny iframe appear on different top,left of my text container.
This code will explain better which is the problem.
<html>
<head>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.js"></script>
<script src="js/lib/tiny/tiny_mce.js"></script>
<script type="text/javascript">
function initTiny(){
tinyMCE.init({
language: false,
mode: "none",
theme: "advanced",
dialog_type: "modal",
theme_advanced_buttons1: ",bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "none",
theme_advanced_path: "none",
theme_advanced_toolbar_location: "external",
setup: function (ed) {
ed.onInit.add(function (ed) {
var visible = 1;
var tout = null;
var $toolbar = $('#' + ed.id + '_external');
$toolbar.css('top', '50px');
$toolbar.css('display', 'block');
$toolbar.hide();
$toolbar.show();
var show = function () {
tout && clearTimeout(tout);
tout = setTimeout(function () {
tout = null;
$toolbar.css({
top: "50px",
display: 'block'
});
visible = 1;
}, 250);
};
$(ed.getWin()).bind('click', function () {
if (ed.isHidden()) {
show();
}
});
})
}
});
}
$(document).ready(function(){
initTiny();
$('#content3').click(function(){
tinyMCE.execCommand("mceAddControl", false, 'content3');
});
$('html').click(function(){
tinyMCE.execCommand("mceRemoveControl", false, 'content3');
});
});
</script>
</head>
<body>
<div id="tiny_toolbar" class="defaultSkin" style="position:relative;"> toolbar </div>
<div id="content3" style="top:120px;left:180px;width:180px;height:200px;border:1px solid;position:absolute;">
<p>CONTENT 3!</p>
</div>
</body>
</html>
I'm using TinyMCE 4 and I needed an external Toolbar with my app.
I initially only set the "fixed_toolbar_container" and the "inline" properties but my toolbar kept on disappearing when my editor text area was not in focus.
So, in the INIT I changed the following:
In the "INIT" I set "inline" to "true" and "fixed_toolbar_container" to the selector for my external toolbar div.
In the "SETUP" function I prevented the propagation of the "blur" event.
This seemed to work for me but I'm not entirely sure if preventing the default behavior on blur will have any adverse consequences. I'll update this post if I find something.
Hope this helps. :)
tinyMCE.init({
...
inline: true,
fixed_toolbar_container: "div#ToolBar",
// Set the mode & plugins
nowrap: false,
statusbar: true,
browser_spellcheck: true,
resize: true,
...
setup: function (editor) {
// Custom Blur Event to stop hiding the toolbar
editor.on('blur', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
});
}
})
In your tinymce init use
...
theme_advanced_toolbar_location: "external",
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
var $toolbar = $('#'+ed.id + '_external');
$toolbar.css('top','50px');
$toolbar.css('display','block');
$toolbar.hide();
$toolbar.show();
});
});
You should also use a timeout to call the following functions (i.e. show() onclick)
var visible = 1;
var tout = null;
var show = function() {
tout && clearTimeout(tout);
tout = setTimeout(function() {
tout = null;
$toolbar.css({ top : $window.scrollTop(), display : 'block' });
visible = 1;
}, 250);
};
var hide = function() {
if (!visible) { return; }
visible = 0;
$toolbar.hide();
};
$(ed.getWin()).bind('click', function() {
show();
});
Related
HTML
<head>
<!-- CALENDAR -->
<script src="https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.13/chance.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
<!-- APP -->
<script src="js/app.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
here is my app.js
var _cal
$(document).ready(function() {
var templates = {
popupEdit: function() {
return 'Edit Me';
},
popupDelete: function() {
return 'Delete Me';
}
}
_cal = new tui.Calendar('#calendar', {
defaultView: 'week',
taskView: false,
templates: templates,
useDetailPopup: true
});
//create calendar
var CalendarList = []
calendar = new CalendarInfo();
calendar.id = 1;
calendar.calendarId = String(1);
calendar.name = 'Subject';
calendar.color = 'ffffff';
calendar.bgColor = '#9e5fff';
CalendarList.push(calendar);
_cal.setCalendars(CalendarList)
//create schedules
_cal.createSchedules([{
id: '1',
calendarId: '1',
title: 'Termin1',
category: 'time',
dueDateClass: '',
start: '2021-04-06T17:30:00+01:00',
end: '2021-04-06T19:30:00+01:00',
isReadOnly: false,
location: 'here'
}]);
})
I expect that the caption of the edit-button in the detail popup which appears when I click the appointment is 'Edit Me' but it is still in the default caption 'edit'
What am I doing wrong?
Has anyone expierence with the toast-ui-calendar?
I found my fault:
_cal = new tui.Calendar('#calendar', {
defaultView: 'week',
taskView: false,
template**s**: templates,
useDetailPopup: true
});
correction:
_cal = new tui.Calendar('#calendar', {
defaultView: 'week',
taskView: false,
template: templates,
useDetailPopup: true
});
In the bingmaps documentation, you can add custom actions to the infobox. I would like to know if there's a similar way to program the default closeButton?
Ideally, I would like to be able to do something like this:
const infobox = new Microsoft.Maps.Infobox(selectedTipCoordinates, {
title: selectedTip.title,
description: selectedTip.description,
closeButton: () => console.log('hello')
});
Unfortunately close event handler could not be customized via InfoboxOptions object, so you could consider either to implement a custom HTML Infobox or override info window click handler. The following example demonstrates how to keep info window opened once close button is clicked and add a custom action:
Microsoft.Maps.Events.addHandler(infobox, 'click', handleClickInfoBox);
function handleClickInfoBox(e){
var isCloseAction = e.originalEvent.target.className == "infobox-close-img";
if(isCloseAction){
//keep info window open..
e.target.setOptions({visible: true});
//apply some custom actions..
console.log("Close button clicked");
}
}
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
center: new Microsoft.Maps.Location(47.60357, -122.32945)
});
var infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
title: "Title",
description: "Description",
actions: [
{
label: "Handler1",
eventHandler: function() {
console.log("Handler1");
}
},
{
label: "Handler2",
eventHandler: function() {
console.log("Handler2");
}
},
{
label: "Handler3",
eventHandler: function() {
console.log("Handler3");
}
}
]
});
infobox.setMap(map);
Microsoft.Maps.Events.addHandler(infobox, 'click', handleClickInfoBox);
}
function handleClickInfoBox(e){
var isCloseAction = e.originalEvent.target.className == "infobox-close-img";
if(isCloseAction){
//keep info window open..
e.target.setOptions({visible: true});
//apply some custom actions..
console.log("Close button clicked");
}
}
body{
margin:0;
padding:0;
overflow:hidden;
}
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=&callback=loadMapScenario' async defer></script>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
No, I don't think there's a way to wire the behavior of default close button differently. That said, you can approximate the desired outcome with a little more work: creating a custom infobox with the same style and then you'll have 100% control:
e.g. (notice the onClick handler on the close button div):
var center = map.getCenter();
var infoboxTemplate = '<div class="Infobox" style=""><a class="infobox-close" href="javascript:void(0)" onClick="function test(){ alert(\'test!\'); } test(); return false;" style=""><img class="infobox-close-img" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE0cHgiIHdpZHRoPSIxNHB4IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPjxwYXRoIGQ9Ik03LDBDMy4xMzQsMCwwLDMuMTM0LDAsN2MwLDMuODY3LDMuMTM0LDcsNyw3YzMuODY3LDAsNy0zLjEzMyw3LTdDMTQsMy4xMzQsMTAuODY3LDAsNywweiBNMTAuNSw5LjVsLTEsMUw3LDhsLTIuNSwyLjVsLTEtMUw2LDdMMy41LDQuNWwxLTFMNyw2bDIuNS0yLjVsMSwxTDgsN0wxMC41LDkuNXoiLz48L3N2Zz4=" alt="close infobox"></a><div class="infobox-body" style="max-width: 256px; max-height: 126px; width: 125px;"><div class="infobox-title" >{title}</div><div class="infobox-info" style=""><div>{description}</div></div><div class="infobox-actions" style="display: none;"><ul class="infobox-actions-list"><div></div></ul></div></div><div class="infobox-stalk" style="top: 73.8px; left: 55.5px;"></div></div>';
var infobox = new Microsoft.Maps.Infobox(center, {
htmlContent: infoboxTemplate.replace('{title}', 'myTitle').replace('{description}', 'myDescription'),
offset: new Microsoft.Maps.Point(-64, 16)
});
I'm implementing google map into my ionic app, and I have a script in my index.html, which, will only allow the map works in the index.html.
But I need my map in my templates file route.html instead, so I believe I should move the script in the index.html to the specific controller.js file, but things here are written in $scope style, can anyone tell me how could I wrote the style into $scope style?
And why actually things won't works in the route.html as the same code is used?
<div id="map"></div>
Here's my script in my index.html:
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</script>
And my controller in the controller.js
.controller('RouteCtrl', function($scope, $ionicLoading) {
$scope.mapCreated = function(map) {
$scope.map = map;
};
$scope.centerOnMe = function () {
console.log("Centering");
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function (pos) {
console.log('Got pos', pos);
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function (error) {
alert('Unable to get location: ' + error.message);
});
}
})
There 2 ways to solve your problem :
Change your script to angular method in controller or create a service , like:
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: "Here I am!"
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
Change it to jquery in controller, but it not recommend because it will break to purpose of angular usage in ionic:
var map = new google.maps.Map($("#map"), {
zoom: 4,
center: uluru
});
is it possible to add annotation in my video using Video.js?
Below is my work out
<link href="http://vjs.zencdn.net/4.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.4/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.webm" type='video/webm'>
</video>
<script>
var Plugin = videojs.getPlugin('plugin');
var ExamplePlugin = videojs.extend(Plugin, {
constructor: function(player, options) {
Plugin.call(this, player, options);
player.on('timeupdate', function(){
var Component = videojs.getComponent('Component');
var TitleBar = videojs.extend(Component, {
constructor: function(player, options) {
Component.apply(this, arguments);
if (options.text)
{
this.updateTextContent(options.text);
}
},
createEl: function() {
return videojs.createEl('div', {
className: 'vjs-title-bar'
});
},
updateTextContent: function(text) {
if (typeof text !== 'string') {
text = 'hello world';
}
videojs.emptyEl(this.el());
videojs.appendContent(this.el(), text);
}
});
videojs.registerComponent('TitleBar', TitleBar);
var player = videojs('my-video');
player.addChild('TitleBar', {text: 'hellow people!'});
});
}
});
videojs.registerPlugin('examplePlugin', ExamplePlugin);
videojs('#my-video', {}, function(){
this.examplePlugin();
});
</script
</html>
//copy and paste this code it will surely work.
I was using this code before head tag to set the size of the canvas on the tab:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize( {height: 1500} );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize( {height: 1500} );
}
</script>
then before the closing body tag
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '<<app id here>>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
This worked fine but lot of hassle getting it just right in different browsers. Found another lot of code on here which was as below:
<script type="text/javascript">
fb_root = document.createElement( 'div' );
fb_root.id = 'fb-root';
try
{
window.document.childNodes[0].appendChild( fb_root );
}
catch( error )
{
window.document.body.appendChild( fb_root );
}
window.fbAsyncInit = function() {
FB.init({
appId : '561492603881225', //your app ID
status : true, // check login status
cookie : true // enable cookies to allow the server to access the session
});
//FB.Canvas.setSize({ width: 520, height: 1400 });
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
var mySetSize = function() {
var height = getDocHeight();
FB.Canvas.setSize({ width: 520, height: height });
setTimeout( mySetSize, 200 );
};
setTimeout( mySetSize, 200 );
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style'),
rules = document.createTextNode('body { position: relative; max-width: 520px!important;width: 520px!important; overflow: hidden!important; margin: 0px!important; }');
style.type = 'text/css';
if(style.styleSheet)
style.styleSheet.cssText = rules.nodeValue;
else style.appendChild(rules);
head.appendChild(style);
</script>
Now this worked seemlessly on this first tab https://www.facebook.com/PaycoServices/app_547127248642465 however using it on another like this one https://www.facebook.com/PaycoServices/app_561492603881225 it leaves a white gap at the bottom, any idea why?