Stretch to Screen Games while in Fullscreen Mode

When Windows Desktop uses the recommend or the highest resolution, most gpu control panels don't show the "Stretch to Screen" image scale option in order to prevent black areas on the screen edges while using applications, such games, in fullscreen mode with low resolutions!

- all you have to do is to change your Windows desktop resolution to a lower resolution

  (When you do this, you will notice black areas on your screen edges! If not, lower the resolution even more!)

- Then go to the gpu control panel, and select "Stretch to Screen" in image scale option. (the black areas on your screen edges will go away!)

  (if "Stretch to Screen" option is still not available, lower your desktop resolution even more and try again!)

- then change your desktop resolution back to it's recommended or highest resolution

  (the gpu control panel may hide "Stretch to Screen" option again, but the option is already saved\enabled! - No need to worry!)

- After that, when you play a video game with low resolutions in fullscreen mode, you will notice no black areas on your screen edges!

Tested with Intel HD Graphics 3000 gpu, some Nvidea and ATI\AMD gpus!


Keywords:
Stretch to Screen Games while in Fullscreen Mode
Gpu Stretch to Screen Image Scale option missing
Graphic Control Panel Stretch to Screen Image Scale option missing
Intel HD Graphics 3000 how to stretch to screen image

jQuery - Load Text from Files into Elements

Load text from files into elements using <Object> tag, jQuery .get() or jQuery .ajax()!

jQuery .get() is easier to use, it is a shorthand to jQuery .ajax()!

 - To "set" or "get" the values of form elements such as "input", "select" and "textarea", jQuery ".val()" is recommended over ".text()"!
 - for example, in Internet Explorer 10, ".val()" prevents "Line Feed\carriage return" problems caused by ".text()" while setting text into a "textarea" element!


 - File from GitHub! (Click Here)

Browsers\Websites\Servers may or not allow jQuery ".get()" or ".ajax()" to access files!

Due to browser security restrictions, most ".ajax()\.get()" requests are subject to the "same origin policy"!

The request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

(Script and JSONP requests are not subject to the same origin policy restrictions. )



Keywords:
jQuery - Load Text from Files into Elements
jQuery .get() - Load Text from Files into Elements
jQuery .ajax() - Load Text from Files into Elements
Html <Object> tag - Load Text from Files into Elements

Blogger - Image Zoom Plugin

First of all, I'm not the one who developed "elevateZoom" plugin! This is the original plugin website! This is the plugin modified version website (elevateZoom Plus)! (I use the modified version, elevateZoom Plus, since it seems to be more up to date!)

elevateZoom is a jQuery plugin, so, it requires jQuery library in order to work! (Tested with jQuery 1.7.0, 1.8.3 and 3.2.1)

Google Blogger and almost all websites nowadays use html 5 doctype declaration, which is, <!DOCTYPE html> ! Just in case, make sure your html code has a doctype declaration in order to allow jQuery to work properly! (<!DOCTYPE html> is the recommended one!)

Step 1 - Load jQuery library into your blog

(If you already use jQuery library in your blog, skip this step!)

Go to the blog layout and add a "HTML/JavaScript" Gadget! Copy and past there the following code:

<!-- Hide Gadget --> <style> #HTML_Id { display: none; } </style> <!-- 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>

- This Image shows how to create a Gadget!
- Visit this link to see how to hide any Gadget!

Step 2 - Load "elevateZoom Plus" plugin into your blog

(Note): "elevateZoom Plus" Gadget must be placed below "jQuery" Gadget! (See Image)

Go to the blog layout and add a "HTML/JavaScript" Gadget! Copy and past there the following code:  


Note that, by default, the "Screen Mode" zoom effect is applied to all <img> elements in your blog! If you don't want such a behavior, remove the "Default Option" from the code or just choose another option to be used as default option!

You can modify the options to fit your needs, or, add your own custom option if you want! (There is an example in "Step 3" below!)

Mouse Wheel Scroll Zoom In/Out is enabled by default for all the options! (You can turn it off if you want!)

- This Image shows how to create a Gadget!
- Visit this link to see how to hide any Gadget!

