Straight Tips

elevateZoom (Requires jQuery)

Monday, April 21, 2025

[JavaScript] Real and Fake Multi-Thread. (Prevent Loop From Freezing The Browser)

The below codes are examples on how to prevent Loop from freezing the browser by using either Real or Fake Multi-Thread.

Since Real Multi-Thread is faster than Fake Multi-Thread, always use Real Multi-Thread if possible!

Test codes below (Click here)

Real Multi-Thread (Async Function with Web Worker):

<!DOCTYPE html>

https://stackoverflow.com/questions/5408406/web-workers-without-a-separate-javascript-file?page=1&tab=scoredesc#tab-top
<br><br>

Current: <span id="Current">  </span><br><br>
Status: <span id="Status"></span><br><br>
<input type="button" value="Start" onclick='Big_Op();'>
<input type="button" value="Stop" onclick='Big_Op("Stop")'><br><br>

X = <span id="x_count">0</span> <input type="button" value="X++"
onclick='document.getElementById("x_count").innerText = ++x;'> <br><br>

<span id="Output"></span><br><br>

<script id="Big_Op_Script" type="javascript/worker">

    // This script won't be parsed by JS engines because its type is javascript/worker.

for(i = 0; i <= 299001; i++){postMessage(["Running", i])};

postMessage(["Finished"])

</script>


<script>

x = 0;

document.getElementById("Output").innerText += "Before async function" + "\n\n";

Big_Op();

document.getElementById("Output").innerText += "After async function" + "\n\n";

function Big_Op(Option) {    //________________________

     if (Option === "Stop"){
     Big_Op.Worker.terminate(); 
     Big_Op.Worker = undefined;
     document.getElementById("Status").innerHTML = "Aborted";
     return;
     }

if (Big_Op.Worker !== undefined){return}

var blob = new Blob([document.querySelector('#Big_Op_Script').textContent], { type: "text/javascript" })

            // Note: window.webkitURL.createObjectURL() in Chrome 10+.
Big_Op.Worker = new Worker(window.URL.createObjectURL(blob));

    Big_Op.Worker.onmessage = function(e) {

    if (e.data[0] === "Running"){document.getElementById("Current").innerHTML = e.data[1]}

         if (e.data[0] === "Finished"){

         Big_Op.Worker = undefined;

         document.getElementById("Status").innerHTML = "Done"; 

         document.getElementById("Output").innerText += "Finished Looping \n\n";
         }

    }

document.getElementById("Status").innerHTML = "Running";
}

</script>

Fake Multi-Thread (Async Function with Sleep):

<!DOCTYPE html>

<span id="status"></span> _ (<span id="count"></span>)<br>
<input type="button" value="Start" onclick='Big_Op_Stop = false; Big_Operation()'>
<input type="button" value="Stop" onclick='Big_Op_Stop = true'><br><br>

X = <span id="x_count">0</span> <input type="button" value="X++" 
onclick='document.getElementById("x_count").innerText = ++x;'> <br><br>

<span id="Output"></span><br>

<script>

x = 0;

Big_Op_Stop = false;

Output_el = document.getElementById("Output");

Output_el.innerText += "1" + "\n\n";
Output_el.innerText += "2" + "\n\n";
Output_el.innerText += "Before async function" + "\n\n";

Big_Operation();

Output_el.innerText += "After async function" + "\n\n";

async function Big_Operation(){    //___________________________________________________________

    //"async" above is a must for "await" below to work, otherwise, error!

document.getElementById("status").innerText = "This Operation will take long, please wait!!!"; 

    var Sleep_i = 0;

    var Big_Op_i = 0;

    for(; Big_Op_i <= 9001001; Big_Op_i++){

    document.getElementById("count").innerText = Big_Op_i;

    if (Big_Op_Stop === true){document.getElementById("status").innerText = "Aborted"; return;}

          Sleep_i++;
          if (Sleep_i >= 11001){    //the higher this value is, the faster the loop will finish (but the browser may freeze)
          var Sleep_i = 0;
          await Sleep(0);           //"0" execute "immediately" (This will allow other codes to be executed and prevents browser from freezing)
          }
    }

Output_el.innerText += "Finished Looping _ " + Big_Op_i + "\n\n";

document.getElementById("status").innerText = "Finhished!!!"; 
}

function Sleep(Time) {    //_____________________________

    return new Promise((resolve) => {

    setTimeout(() => {resolve("Sleep End");}, Time);    //1000 millisecond = 1 Second

    });

}

</script>

Saturday, November 16, 2024

[JavaScript] Wait Return Value from Async Functions

Test code below (Click here)

