Straight Tips: 2018

Tuesday, November 20, 2018

JavaScript - Apply CSS Style In Scope

This method associates unique Ids to desired elements and then CSS Styles can be applied to them!

Test code here (Click)!

appendChild() in use:

<!DOCTYPE html>

<div>    <!-- _________________________________________________________ -->

<h2> 111111 </h2> <h2> 222222 </h2> <h2> 333333 </h2>
<h3> AAAAAA </h3> <h3> BBBBBB </h3> <h3> CCCCCC </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode;
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);
New_Style_El = document.createElement("style");
New_Style_El_Options = document.createTextNode('  [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:red;}  ');
New_Style_El.appendChild(New_Style_El_Options);
document.head.appendChild(New_Style_El);
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode;
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);
New_Style_El = document.createElement("style");
New_Style_El_Options = document.createTextNode('  [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:gold;}  ');
New_Style_El.appendChild(New_Style_El_Options);
document.head.appendChild(New_Style_El);
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode;
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);
New_Style_El = document.createElement("style");
New_Style_El_Options = document.createTextNode('  [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:blue;}  ');
New_Style_El.appendChild(New_Style_El_Options);
document.head.appendChild(New_Style_El);
</script>

</div>

document.write() in use:

<!DOCTYPE html>

<div>    <!-- _________________________________________________________ -->

<h2> 111111 </h2> <h2> 222222 </h2> <h2> 333333 </h2>
<h3> AAAAAA </h3> <h3> BBBBBB </h3> <h3> CCCCCC </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);      
document.write('<style> [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:red;} </style>');
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);      
document.write('<style> [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:Gold;} </style>');
</script>

</div>

<div>    <!-- _________________________________________________________ -->

<h2> 444444 </h2> <h2> 555555 </h2> <h2> 666666 </h2>
<h3> DDDDDD </h3> <h3> EEEEEE </h3> <h3> FFFFFF </h3>

<script>
Current_Script_Tag_in_Execution = document.getElementsByTagName('script');
Current_Script_Tag_in_Execution = Current_Script_Tag_in_Execution[Current_Script_Tag_in_Execution.length - 1];
Current_Script_Tag_in_Execution_Parent = Current_Script_Tag_in_Execution.parentNode
if (typeof El_Unique_Id_Count === "undefined") {El_Unique_Id_Count = 0} else {El_Unique_Id_Count++};
Current_Script_Tag_in_Execution_Parent.setAttribute("El_Unique_Id", El_Unique_Id_Count);      
document.write('<style> [El_Unique_Id="' + El_Unique_Id_Count + '"] h2 {color:Blue;} </style>');
</script>

</div>

Keywords:
JavaScript - Apply CSS Style In Scope
JavaScript - Elements Unique Id

Monday, November 19, 2018

JavaScript - Static Variables\Objects For Functions (IIFE Alternative)

Manually associate unique "Global_Static_Objects" to functions alternative! (Click here)

Automatically associate unique "Global_Static_Objects" to functions alternative by pre-editing scripts! (Click here)

Test code here (Click)!

<script>

var Static = [];                    //(just for test) "var" declares "Static" variable as global object
Static.x = "xxx Main Static";

var Local = [];                     //(just for test) "var" declares "Local" variable as global object
Local.x = "xxx Main Local";


var Test = (function () {     //_____________ Test(Function) _______________

var Static = [];             //"var" declares "Static" variable as static object in this function
Static.x = 1;

  return function () {

  var Local = [];           //"var" declares "Local" variable as local object in this function

  if (typeof Local.x === "undefined") {Local.x = 0};

  alert(Static.x++ + " - " + Local.x++);

  };

})();                      //_____________ Test(Function) - End _______________


Test(); Test(); Test(); Test();

alert(Static.x + " - " + Local.x);

alert(Test);

</script>

Keywords:
JavaScript - Static Variables\Objects For Functions (IIFE Alternative)
JavaScript - Static Variables For Functions (IIFE Alternative)
JavaScript - Static Objects For Functions (IIFE Alternative)

Sunday, November 18, 2018

JavaScript - String Swap (No Delimiters Required)

This method (click here) requires #@ and #! Delimiters!

The below method does not require delimiters:

Test code here (Click)!

Example1

<!DOCTYPE html>

<script>

String = "ABCD"; 

