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!

Website Background Shifted to Left on Iphone5 / 4S (FIX)

Recently while developing a website for a local restaurant, I began testing on my Iphone 5 and found that although the content of the website was aligned center in the Safari browser viewport, the background seemed to be shifted over to the left, leaving a white block all the way down the right hand size of the website. After searching for a fix to this issue for a few hours I stumbled across an easy solution to the problem.

The Iphone 5 and, Iphone 4S both render a 1250px wide viewport. We must set this in our CSS using a @media query. We call our @media query at the end of our CSS page below our styles for desktop browsers. Anything that we put in the media query, depending on the size of media we specify, the @media query CSS will replace the original CSS. Thyis is  the basic framework for responsive development.

The Iphone 5 / 4S @media query to fix your background and center it in your mobile browser looks like this:

@media only screen and (max-device-width: 480px) {
        body{width:1280px;}
    }

This will center your background in your Iphone browser viewport and make your website look good, even on the go!

Change Opacity of Background Only

With the emergence of CSS3, many developers have stumbled across the CSS style for changing the opacity:

.lowOpacityDiv {
    opacity: .5;
}

It is very easy to institute as it accepts any number between .1 and 1 from lowest opacity to highest opacity. The unfortunate flaw of this method however, is that any content inside your <div> with the class of lowOpacityDiv will also be a lower opacity.

In many cases this is a problem because we may want the have a semi-transparent background on our <div>, but still want the content to be legible and have a 100% opacity.

The old fix for this was to upload a small .png file that had the desired opacity and set it as the background for the selected <div>. But there are a couple ways to use CSS3 to achieve this without using any image files. The first syntax uses RGBA (Red, Green, Blue, Alpha). The mark-up is simple and straight forward:

.lowOpacityDiv {
    background-color: RGBA(12, 13, 134, .5)
}

The above will output the RGB color code that you selected, with an opacity, or alpha channel, of 50%. There are many ways to find RGB color codes using hosted color pickers on various websites. Some easy to use color pickers for RGB syntax are:

http://www.colorpicker.com/

http://www.rapidtables.com/web/color/RGB_Color.htm

The second way to create a low opacity background in a <div> while keeping your content at a higher opacity is to use the HSLA method (Hue, Saturation, Light, Alpha). This syntax is put in the CSS just like the RGBA syntax:

.lowOpacityDiv {
    background-color: HSLA(126, 13%, 24%, .5)
}

The above will output the HSL color code that you selected, with an opacity, or alpha channel, of 50%. There are many ways to find HSL color codes using hosted color pickers on various websites. Some easy to use color pickers for HSL colors are:

http://www.hslpicker.com/

http://www.workwithcolor.com/hsl-color-picker-01.htm

Benefit

Using the methods mentioned above as opposed to using an image to achieve the same effect will help to decrease the load time of your page and in turn, having more people stay on your website. The longer the load time, the larger change you have of driving traffic away so this is definitely a great method to adopt for rendering lowered opacity backgrounds.

Browser Compatibility

The browser support for using this syntax on your projects is relatively high with FireFox, Opera, Safari, Chrome and IE 9 and above supporting it.

Thank you for stopping by!

Customize Font on the Web using Free Google Webfonts

One of the things that you may be looking to do is add a particular style font face to your website to complete the look and feel you are designing for. If none of the fonts that are preloaded into the browser seem to complete the look, there is a very simple API that has been developed by Google that allows you to choose from hundreds of different fonts to use in your website.

There are other sources that have similar API’s but Google will most likely stay around for the duration that you are using their hosted files while I cannot say the same about any other company as easily.

In order to include a font from Google’s web font library, go to http://www.google.com/fonts. Choose a font that you want to use and click the Quick-Use button in the bottom right hand corner of the chosen fonts section on the page. Scroll to the bottom of the page and copy the

<link href='http://fonts.googleapis.com/css?family=Orbitron:400,500' rel='stylesheet' type='text/css' />

and paste it into the head of your document between your <head> </head> tags.

This tells your browser to load that font from the Google web fonts library. Now you just need to tell the browser where to use the font in your page. We do this in our CSS file. We can put it in our body tag, p tag, h1 tag, etc.

body {
    font-family:'Orbitron', sans-serif;
    font-weight: 400;
}

You can copy and paste this code directly from the font’s page on the Google API website as well.

This will allow you to complete the feel of your website with custom typography.

Multiple Classes Applied to One HTML Tag

Today we are going to cover a topic that I have been asked about many times, adding more than one CSS class to an HTML tag. This seems like it may be complicated when you first think about ow you could add multiple classes, or even if it’s possible in HTML. In actuality, it is extremely simple.

In order to apply more than one class to an HTML tag, simply just put a space between your CSS classes when you call them in your mark-up. You can have two or more classes applied to a single tag and all of the CSS properties will be called and applied to your page.

<HTML>
<head>

<style type="text/css">
.logo{

	margin-left:100px;
	margin-top:360px;
	position:absolute;
	z-index:1;
}.text{
	color: #FFFFFF;
        background: #000000;
}
</style>
</head>
<body>

<div class="logo text">
DIV TEXT WITH APPLIED CLASSES
</div>

</body>
</html>

It looks like it is too simple to actually be true but this is all you have to do to apply multiple classes to one HTML tag.

Thanks for stopping by!

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!