Develop Reference

Browser shows < and > instead of <>

I'm creating a very simple HTML page using the Typewriter JavaScript plugin.
The page essentially should type out the code of an elementary Java program in which each declared variable is one of my contact details.
The problem is that if I write <span class="standard-highlight">List<String> list = Arrays</span>, the browser doesn't display List<String> list = but instead displays List<String> list =.
How can I fix this?
Here is a snippet from the output in the browser (Chrome)
JavaScript below:
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 10,
tempTypeSpeed = 0;
var type = function() {
if (writingTag === true) {
tag += HTML[cursorPosition];
}
if (HTML[cursorPosition] === "<") {
tempTypeSpeed = 0;
if (tagOpen) {
tagOpen = false;
writingTag = true;
} else {
tag = "";
tagOpen = true;
writingTag = true;
tag += HTML[cursorPosition];
}
}
if (!writingTag && tagOpen) {
tag.innerHTML += HTML[cursorPosition];
}
if (!writingTag && !tagOpen) {
if (HTML[cursorPosition] === " ") {
tempTypeSpeed = 0;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 30;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 30;
writingTag = false;
if (tagOpen) {
var newSpan = document.createElement("span");
t.appendChild(newSpan);
newSpan.innerHTML = tag;
tag = newSpan.firstChild;
}
}
cursorPosition += 1;
if (cursorPosition < HTML.length - 1) {
setTimeout(type, tempTypeSpeed);
}
};
return {
type: type
};
}
var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();

The below code works fine for me.
<span class="standard-highight" id="app"></span>
<script>
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true
});
typewriter.typeString('<span>List<String> list = Arrays</span>').start();
</script>
Place the string passing to the typeString() function within any html tag and only then the HTML symbols will be rendered by the function.

How to detect joy-con input/motion controls in HTML5 JavaScript

