handyHTML http://www.handy-html.com Handy Web Development Code Snippets, Tutorials and Resources Mon, 08 Apr 2013 20:53:35 +0000 en-US hourly 1 Change the ‘Howdy’ Greeting Message on the WordPress User Menu Bar http://www.handy-html.com/change-the-howdy-greeting-message-on-the-wordpress-user-menu-bar/ http://www.handy-html.com/change-the-howdy-greeting-message-on-the-wordpress-user-menu-bar/#comments Mon, 08 Apr 2013 20:38:38 +0000 George Orsmond http://www.handy-html.com/?p=469 If you want to change or remove completely the “Howdy, Username” greeting on the WordPress User Menu Bar, just use this simple bit of code…

Open up your functions.php file

Copy and paste this into your functions.php file. Just change the “Hello, welcome back!” text to suit your needs.

// Change or remove the "Howdy, Username" Greeting on the Menu bar
function replace_howdy( $wp_admin_bar ) {
 $my_account=$wp_admin_bar->get_node('my-account');
 $newtitle = str_replace( 'Howdy,', 'Hello, welcome back!', $my_account->title );
 $wp_admin_bar->add_node( array(
 'id' => 'my-account',
 'title' => $newtitle,
 ) );
 }
 add_filter( 'admin_bar_menu', 'replace_howdy',25 );

…and there we have it, simple!

]]> http://www.handy-html.com/change-the-howdy-greeting-message-on-the-wordpress-user-menu-bar/feed/ 0 Use a custom gravatar in WordPress http://www.handy-html.com/use-a-custom-gravatar-in-wordpress/ http://www.handy-html.com/use-a-custom-gravatar-in-wordpress/#comments Tue, 12 Mar 2013 22:01:18 +0000 George Orsmond http://www.handy-html.com/?p=151 Ever wondered how to change the default Gravatar in WordPress? Here we will show you how to take your websites branding to the next level.

Open up your functions.php file

Copy and paste the following code into your functions.php file, this is located within your theme folder.

add_filter( 'avatar_defaults', 'newgravatar' );

function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/gravatar.gif';
$avatar_defaults[$myavatar] = "WPBeginner";
return $avatar_defaults;
}

You need to understand the variables in the code above.

‘/images/gravatar.gif’ is the location of the image file. It must be saved under the theme folder that you are using.

Change WPBeginner to the name that you want to give your Gravatar and you should be set. Upload the file then login to your WordPress Admin Panel and click on Settings > Discussion.

Gravatar Settings

Source

]]> http://www.handy-html.com/use-a-custom-gravatar-in-wordpress/feed/ 0 Show your latest tweets on your website http://www.handy-html.com/show-your-latest-tweets-on-your-website/ http://www.handy-html.com/show-your-latest-tweets-on-your-website/#comments Tue, 12 Mar 2013 21:41:41 +0000 George Orsmond http://www.handy-html.com/?p=447 Want to show your latest tweets on your website? The following code will do just that and it’s very simple to implement.

All you need to do is copy and paste the following code where you would like your tweets to show, then make some minor edits (I will tell you how below), and you are good to go!

First off, the PHP

<?php
$username = "handyHTML"; // Your twitter username.
$limit = "4"; // Number of tweets to pull in.

/* These prefixes and suffixes will display before and after the entire block of tweets. */
$prefix = "<ul'>"; // Prefix - some text you want displayed before all your tweets.
$suffix = "</ul>"; // Suffix - some text you want displayed after all your tweets.
$tweetprefix = "<li>"; // Tweet Prefix - some text you want displayed before each tweet.
$tweetsuffix = "</li>"; // Tweet Suffix - some text you want displayed after each tweet.

$feed = "http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=" . $limit;

