Awesome Tooltips with Pure CSS Using Hint.css

Today I am going to introduce a awesome plugin Hint.css, A pure CSS tooltip library for your lovely websites. It is easy to use and very light weight and no javascript you can purely manage this tooptip in css, Hint.css is a tooltip library in CSS that helps you add cool tooltips to any element of your page. The major difference between Hint.css and othe tooltip plugins is that Hint.css uses data-* attribute, pseudo elements, content property and CSS3 transitions so that it’s only compatible with those modern browsers which fully support HTML5 and CSS3.

 

Step.1- Include hint.css in your page.

<link rel="stylesheet" href="hint.min.css">

Step.2-   Use class hint Now, all you need to do is give your element any position class and tooltip text using the aria-label or data-hint attribute:

Hello Sir, <span class="hint--bottom"  aria-label="Thank you!" style="color:red">hover over me.

You can choose position like hint–bottom, hint–top, hint–left, hint–right

Also Use it with other available modifiers in various combinations. 
Available modifiers: hint–error, hint–info, hint–warning, hint–success, 
hint–rounded and hint–bounce. 

Select all DIV text with single mouse click in Javascript

If you want to allow copying some text to your site visitor then as default it’s quite uncomfortable. Help your site visitors select the text with a single click of a mouse button with this simple trick. Here is the quick code in core javascript for selection div container text in just one mouse click. You only have to copy paste below javascipr code and pass the div or any element id to the below function.

 Javascript :-

<script type="text/javascript">
        function selectText(elementId) {
            if (document.selection) {
                var txtRange = document.body.createTextRange();
                txtRange.moveToElementText(document.getElementById(elementId));
                txtRange.select();
            }
            else {
                var txtRange = document.createRange();
                txtRange.setStartBefore(document.getElementById(elementId));
                txtRange.setEndAfter(document.getElementById(elementId));
                window.getSelection().addRange(txtRange);
            }
        }
    </script>

Testing the above code..

<div id="text1" onclick="selectText('text1')" >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
 
<p id="text2" onclick="selectText('text2')" >
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

Fix Broken Image link Using Jquery

This is a quick solution to fix broken image problem using jquery, Suppose we have a web page that includes a bunch of images. Sometimes the image isn’t available, so a broken image is displayed in the client’s browser and replacing them one by one isn’t easy, so adding this simple piece of code can save you a lot of headaches. Even if you don’t have any broken links adding this doesn’t do any harm.

Here is the simple jquery code to replace / fix broken image problem.

<script>
$(function() {  
 $('img').error(function(){
  $(this).attr('src', ‘image/broken.png’);
 });
});
</script>

How to Fix the HTTP Image Upload Error in WordPress in inmotion hosting

When working with images in WordPress, it is possible that you get an error when uploading to your site. This error is a rather vague HTTP error. This can leave many people puzzled as to how to fix this. Here we will show you one method to correct the error in your WordPress site.

Correcting the HTTP Upload Error

1. Log into your cPanel dashboard.
2. Using the file manager, navigate to your WordPress site's root directory.
3. Locate and open the .htaccess file for editing.
4. Add the following line of code at the top of the file:
   SetEnv MAGICK_THREAD_LIMIT 1
5. Save the changes to the .htaccess file.

Now you should be able to upload the image in your WordPress site without issue.

Which is best image optimization tool for Magento

For online, use this website
https://tinypng.com/

 

How does it work?

When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result: better PNG files with 100% support for transparency. Have your cake and eat it too!

In the above image the file size is reduced by more than 70%. I have excellent eyesight but can’t spot the difference either! Use the optimized image to save bandwidth and loading time and your website visitors will thank you.

 

How to recover phpmyadmin password

Assuming Xampp

You want to edit this file:

"\xampp\phpMyAdmin\config.inc.php"

change this line:$cfg['Servers'][$i]['password'] = 'WhateverPassword';

to whatever your password is. If you don't remember your password, then run this command in the Shell:

mysqladmin.exe -u root password WhateverPassword

where 'WhateverPassword' is your new password.

OR

There is a batch file called resetroot.bat located in the xammp folders 'C:\xampp\mysql'(works even if U are on mysql) run this and it will delete the phpadmin passwords. Then all you need to do is start the MySQL service in xampp and click the admin button.

WordPress important functions

home_url()                      //>     http://example.com
get_stylesheet_directory_uri()  //>     http://example.com/wp-content/themes/THEME_NAME  [same: get_bloginfo('template_url') ]
get_stylesheet_directory()      //>     /home/user/public_html/wp-content/themes/THEME_NAME
plugin_dir_url(__FILE__)        //>     http://example.com/wp-content/plugins/MY-PLUGIN/  [while used inside plugin.. same as:  plugins_url('',__FILE__) ]
plugin_dir_path(__FILE__)       //>     /home/user/public_html/wp-content/plugins/MY-PLUGIN/   [while used inside plugin]    



