Fade Divs In and Out with jQuery

DivSwitch

Switching content areas without changing the page is a feature that is appearing more and more in modern web design. On some websites, this is used as the main focal point of the user interface, and on other sites, it helps to minimize the amount of area that is taken up by info and consolidates multiple areas of information into one location enhancing the user experience.  This is achievable many different ways, one of the simplest ways using jQuery.

There is a working demo available here. (JSfiddle)

In order to accomplish this task, We must include our jQuery file in between the head tags:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>       

or at the bottom of your body:

<body>

...BODY CONTENT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</body>

as shown above.

Then we can begin coding the jQuery that will switch between our divs fading them in and out on the button click.

<script type="text/javascript">

$(document).ready(function () {
    $('.BTN').click(function () {
        $('.div').fadeOut('slow', function () {
            $('.div2').fadeIn('slow'); 
        });

        $('.BTN2').click(function () {
            $('.div2').fadeOut('slow', function () {
                $('.div').fadeIn('slow'); 
            });
        });
    });
});

</script>

At first glance, the above script may appear confusing but when broken down it is actually very simple. We call up the jQuery file:

$(document).ready(function () {

Then we focus on our first button, give the button a function (click();) then tell the function to fade the section with a class of .div out and the section with a class of .div2 in.

 $('.BTN').click(function () {
        $('.div').fadeOut('slow', function () {
            $('.div2').fadeIn('slow'); 
        });

After that, we focus on the second button, give the button the click(); function, and tell the function to fade the section with a class of .div2 out and the section with a class of .div1 in.

$('.BTN2').click(function () {
            $('.div2').fadeOut('slow', function () {
                $('.div').fadeIn('slow'); 
            });
        });

Once this is complete, we have created our fading divs that switch when a button is clicked. Now just style your page and you’ve created two sections that switch back and forth between eachother.

I hope you found this post helpful! Good luck coding the web!

Simple Age Verification with jQuery

verificationSS

Today I will go over a simple age verification that I built during my downtime this morning. It uses basic jQuery functions to select, based on the users answer, whether they are of age to view the content of a website or not. This may be used in other ways as well in order to block content before the user decides to view it.

This is a common function on the web today so I decided to show a very easy way to accomplish the task.

I built this project online, and it can be viewed here. (jsfiddle)

I styled the page using HTML and CSS3.

Note: The styling was done without using tables as they are outdated and should rarely be used in modern web design.

In order to accomplish this task, We must include our jQuery file in between the head tags:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>       

or at the bottom of your body:

<body>

...BODY CONTENT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</body>

as shown above.

Then we write the jquery that will reference the linked document and give us the desired output. before we start coding the functionality, we  need to set our variables so the jQuery knows what we mean when we refer to “Denied” and “Welcome”

var Denied = "Access is denied.";
var Welcome = "Welcome! You are authorized to view age restricted content";

<script type="text/javascript">
$(document).ready(function () {
      $(".Yes").click(function () {
      if (alert(Welcome)) {
      } else {
        window.location.href ="http://www.jhauge.com"
        return false;
        }
    });

    $(".No").click(function () {
      if (alert(Denied)) {
      } else {
        window.location.href ="http://www.google.com"
        return false;
        }
    });

});
</script>

The script above is what the complete jQuery script looks like. Now I will break it down to explain the functionality.

$(document).ready(function () {
SCRIPT IN HERE
});

First we reference the attached jquery file letting it know we are going to be calling a function. Then we reference our div with the class of .Yes (letting the jquery know what to perform the function on) and then we call the function we want to use, in this case it’s .click().

 $(".Yes").click(function () {
      if (alert(Welcome)) {
      } else {
        window.location.href ="http://www.LINK.com"
        return false;
        }

After the function is called, the next step is to perform an action when that function is completed. For our purposes, we have an alert box pop up when yes is selected by the user telling them that access has been granted, and it forwards them to the page that was hidden using the function window.location.href .

The same was done for the div with the class of .No in order to make the no button functional. The difference is that if no is clicked, the user is directed to a search engine instead of to the protected content, leading those who are underage away from the protected content.

I hope you found this tutorial useful. Thanks for stopping by!

Set the Date using PHP

Hello all, I apologize for not posting for awhile, I switched positions and it took some time to get settled into my new job. I hope everyone had a great holidays and had a safe and happy new year celebration!

Now, back to coding. Today I will talk about a very basic PHP technique that is very useful in any website or application that you will be including the current date. If the date is meant to be updated every day, month, or year, using HTML to include this is not very useful, as it will need to be manually updated everyday.

However, using PHP, the date on your webpage will automatically update everyday with the current date making less work for the developer while keeping your website current.

In order to include PHP in your webpage, you must open a PHP tag:

<?php

//PHP code goes in this area

?>

Inside the PHP tags, before you set the date, you should set the timezone you want the date to pull from. This is not required, but without it, you will get a warning and run the risk of not having the correct date.

This appears as follows:

<?php

date_default_timezone_set("America/New_York");

?>

Set the timezone string as the desired country/desired state or territory. for a full list of acceptable timezones, visit PHP List of Supported Timezones.

Next, we must add the display of our date. This will reference the set timezone, and display the correct date for the day the webpage is accessed.

<?php

date_default_timezone_set("America/New_York");

echo date("m.d.Y");

?>

Using the echo function, we display the date in mm.dd.yyyy format. I can be displayed in any format:

ex. mm/dd/yyyy , dd-mm-yyyy ,  etc. using any separator desired and in any desired order.

Using this small piece of PHP code, you can display the current date on your webpage without doing any extra work. Thank you for reading, I hope you found this tutorial useful!

Animate with jQuery: Create a Heartbeat/Pulsing Effect on Text or Links

Within the jQuery library, there are thousands upon thousands of different effects that can be applied to your page to create a unique and dynamic user experience. Animation using mark-up has become more and more prevalent as of late, since animation that uses flash is losing its relevance and its place in modern web (An explanation that I will save for another post).

jQuery is a library that we have used before to create a smooth scroll effect so we have already learned how to call a jQuery library into your page. If you do not remember, Google has uploaded and hosts versions of jQuery right on their website.

We will start off by linking to the jQuery library version 1.9.1 . This goes in the <head></head> tags in your HTML mark-up.

<head>
<title> PAGE TITLE </title>   
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

Now that we have linked the correct version of the jQuery library to our HTML page, we now need to add jQuery to our page so that we can create the animation. I will break the script we will use down into pieces and explain the parts of the script and what they do.

** The script can be put in the <head></head> tags under your jQuery library call, but for a faster page load time, I suggest adding it to the very bottom of your HTML page, under your content right before you close your <body></body> tag.

So we start by opening our <script type=”text/javascript”> tag and telling the page to look at the jQuery library and call/set our function:

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

We then set the class (for this example we will set our class as heart) we will use to identify the p, span, h1, a, etc. that will use the function and we set our class to the jQuery function .animate :

 $('.heart').animate({

Lastly, we need to set the font size we will start off with, and the size we wish to have our text shrink to and repeat the size we start with so that we get a bouncing or pulsating effect. We set our animation speed, and apply our function so the effect will act the way we set it. Dont forget to close your </script> tag at the end!

fontSize: $('.heart').css('fontSize') == '60px' ? '55px' : '60px'
            }, 500, animateHeart);
        });
        </script>

All together, the script appears as:

<script type="text/javascript">
        $(document).ready(function animateHeart() {
            $('.heart').animate({
                fontSize: $('.heart').css('fontSize') == '60px' ? '55px' : '60px'
            }, 500, animateHeart);
        });
        </script>

In order for this effect to work, make sure you dont forget to apply the class to a section in your HTML!

<a href="#about" class="heart">V</a>

Using this bit of jQuery, you can help improve the UX on your website and add pull the users eye to information that may be of importance or to links they should be clicking on.

Thanks for stopping by, as always. Good Luck and have fun developing!

Simple ‘Smooth Scroll’ with jQuery

Have you ever been to a website, clicked on an internal link (link on a page that goes to a different location on the same page), and the page jumped to the location?

A much cleaner, more captivating way to go about internal links is creating a smooth scroll effect so when the link is clicked, the page slides to the specified content instead of jumping to it. This seems at first glance to be complicated, but in reality, it is a very simple technique and a good way to push your design from basic and static content to a place where you can begin to enhance the user experience (UX).

To view this effect in action, visit jhauge.com and click on the ‘Let’s Talk’ link!

The first step we need to take is calling the correct version of jQuery into our page. We are going to use a google .api as google has hosted jQuery pages on their site. This is very easy to do:

<head>
<!-- HEADER CONTENT GOES HERE -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

A call to jQuery can go in between your < head > < /head > tags or at the bottom of your < body > tag.  For this specific install, we will be putting it in the < head > tags as this effect does not include much script to implement.

Underneath our call for google’s jQuery .api, we will write some custom script to tell our page what part of the linked script we need to use. In order to write script on a HTML page, you must wrap your custom code in <script> or even better <script type=”text/javascript”> tags.

We start by calling our function and giving our function a class. The class is applied to links that we want to perform the effect as I will demonstrate later:

<script type="text/javascript">
      $(document).ready(function(){
        $(".scroll").click(function(event){
         event.preventDefault();

We then calculate the browser size and the proximity to the destination specified in each link using and if/else statement:

var dest=0;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }

Lastly, we set the jQuery effect and the speed at which we want the scroll to move and then we close our script tag.

$('html,body').animate({scrollTop:dest}, 1000,'swing');
     });
     });
    </script>

The code in your header when complete should appear like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script>
      $(document).ready(function(){
        $(".scroll").click(function(event){
         event.preventDefault();
         var dest=0;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }
         $('html,body').animate({scrollTop:dest}, 1000,'swing');
     });
     });
    </script>

Our last step is to link to an internal link in our HTML. In order to make an internal link, we set a specific ID to a <div>, <h1>, <p>, basically any tag that you would like to appear at the top of the browser screen when the link is clicked. This looks like this:

<div ID="blue">

Then, we set a link that goes to that ID by using a poundsign (#) which symbolizes a CSS ID, followed by the ID name like this:

<a href="#blue"> I am link text"</a>

This link when clicked, will now jump to the location specified by the selected ID. The only other thing we need to do in order to get the jQuery to be called and the page to smooth scroll to the link location is to call the class in the link tag. Your ending HTML should look like this:

<a href="#blue" class="scroll"> I am link text"</a>

Now when you click your link, your page should scroll smoothly to the specified location on your page.

This effect will enhance your page and help you to begin designing with the user experience in mind instead of just as a static web designer. Thanks for stopping by!