Flip Text Horizontally Using CSS/CSS3

Let’s say that we have some text in a div and we would like to flip this text both horizontally. Let’s see how to do this.

<style>
.holder {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ddd;  
}

.horizontal-flip {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
</style>


<h2>Horizontal Text Flip:</h2>
<div class="holder horizontal-flip">
1234567890
</div>

Flip Text Vertically Using CSS/CSS3

Now lets flip the same text vertically just by using CSS.

<style>
.holder {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ddd;  
}

.vertical-flip {
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
</style>


<h2>Vertical Text Flip:</h2>
<div class="holder horizontal-flip">
1234567890
</div>

Simple, isn’t it?

Do you know of any other ways to flip text using just CSS? Feel free to suggest by commenting below.

Easily extract all Images from Google Docs document in just 2 clicks

Simply follow the following steps:

1. Open up the Google Docs document that you wish to extract images from. Click on the “File” menu.
2. Find the “Download as” option and hover over it. You will notice that a sub-menu opens up that gives you the different formats in which you can download the current open Google Docs document. Simply click on the last option, i.e. Web Page (.html, zipped). Checkout the screenshot below:
   

   Extract Images from Google Docs document

That’s it! Google Docs will automatically start downloading the zip file. Once the download finishes, simply unzip it. You will notice a folder called “images“. This folder will contain all the images contained in the Google Doc. So there you have it!

Conclusion

Hope you found this 2-Click solution to extract images from Google Docs document to be useful. Share your thoughts and other tips and tricks by commenting below.

Stop WordPress From Asking FTP Information

Ok, so let’s quickly look at what the problem is. Here is a screenshot of the screen that I am talking about:

WordPress Connection Information Screen

You may be seeing a very similar screen if you try to upgrade your blog. Essentially, the screen states the following message:

Connection Information 

To perform the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not remember your credentials, you should contact your web host.

So getting to this screen and then manually entering all the required information each and every time an upgrade is to be performed can be very annoying. So here’s the solution:

Solution for WordPress Connection Information Nag Screen

When you install WordPress, the root directory of the website will contain a file called “wp-config.php”. WordPress stores some of the important and required information in this file. Open this file in a text editor and copy the following three lines just after the initial comments in the file:

//FTP info
define('FTP_USER', 'ftp_user_here');
define('FTP_PASS', 'ftp_password_here');
define('FTP_HOST', 'ftp_host_name_here');

The first line in the above code is a comment. The next three lines after the comment are required for you to solve this issue. Just copy those lines and modify the values to the actual values provided by your web host. So here’s what you need to do:

• Replace ‘ftp_user_here’ with your actual FTP username.
• Replace ‘ftp_password_here’ with your actual FTP username.
• Replace ‘ftp_hostname_here’ with your actual FTP username.

You can get the above details from your web host. If you are still confused as to where to add this info, just look at the screenshot below for better understanding:

WordPress FTP Info Solution

So once you have updated the file with the required info, simply save the file and then upload it back to your website’s root folder. After that, go back to the upgrade page and try out the action that you previously performed. If you have done everything correctly, then you won’t see the FTP info nag screen again.

Conclusion

Editing wp-config.php file and filling it with the FTP User, FTP Password and FTP Hostname is the solution. Hope this solution has helps the needy. Let us know your experience by commenting below.

How To Remove Single Or Multiple Attributes:

Examples:

Example 1: Remove single attribute from an element:

In this example, we have a div with an attribute called “style”. This “style” attribute contains multiple properties such as “background-color” and “color”. We also have a button and when this button is clicked, we will remove the style attribute and the div will appear plain.

<div id="my_div1" style="background-color: gold; color: darkgreen;">This is a div with a single "style" attribute.</div>

<input type="submit" name="sbt_remove_single_property" id="sbt_remove_single_property" value="Remove Style Attribute">

<script type="text/javascript" language="javascript">

   $(document).ready(function () {

       $('#sbt_remove_single_property').on("click", function () {

           $('#my_div1').removeAttr('style');

       });

   });

</script>

Example 2: Remove multiple attributes from an element:

In this example, we have a div with an attribute called “style” and “class”. This “style” attribute contains multiple properties such as “background-color” and “color”. The “class” attribute contains multiple properties that affects the way this div is displayed even further. Next, we have a button and when this button is clicked, we will remove both the “style” and the “class” attributes and the div will appear plain.

<div id="my_div2" class="highlight" style="background-color: lightblue; color: purple;">This is a div with multiple attributes (style and class).</div>

<input type="submit" name="sbt_remove_multiple_properties" id="sbt_remove_multiple_properties" value="Remove Style and Class Attributes">

<script type="text/javascript" language="javascript">

   $(document).ready(function () {

       $('#sbt_remove_multiple_properties').on("click", function () {

           $('#my_div2').removeAttr('style class');

       });

   });

</script>

Conclusion:

So from the above example, we can conclude that we can remove a single attribute or multiple attributes from any element. To remove multiple attributes, simply specifying the attributes separated by space will suffice.

How to remove a specifc inline property using jQuery

Let’s look at how to do this by means of an example. Assume that you have a div with ID “my_div“. This div has four properties such as width, height and background color and color applied inline to it. So it would look something like this:

<div id="my_div" style="width: 50%; height: 50%; background-color:red; color:green;">
This is my div with a background
</div>

Now you would like to remove the background-color property alone and leave the other properties with their respective values as it is. In order to so, here’s what you would need to do:

$('#my_div').css("background-color", "");

Considering the above example, if you just wanted to remove the height property of the div and retain the others as they are, here’s what needs to be done:

$('#my_div').css("height", "");

So you see, it’s very easy to remove any specific property along with its value applied to any element when inline styles are applied to the element.

NOTE:

One thing to remember is that removing any property in the way indicated above, will not overwrite the stylesheet itself. That means, your styles will be intact in the stylesheet. The targeted inline property will be just removed from the element in the DOM.

That’s it!

Has this post helped you? Feel free to suggest by commenting below.

How to disable comments on certain Posts and Pages?

It’s very easy to do so. And I will show you how to do this for both posts and pages. Let’s assume that you are logged into your WordPress website as Admin and let’s get started.

Disabling comments for a specific Post:

1. Click on “All Posts” link under the “Posts” menu in Left Hand navigation.
2. Scroll to the Post that you wish to disable the comments upon and hover over the title. You will see the following options: Edit | Quick Edit | Trash | View. Click on “Quick Edit“.
3. Now you will see the Quick Edit box with basically three columns in it. Notice that in the third column, under the “Tags” textarea, there is a checkbox that says “Allow Comments”. This is selected by default. Simply uncheck it and click on the “Update” button.
That’s it! You are done!

Disabling comments for a specific Page:

1. Click on “All Pages” link under the Pages” menu in Left Hand navigation.
2. Scroll to the Page that you wish to disable the comments upon and hover over the title. You will see the same options as you see when you hover over a Post title i.e. Edit | Quick Edit | Trash | View. Click on “Quick Edit“.
3. Now you will see the Quick Edit box with basically two columns in it. Notice that in the second column, under the “Template” dropdown, there is a checkbox that says “Allow Comments”. This is selected by default. Simply uncheck it and click on the “Update” button.

That’s all you need to achieve your objective!

Your Turn!

Do you think this post has been useful to you? Feel free to share your thoughts by commenting below.

How To Easily Set Auto Increment Value In phpMyAdmin

Lets take a look at both the cases.

1) Start auto increment from 1.

While adding a column, simply check the checkbox under “A_I” column. This A_I column stands for auto-increment. Just make sure that for the “Type” column against this entry, select any type that represents a numerical value such as Tinyint, Smallint, Mediumint, Int, Bigint, Double. See the screenshot below to understand it more clearly:

Set Auto Increment To 1 in phpMyAdmin

Once you create the table, just click on the “Structure” tab and check to see if “AUTO_INCREMENT” appears under the “Extra” column against this field. If yes, then congrats! You have successfully implemented case 1.

2) Start auto increment at any value of your choice.