<!DOCTYPE html>


<script>

Start();

async function Start() {    //_____________________________

    //"async" above is a must for "await" below to work, otherwise, error!

var x = 3;

var r = await Calculate();

    //"await" - The code below will be executed only after "Calculate()" returns a value

alert(x + r);

}

function Calculate() {    //_____________________________


    //"Calculate" is an async function because it returns a promise


    return new Promise((resolve) => {

    setTimeout(() => {resolve(2 + 3);}, 2000);    //2000 milliseconds = 2 Seconds

    });

}

</script>

Friday, November 15, 2024

[JavaScript] Wait Sleep() Function

Test code below (Click here)

<!DOCTYPE html>


<script>

Start();

async function Start() {    //_____________________________

    //"async" above is a must for "await" below to work, otherwise, error!

await Sleep(2000);    //1000 millisecond = 1 Second

    //"await" - The code below will be executed only after "Sleep()" returns

alert("Start Function Call End");

}

function Sleep(Time) {    //_____________________________

    return new Promise((resolve) => {

    setTimeout(() => {resolve("Sleep End");}, Time);    //1000 millisecond = 1 Second

    });

}

</script>

Thursday, November 30, 2023

[JavaScript] Obfuscation is Not Security. (Find Almost Anything From Obfuscated Scripts)

Download testing scripts from the video here:
https://www.mediafire.com/file/jta8a6b630swjl2/%255BJavaScript%255D_Obfuscation_is_Not_Security.zip/file

Wednesday, November 1, 2023

[JavaScript] Save and Load File. (Text, Image, Audio and Video)

v1.0 Save - v1.2 Load:

- Audios and Videos can be loaded now.

v1.0 Save - v1.1 Load:

- Added "Shrink" option to reduce the image base64 data by using CSS "max-width" or "max-height" properties.

Test code below (Click here)

<!DOCTYPE html>

<textarea id="User_Text" rows="10" style="width:400px;">
111
222
333
Unicode char 163890  = 𨀲
Unicode char 1114111 = 􏿿
</textarea>
<br>
<input type="button" value="Save" onclick='Save("User File.txt", document.getElementById("User_Text").value)'>
<input type="file" onchange='Load(this, "User_Text", "alert(reader.result); Test(reader.result)")'>

<br><br>
:::Simple Load::: <input type="file" onchange='Load(this, "", "Output = reader.result; alert(Output); Test(Output)")'>

<br><br>
<img id="User_Image" style="width:100%;  max-width:150px;" src="https://i.imgur.com/FHjzFv3.jpg">
<br>
<input type="button" value="Show src" onclick='document.getElementById("User_Text").value = document.getElementById("User_Image").getAttribute("src")'>
Load reduced: <input type="file" onchange='Load(this, "User_Image", "", "Shrink")'>
<br><br>
- "Shrink" option reduces the image base64 data by using CSS "max-width" or "max-height" properties!
<br><br>
- "Right click" the image and open it in a "new tab" to see its real size!
<br><br>
Load without reducing: <input type="file" onchange='Load(this, "User_Image")'>
<br><br>
Call functions with returned values: 
<input type="file" onchange='Load(this, "User_Image", "Change_3(reader.result); Change_2(Reduced_Image)", "Shrink")'>
<br><br>
Image 2: <br>
<img id="User_Image_2"> <br><br>
Image 3:<br>
<img id="User_Image_3">

<br><br>
<audio id="User_Audio" controls src="https://www.w3schools.com/html/horse.mp3"> </audio>
<br>
<input type="button" value="Show src" onclick='document.getElementById("User_Text").value = document.getElementById("User_Audio").getAttribute("src")'> 
Load Audio: <input type="file" onchange='Load(this, "User_Audio")'>

<br><br>
<video id="User_Video" width="400" controls src="https://www.w3schools.com/html/mov_bbb.mp4"> </video>
<br>
<input type="button" value="Show src" onclick='document.getElementById("User_Text").value = document.getElementById("User_Video").getAttribute("src")'> 
Load Video\Audio: <input type="file" onchange='Load(this, "User_Video")'>

<br><br>
"src" is short for "source".
<br><br>
- ".getAttribute('src' )" returns src as is, without being resolved to absolute URL: <br><br>
Example: "zzz_ Required Files/image.jpg" 
<br><br>
- ".src" returns the resolved src, the absolute URL: <br><br>
Example: "https://www.example.com/zzz_ Required Files/image.jpg" <br><br>
Example: "file:///E:/FolderX/FolderY/FolderZ/zzz_ Required Files/image.jpg" <br><br>
<br><br>

<script>

