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.

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 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 Refresh Page Using PHP

Let’s see how to do this by means of an example. The following piece of code will refresh the page after 5 seconds. You may change it as per your needs.

Example:

echo 'This page will be refreshed after 5 seconds.';
echo '<meta http-equiv="refresh" content="5">';

To use the above code, simply copy the second line and change the seconds value from 5 to any value you desire.

Your Turn!

Do you know of any other ways to refresh a page using PHP? Feel free to suggest by commenting below.

How To Limit String Using Word Count

Let’s see how to do this with an example.

Example: Consider the following string on which we apply word limit using PHP

This is a custom string. We are now going to apply PHP functions on this and return only the portion of the string based upon the word count.

Now let’s limit the above string to a word count of 10 and then return the result. Use the following code to do so:

<?php 
function word_limiter($string, $limit) 
{ 
	//break string based upon space
	$str_array = explode(" ", $string); 

	//return the extracted string with our word limit in place
	return implode(" ", array_splice($str_array, 0, $limit)); 
}

$string = 'This is a custom string. We are now going to apply PHP functions on this and return only the portion of the string based upon the word count.';

$word_limit = 10; //Change this based upon your needs

echo word_limiter($string, $word_limit);
?>

 Output:

This is a custom string. We are now going to

If you count the number of word in the above Output, you will notice that there are only 10 words. This is exactly what we wanted.

That’s it!

Do you know of any other ways to limit string using word count in PHP? Feel free to suggest by commenting below.

How To Solve Fatal error: Call to undefined function … in WordPress Themes & Plugins

Now let’s say that you are working on a WordPress theme. You would like to use the function “the_excerpt“. Now you do not know whether this function has already been declared or not. So to be on the safer side do the following:

Use the following code in your theme to prevent fatal errors:

<?php 
if (function_exists('the_excerpt')) 
{ 
	the_excerpt(); 
} 
?>

The above code will first check to see if the function really exists. If the function is already defined and available for use, the excerpt will be fetched and shown on the screen. If not, it will simply not do anything at all. You can also combine the above code with other conditional code to display another result if the function does not exist. Consider the following example:

<?php
if (function_exists('the_excerpt')) 
{ 
     the_excerpt(); 
} 
else 
{ 
     echo 'The function is Undefined';
} ?>

You can do the same thing as above in your plugins as well.

How to apply the above code to any custom functions in your custom Plugin and prevent fatal errors

Let’s say you are coding custom plugin. And now you have defined some function such as “my_function1”,  “my_function2”. Now you want to use these in your plugin and want to avoid showing fatal errors. Simply apply the function_exists function prior to using it and that will solve it. Here are couple of examples:

Example 1:

<?php 
if (function_exists('my_function1')) 
{ 
	my_function1(); 
} 
?>

 Example 2:

<?php 
if (function_exists('my_function2')) 
{ 
	my_function2(); 
} 
?>

 Example 3:

<?php 
if (function_exists('this_is_my_custom_function')) 
{ 
	echo this_is_my_custom_function(); 
} 
?>

As you can see from the above codes, it is really simple. Simply check if the function exists using the function_exists function and that should do it.

Simple, isn’t it?

Do you know of any other ways to solve the Fatal error Call to undefined function problem in WordPress? Feel free to suggest by commenting below.