JavaScript - Execute JS codes after DOM or Page load

 

In the most cases, some CSS/JavaScript/jQuery codes require only "DOM" to be completely loaded in order to work properly!

Document Object Model (DOM) load:

   - When HTML document has been completely loaded and parsed
   - Does not include stylesheets, images, and subframes loads!

Page load:

 - When HTML document has been completely loaded and parsed
 - Includes stylesheets, images, and subframes loads!

 From all the alternatives demonstrated below,  "JQuery" is the recommended one because it allows multiple onload calls!

DOM onload - with anonymous functions (jQuery)
Execute anonymous Functions after Document Object Model (DOM) is fully loaded! <p> P _________________________________________________________________________ </p> <!-- 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> <p> P0 _________________________________________________________________________ </p> <script> /* Instruct jQuery to execute the anonymous function below after DOM is fully loaded */ $(function() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ }); </script> <p> P1 _________________________________________________________________________ </p> <script> /* Instruct jQuery to execute the anonymous function below after DOM is fully loaded */ $(function() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ }); </script> <p> P2 _________________________________________________________________________ </p> <script> alert("3") </script> <!-- "Alert 3" will be executed first, then "Alert 1" and "Alert 2" will be executed when DOM is fully loaded --> <p> P3 _________________________________________________________________________ </p>

DOM onload - with named functions (jQuery)
Execute named Functions after Document Object Model (DOM) is fully loaded! <p> P _________________________________________________________________________ </p> <!-- 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> <p> P0 _________________________________________________________________________ </p> <!-- Defining "Test1" and "Test2" JavaScript Functions --> <script> function Test1() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ } function Test2() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ } </script> <p> P1 _________________________________________________________________________ </p> <!-- Instruct jQuery to execute "Test1" function after DOM is fully loaded --> <script> $(Test1); </script> <p> P2 _________________________________________________________________________ </p> <!-- Instruct jQuery to execute "Test2" function after DOM is fully loaded --> <script> $(Test2); </script> <p> P3 _________________________________________________________________________ </p> <script> alert("3") </script> <!-- "Alert 3" will be executed first, then "Alert 1" and "Alert 2" will be executed when DOM is fully loaded -->

window onload - with anonymous functions (JavaScript)
<script> window.onload = function() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ /* (Limitation) This anonymous function will not be executed after page load, because there is another "window.onload" below */ } </script> <p> P1 _________________________________________________________________________ </p> <script> window.onload = function() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ /* (Limitation) Only this anonymous function will be executed after page load */ } </script> <p> P2 _________________________________________________________________________ </p> <script> alert("3"); </script> <!-- "alert 3" will be executed first, then "alert 2" ("alert 1" will not be executed) --> <p> P3 _________________________________________________________________________ </p>

window onload - with named functions (JavaScript)
<!-- Defining "Test1" and "Test2" JavaScript Functions --> <script> function Test1() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ } function Test2() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ } </script> <p> P1 _________________________________________________________________________ </p> <script> window.onload = Test1; </script> <!-- (Limitation) This function will not be executed after page load, because there is another "window.onload" below --> <p> P2 _________________________________________________________________________ </p> <script> window.onload = Test2; </script> <!-- (Limitation) Only this function will be executed after page load --> <p> P3 _________________________________________________________________________ </p> <script> alert("3"); </script> <!-- "alert 3" will be executed first, then "alert 2" ("alert 1" will not be executed) -->

body onload - with named functions (Html)
<!-- Defining "Test1" and "Test2" JavaScript Functions --> <script> function Test1() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ } function Test2() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ } </script> <p> P1 _________________________________________________________________________ </p> <body onload="Test1()"> <!-- (Limitation) Only this function will be executed after page load --> <p> P2 _________________________________________________________________________ </p> <body onload="Test2()"> <!-- (Limitation) This function will not be executed after page load, because there is already a "body onload" above --> <p> P3 _________________________________________________________________________ </p> <script> alert("3"); </script> <!-- "alert 3" will be executed first, then "alert 1" ("alert 2" will not be executed) -->

document onload - with anonymous functions (JavaScript)
<script> document.onload = function() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ } /* Tested on FireFox, Chrome, IE, Opera but did not work */ </script> <p> P1 _________________________________________________________________________ </p> <script> document.onload = function() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ } /* Tested on FireFox, Chrome, IE, Opera but did not work */ </script> <p> P2 _________________________________________________________________________ </p> <script> alert("3"); </script> <!-- only "alert 3" will be executed, "alert 1" and "alert 2" did not work --> <p> P3 _________________________________________________________________________ </p>

document onload - with named functions (JavaScript)
<!-- Defining "Test1" and "Test2" JavaScript Functions --> <script> function Test1() { alert("1"); /* Replace "alert("1");" with your JavaScript Code */ } function Test2() { alert("2"); /* Replace "alert("2");" with your JavaScript Code */ } </script> <p> P1 _________________________________________________________________________ </p> <script> document.onload = Test1; </script> <!-- Tested on FireFox, Chrome, IE, Opera but did not work --> <p> P2 _________________________________________________________________________ </p> <script> document.onload = Test2; </script> <!-- Tested on FireFox, Chrome, IE, Opera but did not work --> <p> P3 _________________________________________________________________________ </p> <script> alert("3"); </script> <!-- only "alert 3" will be executed, "alert 1" and "alert 2" did not work -->


