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!

CSS3 Rounded Corners without Images

CSS3 has opened up a lot of doors for the world of web design as many features have created easy to institute, quick to load design options available. One of the most used simple CSS3 feature is called border-radius. border-radius allows the web designer to add rounded corners to divs, images, buttons, etc. It is even possible to create circles using border-radius and because the shapes made are purely code and no images, they will not affect your websites load time.

To create equal rounded corners using border-radius, create a class in your CSS file and call it whatever you want. for this example, we will name our class roundedCorners:

.roundedCorners {
	border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}

Just add the class name to your HTML in the desired div, image, button, etc. tag and that selected area should now have rounded corners applied to each corner.

<div class="roundedCorners"> CONTENT </div>

OR

<img src="#" class="roundedCorners" />

You can ensure that you support all browsers by adding the browser specific border-radius calls as well as just border-radius. This may be unnecessary as more and more modern browsers understand the generic call, but it is still good practice to add browser specific calls to ensure cross-browser compatibility.

We can adjust the border-radius on each corner specifically so we can create some distinct shapes by using the following:

.roundedCorners {
      border-top-left-radius: 10px 5px;
      border-bottom-right-radius: 10% 5%;
      border-top-right-radius: 10px;
}

As shown above, you can specify each corner individually very easily. If you input one value into the call for a corner of your image, div, etc. the it will be an even rounded edge.

If you apply two values to a specific corner, it will calculate the border radii of the horizontal and the vertical edge creating an uneven corner which could be a cool unexpected effect.

Values can be input in either % or px. border-radius will calculate both.

To create circles, just add a border radius of 50% to your selected div, image, etc. (just make sure that your selected area is a square to begin with, a rectangle with rounded corners will not become a circle.)

.roundedCorners {
      border-radius: 50%
}

If you follow these simple steps, you will be able to add this easy, fun, and modern effect to your websites. Just add the CSS to your CSS file and then make sure you call the corresponding class in the place you want the effect to appear in your HTML file.

Have fun creating, Thanks for stopping by!