function Test(m) {    //____________________________

alert("_ Test Function Executed _" + "\n\n" + m);

}

function Change_2(data){     //_____________________

document.getElementById("User_Image_2").src = data;

}

function Change_3(data){     //_____________________

document.getElementById("User_Image_3").src = data;

}

function Save(filename, text) {    //_________________________ v1.0 ______________________________

var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);

element.style.display = 'none';
document.body.appendChild(element);

element.click();

document.body.removeChild(element);

}

function Load(input, el, Task, Options){    //__________________ v1.2 _____________________________

if (Options === undefined){var Options = ""}

var file = input.files[0];

var reader = new FileReader();

if ([undefined, ""].indexOf(el) === -1){    //if "el" is not undefined and blank
var El_NodeName = document.getElementById(el).nodeName}

	//alert(El_NodeName);

	if ([undefined, ""].indexOf(el) !== -1){    //if "el" is undefined or blank

	reader.readAsText(file);

	reader.onload  = function(){eval(Task)};

	}else if (["IMG", "AUDIO", "VIDEO"].indexOf(El_NodeName) !== -1){    //if "El_NodeName" is "IMG" or "AUDIO" or "VIDEO"

	document.getElementById(el).src = "";

	reader.readAsDataURL(file);

		reader.onload = function(){

			if (Options.match(/(^|\s)Shrink(\s|$)/i)){    //"|" or, "^" start of line, "$" end of line, "\s" match white spaces (spaces, tabs, new lines), "i" turns regex case sensitive off

			var T_img = document.createElement('img');

				T_img.onload = function(){

				var Real_Width  = T_img.width;
				var Real_height = T_img.height;

				document.body.appendChild(T_img);    //The img element will be resized to the max width\height set by user

				var Max_Width  = T_img.width;
				var Max_height = T_img.height;

				document.body.removeChild(T_img);    //remove the appended img element

					//alert("Max_ " + Max_Width + " x " + Max_height + " \n\nReal_ " + Real_Width + " x " + Real_height);

					if(Real_Width <= Max_Width && Real_height <= Max_height){

					var Reduced_Image = reader.result;

					}else{

						//alert("img Will be reduced");

					// create an off-screen canvas
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');

					// set its dimension to target size
					canvas.width  = Max_Width;
					canvas.height = Max_height;

					// draw source image into the off-screen canvas:
					ctx.drawImage(T_img, 0, 0, Max_Width, Max_height);

					// encode image to data-uri with base64 version of compressed image
					var Reduced_Image = canvas.toDataURL('image/jpeg');
					}

				document.getElementById(el).src = Reduced_Image;
				eval(Task);
				};

			T_img.style.maxWidth  = document.getElementById(el).style.maxWidth;

			T_img.style.maxHeight = document.getElementById(el).style.maxHeight;

			T_img.src = reader.result;


			}else{document.getElementById(el).src = reader.result; eval(Task)}

		};

	}else{

	document.getElementById(el).value = "Please Wait!!! (Reading and Loading File)";

	reader.readAsText(file);

	reader.onload  = function(){document.getElementById(el).value = reader.result; eval(Task)};

	}

reader.onerror = function(){alert(reader.error); eval(Task)};

}

</script>

More examples on getting src (source):

<!DOCTYPE html>

<img id="user_image" src="zzz_ Required Files/image.jpg" >

<img id="user_image_2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAYAAAB2HjRBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAfSURBVDhPY1Ta6POfgUzARKY+sLZRzSSG3miA0TPAALRCAjiN0NO6AAAAAElFTkSuQmCC" >

<br><br>
"src" is short for "source".
<br><br>
- ".getAttribute('src' )" returns src as is, without being resolved to absolute URL: <br><br>
Example: "zzz_ Required Files/image.jpg" 

<br><br>
- ".src" returns the resolved src, the absolute URL: <br><br>
Example: "https://www.example.com/zzz_ Required Files/image.jpg" <br><br>
Example: "file:///E:/FolderX/FolderY/FolderZ/zzz_ Required Files/image.jpg" <br><br>

<script>
alert(document.getElementById("user_image").getAttribute("src"));
alert(document.getElementById("user_image").src);

alert(document.getElementById("user_image_2").getAttribute("src"));
alert(document.getElementById("user_image_2").src);
</script>

Sunday, September 17, 2023

[JavaScript] Get Locale HourCycle (Hour Format)[ChatGPT]

Wow! ChatGPT helped me create a JavaScript code that I couldn't find while searching on Google!

The code returns the locale HourCycle (Hour Format).

This is Fantastic indeed!

Test code below (Click here)

<!DOCTYPE html>

