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!

30 CSS Selectors you Must Keep in your Head

Couldn’t write this information on CSS selectors any better. Kudos Raghavendra, well said. Good information and easy for the beginner to understand.

Raghavendra Prasad

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in November, 2010.

So you learned the base idclass, and descendant selectors – and then called it a day? If so, you’re missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory.

1. *

* {
margin: 0;
padding: 0;
}

Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I’d advise you…

View original post 3,098 more words

HTML5

Good quick read on HTML5 and different applications that it has been developed for. Very informative and to the point. Check it out.

Real World Software

HTML5 is a specification which is used for developing web browsers like Internet Explorer.  It helps to define what the browser should do.

What is the point of HTML5?

Compatibility Issues

The problem with web development is that there are significant differences between various web browsers.  This includes differences between newer versions of a specific browsers such as Internet Explorer and differences between rival browsers.  Also there are a number of plug-in tools (e.g. Flash) which may need to be installed.

View original post 357 more words