Develop Reference

Add a Class to some items depending on inner html

I'm working on a leaflet js map atm.
There are some items that I want to apply a class to, depending on their inner text. Seems as though two circles at a certain size just overlap. Adding some CSS in that case so they're no longer overlapping.
//function searches for all <text> elements within svg tags for the queryText
// and then appends them with the appendText
function addClasserino() {
let elements = document.querySelectorAll('map-marker marker-bg-condition'); // get all circle elements as a NodeList
elements.forEach(el => { // go through each text element
if (el.innerText < 10) { // if the innerHTML matches the query HTML then
elements.addClass('updated'); // add the class
}
})
}
document.addEventListener("DOMContentLoaded", function(){
//pass in the search text and the appending text as arguments
addClasserino();
});
This is what I got so far. Doesn't seem to be working.
.map-marker.marker-bg-condition needs to be moved across a bit. Got the CSS here:
.map-marker.marker-bg-condition.updated{
margin-top: -19px;
margin-left: -19px;
}
With Leaflet JS, the zoom level changes and items are updated accordingly. This of my map showing all details at the world view, and then breaking down to state as you zoom in.
The unexpected behavior is that the css isn't applying and where bubbles are overlapping is because of this. This is the original code but I can't change it and get it to work even with an if statement.
getMarkerHtml: function(count, color) {
var size = this.getMarkerSize(count);
var hsize = (size / 2) - 6;
var font = count < 1000 ? Math.ceil(size / 3) : Math.ceil(size / 4);
if(count < 100) {
font = font + 3;
}
var cluster_classes = [
'map-marker',
'marker-bg-' + (Filters.colors.profile === color ? 'profile' : 'condition')
];
if(this.zoomLevel !== 'zip') {
size = size * 1.5;
if(petMapFilters.colors.profile !== color) {
hsize = size / 2;
}
}
if(this.zoomLevel === 'zip') {
var cluster_styles = [
'margin-left: -' + hsize + 80 + 'px;', NOTE: I tried this to offset on zip zoom bit it's not working END OF NOTE
'margin-top: -' + hsize + 80 +'px;',
'width: ' + size + 'px;',
'height: ' + size + 'px;',
'font-size: ' + font + 'px;'
];
} else {
var cluster_styles = [
'margin-left: -' + hsize + 'px;',
'margin-top: -' + hsize + 'px;',
'width: ' + size + 'px;',
'height: ' + size + 'px;',
'font-size: ' + font + 'px;'
];};
var div_style = [
'line-height: ' + (size - (size * 0.3)) + 'px;'
];
count = this.formatCount(count);
return '<div class="' + cluster_classes.join(' ') + '" tabindex="0" style="' + cluster_styles.join(' ') + '"><div style="' + div_style.join(' ') + '">' + count + '</div></div>';
},
Please let me know what I am doing wrong here as I am not able to identify this myself.
The issue at hand:
Thanks.

I want one character at a time on html page. After completion load next one

I am developing a javascript app.
I have stuck to implementing this.
I am able to load all characters but I want to implement :- load one characters after on completion load next characters.
One characters at a time.
I want to load one character. After completion load next then again after completion next but one character at a time.
https://hanziwriter.org/docs.html
var chars = new Array('我','很','爱');
console.log(chars);
for(i=0; i< chars.length; i++){
console.log(chars[i]);
writeFunction(chars[i])
}
//c = '我';
function writeFunction(c){
var writer = HanziWriter.create('character-target-div' , c , {
width: 150,
height: 150,
showCharacter: false,
padding: 5
});
writer.quiz({
onMistake: function(strokeData) {
console.log('Oh no! you made a mistake on stroke ' + strokeData.strokeNum);
console.log("You've made " + strokeData.mistakesOnStroke + " mistakes on this stroke so far");
console.log("You've made " + strokeData.totalMistakes + " total mistakes on this quiz");
console.log("There are " + strokeData.strokesRemaining + " strokes remaining in this character");
},
onCorrectStroke: function(strokeData) {
console.log('Yes!!! You got stroke ' + strokeData.strokeNum + ' correct!');
console.log('You made ' + strokeData.mistakesOnStroke + ' mistakes on this stroke');
console.log("You've made " + strokeData.totalMistakes + ' total mistakes on this quiz');
console.log('There are ' + strokeData.strokesRemaining + ' strokes remaining in this character');
},
onComplete: function(summaryData) {
console.log('You did it! You finished drawing ' + summaryData.character);
console.log('You made ' + summaryData.totalMistakes + ' total mistakes on this quiz');
flagComplete = true;
}
});
}
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer#2.2/dist/hanzi-writer.min.js"></script>
<div id="character-target-div"></div>

