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!

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

The Deterioration of Flash and the rise of HTML5 & CSS3

Adobe Flash based websites were all the rage a few years ago but with the release of HTML5 and CSS3, Flash is slowly becoming a web platform of the past. Although some websites still use some Flash based elements (less and less), for the most part, unless Adobe makes major changes, Flash will soon become a thing of the past. This is why:

  • Adobe and Apple have had major differences in the last few years. This has caused Apple to make it very hard for Adobe to have their Flash platform render on any Apple device. Although there are some third party companies who have made plugins to resolve this device rendering issue, many potential viewers are unable to access Flash content.

 

  • Websites made entirely in Flash may look really nice (or way overdone) with animations and flashy content but they do not work with the browser. This means that any Flash website that the viewer navigates through does not allow for the use of the browser back / forward buttons. This may not seem like a big deal because you have a navigation menu that has internal links to every page on the site but many viewers are used to interacting with the website through their browser window. If viewers cannot use the browser to navigate, many will become frustrated and not return to the website.

 

  • Flash content is not Search Engine Optimizable (SEO). This means that search engine spiders cannot crawl through Flash websites and appropriately place them in search engines. Any website that is Flash cannot be optimized to show up first in search engine results. This is a major issue someone is attempting to find a website and does not have a URL.

With HTML5 and CSS3, we are able to do almost anything that we were able to do in Flash (animations/transitions) using solely mark-up. This bypasses all of the problems that I mentioned about Flash above. The only issue that I know of using some advanced transition/experimental level effects is that browser support may vary, and many old versions of browsers do not support advanced features that are present in CSS3 and HTML5. In rare instances the use of Flash objects may have their place, but the era of websites being built in entirely Flash is coming to an end.

Just sharing an observation. Feel free to comment, I always enjoy others opinions and learning new things. Thanks for stopping by and good luck on your inter-web journeys!

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!