Replaced = String.replace(/./ig, function(AllMatch, Match1, Match2, MatchX, OffsetPosition, SourceString){

alert(AllMatch + " - " + Match1 + " - " + Match2 + " - " + MatchX + " - " + OffsetPosition + " - " + SourceString);

if (AllMatch === "A") {return "B"};
if (AllMatch === "B") {return "A"};
if (AllMatch === "C") {return "D"};
if (AllMatch === "D") {return "C"};

return AllMatch;

});

alert("" +
String   + " = String"   +  "\n"  +
Replaced + " = Replaced" +
"");

</script>

Example2

<!DOCTYPE html>

<script>

String = "Joe Ana Marcus Fiana"; 

Replaced = String.replace(/Joe|Ana|Marcus|Fiana/ig, function(AllMatch, Match1, Match2, MatchX, OffsetPosition, SourceString){

alert(AllMatch + " - " + Match1 + " - " + Match2 + " - " + MatchX + " - " + OffsetPosition + " - " + SourceString);

if (AllMatch === "Joe") {return "Ana"};
if (AllMatch === "Ana") {return "Joe"};
if (AllMatch === "Marcus") {return "Fiana"};
if (AllMatch === "Fiana") {return "Marcus"};

return AllMatch;

});

alert("" +
String   + " = String"   +  "\n"  +
Replaced + " = Replaced" +
"");

</script>

Example 3 - using Matched Subpatterns

<!DOCTYPE html>

<script>

String = "Joe Ana Marcus Fiana"; 

Replaced = String.replace(/(Joe)|(Ana)|(Marcus)|(Fiana)/ig, function(AllMatch, Match1, Match2, Match3, Match4, OffsetPosition, SourceString){

alert(AllMatch + " - " + Match1 + " - " + Match2 + " - " + Match3 + " - " + Match4 + " - " + OffsetPosition + " - " + SourceString);

if (Match1) {return "Ana"};
if (Match2) {return "Joe"};
if (Match3) {return "Fiana"};
if (Match4) {return "Marcus"};

return AllMatch;

});

alert("" +
String   + " = String"   +  "\n"  +
Replaced + " = Replaced" +
"");

</script>

Keywords:
JavaScript - String Swap (No Delimiter Required)
JavaScript - Word Swap (No Delimiter Required)
JavaScript - Text Swap (No Delimiter Required)
JavaScript - Replace Multiple Strings At Once

Friday, November 16, 2018

JavaScript - Static Objects For Functions

The code below is based on this code (Click for more infos)!

Test code here (Click)!

- Place functions inside the "<textarea>" element!
- Add "@@@_Create_Local_Static_Objects_@@@" inside each function and the code will automatically create a "Static" and "Local" objects for them!

The functions will be Pre-Edited then they will be written to the document (DOM)!

<!DOCTYPE html>

<textarea id="User_Script_Content">       <!-- ______________ (User_Script_Content - [TextArea] - Start) ___________ -->

        <script>

        var Local  = []; Local.x  = "xxx Main Local  xxx";
        var Static = []; Static.x = "xxx Main Static xxx";


        f(); f(); f(); f(); j(); j(); j(); j();
        f(); f(); f(); f(); j(); j(); j(); j();

        alert(Static.x + " - " + Local.x);


        function f() {    //_____ f(function) _____

        // The below line is required in order to a "Local" and "Static" objects be created for this function:
        @@@_Create_Local_Static_Objects_@@@

        if (typeof Static.x === "undefined") {Static.x = 0};
        Static.x++

        if (typeof Local.x === "undefined") {Local.x = 0};
        Local.x++

        alert("f() => " + Static.x + " - " + Local.x);

        };


        function j() {    //_____ j(function) _____

        // The below line is required in order to a "Local" and "Static" objects be created for this function:
        @@@_Create_Local_Static_Objects_@@@

        if (typeof Static.x === "undefined") {Static.x = 0};
        Static.x++

        if (typeof Local.x === "undefined") {Local.x = 0};
        Local.x++

        alert("j() => " + Static.x + " - " + Local.x);

        };

        </script>

</textarea>    <!-- ______________________ (User_Script_Content - [TextArea] - End) ____________________________ -->

<script>       <!-- ______________________ (User_Script_Content - [Pre-Edition] - Start) _______________________ -->

      //____ Get text from "User_Script_Content" <textarea> element! ____