So you want to only continue your loop when the user has completed the character. That means your loop must become asynchronous.
JavaScript offers async and await for that purpose. The only requirement is that you provide a promise that resolves when the character is completed.
Here is how it could work (untested):
(async function() { // <-- add this wrapper
var chars = new Array('我','很','爱');
console.log(chars);
for(i=0; i< chars.length; i++){
console.log(chars[i]);
await writeFunction(chars[i]);
// ^^^^^
}
})(); // execute immediately
//c = '我';
// Make the function async, so it returns a promise
async function writeFunction(c) {
// Wrap the code inside a Promise constructor callback:
return new Promise(function (resolve, reject) {
var writer = HanziWriter.create('character-target-div' , c , {
width: 150,
height: 150,
showCharacter: false,
padding: 5
});
writer.quiz({
onMistake: function(strokeData) {
console.log('Oh no! you made a mistake on stroke ' + strokeData.strokeNum);
console.log("You've made " + strokeData.mistakesOnStroke + " mistakes on this stroke so far");
console.log("You've made " + strokeData.totalMistakes + " total mistakes on this quiz");
console.log("There are " + strokeData.strokesRemaining + " strokes remaining in this character");
},
onCorrectStroke: function(strokeData) {
console.log('Yes!!! You got stroke ' + strokeData.strokeNum + ' correct!');
console.log('You made ' + strokeData.mistakesOnStroke + ' mistakes on this stroke');
console.log("You've made " + strokeData.totalMistakes + ' total mistakes on this quiz');
console.log('There are ' + strokeData.strokesRemaining + ' strokes remaining in this character');
},
onComplete: function(summaryData) {
console.log('You did it! You finished drawing ' + summaryData.character);
console.log('You made ' + summaryData.totalMistakes + ' total mistakes on this quiz');
// call resolve: that does the magic!
resolve();
}
});
});
}

Like this?
I cannot test it since I have no idea how to correctly stroke any of these
You can change
setTimeout(writeFunction, 1000)
to
writeFunction();
if you do not want a pause
var chars = new Array('我', '很', '爱'),
cnt = 0;
writeFunction()
//c = '我';
function writeFunction() {
if (cnt >= chars.length) return
c = chars[cnt]
var writer = HanziWriter.create('character-target-div', c, {
width: 150,
height: 150,
showCharacter: false,
padding: 5
});
writer.quiz({
onMistake: function(strokeData) {
console.log('Oh no! you made a mistake on stroke ' + strokeData.strokeNum);
console.log("You've made " + strokeData.mistakesOnStroke + " mistakes on this stroke so far");
console.log("You've made " + strokeData.totalMistakes + " total mistakes on this quiz");
console.log("There are " + strokeData.strokesRemaining + " strokes remaining in this character");
},
onCorrectStroke: function(strokeData) {
console.log('Yes!!! You got stroke ' + strokeData.strokeNum + ' correct!');
console.log('You made ' + strokeData.mistakesOnStroke + ' mistakes on this stroke');
console.log("You've made " + strokeData.totalMistakes + ' total mistakes on this quiz');
console.log('There are ' + strokeData.strokesRemaining + ' strokes remaining in this character');
},
onComplete: function(summaryData) {
console.log('You did it! You finished drawing ' + summaryData.character);
console.log('You made ' + summaryData.totalMistakes + ' total mistakes on this quiz');
flagComplete = true;
cnt++
setTimeout(writeFunction, 1000)
}
});
}
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer#2.2/dist/hanzi-writer.min.js"></script>
<div id="character-target-div"></div>

JavaScript: How Do I Prevent A User From Crashing setInterval / setTimeout Event?

