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!

Advertisements

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!

Doctypes and Setting Up an HTML File

The <!DOCTYPE> declaration is very important to include at the very top of your HTML document when setting up a new page.  Everyone who has any experience designing webpages has seen this declaration before but not many know what it means or what the purpose of setting the <!DOCTYPE>  is.

This declaration is very important to your HTML page as it lets the browser window know what version of HTML that the page is written in. When declaring a doctype for a page that you plan on using HTML5 in, there is only one option:

<!DOCTYPE html>

If you set your doctype as above, you are telling the browser window to load the most recent version of HTML into the browser window.

If you are planning on writing your HTML page using only HTML4 tags, then there are three different doctype declarations that you can choose from.

Strict 4.01 Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

If you set your document as strict, you are letting the browser know that you are not going to use any presentational tags ( <b> ,  <i> , <hr> , styling tags ) or deprecated tags ( tags that are being phased out and/or have been replaced by newer, more efficient ways of completing the same task. )

Transitional 4.01 Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

If you set your doctype as Transitional, or ‘LOOSE’, than you are telling the browser that loads your HTML page that you are going to be using presentational tags and/or deprecated tags. This is the easiest doctype to use as a beginning web developer because it allows for the largest range of code to be input.

** Note: Try to avoid using old mark-up tags (deprecated tags) as this is not good practice in web development and as browsers update, your outdated mark-up will no longer be supported and your layout will fall apart.

Frameset 4.01 Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/frameset.dtd">

A doctype set as frameset will allow the developer to input <frameset> tags into their document.

** Note: This is an outdated deprecated tag and is no longer supported in HTML5. Beware of using this doctype as browser windows will most likely not support the mark-up in the near future.

Setting Up an HTML Document

Now that we have covered Doctypes, I will quickly just layout the basic setup of an HTML page. You can take exactly what I have written out here if you would like, just fill in the areas that I specify with the content of your website.

I will be using the HTML5 doctype as that will load the most recent version in the browser window.

<! DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> <!-- TEXT YOU WANT TO APPEAR IN THE TAB ON YOUR BROWSER --> </TITLE>

<!-- INSERT CSS, EXTERNAL STYLESHEET LINKS, META TAGS, AND JAVASCRIPT/JQUERY HERE -->

</HEAD>
<BODY>

<!-- INSERT PAGE CONTENT HERE -->
<!-- UNDER CONTENT, FOR FASTER PAGELOAD, JAVASCRIPT/JQUERY MAY BE PUT HERE -->
</BODY>
</HTML>

Above is your basic HTML document page setup. Notice there is a closing tag for each tag that we open ( With the exception of our DOCTYPE )

**Any text wrapped in <!– TEXT –> is commented out. This means the browser will not render this text in the page, but it will appear in the source code.

Thanks for stopping by and good luck with your projects!