I am currently trying to make a web port of the linux terminal game, greed.
If you have ever played, each number has it's own unique color, an I need to replicate this in html.
I have tried to put them into <span style="color:#FF0000"> tags, though this
got too laggy to run on my computer with any decent speed, using chrome.
drawGrid = function(){
drawer.innerHTML = ""
for(var i in board){
for(var o in board[i]){
drawer.innerHTML+="<span class='b"+board[i][o]+"'>"+board[i][o]+"</span>"
}
drawer.innerHTML+="<br>"
}}
board is a 2d array with numbers,drawer is the div which i am writing to and in a style tag including to style the numbers properly
Any help?
To achieve expected result, use below option of rewriting innerHTML as below
var drawer = document.getElementById('draw');
var board = {a: ['aa', 'aa2','aa3'], b: ['ba', 'ba2','ba3']};
drawGrid = function(){
drawer.innerHTML = "";
var html = ''
for(var i in board){
for(var o in board[i]){
html+="<span class='b"+board[i][o]+"'>"+board[i][o]+"</span>"
}
html+= '<br>'
}
drawer.innerHTML = html
}
span{
border: 1px solid black
}
<div id = "draw"></div>
<button onclick="drawGrid()">Draw</button>
codepen - https://codepen.io/nagasai/pen/OqVqrN
Please refer this link for more details - .append VS .html VS .innerHTML performance
Related
Does anyone know a fast way to copy multiple elements from an inspect page?
What I mean by that is I have a number of elements with same qualities i.e. same class and I want to copy all of them to my clipboard. Is there a way within inspect tool to do such a "trick" ? :)
Thank you in advance!
There's no specific simple way to do this, you can only using code to extract the elements you want.
For example if you want to get elements with the same class name, you can use the following code:
var outputText = "";
var targets = document.getElementsByClassName('classname');
for( var i = 0; i < targets.length; i++ ) {
outputText += targets[i].outerHTML;
}
console.log(outputText);
Then you can copy the output in the console.
I'm doing something With an ESP8266, and I need some help with the HTML part of it.
I want to duplicate 1 slider:
The code is :
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial; margin-left:auto; margin-right:auto;}");
client.println(".slider { width: 300px; }</style>");
client.println("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>");
// Web Page
//client.println("</head><body><h1>ESP32 with Servo</h1>");
client.println("<p>Start Temperature: <span id=\"servoPos\"></span></p>");
client.println("<input type=\"range\" min=\"20\" max=\"30\" class=\"slider\" id=\"servoSlider\" onchange=\"servo(this.value)\" value=\""+valueString+"\"/>");
client.println("<script>var slider = document.getElementById(\"servoSlider\");");
client.println("var servoP = document.getElementById(\"servoPos\"); servoP.innerHTML = slider.value;");
client.println("slider.oninput = function() { slider.value = this.value; servoP.innerHTML = this.value; }");
client.println("$.ajaxSetup({timeout:1000}); function servo(pos) { ");
client.println("$.get(\"/?value=\" + pos + \"&\"); {Connection: close};}</script>");
client.println("</body></html>");
//GET /?value=180& HTTP/1.1
if(header.indexOf("GET /?value=")>=0) {
pos1 = header.indexOf('=');
pos2 = header.indexOf('&');
valueString = header.substring(pos1+1, pos2);
//Rotate the servo
//myservo.write(valueString.toInt());
// Serial.println(valueString);
}
}
}
// Clear the header variable
header = "";
This gives me a slider, but I want another one for controlling a different thing, under a different variable.
Since I don't really understand HTML, I have tried to change some variables and duplicate the code myself, but without success. The slider works, but I get a lot of errors.
Second (independent) slider
client.println("<p>Start Sensor2: <span id=\"servoPos2\"></span></p>");
client.println("<input type=\"range\" min=\"20\" max=\"30\" class=\"slider\" id=\"servoSlider2\" onchange=\"servo2(this.value)\" value=\""+valueString+"\"/>");
client.println("<script>var slider2 = document.getElementById(\"servoSlider2\");");
client.println("var servoP2 = document.getElementById(\"servoPos2\"); servoP2.innerHTML = slider2.value;");
client.println("slider2.oninput = function() { slider2.value = this.value; servoP2.innerHTML = this.value; }");
The function servo(pos) (my guess) in the rest code not shown has either to be
duplicated or ???
to stop guessing and helping you please add the following info:
Source code esp8266 or if it is a standard example the name of the ino file
The type of error- during compilation, on the browser console, on serial port?
I have a requirement to highlight some particular words on any websites I visit. So that I don't have to use control+f manually and find the word on a web page.
I have seen some chrome plugin (Highlight This: finds and marks words
) but that is not finding on all websites maybe only for the website which allows scraping. I have some internal websites where I need to do ctrl+f every time for the same set of words.
Exactly this plugin is as per my requirement but this does not work internal or restricted websites. I know how to create extension but not sure what logic or piece of code would do this work.
When ever I visit a website or any URL the words stored in the plugin should highlight as it gets highlited with ctrl+f.
Here's a start. Not fully tested.
let searchTerms = ['law', 'software', 'news', 'health'];
let elems = document.querySelectorAll("h1, h2, h3, h4, h5, h6, p, a")
for (let i = 0, total = elems.length; i < total; i++) {
let element = elems[i];
if (element && element.innerText) {
let innerText = element.innerText;
for (let j = 0; j < searchTerms.length; j++) {
const reg = new RegExp(searchTerms[j], 'gi')
const matches = innerText.toLowerCase().match(reg) || []
if (matches.length) {
for (let n = 0; n < matches.length; n++) {
element.innerHTML = innerText.replace(reg, '<span style="color:red">' + searchTerms[j] + '</span>');
}
}
}
}
}
I would use the chrome.storage.sync.set API chrome.storage.api. You could set your text that searched and store it in a variable, then everytime you use the extension, you can have it reference that variable. Without any code, I'm going off of my own experience. So I'm including a bit of my example to show you how I used the chrome.storage api, so that maybe you could find it useful as well.
Here's a snippet of my code, it is a chrome extension that adds a url to the local storage so that way when I log into a firewall, I don't have to continually copy the string/text I'm wanting to input.
function cfs_add(){
var url = prompt('Please provide url', 'test.com');
chrome.storage.sync.set({'name': url}, function() {
console.log("saved url!!" );
});
};
cfs_add()
...
chrome.storage.sync.get(['name'], function(results) {
if(results.variable_name == undefined) {
}
document.getElementById('state').innerHTML = "Current URL: " + String(results['name'])
document.getElementById('state').style.color = "lightblue"
})
Make a function that automatically searches and highlights the word stored in the local storage/chrome.storage.
In looking at this image you can see in an ideal world each box would have the same height of content in each box. However in the real world we can't control how many characters the client uses for a heading. Wondering thoughts on how to deal with a situation like this? Is it ok to just let it be as is?
This will create an array of heights of an element by class, then find the tallest, and then make them all that height.
<script>
var headerHeights = [];
var mclength = document.getElementsByClassName("myClass").length;
for (i = 0; i < mclength; i++) {
headerHeights[i] = document.getElementsByClassName("myClass")[i].getBoundingClientRect().height;
}
var headerMaxHeight = Math.max(...headerHeights);
for (i = 0; i < mclength; i++) {
document.getElementsByClassName("myClass")[i].style.height = headerMaxHeight+"px";
}
</script>
You will likely want to make this a function which replaces "myClass" with a function parameter so that you can call it for each class you add. You will also want to add a listener for when a person resizes their window to rerun the function.
I'd like users to enter a code and to assist them in transcribing it I'd hope to increase the spacing between every 3rd character they type. I've seen this nicely done for credit cards having 4 character spacing. This will be for an Ionic app so the simple input box coud be replaced with a customised Ionic control.
What methods have you used for this and what works best?
Open to Angular/Ionic code samples or a related web site tutorial.
Pure CSS would be nice.
Here is an other version, without jquery, works with alphanumerical and takes a configurable separator:
Typescript:
GROUP_SEPARATOR=" ";
......
format(valString) {
if (!valString) {
return '';
}
let val = valString.toString();
const parts = val.replace(/ /g, '');
return parts.replace(/\B(?=(?:\w{3})+(?!\w))/g, this.GROUP_SEPARATOR)
};
HTML
<input [(ngModel)]="input"
style="border:1px solid black" #myBudget="ngModel" (input)="input = format(input)">
DEMO
You can add space on keyup event.
Example
$('#input').on('keyup', function(e){
var val = $(this).val();
var newval = '';
val = val.replace(/\s/g, '');
for(var i=0; i < val.length; i++) {
if(i%3 == 0 && i > 0) newval = newval.concat(' ');
newval = newval.concat(val[i]);
}
$(this).val(newval);
})
I found a simpler method based on Vija's method ... Basically we match 3 non-space chars and we remove any previously added space chars. This is needed to allow the user to update or erase any chars in the text box.
A final solution may also need to adjust the position of the cursor based on where it was prior to performing the replace.
$('#input').on('keyup', function(e){
var val = $(this).val();
var newval = val.replace(/([^ ][^ ][^ ]) */g, "\$1 ").trim();
$(this).val(newval);
})