function parse_feed($feed, $prefix, $tweetprefix, $tweetsuffix, $suffix) {

$feed = str_replace("&lt;", "<", $feed);
$feed = str_replace("&gt;", ">", $feed);
$clean = explode("<content type=\"html\">", $feed);

$amount = count($clean) - 1;

echo $prefix;

for ($i = 1; $i <= $amount; $i++) {
$cleaner = explode("</content>", $clean[$i]);
echo $tweetprefix;
echo $cleaner[0];
echo $tweetsuffix;
}

echo $suffix;
}

$twitterFeed = file_get_contents($feed);
parse_feed($twitterFeed, $prefix, $tweetprefix, $tweetsuffix, $suffix);
?>

Secondly, you need to edit the $username variable, where as the above is handyHTML simply change that to your Twitter username. Then you can edit the $limit variable to show ‘X’ number of tweets. In the above code it will pull in the 4 latest tweets.

You can then also make some edits to the HTML so you can display the tweets to suit your website design. Just edit the $prefix, $suffix, $tweetprefix and $tweetsuffix variables with, lists, divs etc.

We are using this same code for our latest tweets in the footer.

Follow us on Twitter… handyHTML

]]> http://www.handy-html.com/show-your-latest-tweets-on-your-website/feed/ 4 Tooltips using jQuery http://www.handy-html.com/tooltips-using-jquery/ http://www.handy-html.com/tooltips-using-jquery/#comments Fri, 01 Mar 2013 00:59:10 +0000 George Orsmond http://www.handy-html.com/?p=425 In this snippet I am going to show you how to implement a nice Tooltip using jQuery. It is very simple

Step 1: The Scripts

Add the following code in between your < head > < / head > tags.

<head>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>

</head>

Step 2: The HTML Content

Add the following code in between your < body > < / body > tags. You can edit the content to suit your needs.

<body>

<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled.</p>

<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>

</body>

The title=”" attribute is the important part with this snippet, whatever you put inside it will be the content that will show in your tooltips.

…and there you have it, a quick and simple way to incorporate tooltips into your website.

You can see a LIVE PREVIEW here
]]> http://www.handy-html.com/tooltips-using-jquery/feed/ 0 Cool CSS3 Thumbnail Hover Effects http://www.handy-html.com/cool-css3-thumbnail-hover-effects/ http://www.handy-html.com/cool-css3-thumbnail-hover-effects/#comments Thu, 25 Oct 2012 14:21:00 +0000 George Orsmond http://www.handy-html.com/?p=409 In this tutorial, I’m going to tell you how to make a simple, yet very engaging thumbnail rollover for your website in CSS3.

With CSS3 we can do smooth transitions that we weren’t capable of doing back then without using Flash or javascript and the Jquery library. Actually, there’s a massive amount of effects we can add to the transitioning graphic upon hovering over it. Some of them are the following:

  1. Opacity
  2. Border Radius
  3. Rotate
  4. Animation (infinite possibilities are here)

The HTML

The html should be pretty simple for showing these kind of effects.

I start off by wrapping my thumbnails in a div (“thumbWrap”). All the thumbnail images are individually wrapped in a < span > < / span > tag, We’ll just hash the link (here you can give the address of the full size picture on which you want thumbnail effect to apply).

Place the following HTML in between your < body > < / body > tags.

<div id="thumbWrap">
    <span><a href="#"><img class="css3Thumbnail" src="thumb.jpg" alt="" /></a></span>
    <span><a href="#"><img class="css3Thumbnail" src="thumb.jpg" alt="" /></a></span>
    <span><a href="#"><img class="css3Thumbnail" src="thumb.jpg" alt="" /></a></span>
    <span><a href="#"><img class="css3Thumbnail" src="thumb.jpg" alt="" /></a></span>
</div>

The CSS

First, you define the width & height of your container – this should be the size of the thumbnail in its small state. I float my container to the left and set its position to relative.

Second, I set the width and height (125px) of my thumbnail in its original state and absolute position it with top and left margin set to 0px. Next I add the transition effect, opacity of 0.8 and a border.

Last, I add the hover state of the thumbnail by setting its width and height to 150px. Then I change the opacity to 1 (i.e. no transparency), and a border radius of 10px.