To see the problem click on https://jsfiddle.net/kjz1myL2/16/ and when the fade is complete move your mouse from button to button REALLY FAST.
Is there a way to prevent events from crashing or reset them when they crash? I made a JavaScript event that happens with setInterval. This helps work the fades. It is a very crucial part of the code, but it crashes SUPER EASILY! If a user switches between two elements too fast, it will crash the setInterval. I wanted to make a mouse pause event in which it stops the user's mouse or a mouse slow event that slows the mouse speed to the slowest possible speed until the setInterval is over, but people have stated that taking the control from the user is VERY DANGEROUS for VERY OBVIOUS REASONS. Not exploring that option, I decided to come here and ask for a more user-friendly solution to prevent the crash from happening. I have this code (PART OF THE CODE) [ADJUSTED]:
JavaScript
window.addEventListener("load", TourFunction);
var TourFadeInEvent;
var TourYesMouseEnterTimeEvent, TourNoMouseEnterTimeEvent;
var TourYesMouseEnterEvent, TourNoMouseEnterEvent;
var TourYesMouseLeaveEvent, TourNoMouseLeaveEvent;
Steps = 3;
TourFunction()
function TourFunction(){
if (Steps == 3){
Opacity = 0;
TourFadeInEvent = window.setInterval(TourFadeIn, 20);
}else{
TourYesMouseEnterEvent = TourInputYes.addEventListener("mouseenter", TourYesMouseEnter);
TourNoMouseEnterEvent = TourInputNo.addEventListener("mouseenter", TourNoMouseEnter);
}
function TourFadeIn(){
if (Opacity <= 0 || Opacity < 1){
Opacity = Opacity + .01;
TourContainer.style.opacity = Opacity;
}else{
clearInterval(TourFadeInEvent);
Steps += 1;
TourFunction();
return Steps;
}
}
function TourYesMouseEnter(){
TourYesMouseEnterTimeEvent = window.setInterval(TourYesMouseEnterTime, 10);
function TourYesMouseEnterTime(){
if (YesfgcR < 255){
YesfgcR += 5;
YesfgColor = "rgb(" + YesfgcR + ", " + YesfgcG + ", " + YesfgcB + ")";
TourInputYes.style.color = YesfgColor;
}if (YesbcR < 255){
YesbcR += 5;
YesbColor = "rgb(" + YesbcR + ", " + YesbcG + ", " + YesbcB + ")";
TourInputYes.style.borderColor = YesbColor;
}if (NofgcR > 0){
NofgcR = 0;
NofgColor = "rgb(" + NofgcR + ", " + NofgcG + ", " + NofgcB + ")";
TourInputNo.style.color = NofgColor;
}if (NobcR > 0){
NobcR = 0;
NobColor = "rgb(" + NobcR + ", " + NobcG + ", " + NobcB + ")";
TourInputNo.style.borderColor = NobColor;
}if (YesfgcR >= 255 && YesbcR >= 255 && NofgcR == 0 && NobcR == 0){
clearInterval(TourYesMouseEnterTimeEvent);
return YesfgcR, YesbcR, YesfgColor, YesbColor;
}
}
}
function TourNoMouseEnter(){
TourNoMouseEnterTimeEvent = window.setInterval(TourNoMouseEnterTime, 10);
function TourNoMouseEnterTime(){
if (NofgcR < 255){
NofgcR += 5;
NofgColor = "rgb(" + NofgcR + ", " + NofgcG + ", " + NofgcB + ")";
TourInputNo.style.color = NofgColor;
}if (NobcR < 255){
NobcR += 5;
NobColor = "rgb(" + NobcR + ", " + NobcG + ", " + NobcB + ")";
TourInputNo.style.borderColor = NobColor;
}if (YesfgcR > 0){
YesfgcR = 0;
YesfgColor = "rgb(" + YesfgcR + ", " + YesfgcG + ", " + YesfgcB + ")";
TourInputYes.style.color = YesfgColor;
}if (YesbcR > 0){
YesbcR = 0;
YesbColor = "rgb(" + YesbcR + ", " + YesbcG + ", " + YesbcB + ")";
TourInputYes.style.borderColor = YesbColor;
}if (NofgcR >= 255 && NobcR >= 255 && YesfgcR == 0 && YesbcR == 0){
clearInterval(TourNoMouseEnterTimeEvent);
return NofgcR, NobcR, NofgColor, NobColor;
}
}
}
}
The code runs fine if you don't switch from each button too fast but if you go to fast, it will crash. I have been experiencing this a lot and have not gotten an answer. PLEASE give me something to work off of.