User_Script_Content = document.getElementById("User_Script_Content").value;


      //____ Create "Local" and "Static" Objects ____

if (typeof Global_Static_Object_Next === "undefined") {Global_Static_Object_Next = 0};

User_Script_Content = User_Script_Content.replace(/@@@_Create_Local_Static_Objects_@@@/ig, function(){Global_Static_Object_Next++; return '' +
'if (typeof Global_Static_Object_' + Global_Static_Object_Next + ' === "undefined") {Global_Static_Object_' + Global_Static_Object_Next + ' = []};  \n'  + 
'var Static = Global_Static_Object_' + Global_Static_Object_Next + '; \n'      +
'var Local = [];'         +
''});

alert(User_Script_Content);


      //____ Write to document (DOM)! ____

document.write(User_Script_Content);

</script>   <!-- ____________________________ (User_Script_Content - [Pre-Edition] - End) ____________________________ -->

keyword:
JavaScript - Static Objects For Functions
JavaScript - Local Objects For Functions
JavaScript - Pre-Edit Script
JavaScript - Script Pre-Edition
JavaScript - Pre-Edit Html
JavaScript - Html Pre-Edition

Wednesday, November 14, 2018

JavaScript - Alternative for Functions Static Variables!

This method basically allows you to use "Local" object to store functions local values and "Static" object to store functions static values!

To create the functions "Static" objects, use unique global variable names based on the function name itself such as "Function_Test_Function", "Function_ScreenGet_Function", "Function_Calculate8776_Function", "Class_Function_Test_Class", etc, etc, etc ...!

<!DOCTYPE html>

<script>

var Local = [];     //(just for testing): "var" declares "Local" variable as Global and turns it into an object (= [])
var Static = [];    //(just for testing): "var" declares "Static" variable as Global and turns it into an object (= [])

Local.x = "xxx Main Local xxx"; Static.x = "xxx Main Static xxx"; Local.y = "yyy Main yyy";

Test(); Test(); Test(); Test();

alert(Local.x + " - " + Static.x + " - " + Local.y + " - " + Function_Test_Function.x);

function Test () {      //_________ Test(Function) _____________

//Creating a Global "Function_Test_Function" object! (to store this function static vars values!)
if (typeof Function_Test_Function === "undefined") {Function_Test_Function = []};

var Local = [];        //"var" declares "Local" variable as local and turns it into an object (= [])

var Static = Function_Test_Function;    //"var" declares "Static" variable as local then the reference of "Function_Test_Function" object is stored inside it!

Local.x = "xxx f() xxx ";

if (typeof Static.x === "undefined") {Static.x = 0};
Static.x++

if (typeof Local.y === "undefined") {Local.y = 0};
Local.y++

alert(Local.x + " - " + Static.x + "/" + Function_Test_Function.x + " - " + Local.y);

};


</script>

When a function returns, javascript automatically clears all its "Local" variables values!

If you need a value to be remembered between the function calls, you need to store that value in a "Static" variable of that same function!

Unfortunately, javascript does not support functions "Static" variables! (Most languages that I know support it!)

So, an alternative is:

- lets say your function name is "Test"

- inside the function, create a "global" object based on your function's name, example: "Function_Test_Function"

- inside the function, declare "Static" variable as local object by passing the reference of "Function_Test_Function" object inside it!

- now you can store static values of your function through the local "Static" object, example: Static.x, Static.y, Static.data, etc, etc

note that:

- using "Static.x" or "Function_Test_Function.x" is the same thing, but the former is more practical to use then the latter!

- both "Static" or "Function_Test_Function" variables reference the same object stored in the ram memory!

- "Static" or "Function_Test_Function" variables don't contain the object's values, they contain only a reference to an object stored in the memory!

Keywords:
JavaScript - Alternative for Functions Static Variables!

Wednesday, September 12, 2018

JavaScript - String Swap (Replace Multiple Strings At Once)

<!DOCTYPE html>

<script>

var String = " aaa    #@ aaa #!  xxx yyy  bbb  aaa   aaa"; 
var Backup = String;

// ________________________________________