Next, I change the top and left margins to -15px and -25px so that the image is perfectly centered above the original thumbnail. This will change depending on your thumbnail’s original size. Last, I make the z-index 100 in order for the image to float above all images surrounding it.

Note: IE Problem. Although transitions don’t work in IE, the fallback just takes us back to pre-css3. I do use CSS conditionals for IE7 because the thumbnail doesn’t pop out like how it’s suppose to, so instead I set the top and left margins to 0px.

Place the following CSS in between your < head > < / head > tags.

<style>
#thumbWrap {
	width: 540px;
	margin: 0 auto;
}
#thumbWrap span
 {
width: 125px;
height: 125px;
float: left;
position: relative;
margin: 10px 0 10px 10px;
     
}

.css3Thumbnail { 
    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform; }

.css3Thumbnail:hover {
width: 150px;
height: 150px;
border: 5px solid #FFF;
border-radius: 10px;
-moz-radius: 10px;
-webkit-radius: 10px;
opacity: 1;
position: absolute;
top: -10px;
left: -20px;
z-index: 100;
-moz-box-shadow: 3px 2px 5px 0px #494949; 
-webkit-box-shadow: 3px 2px 5px 0px #494949; 
box-shadow: 3px 2px 5px 0px #494949;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.ie7 .css3Thumbnail:hover {
width: 150px;
height: 150px;
border: 5px solid #CCC;
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
</style>

And there we have it! Some cool effects to show off your thumbnails on your website!

You can see a LIVE PREVIEW here
]]> http://www.handy-html.com/cool-css3-thumbnail-hover-effects/feed/ 1 Simple CSS Drop Down Menu Updated http://www.handy-html.com/simple-css-dropdown-menu-updated/ http://www.handy-html.com/simple-css-dropdown-menu-updated/#comments Sat, 20 Oct 2012 00:26:02 +0000 George Orsmond http://www.handy-html.com/?p=399 I have updated the previous CSS drop down menu, this is now Cross Browser Compatible (Chrome, Safari, Firefox, IE7+). This drop down is a lot better then before and easier to integrate into existing websites.

First off, the CSS

Place the following CSS in between your < head > < / head > tags.

<style>
/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul#nav {margin: 0 0 0 200px;}
ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #555; color: #fff;}
ul.drop { position: relative; z-index: 597; float: left; }
ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; }
ul.drop ul li { float: none; }
ul.drop ul ul { top: -2px; left: 100%; }
ul.drop li:hover > ul { visibility: visible }
</style>

and secondly, the HTML

Place the following HTML in between your < body > < / body > tags.

<ul id="nav" class="drop">
  <li><a href="#">Home</a></li>
  <li>About Us
    <ul>
      <li><a href="#">History</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Testimonials</a></li>
      <li><a href="#">Staff</a>
        <ul>
          <li><a href="#">George Orsmond</a>
            <ul>
              <li>Web Design</li>
              <li>Graphic Design</li>
              <li>HTML</li>
              <li>CSS</li>
            </ul>
          </li>
          <li><a href="#">Dave Macleod</a></li>
        </ul>
      </li>
      <li><a href="#">FAQs</a></li>
    </ul>
  </li>
  <li>Services
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Graphic Design</a></li>
      <li><a href="#">Logo Design</a></li>
    </ul>
  </li>
  <li>Products
    <ul>
      <li class="dir"><a href="#">Templates</a></li>
      <li class="dir"><a href="#">Stock Images</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Featured</a></li>
      <li><a href="#">Top Rated</a></li>
      <li><a href="#">Resources</a></li>
    </ul>
  </li>
  <li><a href="#">Gallery</a></li>
  <li>Contact Us
    <ul>
      <li><a href="#">Contact Form</a></li>
      <li><a href="#">How to get here</a></li>
      <li><a href="#">View the map</a></li>
    </ul>
  </li>
</ul>

…and there you have it, a cross browser compatible and very customizable CSS Dropdown Menu. You can also add as many tiers as you like! This example has 3 tiers.

