Develop Reference

Javascript stops working after page-redirection (ANGULAR)

I'm using angular 6 to create a testimonial slider.
It looks great, but the problem is... I'm using RouterLink in my header, so everything loads at once. When you open the page with testimonial javascript for the first time it works, but then when you go onto another page and re-direct back it does not work.
Has anyone encountered a similar issue?
Is there a way to modify this function so it loads on page-view rather than page-load?
Thanks
JS Code:
function mfnSliderTestimonials(){
var pager = function( el, i ){
var img = $( el.$slides[i] ).find('.single-photo-img').html();
return '<a>'+ img +'</a>';
};
$('.testimonials_slider_ul').each(function(){
var slider = $(this);
slider.slick({
cssEase : 'ease-out',
dots : true,
infinite : true,
touchThreshold : 10,
speed : 300,
adaptiveHeight : true,
appendDots : slider.siblings( '.slider_pager' ),
customPaging : pager,
autoplay : window.mfn_sliders.testimonials ? true : false,
autoplaySpeed : window.mfn_sliders.testimonials ? window.mfn_sliders.testimonials : 5000,
slidesToShow : 1,
slidesToScroll : 1
});
});
}
EDIT: WORKS
All working fine now. Even when re-routing. In thecomponent I've declared the javascript function in such way:
declare function YOURFUNCTION(): any;
#component......
ngOninit
YOURFUNTION()
and obviously import * as $ from 'jquery'; was also necessary!
Thanks

Create Custom Color Set TinyMCE

I have been able to create my own Font color picker for TinyMCE, but but the color palette is linked to the original color picker. What I am trying to do is make my custom color picker totally independent of the original one (so I can show both). Here is my current code, and this works, but the color palette is the same for both buttons:
tinymce.create('tinymce.plugins.ExamplePlugin', {
createControl: function(n, cm)
{
switch(n)
{
case "universityColors":
var o = {};
ed=tinyMCE.activeEditor;
o.scriptURL = ed.baseURI.getURI();
o['class'] = 'mce_forecolor';
o.title='University Font Colors';
o.scope=this;
o.image = '<?php echo $university->getDto()->getIcoFile();?>',
o.onclick = function (color) { ed.execCommand('Forecolor', false, color);/*this.cs.showMenu(); if (this.o.onClick) this.o.onClick(c);*/};
o.onselect = function (color) {
console.log('selected',color); /*this.color=this.o.color=c; if (this.o.onSelect) this.o.onSelect(c);*/
// execute the same command that the regular forecolor plugin uses (choosen theme needs to be advanced! in order to work)
ed.execCommand('ForeColor', false, color);
};
// limit the colors using own setting
if (v = ed.getParam('theme_advanced_text_colors')) o.colors = v;
var mcsb = cm.createColorSplitButton('universityColors', o);
// return the new ColorSplitButton instance
return mcsb;
}
return null;
}
});
tinymce.PluginManager.add('universityColorPicker', tinymce.plugins.ExamplePlugin);
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "tinyMCE",
theme : "advanced",
plugins : "emotions,spellchecker,advhr,insertdatetime,preview, -universityColorPicker",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2 : "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,code,preview,|,forecolor,backcolor, universityColors",
theme_advanced_buttons3 : "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_text_colors :"<?php echo implode(',', $university->getDto()->getColors());?>" // example
});

To apply custom fonts see this fiddle: http://fiddle.tinymce.com/jYcaab/2

This was actually very easy after reading through what was happening. All that needed to be done was alter this line:
if (v = ed.getParam('theme_advanced_text_colors')) o.colors = v;
to
if (v = ed.getParam('custom_colors')) o.colors = v;
then add add custom_colors definition in init method.

Custom Color Picker TinyMCE

