Straight Tips: May 2017

Friday, May 26, 2017

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

Monday, May 22, 2017

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!

(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!

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

Thursday, May 18, 2017

Wednesday, May 3, 2017

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

Straight Tips

jQuery

elevateZoom (Requires jQuery)

Microsoft Store (Donation)

Facebook Messenger (Donation)

Activation Code - Donation (Multiple Options)

Request Web\PHP\JavaScript\HTML Project !

Advertise On This Blog!

Ads (Reserved)