Straight Tips

elevateZoom (Requires jQuery)

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>

Tuesday, July 18, 2023

[HTML - CSS] Vertical Center (Center Vertically)

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:green;} </style>
<table style="width:100%; height:100%; margin:0px; padding:10px; text-align:center; table-layout:fixed;">
<!-- "table-layout:fixed;" prevents Table Cell "<td>" width to fit its content -->
<tr> <td> <!-- "Table" in use because it can vertically center "Div" elements -->

<span>I'm vertically/horizontally centered!</span>
<br>
<span>I'm vertically/horizontally centered!</span>
<br>
<textarea style="width:100px; height:30vh;"> </textarea>
<textarea style="width:100px; height:30vh;"> </textarea>

<div style="width:100px; height:30vh; background-color:red; display:inline-block;"> </div>
<div style="width:100px; height:30vh; background-color:red; display:inline-block;"> </div>

<div> Div Test </div>

<div style="height:30vh; background:yellow; 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>

<br>
</div>

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

Thursday, September 15, 2022

[JavaScript] Random Codes Generator! (Function)

www.StraightTips.blogspot.com

Length =

Random_Code(Function) v1.0: Test code below (Click here)

Friday, September 9, 2022

[JavaScript] Drag-Move and Resize any element with jQuery!

Test code below (Click here):

<!DOCTYPE html>

<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
setTimeout(() => {		//"setTimeout()" runs only once! (Ensures that all required scripts are already loaded, especially when injecting this code in browsers!)
	$(document).ready(function() {
	$( "[Resize]" ).resizable();
	$( "[Resize-Scaled]" ).resizable({aspectRatio:true});
	$( "[Drag-Move]" ).draggable();
	});
}, "1000");		//1000 milliseconds = 1 second
</script>

<div style="text-align:center; border:2px solid red; display:inline-block; color:red; overflow:hidden;" Resize Drag-Move>
	<div style="border:2px solid green; display:inline-block;" Drag-Move>
	<img width="50" src="https://i.imgur.com/FHjzFv3.jpg" Resize-Scaled>
	</div>
<p style="margin:5px;">Wonder Boss</p>
</div>

<div style="text-align:center; border:2px solid yellow; display:inline-block; color:yellow; background-color:grey; overflow:hidden;" Resize Drag-Move>
	<div style="border:2px solid green; display:inline-block;" Drag-Move>
	<img width="50" src="https://i.imgur.com/6yCTtRv.jpg" Resize-Scaled>
	</div>
<p style="margin:5px;">Johnny Bravo</p>
</div>

<div style="border:solid 2px red; display:inline-block; overflow:hidden;" Resize Drag-Move>
<p>Drag me around<br><br>Resize me</p>
</div>

<div style="border:solid 2px green; display:inline-block; overflow:hidden;" Resize Drag-Move>
<p>Drag me around<br><br>Resize me</p>
</div>

<div style="border:solid 2px blue; display:inline-block; overflow:hidden;" >
<p>You can't Drag me around<br><br>You can't resize me</p>
</div>

Straight Tips

jQuery

elevateZoom (Requires jQuery)

Facebook Messenger (Donation)

Activation Code - Donation (Multiple Options)

Request Web\PHP\JavaScript\HTML Project !

Advertise On This Blog!

ADS - Multi One Password

Ads (Reserved)