I am using TinyMCE to for an WYSIWYG editor on my site, and I want to add a custom color picker to the editor in addition to the existing colorpicker using forecolor. I found this http://fiddle.tinymce.com/lwcaab/16 and used it to get the button to show up, but there are 2 problems. I need to filter the colors that show up in that button (only show a couple of colors), and when you click the color, it doesn't change the font color in the editor.
tinymce.create('tinymce.plugins.ExamplePlugin', {
createControl: function(n, cm)
{
switch(n)
{
case "universityColors":
var o = {};
ed=tinyMCE.activeEditor;
o.scriptURL = ed.baseURI.getURI();
o['class'] = 'mce_forecolor';
o.title='University Font Colors';
o.scope=this;
o.image = '../images/uor.ico',
o.onclick = function (color) { console.log('clicked',color);/*this.cs.showMenu(); if (this.o.onClick) this.o.onClick(c);*/};
o.onselect = function (color) {console.log('selected',color); /*this.color=this.o.color=c; if (this.o.onSelect) this.o.onSelect(c);*/};
var mcsb = cm.createColorSplitButton('universityColors', o);
// return the new ColorSplitButton instance
return mcsb;
}
return null;
}
});
tinymce.PluginManager.add('universityColorPicker', tinymce.plugins.ExamplePlugin);
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "tinyMCE",
theme : "advanced",
plugins : "emotions,spellchecker,advhr,insertdatetime,preview, -universityColorPicker",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2 : "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor, universityColors",
theme_advanced_buttons3 : "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
I have made a fiddle to work of of also at: http://fiddle.tinymce.com/jYcaab

I made that older fiddle :)
Here your modified fiddle that limits the colors: http://fiddle.tinymce.com/jYcaab/1
Applying the font to the content is another story.
Update: The font gets applied now: http://fiddle.tinymce.com/jYcaab/2

tinymce - adjust this js to affect only 1 textarea

Basically I use TinyMCE for my text areas for easier editing and someone constructed this JS for me to make a textarea only go to 255 characters.
The only problem is that it affects all textareas on a page its included on instead of a set one, I know no JS so I am wandering if one of you wizards could guide me to add a place I can set what textarea to affect?
<script type="text/javascript" src="/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
theme_advanced_resizing : true,
theme_advanced_path : false,
content_css : "css/bbcode.css",
entity_encoding : "raw",
add_unload_trigger : false,
remove_linebreaks : false,
inline_styles : false,
forced_root_block : '',
convert_fonts_to_spans : false,
theme_advanced_statusbar_location : "bottom",
setup: function(ed) {
ed.onKeyUp.add(function(ed, e) {
// What is the max amount of characters you want
var maxChars = 255;
var content = tinyMCE.activeEditor.getContent();
// Remove any BBCode tags from the count
var strip = content.replace(/\[\/?(?:b|i|u|url|quote|code|img|color|size)*?.*?\]/img, '');
// Set the text for what we want to display in the status bar
var text = strip.split(' ').length + " Words, " + strip.length + " Characters"
// Show the status bar message
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);
// Is there more Characters than we want
if (strip.length > maxChars)
{
// Show an alert (can comment out)
alert("Sorry too many characters " + strip);
// Get all characters up to the limit
cur = strip.substring(0,maxChars);
// Replace content with the max amount
tinyMCE.activeEditor.setContent(oldContent);
}
else
{
oldContent = content;
}
});
}
});

All you need to do is
//find the id of the currently active editor
var editor_name=tinyMCE.activeEditor.editorId;
then
//provide regex for list of editors to be matched
var editors_to_be_matched = /first_editor|third_editor/;
find
//if active editor matches against the list of editors
var matched = editor_name.match(editors_to_be_matched);
if
//active editor does not matches return
if(!matched) return;
else
//do character count stuff
your code here
So here is how it would look like in your case
ed.onKeyUp.add(function(ed, e) {
var editor_name =tinyMCE.activeEditor.editorId;
var editors_to_be_matched = /first_editor|third_editor/;
var matched = editor_name.match(editors_to_be_matched);
if(!matched) return;
alert("Do character count stuff here");
// your code here
// What is the max amount of characters you want
var maxChars = 255;
var content = tinyMCE.activeEditor.getContent();
........
..........
});
Here is a DEMO

to make tinymce work on only some textareas you should change mode to "exact" and specify html element IDs in element parameter like this:
tinyMCE.init({
mode : "exact",
elements : "elm1,elm2",
});
you can find more info about tinymce modes here: http://www.tinymce.com/wiki.php/Configuration:mode