Again, as usual if any of you have any problems with this, do please let me know and I can work to help you resolve them.

You can see a LIVE PREVIEW here
]]> http://www.handy-html.com/simple-css-dropdown-menu-updated/feed/ 159 jQuery Form Validation http://www.handy-html.com/jquery-form-validation/ http://www.handy-html.com/jquery-form-validation/#comments Tue, 25 Sep 2012 21:01:18 +0000 George Orsmond http://www.handy-html.com/?p=345 In this short tutorial, I will show you how to use a jQuery validation plugin to setup front-end form validation in just a few minutes.

I’ve kept this tutorial very simple with clear instructions so that anyone can implement some validation on their webpage forms. This can be done in just four simple steps…

Step 1: Include the latest version of jQuery

You can download the latest version of jquery library here http://docs.jquery.com/Downloading_jQuery

…or you can use the Google hosted API below:

Insert the following code between your < head > < / head > tags:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 2: Download the jQuery Validation Plugin

You can download the latest version of jquery validation plugin from here
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

…or use the Microsoft Ajax CDN hosted file as below:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Step 3: Insert the Javascript

Add the following JavaScript validation rules to your webpage (or include as external JavaScript File)

The below code contains the rules and error messages for input field validation. It also includes a direct submit handler (can be used for multiple forms on a single webpage).

<script type="text/javascript">
(function($,W,D)
{
    var FORMVAL = {};
 
    FORMVAL.UTIL =
    {
        setupValidation: function()
        {
            //form validation rules
            $("#signup-form").validate({
                rules: {
                    name: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 8
                    },
                    agree: "required"
                },
                messages: {
                    name: "Name is required!",
                    password: {
                        required: "Password is required!",
                        minlength: "Your password must be at least 8 characters long"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }
 
    //setup the validation on when the webpage is loaded
    $(D).ready(function($) {
        FORMVAL.UTIL.setupValidation();
    });
 
})(jQuery, window, document);
</script>

Step 4: Create the HTML form for validation

Here is the code snippet for the HTML form which is used to apply above validation rules. Insert this into the body of your webpage.

<!-- HTML form for validation -->
<form action="" method="post" id="signup-form" novalidate="novalidate">
 
    <h2>Sign Up</h2>
 
    <div id="form-data">
        <fieldset>
 
            <div class="fieldgroup">
                <label for="name"> Name</label>
                <input type="text" name="name">
            </div>
 
            
            <div class="fieldgroup">
                <label for="email">Email</label>
                <input type="text" name="email">
            </div>
 
            <div class="fieldgroup">
                <label for="password">Password</label>
                <input type="password" name="password">
            </div>
 
            <div class="fieldgroup">
                <p class="right">By clicking register you agree to our <a target="_blank" href="/policy">policy</a>.</p>
                <input type="submit" value="Sign up" class="submit">
            </div>
 
        </fieldset>
    </div>
 
        <div class="fieldgroup">
            <p>Already registered? <a href="/login">Sign in</a>.</p>
        </div>
</form>

That is all for the jQuery form validation. Add some styles to form to make it looking nice.

You can see a LIVE PREVIEW here
]]> http://www.handy-html.com/jquery-form-validation/feed/ 2 Join handyHTML on Facebook http://www.facebook.com/pages/handyHTML/354448837957105 http://www.facebook.com/pages/handyHTML/354448837957105#comments Tue, 04 Sep 2012 21:10:01 +0000 George Orsmond http://www.handy-html.com/?p=339 Join us today on Facebook, we update the page daily. Bringing to you the latest news, tips and tricks in Web Development! Our “like’s” are ever growing, so get on the bandwagon today for some great updates straight to your news feed! Click now to visit our Facebook page!

]]> http://www.facebook.com/pages/handyHTML/354448837957105/feed/ 0 Simple jQuery Hover Effect http://www.handy-html.com/simple-jquery-hover-effect/ http://www.handy-html.com/simple-jquery-hover-effect/#comments Mon, 20 Aug 2012 10:39:28 +0000 George Orsmond http://www.handy-html.com/?p=258 In this snippet I will show you how to create a simple jquery hover effect for your images. What this effect does is lower the opacity when you hover over it. Very simple, but very effective!