Use CSS transitions for the color fade instead -
document.getElementById('Game1_TourInputYes').addEventListener('mouseover', switchActive);
document.getElementById('Game1_TourInputNo').addEventListener('mouseover', switchActive);
function switchActive(e) {
var others = document.getElementsByClassName('btn-tour-input');
for (let i = 0; i < others.length; i++) {
others[i].classList.remove('active');
}
this.classList.add('active');
}
input[type=button] {
background: transparent;
border: 3px solid black;
color: black;
transition: all .4s ease-in-out;
padding: 10px 30px;
}
input.active {
border: 3px solid red;
color: red;
}
<input class="btn-tour-input Tour_Input_Yes" id="Game1_TourInputYes" type="button" value="Yes" />
<input class="btn-tour-input Tour_Input_No" id="Game1_TourInputNo" type="button" value="No" />

Jquery Css Function slow to add property to div?

So basically I am trying to scale a div (starts from 0) when another is clicked but the scale origin should start from where the click happened. Sort of what apple does when you click on an app (the app opens up from where you clicked it).
The problem is trying to set the property of the scale origin which I do successfully but when i click on the div, this has no effect ! It only works when I set a timeout function to when I add the class that scales it fully
Class appeared to have been added before css is applied:
var xPosSTR = 30+'px';
var yPosSTR = 30+'px';
$('.box-detail').css({
'transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px',
'-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px'
});
$(".box-detail").addClass("box-reveal-prop");
Class is applied with a delay (which scales from the origin specified but takes time)
var xPosSTR = 30+'px';
var yPosSTR = 30+'px';
$('.box-detail').css({
'transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px',
'-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px'
});
setTimeout(function(){
$(".box-detail").addClass("box-reveal-prop");
}, 2000);
css: {
.box-detail {
display: inline-block;
position: absolute;
height: 100%;
width: 100%;
transition: 0.3s;
z-index: 1000;
transform:scale(0,0);
}
.box-reveal-prop {
transform:scale(1,1);
}
Can I achieve the same thing without the timeout function, Thanks !

You would want to bind to transitionend
$('.box-detail')
.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
function(){
$(".box-detail").addClass("box-reveal-prop");
});
You may see the js fiddle here

using touchstart causes screen to become fuzzy on touchstart

