We Keep Coding

Use javascript variable in Zoho chat widget?

I've worked on this for days and made little progress because I suck at javascript.
Goal: Create a wp plugin that allows choosing an alternate chat department for each web page, or use the default chat dept for the domain. I can do all of this with php in my plugin, BUT... all of my Wordpress websites are using Zoho SalesIQ plugin. I cannot disable this plugin, so instead I must edit the chat widget javascript that's in the plugin settings, so NO PHP. Yuck.
Much research lead me to a potential solution - I've inserted custom meta tags into the head that will hold the correct data to insert into the javascript. But that's where I get lost - how do I replace these two values in the zoho javascript with the content from the custom meta tags?
<meta name='my_zoho_widgetcode' content='123456789' />
<meta name='my_zoho_deptcode' content='deptA' />
<script id="zsiqchat">
var $zoho=$zoho || {};
$zoho.salesiq = $zoho.salesiq || {
widgetcode: "GET-WIDGETCODE-FROM-META-TAG",
values:{},
ready:function(){}
};
var d=document;
s=d.createElement("script");
s.type="text/javascript";
s.id="zsiqscript";
s.defer=true;
s.src="https://salesiq.zoho.com/widget?plugin_source=wordpress";
t=d.getElementsByTagName("script")[0];
t.parentNode.insertBefore(s,t);
$zoho.salesiq.ready=function() {
$zoho.salesiq.chat.department("GET-DEPT-FROM-META-TAG");
};
</script>
I managed to get it to work this way, but it's going to require a lot of IF conditions (shortened here), so I'm looking for a cleaner solution.
<script type="text/javascript" id="zsiqchat">
var zoho_meta_widgetcode = document.querySelector('meta[name="zoho_widgetcode"]').content;
var zoho_meta_deptcode = document.querySelector('meta[name="zoho_deptcode"]').content;
var $zoho=$zoho || {};
if (zoho_meta_widgetcode === '123456789') {
$zoho.salesiq = $zoho.salesiq || {
widgetcode:"123456789",
values:{},ready:function(){}
};
}
if (zoho_meta_widgetcode === '') {
$zoho.salesiq = $zoho.salesiq || {
widgetcode:"000000000",
values:{},ready:function(){}
};
}
var d=document;
s=d.createElement("script");
s.type="text/javascript";
s.id="zsiqscript";
s.defer=true;
s.src="https://salesiq.zoho.com/widget?plugin_source=wordpress";
t=d.getElementsByTagName("script")[0];
t.parentNode.insertBefore(s,t);
$zoho.salesiq.ready=function()
{
if (zoho_meta_deptcode === 'deptA') {
$zoho.salesiq.chat.department(["deptA"]);
}
if (zoho_meta_deptcode === '') {
$zoho.salesiq.chat.department(["Default"]);
}
};
</script>
UPDATE: I've learned that the SalesIQ WP plugin will allow me to make some changes to the code but not other changes. This caused me so much grief I ended up disabling that plugin and inserting my own code via my plugin.

Timbre.js keyboard input doesn't seem to work

I'm trying to learn the timbre.js javascript library. On the project page there is a functional preview of using the keyboard input to change oscillator pitch but once the code is copied to a new HTML document on my computer it no longer works. Simpler code snippets from the project page work fine once copied over though.
The project page is here: http://mohayonao.github.io/timbre.js/PragmaSynth.html
This is the code:
<script src="timbre.js"></script>
<script>
var VCO = T("saw", {freq:880, mul:0.2}).play();
var keydict = T("ndict.key");
var midicps = T("midicps");
T("keyboard").on("keydown", function(e) {
var midi = keydict.at(e.keyCode);
if (midi) {
VCO.freq.value = midicps.at(midi);
}
}).start();
</script>

It seems for T('keyboard') and T('ndict.key') you need to include an extra script called keyboard.js which can be found here. http://mohayonao.github.io/timbre.js/src/extras/keyboard.js
So your code will look something like this..
<script src="timbre.js"></script>
<script src="keyboard.js"></script>
<script>
var VCO = T("saw", {freq:880, mul:0.2}).play();
var keydict = T("ndict.key");
var midicps = T("midicps");
T("keyboard").on("keydown", function(e) {
var midi = keydict.at(e.keyCode);
if (midi) {
VCO.freq.value = midicps.at(midi);
}
}).start();
</script>

Appending value to textbox from javascript not working in Android default browser