This is simple too. You will just need to do couple of extra steps in addition to case 1. Once you have your table ready, just click on “Operations” tab. Look for “Table Options” fieldset.  In this, you will see “AUTO_INCREMENT” with a textbox against it. Now this is where you need to enter the new value that you desire. So if you want the table’s count to start from 5000 instead of 1, just enter 5000 in this textbox and click on the “Go” button. Here is a screenshot of how it can look:

Set Auto Increment in phpMyAdmin

You can enter any other positive number that you like instead of 5000. If you have done it correctly, you will see a success message saying:

“Your SQL query has been executed successfully”.

IMPORTANT NOTE:

There is one important note to remember. If you ever truncate the table, then the count will be restored to 1 automatically, even if you have allotted it a custom number. In such a case, make sure to repeat the steps mentioned in Case 2 above, should you ever truncate the table.

Simple, isn’t it?

Do you know of any other ways to manually set auto increment value in phpMyAdmin? Feel free to suggest by commenting below.

How To Detect Click Outside An Element Using jQuery

Let’s assume that we have a div with ID “my_div”. Now we would like to show an alert when we click inside this div and another alert when we click outside this div. Here’s an example of how it can be done:

<style type="text/css">
#my_div {
	background-color: #FC9;
	padding: 25px;
	border: 1px solid #F60;
}
</style>