//===============MY EXAMPLES - USAGE============//
(i.e. wordpress is installed in subdirectory:  http://example.com/wpdir/)

define('domainURL',                 (((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS']!=='off') || $_SERVER['SERVER_PORT']==443) ? 'https://':'http://' ).$_SERVER['HTTP_HOST']);
    // ----->  http://example.com
define('homeURL',                   home_url());
    // ----->  http://example.com/wpdir/
define('homeFOLD',                  str_replace(domainURL,'',   homeURL));
    // ----->                    /wpdir/
define('requestURI',                $_SERVER["REQUEST_URI"]);
    // ----->                    /wpdir/any-page?with=parameters
define('requestURIfromHome',        str_replace(homeFOLD, '',requestURI) );
    // ----->                          /any-page?with=parameters
define('requestURIWithoutParametr',parse_url(requestURIfromHome, PHP_URL_PATH));
    // ----->                    /wpdir/any-page
define('currentURL',                domainURL.requestURI);
    // -----> http://example.com/wpdir/any-page?with=parameters
define('THEME_URL',                 str_replace(domainURL, '', get_template_directory_uri()) );plugin_dir_url(__FILE__)) ); 
    // -----> http://example.com/wpdir/wp-content/themes/THE-THEME-NAME/
define('PLUGIN_URL',                str_replace(domainURL, '', plugin_dir_url(__FILE__)) ); 
    // -----> http://example.com/wpdir/wp-content/plugins/THE-PLUGIN-NAME/

Typical PHP codes

Typical PHP codes

 example for URL: http://example.com/folder1/folder2/yourfile.php?var=blabla#12345

$_SERVER["DOCUMENT_ROOT"] === /home/user/public_html
$_SERVER["SERVER_ADDR"]   === 143.34.112.23
$_SERVER['HTTP_HOST']     === example.com (or with WWW)
$_SERVER["REQUEST_URI"]   === /folder1/folder2/yourfile.php?var=blabla
__FILE__                  === /home/user/public_html/folder1/folder2/yourfile.php
basename(__FILE__)        === yourfile.php
__DIR__                   === /home/user/public_html/folder1/folder2 [same: dirname(__FILE__)]
$_SERVER["QUERY_STRING"]  === var=blabla

$_SERVER["REQUEST_URI"]   === /folder1/folder2/yourfile.php?var=blabla
parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH)  === /folder1/folder2/yourfile.php 
$_SERVER["PHP_SELF"]      === /folder1/folder2/yourfile.php

//if "YOURFILE.php" is included in "PARENTFILE.php" , and "PARENTFILE.PHP?abc"   is opened:
$_SERVER["PHP_SELF"]       === /parentfile.php
$_SERVER["REQUEST_URI"]    === /parentfile.php?abc
$_SERVER["SCRIPT_FILENAME"]=== /home/user/public_html/parentfile.php
str_replace($_SERVER["DOCUMENT_ROOT"],'', str_replace('\\','/',__FILE__ ) )  === /folder1/folder2/yourfile.php

6 Different Types of jQuery Document Ready Examples

These are the different types of Document Ready functions typically used in jQuery. If you want to run, execute any event in JavaScript you must put as soon as document gets ready. you should call it inside $(document).ready() function other wise event may not execute properly.

Following Code included inside $(document).ready() will only run only when the DOM(Document Object Model) is ready to execute JavaScript codes. It will be purely ready your page for javascript execution.

Here is the example of Different Types of jQuery Document Ready.

Document Ready Example-1:

$(document).ready(function(){ console.log("Document is Ready"); //Now DOM Ready Add DOM manipulating codes here.. });

Document Ready Example-2:

$(function(){ console.log("Document is Ready"); //Now DOM Ready Add DOM manipulating codes here.. });

The above both the codes are same the 1st on the the enhance version of second and more description.This enhanced version has a ready() function that you call in your code, to which you pass a JavaScript function.Once the DOM is ready, the JavaScript function get executed.

Document Ready Example-3:

jQuery.noConflict(); // Reverts '$' variable back to other JS librar jQuery(document).ready(function(){ console.log("Document is Ready"); //Now DOM Ready Add DOM manipulating codes here.. });

Adding the jQuery can help prevent conflicts with other JS frameworks.

Document Ready Example-4:

(function($) { 
 // code using $ as alias to jQuery
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

This way you can embed a function inside a function that both use the $ as a jQuery alias.

Document Ready Example-5:

$(window).load(function(){ console.log('Ready for action..'); //initialize / ready after images are loaded });

Document Ready Example-6:

function DomReadyFun(){
  console.log("DOM is ready Now.");
}
 
$(document).ready(DomReadyFun);