I am trying to implement phone no. masking for Mobile website. And I could not use jquery mask plugin as it was not working properly in devices. Below implementation is working fine in Android Chrome Mobile Browser. But in case of Android default browser, when I try to delete all numbers using backspace key, last some(2/3) numbers/digits are not clearing. I guess this.value += "-"; is not updating some textbox property.
Phone No. Format is (ex. ###-###-####)
HTML
<input id="phoneNo" type="tel" maxlength="12" placeholder="Phone"/>
JavaScript
var phoneNo = document.getElementById("phoneNo");
phoneNo.addEventListener("textInput",function(){
if(this.value.toString().length==3 || this.value.toString().length==7) {
this.value += "-";
}
});

Have a look at the jQuery on() method as not all browsers support addEventListener which I am guessing is what the problem is.
http://api.jquery.com/on/

Mr. Darshan please have a look at http://jsfiddle.net/2dJAN/51/
In my app also i am using these kind feature. This example
Will allow the user to type only integers in field
This will automatically add the "-" between numbers like 123-456-7890 format
You can delete all the numbers inside the field.
$("#fax_field").on("keyup", function(event) {
var limitField = $(this).val().trim().length;
var limit = "12"
this.value = this.value.replace(/[^0-9_\-\.]/g, '');
if (event.keyCode != 8) {
if (limitField == 3) {
var fax_value = $(this).val().trim().concat('-');
$("#fax_field").val(fax_value);
} else if (limitField == 7) {
var fax_value = $(this).val().trim().concat('-');
$("#fax_field").val(fax_value);
}
}
if (limitField > limit) {
$("#fax_field").val($(this).val().trim().substring(0, limit));
}
});
Please try this. Let me know your comments.

Is there a javascript gesture library that works with the Samsung galaxy tab?

i have been experimenting with javascript gesture libraries. They all work great with the iPad mini, however, when I try them on my Samsung Galaxy Tab (GT-P7510, Android 4.04), the results are at best intermittent.
The best results I get are in portrait mode. In landscape mode, virtually nothing works.
I have tried, amongst others, the following libraries, all of which I found from this post: http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries
hammer.js
quo.js
touchy
doubletap
jgestures
touchswipe
Touchswipe worked best, but all the others just didn't really play ball.
The Hammer page has a demo, which works fine on the ipad but not the android:
http://eightmedia.github.com/hammer.js/
So, does anybody know of any way I can get swipe gestures to play nice on my galaxy?
I have viewed the quirksmode page that a previous stackoverflow question pointed to, but that was out of date and no longer maintained, from what I could see. Also, it didn't actually mention any libraries.

I had good luck with this one:
https://github.com/HotStudio/touchy
It has long-press, pinch, rotate, and swipe gestures, and the code is fairly easy to customize.
Note that the combinations of gestures need to be handled-- for example, a swipe will almost always trigger a long touch as well, so you have to set flags or otherwise handle that.

Here is a CodePen gesture compare tool. http://jsfiddle.net/icoxfog417/uQBvP/
We abandon Hammer.JS after extensive work and moved to Quo which we are finding ok. Things may have changed and be different now.
document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0" />' );
$(function(){
//initialization
$(".detector").bind("click touchstart",function(e){
$(".detector").removeClass("selected");
$(this).addClass("selected");
unbindLibrary();
bindLibrary($(this).prop("id"));
});
//bind library to gesture pad
bindLibrary = function(id){
var $pad = $("#gesture-pad");
var events = [];
var eventStr = "";
$("#" + id + "List li").each(function(){
events.push($(this).text());
})
//make target event list from each library's gestureList
eventStr = events.join(" ");
switch(id){
case "hammer":
hammer = Hammer($pad.get(0), {
prevent_default: true
})
.on(eventStr, logEvent);
break;
case "quojs":
for(var i = 0;i<events.length;i++){
$$("#gesture-pad").on(events[i], logEvent);
}
$$("#gesture-pad").on("touchstart",function(e){
e.preventDefault();
});
break;
case "touchSwipe":
var options = {};
var touchSwipeHandler = function(name){
if(name.indexOf("pinch") < 0){
return function(event, distance, duration, fingerCount){
var e = {}; e["type"] = name; logEvent(e);
};
}else{
return function(e, direction, distance, d, f, pinchZoom){
var e = {}; e["type"] = name; logEvent(e);
};
}
};
for(var i = 0;i<events.length;i++){
options[events[i]] = new touchSwipeHandler(events[i]);
}
$pad.swipe(options);
break;
case "touchy" :
var handler = function(name){
return function(event, phase, $target, data){
var e = {}; e["type"] = name; logEvent(e);
}
}
for(var i = 0;i<events.length;i++){
$pad.bind(events[i],new handler(events[i]));
}
break;
}
}
//unbind library from gesture pad
unbindLibrary = function(){
var element = $("#gesture-pad").clone();
$("#gesture-pad").replaceWith(element);
$(".gesturelist .selected").removeClass("selected");
}
//log detected gesture
logEvent = function(e){
$("#detected").text(e.type);
var selected = $(".detector.selected").prop("id");
$("#" + selected + "List li").each(function(){
if($(this).text() == e.type){
$(this).addClass("selected");
`enter code here` };
})
return false;
}
$(".detector").first().addClass("selected");
bindLibrary($(".detector.selected").prop("id"));
})

I know this is an old question, but I tried several libraries and wasn't happy with any of them, so rolled my own. It's MIT licensed and available at
https://github.com/aerik/GestureListener.js
with a test / demo page at
http://aerik.github.io/GestureListener/example.htm
I use it routinely on my Galaxy S4 phone, a couple of Ipads, and several Windows 8 touchscreen devices. We are using it for production software at work.
Bug reports (with examples) welcome.

Onmouseover sound in Firefox

I'm using the following script for onmouseover sound effects on menu buttons on a site.
<script LANGUAGE="JavaScript"><!--
var aySound = new Array();
aySound[0] = "s.mp3";
document.write('<BGSOUND ID="auIEContainer">')
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;
function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//-->
</script>
This works fine in IE but not Firefox.
Does anybody know if there is way to have the same onmouseover sound effect in both IE and Firefox without using flash?
Thanks

The only way for sound on your website is to use either flash or whatever Facebook uses for incoming IM, but that too requires Apple Quicktime to play.

Does anybody know if there is way to have the same onmouseover sound effect in both IE and Firefox without using Flash?
Well, you could use a JavaScript library which normalizes cross-browser onmouseover behaviors. Or, if you really don’t want to — it should be possible in plain ol’ JavaScript, with a lot of hacks to support all different browsers. Your choice.
As posted in gist 243946, here’s a jQuery snippet to do exactly what you want:
var $sound = $('<div id="sound" />').appendTo('body');
$('#special-links-that-play-annoying-sounds-when-hovered a').hover(function() {
$sound.html('<embed src="foo.mp3" hidden="true" autostart="true" loop="false">');
}, function() {
// We could empty the innerHTML of $sound here, but that would only slow things down.
});
Of course, this could be written in plain old JavaScript (without jQuery) as well.