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

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!

Important Browser Specific CSS Properties You Should Be Aware Of

There are many different browsers being used this day in age. For the most part, browsers render CSS the same but there are a few instances where certain browsers just do not recognize some properties. This is where Cross-Browser Compatibility testing comes into play.

Sometimes, there is an easy fix to make the styles on a website to look the same across browsers. Today, the most common browser according to W3Schools, the browsers used most often currently are listed in the chart below:

browserstats

For now, I will ignore Internet Explorer as I will talk about how to use special instances for IE in a separate post.

Firefox has a special property prefix in some instances, this prefix is: -moz-

Similar to Firefox, Safari and Google Chrome are similar as in they both use webkit. The prefix for webkit properties is: -webkit-

Opera has a special property prefix in some instances, this prefix is: -o-

Below are important CSS/CSS3 properties to keep in mind while doing cross browser compatibility. These are the most common properties that can be easily rendered across browsers using these prefixes:

Border Radius (CSS3)

.RoundedCorners{

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;

}

Border Radius can take one input for the radius measurement, or four inputs:

.RoundedCorners{

border-radius: 5px 5px 10px 10px;
-moz-border-radius: 5px 5px 10px 10px;
-webkit-border-radius: 5px 5px 10px 10px;
-o-border-radius: 5px 5px 10px 10px;

}

 

Box Shadow (CSS3)

.DivWithShadow{

box-shadow: 5px 5px 5px #333333;
-moz-box-shadow: 5px 5px 5px #333333;
-webkit-box-shadow: 5px 5px 5px #333333;
-o-box-shadow: 5px 5px 5px #333333;

}

Gradient (CSS3)

Below is a linear gradient from the top to the bottom:

.GradientDiv{

background: linear-gradient(red, blue);
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);

}

Below is a linear gradient from left to right:

.GradientDiv{

background: linear-gradient(left, red , blue); 
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: -webkit-linear-gradient(to right, red , blue);

}

Below is a linear gradient that goes diagonally:

.GradientDiv{

background: linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: -webkit-linear-gradient(to bottom right, red , blue);

}

 

Animation (CSS3)

For this example we will do a simple CSS3 transition that changes the color of a link gradually from one color to another.

First we set the color of the link:

a:link{

color: #333333;

}

Then we set the hover with the transitions, time transitions should take place, and cross-browser properties:

a:hover {

 color: #FF0;
 transition: color 0.5s;
 -moz-transition-property: color;
 -webkit-transition-property: color;
 -o-transition-property: color;
 -moz-transition-duration: 0.5s;
 -webkit-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;

}

 

Transform (CSS3)

For this example, we will use the transform property of rotate:

.TiltedDiv {

 transform: rotate(2deg);
 -moz-transform: rotate(2deg);
 -webkit-transform: rotate(2deg);

}

In the next post, I will explain how to detect, add custom CSS, or remove certain properties in Internet Explorer. Keep Coding!

QuirkTools: Great Free Web Development Resource

I stumbled upon this website and thought that it may be of use to others in the development realm as I have found it very useful. The website is

http://www.quirktools.com

There are four different tools that can be used on the website, each offering an easy to use interface for different stages of development.

SMAPS: Quick and easy “drag and drop” style site map tool that you can use right in your browser. This is very useful in the beginning stages of your development to figure out where you will have links lead to and how you want the flow of your website to go.

You can have up to 3 active projects until you have to pay for QuirkTools premium plan. (Pretty solid deal!)

WIRES: Create interactive wireframes to your specified grid and layout directly in your browser. Really cool idea and, just like SMAPS, you can have up to 3 saved projects until they will make you purchase the membership.

SCREENFLY: This tool is phenominal. This is to test the responsiveness of your website. Simply enter the URL, and it will give you the option to view your website in multiple different size and resolution screens, right in your browser! You can use this tool for free anytime, as there is nothing that QuirkTools needs to save for you so this tool ranks up there with the best free resources for development that I have found so far online.

RETRO: This tool is cool as it will show you the exact dimensions, resolution, pixel ratio, viewport size, and IP address for the machine that you are developing on. This is also completely free to use and can come in handy at times.

QurkTools is a pretty awesome resource for the web developer to hone their skills on. If you’re weary on checking it out, I would say the screenfly feature would be the onre that would make you love QuirkTools.

I hope this was a help to developers out there, I’ll keep my eye out for any other cool tools and resources like this to pass along to you guys. Happy Developing!

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!