I am trying to create an HTML5 JavaScript game that uses Nintendo Switch Joy-Cons and motion controls. The problem is, I don't know how to detect motion controls from Joy-Cons when they are connected to my PC.
I've managed to achieve button inputs with Xbox controllers, PS4, and Joy Con using Gamepad API, but is it possible to do so with Joy-Con motion controls?
Here is the code for Gamepad API if you want to see it(Again, I'm aiming for Joy-Con motion controls):
var haveEvents = 'ongamepadconnected' in window;
var controllers = {};
function connecthandler(e) {
addgamepad(e.gamepad);
}
function addgamepad(gamepad) {
controllers[gamepad.index] = gamepad;
var d = document.createElement("div");
d.setAttribute("id", "controller" + gamepad.index);
var t = document.createElement("h1");
t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
d.appendChild(t);
var b = document.createElement("div");
b.className = "buttons";
for (var i = 0; i < gamepad.buttons.length; i++) {
var e = document.createElement("span");
e.className = "button";
//e.id = "b" + i;
e.innerHTML = i;
b.appendChild(e);
}
d.appendChild(b);
var a = document.createElement("div");
a.className = "axes";
for (var i = 0; i < gamepad.axes.length; i++) {
var p = document.createElement("progress");
p.className = "axis";
//p.id = "a" + i;
p.setAttribute("max", "2");
p.setAttribute("value", "1");
p.innerHTML = i;
a.appendChild(p);
}
d.appendChild(a);
var start = document.getElementById("start");
if (start) {
start.style.display = "none";
}
document.body.appendChild(d);
requestAnimationFrame(updateStatus);
}
function disconnecthandler(e) {
removegamepad(e.gamepad);
}
function removegamepad(gamepad) {
var d = document.getElementById("controller" + gamepad.index);
document.body.removeChild(d);
delete controllers[gamepad.index];
}
function updateStatus() {
if (!haveEvents) {
scangamepads();
}
var i = 0;
var j;
for (j in controllers) {
var controller = controllers[j];
var d = document.getElementById("controller" + j);
var buttons = d.getElementsByClassName("button");
for (i = 0; i < controller.buttons.length; i++) {
var b = buttons[i];
var val = controller.buttons[i];
var pressed = val == 1.0;
if (typeof(val) == "object") {
pressed = val.pressed;
val = val.value;
}
var pct = Math.round(val * 100) + "%";
b.style.backgroundSize = pct + " " + pct;
if (pressed) {
b.className = "button pressed";
//Pressed down code here
} else {
b.className = "button";
//Release button code here
}
}
var axes = d.getElementsByClassName("axis");
for (i = 0; i < controller.axes.length; i++) {
var a = axes[i];
a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
a.setAttribute("value", controller.axes[i] + 1);
}
}
requestAnimationFrame(updateStatus);
}
function scangamepads() {
var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
for (var i = 0; i < gamepads.length; i++) {
if (gamepads[i]) {
if (gamepads[i].index in controllers) {
controllers[gamepads[i].index] = gamepads[i];
} else {
addgamepad(gamepads[i]);
}
}
}
}
window.addEventListener("gamepadconnected", connecthandler);
window.addEventListener("gamepaddisconnected", disconnecthandler);
if (!haveEvents) {
setInterval(scangamepads, 500);
}
Using this link for reference

Wei Gao explained this in a React Knowledgeable meetup last week.
You can learn how she did it through her presentation or her slides.
You can visit the talk page for more information.

How to EXCLUDE MasterPage items when bulk exporting all text Frames

When I'm exporting all text frames from a file, the script sees the textframes in the masterpage and messes up the calculation and gives an error at the end because those frames are locked and can't be exported.
var myDoc = app.activeDocument;
var myFolder = myDoc.filePath;
var myImage = myDoc.textFrames;
var JPEGFolder = new Folder(myFolder+"/"+app.activeDocument.name+"_"+"JPEG");
if (!JPEGFolder.exists)
JPEGFolder.create();
var PromFolder = new Folder(myFolder+"/"+app.activeDocument.name+"_"+"Promethean");
if (!PromFolder.exists)
PromFolder.create();
var ToplamSoru = 0 ;
for (var i=0; myImage.length>i; i++)
{
app.select(myImage[i]);
ToplamSoru = ToplamSoru +1;
}
var Cevapli = (ToplamSoru/2-4);
alert(Cevapli);
app.jpegExportPreferences.jpegQuality = JPEGOptionsQuality.maximum;
app.jpegExportPreferences.exportResolution = 150;
for (var p=0; p < myDoc.pages.length; p++)
{
for (var i=0; myImage.length>i; i++)
{
if ( i <= Cevapli -1){
if( i < 9)
{
app.select(myImage[i]);
var SoruNo = myImage[i].contents.substring(1,2);
app.selection[0].exportFile(ExportFormat.JPG, File(JPEGFolder+"/"+SoruNo+".JPEG"), false);
}
else
{
app.select(myImage[i]);
var SoruNo = myImage[i].contents.substring(1,3);
app.selection[0].exportFile(ExportFormat.JPG, File(JPEGFolder+"/"+SoruNo+".JPEG"), false);
}
}
else{
//alert(Cevapli);
if( i < 9 + Cevapli+1)
{
app.select(myImage[i]);
var SoruNo = myImage[i].contents.substring(1,2);
app.selection[0].exportFile(ExportFormat.JPG, File(PromFolder+"/"+SoruNo+".JPEG"), false);
}
else
{
app.select(myImage[i]);
var SoruNo = myImage[i].contents.substring(1,3);
app.selection[0].exportFile(ExportFormat.JPG, File(PromFolder+"/"+SoruNo+".JPEG"), false);
}
}
}
}
alert ("Done")
Basically, when i run the code, everything is OK and exported as wanted, but when there are more than the fixed number of text frames in the masterpage, it will be screwed up once again.
var Cevapli = (ToplamSoru/2-4);
Is where i decrease the value of the variable because there are 2 master pages with 4 different locked text frames.
How can i actually make the code exlude the items in the masterpages altogether?
The working code below:
var myDoc = app.activeDocument;
var myFolder = myDoc.filePath;
var TotalQuestions = 0 ;
var JPEGFolder = new Folder(myFolder+"/"+app.activeDocument.name+"_"+"JPEG");
var PromFolder = new Folder(myFolder+"/"+app.activeDocument.name+"_"+"Promethean");
var TotalPages = 0;
var Extension = prompt("Başına ne koyalım?","fen-");
if (!JPEGFolder.exists)
JPEGFolder.create();
if (!PromFolder.exists)
PromFolder.create();
for (i=0; i< app.documents[0].pages.length; i++)
{
TotalPages = TotalPages+1;
for (ii=0; ii< app.documents[0].pages[i].textFrames.length; ii++)
{
app.select(app.documents[0].pages[i].textFrames[ii]);
TotalQuestions = TotalQuestions +1;
}
}
//alert(ToplamSoru);
var Cevapli = TotalPages/2;
//alert(Cevapli);
app.jpegExportPreferences.jpegQuality = JPEGOptionsQuality.maximum;
app.jpegExportPreferences.exportResolution = 72;
var result = confirm ("Devam?", false,"EU Thingie");
if(result ==true){
for (i=0; i < app.documents[0].pages.length; i++){
// CEVAPLI //
if(i < Cevapli){
//alert(i+" "+ii+" IF");
for (ii=0; ii < app.documents[0].pages[i].textFrames.length; ii++){
var QID = app.documents[0].pages[i].textFrames[ii].contents.substring(1,3);
if( QID < 10){
app.select(app.documents[0].pages[i].textFrames[ii]);
var Less = app.documents[0].pages[i].textFrames[ii].contents.substring(1,2);
app.selection[0].exportFile(ExportFormat.JPG, File(PromFolder+"/"+Extension+Less+".JPEG"), false);
}
else{
app.select(app.documents[0].pages[i].textFrames[ii]);
var More = app.documents[0].pages[i].textFrames[ii].contents.substring(1,3);
app.selection[0].exportFile(ExportFormat.JPG, File(PromFolder+"/"+Extension+More+".JPEG"), false)
}
}
}
// CEVAPSIZ //
else{
//alert(i+" "+ii+" ELSE");
for (ii=0; ii < app.documents[0].pages[i].textFrames.length; ii++){
var QID = app.documents[0].pages[i].textFrames[ii].contents.substring(1,3);
if( QID < 10){
app.select(app.documents[0].pages[i].textFrames[ii]);
var Less = app.documents[0].pages[i].textFrames[ii].contents.substring(1,2);
app.selection[0].exportFile(ExportFormat.JPG, File(JPEGFolder+"/"+Extension+Less+".JPEG"), false);
}
else{
app.select(app.documents[0].pages[i].textFrames[ii]);
var More = app.documents[0].pages[i].textFrames[ii].contents.substring(1,3);
app.selection[0].exportFile(ExportFormat.JPG, File(JPEGFolder+"/"+Extension+More+".JPEG"), false)
}
}
}
}
}
//alert ("Done")

This will loop through the pages and every textFrame on each page. The text frames from Master Pages will be ignored.
for (i=0; i< app.documents[0].pages.length; i++){
for (ii=0; ii< app.documents[0].pages[i].textFrames.length; ii++){
$.writeln(app.documents[0].pages[i].textFrames[ii].contents);
}
}

avoid sorting in the JSP pages

var sortitems = 1;
function move(fbox, tbox, all)
{
for ( var i = 0; i < fbox.options.length; i++)
{
if (!all && fbox.options[i].selected && fbox.options[i].value != "")
{
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
else
{
if (all && fbox.options[i].value != "")
{
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
}
BumpUp(fbox);
if (sortitems)
SortD(tbox);
checkSelectAll();
}
This move function is getting called after clicking on the button, then it will call the sort method where sorting is happening by alphabetically. So we dont need to sort we need to populate the data as it is from the left side box to right side box and vice versa, but sorting is happening. Please help out be here.
function SortD(box)
{
var temp_opts = new Array();
var temp = new Object();
for ( var i = 0; i < box.options.length; i++)
{
temp_opts[i] = box.options[i];
}
for ( var x = 0; x < temp_opts.length - 1; x++)
{
for ( var y = (x + 1); y < temp_opts.length; y++)
{
if (temp_opts[x].value > temp_opts[y].value)
{
temp = temp_opts[x].text;
temp_opts[x].text = temp_opts[y].text;
temp_opts[y].text = temp;
temp = temp_opts[x].value;
temp_opts[x].value = temp_opts[y].value;
temp_opts[y].value = temp;
}
}
}
for ( var i = 0; i < box.options.length; i++)
{
box.options[i].value = temp_opts[i].value;
box.options[i].text = temp_opts[i].text;
}
}
Depends on the bumpup box function. The elements are moving from one box to another. It will replace the element with empty space and move to top and do for all the elements. Please help out me here
Thanks in advance
function BumpUp(box)
{
for ( var i = 0; i < box.options.length; i++)
{
if (box.options[i].value == "")
{
for ( var j = i; j < box.options.length - 1; j++)
{
box.options[j].value = box.options[j + 1].value;
box.options[j].text = box.options[j + 1].text;
}
var ln = i;
break;
}
}
if (ln < box.options.length)
{
box.options.length -= 1;
BumpUp(box);
}
}

Maybe it's just me, but it's hard to see what the issue is here.
If it is simply that SortD(tbox) is being called within the move() function, that's because
sortitems is set to 1 right at the top of the code. The value of sortitems is never changed anywhere else, so this conditional is always true and SortD is always called.
if (sortitems)
SortD(tbox);

Javascript .Replace Alternative

I am coding a template for eBay. However, eBay does not allow .replace. The code below is for a rollover tab section.When the user hovers over tab(a), the correspodning div div(a) is made to become visible.
Is there a workaround to get the code to work without using .replace?
var divs = new Array();
divs.push("contentPayment");
divs.push("contentShipping");
divs.push("contentWarranty");
divs.push("contentContact");
var navs = new Array();
navs.push("nav1");
navs.push("nav2");
navs.push("nav3");
navs.push("nav4");
///////////////////////////////////////
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
///////////////////////////////////////////////////////////////////////
function toggleDisplay(id) {
for (var i = 0; i < divs.length; i++) {
var item = document.getElementById(divs[i]);
item.style.display = 'none';
}
var target = document.getElementById(id);
target.style.display = 'block';
///////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////PAYMENT IS HOVERED////////////////////////////////////////////////////////
if (id == "contentPayment") {
var CurrentTab = document.getElementById("nav1");
var AlreadyActive = hasClass(CurrentTab, "tabActive");
if (AlreadyActive === false) {
for (var i = 0; i < navs.length; i++) {
var otherTabs = document.getElementById(navs[i]);
otherTabs.className = otherTabs.className.replace(' tabActive', '');
}
CurrentTab.className += " " + "tabActive";
}
}
/////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////Shipping IS HOVERED////////////////////////////////////////////////////////
if (id == "contentShipping") {
var CurrentTab = document.getElementById("nav2");
var AlreadyActive = hasClass(CurrentTab, "tabActive");
if (AlreadyActive === false) {
for (var i = 0; i < navs.length; i++) {
var otherTabs = document.getElementById(navs[i]);
otherTabs.className = otherTabs.className.replace(' tabActive', '');
}
CurrentTab.className += " " + "tabActive";
}
}
///////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////Warranty IS HOVERED////////////////////////////////////////////////////////
if (id == "contentWarranty") {
var CurrentTab = document.getElementById("nav3");
var AlreadyActive = hasClass(CurrentTab, "tabActive");
if (AlreadyActive === false) {
for (var i = 0; i < navs.length; i++) {
var otherTabs = document.getElementById(navs[i]);
otherTabs.className = otherTabs.className.replace(' tabActive', '');
}
CurrentTab.className += " " + "tabActive";
}
}
///////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////Contact IS HOVERED////////////////////////////////////////////////////////
if (id == "contentContact") {
var CurrentTab = document.getElementById("nav4");
var AlreadyActive = hasClass(CurrentTab, "tabActive");
if (AlreadyActive === false) {
for (var i = 0; i < navs.length; i++) {
var otherTabs = document.getElementById(navs[i]);
otherTabs.className = otherTabs.className.replace(' tabActive', '');
}
CurrentTab.className += " " + "tabActive";
}
}
}

You may try this as an alternative of replace function
String.prototype.fakeReplace = function(str, newstr) {
return this.split(str).join(newstr);
};
var str = "Welcome javascript";
str = str.fakeReplace('javascript', '');
alert(str); // Welcome
DEMO.

For a more efficient, but slightly longer method, use this:
String.prototype.myReplace = function(pattern, nw) {
var curidx = 0, len = this.length, patlen = pattern.length, res = "";
while(curidx < len) {
var nwidx = this.indexOf(pattern, curidx);
console.log(nwidx);
if(nwidx == -1) {
break;
}
res = res + this.substr(curidx, nwidx - curidx);
res = res + nw;
curidx = nwidx + patlen;
}
return res;
};
alert("Glee is awesome".myReplace("awesome", "very very very awesome"));
See it in action: little link.
Hope that helped!