[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>

[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>

[JavaScript] Random Codes Generator! (Function)

www.StraightTips.blogspot.com


Length =

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

[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>

Simple Online HTML Editor with Note Box!

Temporary Notes! These notes may temporarily survive on browser close\reopen if this tab is "Pinned" or by using "Restore Previous Session" option!
<!DOCTYPE html> <!-- The above line is the HTML5 doctype declaration used by most websites nowadays! (Recommended) --> <style> div {border:2px solid green;} p {border:2px solid blue;} </style> <div id="el_1"> 1<br> 2<br> 3<br> <p>4</p> </div> <script> x = 150 + 150; alert( "1 + 2 = " + (1 + 2) + "\n" + "\n" + "x = " + x + "\n" + ""); </script> (Tab Line Wrapping Test)
For a more advanced "Note Boxes + Offline Html Editor" (Click Here)

Online Text Crypter - Encrypt\Decrypt Messages In Real Time!

"Cryption Key" can either be Password, Passphrase, Passcode, etc!

(Click Here)
100% JavaScript End-to-end Cryption (E2EC) a.k.a End-to-end Encryption (E2EE)

Create MSI, EXE, MSIX or APPX installer for a Portable App and Submit to Microsoft Store! (Advanced Installer)

First of all, yes, Microsoft makes it hard to impossible for developers to submit and publish their apps at Microsoft Store!

Saying that, the most important thing to know is, for traditional Win32 Apps, developers should\must submit "MSI" or "EXE" installers, otherwise, developers should submit "MSIX" or "APPX" installers!

Unfortunately, most traditional Win32 Apps from "Microsoft Web Store", in which are installed with "MSIX" or "APPX" packages, tend to don't work properly, that's why most developers don't make their traditional Win32 Apps available at "Microsoft Web Store"!

Alternatively, traditional Win32 Apps can be submitted to "Microsoft App Store", in which allows traditional Win32 Apps to be installed with "MSI" or "EXE" packages, allowing them to work properly and as intended!

Microsoft Web Store: https://www.microsoft.com
Microsoft App Store: https://apps.microsoft.com

Unfortunately, although "MSI" and "EXE" apps can be marked as "Paid", the price can't be set and developers can't sell them directly from Microsoft Store!

To know more, download all the files from the above video through the link below:
https://www.mediafire.com/file/d739h1jcpsi82q2/Submit_App_to_Microsoft_Store.rar/file

#AdvancedInstaller Advanced Installer
#MSI #EXE #MSIX #APPX #Installer
MSI EXE MSIX APPX Installer