I am currently testing touchstart functionality on my device (Samsung galaxy S2) for my game. I am programming using javascript and jquery wrapped under phonegap in android and currently having issues as follows:
my touch start event (e.g triggering an attack button "touchstart" event to run some javascript to perform the attack action) causes my screen to become temporarily fuzzy, then back to normal in less than a second, so more like a screen flicker where images become jittery). I am not using css transforms or transitions just plain css and images.
Can someone please let me know if they have encountered moreorless similar issues to mine. A bit at a loss whether it is a hardware or touchstart issue where i can solve that problem.
Sample Javascript below for my navigation controls (left, up, down, right touchstart tap):
if ('ontouchstart' in document.documentElement) {
var left = document.getElementById('left');
left.addEventListener("touchstart", function(e){
if(controlsPlayerChar == '')
{
return false;
}
var l_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
var l_xy = l_oldCell.split('_');
var l_x = l_xy[0];
var l_y = l_xy[1];
if(l_y == 1)
{
direction = "left";
setCharDynamics(controlsPlayerChar);
return false;
}
var l_newCell = l_x + '_' + (parseInt(l_y) - 1);
// validate if next cell is empty
if($('#' + l_newCell + ':has(".shadow")').val() != undefined
|| $('#' + l_newCell + ':has(".ally")').val() != undefined
|| $('#' + l_newCell + ':has(".obstacle")').val() != undefined)
{
direction = "left";
setCharDynamics(controlsPlayerChar);
return false;
}
$('#' + l_newCell).append($('#' + controlsPlayerChar));
$('#' + l_oldCell + ' ' + '#' + controlsPlayerChar).remove();
// set char direction to 'left' and set next footstep
setDirection('left');
setFootstep(footstep);
setCharDynamics(controlsPlayerChar);
});
var up = document.getElementById('up');
up.addEventListener("touchstart", function(e){
if(controlsPlayerChar == '')
{
return false;
}
var u_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
var u_xy = u_oldCell.split('_');
var u_x = u_xy[0];
var u_y = u_xy[1];
if(u_x == 1)
{
direction = "up";
setCharDynamics(controlsPlayerChar);
return false;
}
var u_newCell = (parseInt(u_x) - 1) + '_' + u_y;
// validate if next cell is empty
if($('#' + u_newCell + ':has(".shadow")').val() != undefined
|| $('#' + u_newCell + ':has(".ally")').val() != undefined
|| $('#' + u_newCell + ':has(".obstacle")').val() != undefined)
{
direction = "up";
setCharDynamics(controlsPlayerChar);
return false;
}
$('#' + u_newCell).append($('#' + controlsPlayerChar));
$('#' + u_oldCell + ' ' + '#' + controlsPlayerChar).remove();
// set char direction to 'up' and set next footstep
setDirection('up');
setFootstep(footstep);
setCharDynamics(controlsPlayerChar);
});
var down = document.getElementById('down');
down.addEventListener("touchstart", function(e){
if(controlsPlayerChar == '')
{
return false;
}
var d_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
var d_xy = d_oldCell.split('_');
var d_x = d_xy[0];
var d_y = d_xy[1];
if(d_x == rows)
{
direction = "down";
setCharDynamics(controlsPlayerChar);
return false;
}
var d_newCell = (parseInt(d_x) + 1) + '_' + d_y;
// validate if next cell is empty
if($('#' + d_newCell + ':has(".shadow")').val() != undefined
|| $('#' + d_newCell + ':has(".ally")').val() != undefined
|| $('#' + d_newCell + ':has(".obstacle")').val() != undefined)
{
direction = "down";
setCharDynamics(controlsPlayerChar);
return false;
}
$('#' + d_newCell).append($('#' + controlsPlayerChar));
$('#' + d_oldCell + ' ' + '#' + controlsPlayerChar).remove();
// set char direction to 'down' and set next footstep
setDirection('down');
setFootstep(footstep);
setCharDynamics(controlsPlayerChar);
});
var right = document.getElementById('right');
right.addEventListener("touchstart", function(e){
if(controlsPlayerChar == '')
{
return false;
}
var r_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
var r_xy = r_oldCell.split('_');
var r_x = r_xy[0];
var r_y = r_xy[1];
if(r_y == cols)
{
direction = "right";
setCharDynamics(controlsPlayerChar);
return false;
}
var r_newCell = r_x + '_' + (parseInt(r_y) + 1);
// validate if next cell is empty
if($('#' + r_newCell + ':has(".shadow")').val() != undefined
|| $('#' + r_newCell + ':has(".ally")').val() != undefined
|| $('#' + r_newCell + ':has(".obstacle")').val() != undefined)
{
direction = "right";
setCharDynamics(controlsPlayerChar);
return false;
}
$('#' + r_newCell).append($('#' + controlsPlayerChar));
$('#' + r_oldCell + ' ' + '#' + controlsPlayerChar).remove();
// set char direction to 'right' and set next footstep
setDirection('right');
setFootstep(footstep);
setCharDynamics(controlsPlayerChar);
});
}
Please let me know if you think anything is amiss with regards to above script. The way I add the touchstart event is the same in other areas of my script when e.g to launch an attack or launch an options menu for instance.

Seems that this is tap highlighting.
You can try to disable this effect applying -webkit-tap-highlight-color CSS property on your controls or disable this in all elements using * selector.
For example:
.someelement {
-webkit-tap-highlight-color: transparent;
}

We've ran into this issue when using translate3d transformations.
We fixed it by setting
* { -webkit-transform: translate3d(0,0,0,); }
so that every element is initialized for the 3d space

First of all, make sure you are calling preventDefault() on the event. I've noticed that if you are targeting mouse events as well, they can fire on touch. Otherwise, I use a slightly different method of disabling touch highlighting. Try:
-webkit-tap-highlight-color: rgba(0,0,0,0);
In the css for your button.