<div id="my_div" class="my_class">This is some content. Click inside this div once and click outside this div to see the alerts.</div>

<script type="text/javascript">
$(document).ready(function() {

	$('#my_div').click(function(event){		
		var id = $(this).attr('id');		
		alert('You clicked INSIDE the Div with ID #'+ id);		
		event.stopPropagation();		
	});

	$('html').click(function() {		
		alert('You clicked OUTSIDE the div');		
	});
});
</script>

First, we target the div and we attach a click event to it so that we can see an alert when it is clicked upon. To show an alert when we click outside the div, we target the html tag.

Your Turn!

Do you know of any other ways of detecting click outside an element using jQuery? Feel free to suggest by commenting below.

How To Remove .php Extension From URLs Using .htaccess

There are just two steps involved. They are:

1. Simply copy and paste the following code in your .htaccess file, save & upload back to your server:

# Turn on the rewrite engine
RewriteEngine On

# Remove all .php extension from URL
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php

2. Strip off the .php extension from any hyperlinks that you may have in your webpage. For example, you may have a list of hyperlinks in your Header Navigation area that say: index.php, about.php, contact.php, ..etc. Simply remove the .php extension from those hyperlinks. Don’t worry, you will be able to navigate to the other pages even after you remove that extension provided you have not made any mistake while adding the code to .htaccess.

That’s it! That’s all you need to do hide the .php extension from URLs using .htaccess.

TIP:

Let’s say that you have a folder called “restricted” and you have some PHP files in this folder. Now you don’t want any of the php files in this folder to lose their extension i.e. whenever you view a page in this folder, the complete URL with the file extension should appear. So for example, you would like the page URL to appear like so:

http://www.mydomain.com/restricted/restrictedfile.php

When you place the code (shown in Step 1) in .htaccess file, when you access  the restricted file via the URL, you would normally see the URL as: http://www.mydomain.com/restricted/restrictedfile but you want to see it as http://www.mydomain.com/restricted/restrictedfile.php. So to make this change, replace the existing code in .htaccess file with the following code:

# Turn on the rewrite engine
RewriteEngine On

# Ignore rewriting in /restricted folder - Change this to reflect to a folder of your choice
RewriteCond %{REQUEST_URI} !^restricted/

# Remove all .php extension from URL
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php

Simple, isn’t it?

Do you know of any other ways to using .htaccess to remove .php extension from URLs? Feel free to suggest by commenting below.

How To Increase Session Timeout To More Than 1440 Seconds in phpMyAdmin

I am using WAMP server, so the steps listed below show you how to make this change if you are using Wamp Server.

1. Navigate to the folder where phpMyAdmin is installed. Typically, it would be something like: C:/wamp/apps/phpmyadmin{…version number…}

2. Open config.inc.php. Scroll down to the bottom of the file and just below the ?> tag, add the following line & save:

$cfg['LoginCookieValidity'] = 86400; // In seconds

That’s it! That’s all you need to do in order to increase session timeout time. 86400 seconds equals 24 hours, so you are good to go for one full day at a stretch. If you would like to increase this limit to any other value, then simply use the following formula:

60 * 60 * Number of hours.

So for example, if you would like to increase the session timeout limit to 12 hours, then you would get the value in seconds as:

60 (seconds) * 60 (minutes) * 12 (hours) = 43200 seconds

If you would like to increase session time out to just 5 hours, you can get the number of seconds like so:

60 * 60 * 5 = 18000 seconds

Simply replace the 86400 in the above line of code with the seconds that you receive as a result of the above multiplication and you will be good to go.

ADDITIONAL NOTE:

On some systems such as Debian, it might be mandatory to make a relevant change in your WAMP’s php.ini file. So if the above method does not work, open up the php.ini file of your server and hunt for the variable “session.gc_maxlifetime” and assign it the same value as above. So in my case, as I have increased the value to 86400, I would update the variable in my php.ini file like so:

session.gc_maxlifetime = 86400

Simply update the session.gc_maxlifetime in your php.ini file to any value you desire (note that it should match with the value that you add to config.inc.php file). Once done, make sure that you restart your server and that should do it.

Your Turn!

What do you think of the above way to increase the phpMyAdmin Timeout limit? Did it help fix the issue? Feel free to let us know by commenting below.