Step 1: Calling jQuery

You will need to copy and paste the following code between your < head > tags.

<!-- include jQuery Library From Google -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<!-- include jQuery UI  From Google -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

What this code does is calls the latest versions of jQuery hosted at Google.

Step 2: The jQuery Functions

Also copy and paste this code into your < head > tags.

<script type="text/javascript">
  $(document).ready(function(){
    $("img").hover(function() {
      $(this).stop().animate({opacity: "0.8"}, 'slow');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, 'slow');
    });
  });
</script>

This code calls the jQuery functions and slowly lowers the opacity of an image when you hover over it, then slowly brings the opacity back to normal when you take the mouse off of the image.

You can see a LIVE PREVIEW here

…and there we have it! A simple jQuery Hover Effect for use on your projects! Great for use in portfolios with thumbnails!

]]> http://www.handy-html.com/simple-jquery-hover-effect/feed/ 0 Build a quick and simple Contact Form http://www.handy-html.com/build-quick-simple-contact-form/ http://www.handy-html.com/build-quick-simple-contact-form/#comments Fri, 03 Aug 2012 10:02:36 +0000 George Orsmond http://www.handy-html.com/?p=256 Need a quick and easy contact form for your website? Then this is the code for you, It is a very simple script.

Step 1: The Markup

Create a new file, call it contact.html or similar. Now let’s actually create the form fields. Copy and paste the following code into the newly created .html file.

<form method="post" action="contactengine.php">
				<label for="Name">Name:</label>
				<input type="text" name="Name" id="Name" size="45" />
				<br />
				<label for="Tel">Tel:</label>
				<input type="text" name="Tel" id="Tel" size="45" />
	<br />
				<label for="Email">Email:</label>
				<input type="text" name="Email" id="Email" size="45" />
				<br /><br />
				<label for="Message">Details of Quote / Query</label><br />
				<textarea name="Message" rows="5" cols="45" id="Message"></textarea>

				<input type="submit" name="submit" value="Submit" class="submit-button" />
			</form>

As you may notice the forms “action” is “contactengine.php” this file, which we will create in the next step is the functioning of the whole contact form. Now save and close this file.

Step 2: The workings of the Contact form

Now create a file called contactengine.php This is the workings of the contact form, all the magic happens in here. Copy and paste the following code into this file.

<?php

$EmailFrom = "noreply@yoursite.com"; // From email address
$EmailTo = "youremail@yoursite.com"; // Email address you want submitted forms to go to
$Subject = "YourSite.com - Contact Form Submission"; // subject line for emails
$Name = Trim(stripslashes($_POST['Name'])); 
$Tel = Trim(stripslashes($_POST['Tel'])); 
$Email = Trim(stripslashes($_POST['Email'])); 
$Message = Trim(stripslashes($_POST['Message'])); 

// validation
$validationOK=true;
if (!$validationOK) {
  print "There has been an error, please make sure you entered a correct email address."; // You can edit this to your own error message
  exit;
}

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Tel: ";
$Body .= $Tel;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page 
if ($success){
  print "Thank you, your email has been sent! We will be in touch shortly!"; // You can edit this to your own success message
}
else{
  print "There has been an error, please make sure you have entered your details correctly."; // You can edit this to your own error message
}
?>

This code basically grabs all of the detials input into the contact form and sets them out into an email which you will receive to the email specified.

You can edit the parts I have commented to your own details / messages. Now save this file in the same directory as the contact.html file and upload to your server…

Voila, a simple and quick email form for your website. Very easy to integrate and style to suit your own websites. If you have any trouble please just leave a comment and we will be happy to help you out.

]]> http://www.handy-html.com/build-quick-simple-contact-form/feed/ 3