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!

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!

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!