Keywords:
JavaScript - Execute JS codes after DOM or Page load

CSS - Attribute and Negation Selectors

Negation selector: :not( )

If attribute contains a given string: *=  (Attributes such as Id, Class, Style, etc)

<style> /* Apply gold "dotted outline" to any elements inside body, except <li> tags */ body :not(li) {outline:5px dotted gold;} /* Apply Border to any Element in which its "Id" attribute contains "Apply" string */ [id*=Apply]{border:5px solid black;} /* Text color "yellow" to any Element in which its "Id" attribute does not contain "Apply" string */ Body *:not([id*=Apply]){color:yellow;} /* "Body *" must be used in order to work */ /* Orange background to any "div" element in which its "id" attribute contains "Apply" string */ div[id*=Apply] {background:orange !important;} /* Grey background to any "div" element in which its "id" attribute does not contain "Apply" string */ div:not([id*=Apply]) {background:grey !important;} /* Red background to any "p" element in which its "id" attribute contains "Apply" string */ p[id*=Apply] {background:Red !important;} /* Green background to any "p" element in which its "id" attribute does not contain "Apply" string */ p:not([id*=Apply]) {background:Green !important;} </style> <div id="1_Apply" style="background:red; width:50; height:50; float:left; margin:5px;"> Div </div> <div id="2_kjkkiApplyXffgg" style="background:green; width:50; height:50; float:left; margin:5px;"> Div </div> <div id="3_" style="background:blue; width:50; height:50; float:left; margin:5px;"> Div </div> <p id="4_Apply" style="clear:left;"> p1 </p> <p id="5_jhhApplyLkkjj"> p2 </p> <p id="6_"> p3 </p> <li id="7_ hhjjjApply"> Li </li>

*= CSS3 - chrome 4.0, Internet Explorer 7.0, Firefox 3.5, Safari 3.2, Opera 9.6
      (For this selector to work in IE8 and earlier, a <!DOCTYPE> must be declared.)

:not( ) CSS3 - chrome 4.0, Internet Explorer 9.0, Firefox 3.5, Safari 3.2, Opera 9.6


Keywords:
CSS - Attribute and Negation Selectors
CSS - Select any Element in which its "Id", "Class" or any other attribute contains or does not contain a given string

Blogger - Customize Cross-Columns

How to:

from the code below, replace any "_Id" with your Gadget Id (Click here: How to find a Gadget Id)

<style> /* Hide Gadget */ #HTML_Id { display: none; } /* Cross-Columns\Main Sections */ .tabs-outer, .tabs-cap-top, .tabs-cap-bottom{ background:transparent; border:0px; } /* Pages - Separate Tabs */ #PageList_Id a{border:0px;} #PageList_Id li{background:#2f2d2d; border:1px solid #424141; margin:2px;} /* Labels - Show Tabs instead List \ Remove borders */ #Label_Id li{display:inline;} #Label_Id a{border:0px;} </style>


Keywords:
Blogger - Customize Cross-Columns
Blogger - Customize Main Columns
Blogger - Pages and Labels as Tabs instead List

CSS - Selectors (Parent Children)

<style> #Example1 > *{border: 3px dashed black;} /* Selector ">" applies style only to "Example1" childrens */ #Example2 *{border: 3px dashed black;} /* Apply style to any element inside "Example2" */ </style> <div id="Example1" style="background:Yellow; width:250px; height:130; display:inline-block;"> Green is my Children <div style="background:green; width:200px; height:80; margin: auto;"> Yellow is my Parent <br> Blue is my Children <div style="background:blue; width:150px; height:30; margin: auto;"> Green is my parent </div> </div> Example 1 </div> <div id="Example2" style="background:Yellow; width:250px; height:130; display:inline-block;"> Green is my Children <div style="background:green; width:200px; height:80; margin: auto;"> Yellow is my Parent <br> Blue is my Children <div style="background:blue; width:150px; height:30; margin: auto;"> Green is my parent </div> </div> Example 2 </div>


Keywords:
CSS - Selectors (Parent Children)

CSS - Tag + #Id or .Class

 Tag + #Id:
<!-- Combining a "tag" + "id(#)" --> <style> p#d1, div#d2, h4#d3 {display:none;} </style> <!-- "display:none" Hides Selected Elements --> <p id="D1" style="background:red;">P 1111111111111</p> <p id="D2" style="background:green;">P 22222222222</p> <p id="D3" style="background:blue;">P 3333333333333</p> <div id="D1" style="background:green;">Div 11111111111111111</div> <div id="D2" style="background:red;">Div 22222222222222222</div> <div id="D3" style="background:blue;">Div 333333333333333333</div> <h4 id="D1" style="background:green;">h4 11111111111111111</h4> <h4 id="D2" style="background:red;">h4 22222222222222222</h4> <h4 id="D3" style="background:blue;">h4 333333333333333333</h4>