Step 3 - How to and Examples

There are basically 2 ways to use this plugin:

Using a Small and Large Image (This is the recommended one):
<img id="elevateZoom Option" src="Small Image Url" data-zoom-image="Large Image Url" />
(Note that, the Small Image must be proportionally scaled down from the Large Image!)

Using only a Large Image (not recommended):
<img id="elevateZoom Option" src="Large Image Url" width="put a number smaller than the Large Image width" />
(Your page load time will increase if you are loading Larger Images)

(Note) Some Blogger Templates automatically add "padding" style to <img> tags, causing some Zoom effect position problems! To fix this problem, include style="padding:0px;" inside the <img> tags!  

Default Screen Mode Zoom effect in use!
<img src="Small Image Url" data-zoom-image="Large Image Url" />

Default Screen Mode zoom effect Disabled!

<img id="ZoomImg_" src="Image Url" />

(If a <img> tag "id" attribute contains "ZoomImg_" string,  "Default Screen Mode zoom effect" is automatically disabled for that <img> tag)

Disable "Default Screen Mode" and enable "Inside" (Inner) zoom effect!
 <img id="ZoomImg_Inside" src="Small Image Url" data-zoom-image="Large Image Url" />

Disable "Default Screen Mode" and enable "Window Right\Up\Down\Left" zoom effect!

<img id="ZoomImg_WindowRight" src="Small Image Url" data-zoom-image="Large Image Url" />

<img id="ZoomImg_WindowUp" src="Small Image Url" data-zoom-image="Large Image Url" />

<img id="ZoomImg_WindowDown" src="Small Image Url" data-zoom-image="Large Image Url" />

<img id="ZoomImg_WindowLeft" src="Small Image Url" data-zoom-image="Large Image Url" />  

Disable "Default Screen Mode" and enable "LensSquare\Round" zoom effect!
<img id="ZoomImg_LensSquare" src="Small Image Url" data-zoom-image="Large Image Url" />
<img id="ZoomImg_LensRound" src="Small Image Url" data-zoom-image="Large Image Url" />

Disable "Default Screen Mode" and enable "Screen" zoom effect!
<img id="ZoomImg_Screen" src="Small Image Url" data-zoom-image="Large Image Url" />

You can disable "Default Screen Mode" and enable your own custom option while editing a post!
(<img> tag must be placed above the <script> code)

<img id="ZoomImg_MyOption" src="Small Image Url" data-zoom-image="Large Image Url" /> <script> $("img#ZoomImg_MyOption").ezPlus({ zoomType:'lens', lensShape:'round', lensSize:200, borderSize:0, lensColour:'red', scrollZoom: true, }); </script>

If you want to create more advanced custom options, visit the modified elevateZoom Plus website, or, visit the original elevateZoom website which is basically almost the same thing!

Some Extra Files from GitHub!


Keywords:
Blogger - Image Zoom Plugin
Blogger - elevateZoom Plugin
Blogger - elevateZoom Plus Plugin
Blogger - Image Zoom Magnifier
Blogger - Image Zoom Magnifying glass

jQuery - Get Browser ViewPort Size in Real Time

Your ViewPort size is:

ViewPort size here

Resize window (Width\Height will be updated in Real Time!)

Html Code (from GitHub):
https://github.com/coder4589/jQuery/blob/master/get%20viewport%20size%20in%20Real%20Time%20-%201_%20from%20ViewPort%20(jQuery).html

Keywords:
jQuery - Get Browser ViewPort Size in Real Time

GitHub - Render Html Files From Repositories

Github page links are case-sensitive (Example: "Test.html" is not the same as "test.html")

The link to render the "index.html" file is:   UserNameHere.github.io/RepositoryNameHere/

The link to render others ".html" files is:    UserNameHere.github.io/RepositoryNameHere/HtmlFileNameHere.html

The link to render an ".html" file inside a folder: UserNameHere.github.io/RepositoryNameHere/FolderPathHere/HtmlFileNameHere.html

More examples from GitHub: https://github.com/coder4589/GitHub-Pages


Keywords:
GitHub - Render Html Files From Repositories

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