Display Name here is the new code then can you check it over :), think i got it right.
<script type="text/javascript" src="/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
theme_advanced_resizing : true,
theme_advanced_path : false,
content_css : "css/bbcode.css",
entity_encoding : "raw",
add_unload_trigger : false,
remove_linebreaks : false,
inline_styles : false,
forced_root_block : '',
convert_fonts_to_spans : false,
theme_advanced_statusbar_location : "bottom",
setup: function(ed) {
ed.onKeyUp.add(function(ed, e) {
// What is the max amount of characters you want
var maxChars = 255;
var content = tinyMCE.activeEditor.getContent();
var editor_name = tinyMCE.activeEditor.editorId;
var editors_to_be_matched = /tagline/;
var matched = editor_name.match(editors_to_be_matched);
if(!matched) return;
// Remove any BBCode tags from the count
var strip = content.replace(/\[\/?(?:b|i|u|url|quote|code|img|color|size)*?.*?\]/img, '');
// Set the text for what we want to display in the status bar
var text = strip.split(' ').length + " Words, " + strip.length + " Characters"
// Show the status bar message
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);
// Is there more Characters than we want
if (strip.length > maxChars)
{
// Show an alert (can comment out)
alert("Sorry too many characters " + strip);
// Get all characters up to the limit
cur = strip.substring(0,maxChars);
// Replace content with the max amount
tinyMCE.activeEditor.setContent(oldContent);
}
else
{
oldContent = content;
}
});
}
});
</script>

Titanium Geolocation Not Working in Android Emulator

I get this error:
[ERROR][GeolocationModule( 278)] (KrollRuntimeThread) [633,2564] Unable to get current position, location is null
and I have followed other people's advice without any luck.
Could someone lead me in the right direction? I would be so grateful. Thank you!
var win1 = Titanium.UI.createWindow({
title : 'map_landing',
backgroundColor : '#fff'
});
var win2 = Titanium.UI.createWindow({
title : 'hails_window',
backgroundColor : '#fff'
});
var win3 = Titanium.UI.createWindow({
title : 'cabs_window',
backgroundColor : '#fff'
});
User = {
location : {}
};
var hail_button = Titanium.UI.createButton({
title : 'Hail Cab',
top : 10,
width : 200,
height : 50
});
var find_button = Titanium.UI.createButton({
title : 'Find People',
bottom : 10,
width : 200,
height : 50
});
var options = {
accessKeyId : '',
secretAccessKey : ''
}
Ti.Geolocation.purpose = "Receive user location";
Titanium.Geolocation.getCurrentPosition(function(e) {
if (e.error) {
alert('HFL cannot get your current location');
return;
}
User.location.longitude = e.coords.longitude;
User.location.latitude = e.coords.latitude;
User.location.accuracy = e.coords.accuracy;
User.location.speed = e.coords.speed;
User.location.timestamp = e.coords.timestamp;
var mapview = Titanium.Map.createView({
mapType : Titanium.Map.STANDARD_TYPE,
region : {
latitude : User.location.latitude,
longitude : User.location.longitude,
latitudeDelta : 0.01,
longitudeDelta : 0.01
},
animate : true,
regionFit : true,
userLocation : true
});
win1.add(mapview);
win1.add(hail_button);
win1.add(find_button);
hail_button.addEventListener('click', function(e) {
alert('hello');
$.ajax('http://hail.pagodabox.com/add_hail', {
type : 'POST',
lat : User.location.latitude,
lang : User.location.longitude,
success : function(response) {
alert(response)
}
})
});
find_button.addEventListener('click', function(e) {
});
win1.open();
});

It took me some time to track this down, but I think I've found the steps needed to "fix" the lack of a location in the Android emulator (from this answer):
First, open ddms (Dalvik Debug Monitor). On Windows, navigate to the
android-sdk\tools directory and run ddms.bat. The first line in the
top-left pane will read something like "emulator-####" such as
emulator-5560.
Open a command prompt window. Enter 'telnet localhost ####'
substituting the number you found above. This will open a telnet
window to your android emulator.
Enter the following command (substitute your own longitude & latitude,
in that order, if you'd like):
geo fix -82.411629 28.054553
(I'm pretty sure you can add elevation as a third number.) The GPS
icon will appear in the emulator's notification bar. Geolocation is
now available. At this point, I could get location data in my app and
in other apps, such as Maps.