Tag + .Class:
<!-- Combining a "tag" + "class(.)" --> <style> p.d1, div.d2, h4.d3 {display:none;} </style> <!-- "display:none" Hides Selected Elements --> <p class="D1" style="background:red;">P 1111111111111</p> <p class="D2" style="background:green;">P 22222222222</p> <p class="D3" style="background:blue;">P 3333333333333</p> <div class="D1" style="background:green;">Div 11111111111111111</div> <div class="D2" style="background:red;">Div 22222222222222222</div> <div class="D3" style="background:blue;">Div 333333333333333333</div> <h4 class="D1" style="background:green;">h4 11111111111111111</h4> <h4 class="D2" style="background:red;">h4 22222222222222222</h4> <h4 class="D3" style="background:blue;">h4 333333333333333333</h4>


Keywords:
CSS - Tag + #Id or .Class
CSS - Tag + #Id
CSS - Tag + .Class

Blogger - Hide Gadgets Elements

 - After creating a Gadget, click on the Gadget "Edit" link in order to see its "Id" in the browser url bar, at the end of the link!

 - "Gadget_Id" is Case-Sensitive (Example: "HTML2" is not the same as "html2")

Hide a Gadget at All:
<!-- Hide Gadget --> <style> #Gadget_Id { display: none; } </style>

Hide Gadget Title and Gadget Content Area Top Border:
<!-- Hide Gadget Title --> <style> #Gadget_Id > h2{display:none;} #Gadget_Id > div.widget-content{border-top:0px;} </style>

Titles from any Gadget (Image Gadget, Text Gadget, AdSense Gadget, etc etc etc) can be hidden through a single "Html\JavaScript" Gadget (Example below):

<!-- Hide Gadget Title --> <style> #HTML1 > h2{display:none;} #HTML1 > div.widget-content{border-top:0px;} #Text1 > h2{display:none;} #Text1 > div.widget-content{border-top:0px;} #Image1 > h2{display:none;} #Image1 > div.widget-content{border-top:0px;} </style>


Keywords:
Blogger - Hide Gadgets Elements
Blogger - Hide Gadget Title 

Illustrator - How to Vectorize

Convert Raster images to Vector images

How to:

 Some examples below using "High Fidelity Photo" option to vectorize:

This is a 5888 x 4384 Image File (4,14 MB)
Put the mouse over the image or Click it to better visualize it!

Keywords:
Illustrator - How to Vectorize
Illustrator - convert raster images to vector images

Photoshop - Show Transparent ArtBoard

While creating new files (Alternative 1):

For existing files with non-transparent ArtBoard (Alternative 2):

 
Keywords:
Photoshop - Show Transparent ArtBoard

Illustrator - Show Transparent ArtBoard

Keywords:
Illustrator - Show Transparent ArtBoard

Blogger - Change Focused Elements Outline Color

First of all, note that "Outline" is not the same as "Border", they are different things!

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

How to:

/* __ Apply CSS Style to any focused Element __ */ :focus { border-color: green !important; outline-color: green !important; } /* "!important" ensures that nothing can override what you've set in this style */ /* so, "!important" will ensure that any focused Element will have the same style */ /* Note that CSS styles can't be applied to Elements inside "iframes" */

Keywords:
Blogger - Apply CSS Style to any focused Element 
Blogger - Change Focused Elements Outline Color
Blogger - Change Focused Elements Border Color

Blogger - Change Selected Text Color

How to:

/* Selected Text Color (All Page) - Firefox and others Gecko Engine based browsers */ ::-moz-selection { background-color: red; color: black; } /* Selected Text Color (All Page) - Chrome, Edge, Internet Explorer, Opera, Safari, etc */ ::selection { background-color: red; color: black; } /* ______ for <textarea> tags (different colors from "All Page" above) ______ */ /* Selected Text Color (textarea tag) - Firefox and others Gecko Engine based browsers */ textarea::-moz-selection { background-color: gold; color: red; } /* Selected Text Color (textarea tag) - Chrome, Edge, Internet Explorer, Opera, Safari, etc */ textarea::selection { background-color: gold; color: red; } /* ______ for "Contact Form" Text Fields (different colors from "All Page" above) ______ */ /* Selected Text Color ("Contact Form" Text Fields) - Firefox and others Gecko Engine based browsers */ .contact-form-name::-moz-selection, .contact-form-email::-moz-selection, .contact-form-email-message::-moz-selection { background-color: green; color: black; } /* Selected Text Color ("Contact Form" Text Fields) - Chrome, Edge, Internet Explorer, Opera, Safari, etc */ .contact-form-name::selection, .contact-form-email::selection, .contact-form-email-message::selection { background-color: green; color: black; }

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#Summary


keywords:
Blogger - Change Selected Text Color
Blogger - Change highlighted Text Color