String = String.replace(/#/g, "#_");
//"g" to replace all occurrences
//Ensures that the "String" will contain no "#@" or "#!"
//any "#@" or "#!" from the string will be replaced to "#_@" and "#_!"

var Start = "#@";
var End   = "#!";

var Condition = "(?!#!)(?=(.(?!#!))*?(#@|$))";
//the condition above ensures that only characters\strings not enclosed by "#@ #!" will be replaced! 
//(?!#!), means that the char\string to be replaced must not contain "#!" at its right!
//(.(?!#!))*?, means that regex must match any character that does not have "#!" at its right,
//"*?(#@|$)" until the next "#@" or end of the string is found!
//"?=" is a condition, replacement only occurs if the conditional string is found at right!
//"?!" is a condition, replacement only occurs if the conditional string is not found at right!

String = String.replace(RegExp("a" + Condition, "g"), Start + "b" + End);
String = String.replace(RegExp("b" + Condition, "g"), Start + "a" + End);
String = String.replace(RegExp("x" + Condition, "g"), Start + "y" + End);
String = String.replace(RegExp("y" + Condition, "g"), Start + "x" + End);

//"#_@" = literal "#@" and "#_!" = literal "#!"
String = String.replace(RegExp("#_@" + Condition, "g"), Start + "#_!" + End);
String = String.replace(RegExp("#_!" + Condition, "g"), Start + "#_@" + End);

String = String.replace(/#@(.*?)#!/g, "$1");
//"g" to replace all occurrences
//remove any extra "#@" and "#!" added

String = String.replace(/#_/g, "#");
//"g" to replace all occurrences
//convert back any "#_" to "#"

// ________________________________________

alert(Backup + "\n" + String);

</script>

Keywords:
JavaScript - String Swap
JavaScript -Replace Multiple Strings At Once

Monday, February 26, 2018

JavaScript - Non-RegEx String Replace Function

This is a Non-RegEx String Replace Function!

All RegEx special characters from "Match" and "Replace" parameters are automatically escaped!

Some people alerted me that v1.0 is not compatible with Internet Explorer, so I decided to release v1.1!
(v1.0 is not compatible because Internet Explorer does not support functions default parameters values!)

v1.1 (Compatible with Internet Explorer)

<script>

function StringReplace(String, Match, Replace, Options) {   //__________________ StringReplace(Function) v1.1 ___________________

//arguments (parameters) work as local variables inside functions!

//v1.1 is compatible with Internet Explorer (IE)
//v1.0 is not compatible because IE does not support functions default parameters  values
//("" = Empty String) - (Alternative to default parameters  values)
if (String === undefined) {String = ""};
if (Match === undefined) {Match = ""};
if (Replace === undefined) {Replace = ""};
if (Options === undefined) {Options = ""};

//Escape RegEx "Match" variable special characters ($& means the whole matched string)
//Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Match = Match.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

//Escape RegEx "Replace" variable special character ($$ = literal $)
//Necessary in order to avoid backreferences such as $1, $2, $&, etc
Replace = Replace.replace(/\$/g, "$$$$")

String = String.replace(RegExp(Match, Options), Replace);

return String;

};

//____________________________ Function Above / Examples Below ____________________________


UserString = "AAA-aaa_BBB-bbb_CCC-ccc_\\ \\\\ \\\\\\ / // /// _ . .. ... * ** ***";

UserString2 = "SpecialTest  .*+?^${}()|[]\\  SpecialTest";

result = "";

result += StringReplace(UserString2, ".*+?^${}()|[]\\", "$& $$& $$$&", "gi")   + "\n"   ;
result += StringReplace(UserString2, ".*+?^${}()|[]\\", "$1 $$2 $$$3", "gi")   + "\n\n"   ;

result += StringReplace(UserString, "\\", "@", "gi")   + "\n"   ;
result += StringReplace(UserString, "/", "@", "gi")    + "\n"   ;
result += StringReplace(UserString, ".", "@", "gi")    + "\n"   ;
result += StringReplace(UserString, "*", "@", "gi")    + "\n"   ;
result += StringReplace(UserString, "A", "@", "gi")    + "\n"   ;
result += StringReplace(UserString, "B", "@", "gi")    + "\n"   ;
result += StringReplace(UserString, "C", "@", "gi")    + "\n"   ;

alert(result);

</script>

v1.0 (Not compatible with Internet Explorer)

<script>

function StringReplace(String = "", Match = "", Replace = "", Options = "") {   //__________________ StringReplace(Function) v1.0 ___________________

//arguments (parameters) work as local variables inside functions!

//Escape RegEx "Match" variable special characters ($& means the whole matched string)
//Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Match = Match.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

//Escape RegEx "Replace" variable special character ($$ = literal $)
//Necessary in order to avoid backreferences such as $1, $2, $&, etc
Replace = Replace.replace(/\$/g, "$$$$")

String = String.replace(RegExp(Match, Options), Replace);

return String;

};

//____________________________ Function Above / Examples Below ____________________________


UserString = "AAA-aaa_BBB-bbb_CCC-ccc_\\ \\\\ \\\\\\ / // /// _ . .. ... * ** ***";

UserString2 = "SpecialTest  .*+?^${}()|[]\\  SpecialTest";

result = "";

result += StringReplace(UserString2, ".*+?^${}()|[]\\", "$& $$& $$$&", "gi")   + "\n"   ;
result += StringReplace(UserString2, ".*+?^${}()|[]\\", "$1 $$2 $$$3", "gi")   + "\n\n"   ;

result += StringReplace(UserString, "\\", "@", "gi")   + "\n"   ;
result += StringReplace(UserString, "/", "@", "gi")    + "\n"   ;
result += StringReplace(UserString, ".", "@", "gi")    + "\n"   ;
result += StringReplace(UserString, "*", "@", "gi")    + "\n"   ;
result += StringReplace(UserString, "A", "@", "gi")    + "\n"   ;
result += StringReplace(UserString, "B", "@", "gi")    + "\n"   ;
result += StringReplace(UserString, "C", "@", "gi")    + "\n"   ;

alert(result);

</script>

Keywords:
JavaScript - Non-RegEx String Replace Function
JavaScript - Non-RegEx StringReplace() Function
JavaScript - Non-RegEx StringReplace(Function)

Thursday, February 15, 2018

PHP\JavaScript - 1 Layout for Several Pages (Basic)

"index.html" contains the layout! (Download All Files)

- Url "Folder-Path/index.html" loads "Home.html"

- Url "Folder-Path/index.html?Page=About.html" loads "About.html"

- Url "Folder-Path/index.html?Page=Contact.html" loads "Contact.html"

- Url "Folder-Path/index.html?Page=DontExist.html" returns "Page does not exist or could not be loaded!"

Everything works great, the only problem is that:

- The website will depend on JavaScript (JavaScript must be enabled!)
- If JavaScript is not enabled, the website warns user that JavaScript must be enabled!

- Deprecated "Synchronous XMLHttpRequest" is in use (Script only continues after server response)

index.html = layout (JavaScript Ajax Get + Url parameters Values)

<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
</head>
<body>

<script>

//If JavaScript from the user Browser is disabled, "JavaScriptWarn" element will not be hidden!
document.write("<style> #JavaScriptWarn {display: none;} </style>");

//Without "g" option, only the First occurrence and its subpatterns will be matched!
//.*, means, find 0 or more characters - ?, means, until next & or end of line ($) is found!
Page = document.URL.match(/\?Page=(.*?)(&|$)/i);

if (Page === null) {Page = "Home.html"} else {Page = Page[1]};  //[1], returns first subpattern only

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {PageMainContent = this.responseText}
else {PageMainContent = "<p>Page does not exist or could not be loaded!</p>"}};
xhttp.open("GET", Page, false); //false = halt code execution (wait for server response)
xhttp.send();

</script>

<h1>Testing 1 Layout for all Pages</h1>

<a style=" margin-right: 30px;" href="index.html">Home</a>
<a style=" margin-right: 30px;" href="index.html?Page=About.html">About</a>
<a style=" margin-right: 30px;" href="index.html?Page=Contact.html">Contact</a>
<a style=" margin-right: 30px;" href="index.html?Page=DontExist.html">Don't Exist Page</a>
<a style=" margin-right: 30px;" href="index.html?Page=About.html&test=xxx&down=no">1</a>
<a style=" margin-right: 30px;" href="index.html?test=xxx&Page=About.html&down=no">2</a>

<script> document.write(PageMainContent); </script>

<!-- The warning bellow only shows up if JavaScript from user Browser is disabled! -->
<p id="JavaScriptWarn">This website requires JavaScript in your Browser to be enabled (Please, enable JavaScript!)!</p>

<footer><strong>Copyright © blah blah blah blah</strong></footer>

</body>
</html>

Home.html

<h3> Home Page  </h3>

<pre>
Home Home Home Home Home Home Home Home Home 
Home Home Home Home Home Home Home Home Home 
Home Home Home Home Home Home Home Home Home 
Home Home Home Home Home Home Home Home Home 
</pre>

About.html

<script> document.title += " - About"; </script>

<h3> About Page </h3>

<pre>
About   About  About  About  About  About  About  
About   About  About  About  About  About  About      
About   About  About  About  About  About  About      
</pre>

Contact.html

<script> document.title += " - Contact"; </script>

<h3> Contact Page </h3>

<pre>
Contact  Contact   Contact  Contact   Contact  Contact   Contact  Contact   
Contact  Contact   Contact  Contact   Contact  Contact   Contact  Contact    
Contact  Contact   Contact  Contact   Contact  Contact   Contact  Contact   
</pre>

________________ Old approach below ________________

(PHP - Notes): Your server or web hosting provider must support PHP scripts in order to work!

layout.html

<!DOCTYPE html>
<html>
<head>
<title>Windows Portable Apps</title>
</head>
<body>

<h1>Start ...!</h1>

<!-- @@@Content1@@@ -->

<!-- @@@Content2@@@ -->

<!-- @@@Content3@@@ -->

<p>End ...!</p>

<!-- @@@Content4@@@ -->

</body>
</html>

index.php (PHP + JavaScript)

<script>

layout = `<?php echo file_get_contents("layout.html"); ?>`;

layout = layout.replace("<title>Windows Portable Apps</title>", "<title>Home - PHP + Javascript</title>");

AddContent = `
<div>This is PHP + Javascript</div>
<div>This is PHP + Javascript 2</div>
<div>This is PHP + Javascript 3</div>
`; 
layout = layout.replace("<!-- @@@Content1@@@ -->", AddContent);

window.onload = function() {
//window.onload forces this function to be called after page load (DOM)

document.write(layout); //Since this line will be executed after page load (DOM), all the document will be re-written

document.close();   //prevents infinite load time (see notes bellow)
//Some browsers take a guess and seem to call document.close() at some later time (IE?)
//others (Firefox, Safari) will keep the document open, which might cause some unusual behaviour.
};

</script>

index.php (PHP only)

<?php

$layout = file_get_contents("layout.html");

$layout = str_replace("<title>Windows Portable Apps</title>","<title>Home</title>",$layout);

$content1 = '
<div>This is Home Page </div>
<div> Home page Content </div>
';
$layout = str_replace("<!-- @@@Content1@@@ -->",$content1,$layout);

echo $layout;

?>

index.html (JavaScript only - Ajax Get)

<script>

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

layout = this.responseText;

layout = layout.replace("<title>Windows Portable Apps</title>", "<title>Home - PHP + Javascript</title>");

AddContent = `
<div>This is PHP + Javascript</div>
<div>This is PHP + Javascript 2</div>
<div>This is PHP + Javascript 3</div>
`; 
layout = layout.replace("<!-- @@@Content1@@@ -->", AddContent);

document.write(layout); //Since this line will be executed after page load (DOM), all the document will be re-written

document.close();   //prevents infinite load time (see notes bellow)
//Some browsers take a guess and seem to call document.close() at some later time (IE?)
//others (Firefox, Safari) will keep the document open, which might cause some unusual behaviour.
    
}};
xhttp.open("GET", "layout.html", true); //true = keep code execution (don't wait for server response)
xhttp.send();

</script>

index.html (JavaScript only - jQuery)

<!-- If you don't have jQuery on your website, load jQuery hosted by Google using the code below -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$.get( "layout.html", function( data ) {
//jQuery library (Required)
//Since this is a jQuery Shorthand Method, everything inside will be executed after page load (DOM)

data = data.replace("<title>Windows Portable Apps</title>", "<title>Home - Javascript</title>");

AddContent = `
<div>This is javascript</div>
<div>This is javascript 2</div>
<div>This is javascript 3</div>
`; 
data = data.replace("<!-- @@@Content1@@@ -->", AddContent);

document.write(data);   //Since this line will be executed after page load (DOM), all the document will be re-written

document.close();   //prevents infinite load time (see notes bellow)
//Some browsers take a guess and seem to call document.close() at some later time (IE?)
//others (Firefox, Safari) will keep the document open, which might cause some unusual behaviour.
});

</script>

Keywords:
PHP\JavaScript - 1 Layout for Several Pages (Basic)

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)