<script>

	//The code to get locale HourCycle was suggested\created by ChatGPT

alert(    //"[]" is for Browser Locale _ "navigator.language" is for Page Locale

"Page Locale _ "    + Intl.DateTimeFormat(navigator.language, { hour: 'numeric'}).resolvedOptions().hourCycle  +  "\n\n" +

"Browser Locale _ " + Intl.DateTimeFormat([], { hour: 'numeric'}).resolvedOptions().hourCycle  +  "\n\n" +

"en-US _ " + Intl.DateTimeFormat("en-US", { hour: 'numeric'}).resolvedOptions().hourCycle   +  "\n\n" +

"en-CA _ " + Intl.DateTimeFormat("en-CA", { hour: 'numeric'}).resolvedOptions().hourCycle   +  "\n\n" +

"en-IE _ " + Intl.DateTimeFormat("en-IE", { hour: 'numeric'}).resolvedOptions().hourCycle   +  "\n\n" +

"en-GB _ " + Intl.DateTimeFormat("en-GB", { hour: 'numeric'}).resolvedOptions().hourCycle   +  "\n\n" +

"pt-PT _ " + Intl.DateTimeFormat("pt-PT", { hour: 'numeric'}).resolvedOptions().hourCycle   +  "\n\n" +

"ja-JP _ " + Intl.DateTimeFormat("ja-JP", { hour: 'numeric'}).resolvedOptions().hourCycle   +  "\n\n" +

"ar-SA _ " + Intl.DateTimeFormat("ar-SA", { hour: 'numeric'}).resolvedOptions().hourCycle   +  "\n\n" +

             Intl.DateTimeFormat().resolvedOptions().hourCycle           +  "\n\n" +

             Intl.DateTimeFormat([]).resolvedOptions().hourCycle         +  "\n\n" +

             Intl.DateTimeFormat("en-US").resolvedOptions().hourCycle    +  "\n\n" +

             Intl.DateTimeFormat().resolvedOptions().timeZone            +  "\n\n" +

"");

</script>

Friday, September 15, 2023

[HTML - CSS] Prevent Table Cell Width To Fit Its Content!

Test code below (Click here)

<!DOCTYPE html>

<!-- The above line is the HTML5 doctype declaration used by most websites nowadays! (Recommended) -->

<!-- The code below prevents small texts\elements\contents in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<style> html, body {width:100%; height:100%; margin:0px; background-color:silver;} </style>
<table style="width:100%; height:100%; margin:0px; padding:10px; text-align:center; background:red; table-layout:fixed;">
<!-- "table-layout:fixed;" prevents Table Cell "<td>" width to fit its content -->
<tr> <td style="background:green;"> <!-- "Table" in use because it can vertically center "Div" elements -->

<div style="background:blue; overflow:auto;">
<!-- "overflow:auto;" adds scrollbars (if necessary) to see the rest of the content -->

ABCDE_12345<br>
ABCDE_12345_ABCDE_12345_ABCDE_12345<br>
ABCDE_12345_ABCDE_12345_ABCDE_12345_ABCDE_12345<br>
<br>

	<div style="text-align:left; background-color:pink; display:inline-block;">
	ABCDE_12345<br>
	ABCDE_12345_ABCDE_12345_ABCDE_12345<br>
	ABCDE_12345_ABCDE_12345_ABCDE_12345_ABCDE_12345<br>
	</div>

</div>
<br>

<textarea style="width:90%; height:30vh;" wrap="off">
Text Area Element
</textarea>

</td></tr></table>

Straight Tips

jQuery

elevateZoom (Requires jQuery)

Microsoft Store (Donation)

Facebook Messenger (Donation)

Activation Code - Donation (Multiple Options)

Request Web\PHP\JavaScript\HTML Project !

Advertise On This Blog!

Ads (Reserved)

Monday, April 21, 2025

[JavaScript] Real and Fake Multi-Thread. (Prevent Loop From Freezing The Browser)

Saturday, November 16, 2024

[JavaScript] Wait Return Value from Async Functions

Friday, November 15, 2024

[JavaScript] Wait Sleep() Function

Thursday, November 30, 2023

[JavaScript] Obfuscation is Not Security. (Find Almost Anything From Obfuscated Scripts)

Wednesday, November 1, 2023

[JavaScript] Save and Load File. (Text, Image, Audio and Video)

Sunday, September 17, 2023

[JavaScript] Get Locale HourCycle (Hour Format)[ChatGPT]

Friday, September 15, 2023

[HTML - CSS] Prevent Table Cell Width To Fit Its Content!

ADS - Multi Share Calculator