Posts Tagged ‘jQuery’


« Older Entries
October 20th, 2010 by Brian under Web Development | No Comments »

CSS3 Media Queries Experiment

Click here to view the demo!

A lot of people have been using CSS3 media queries recently to deliver different styles of their web site to users based on the size of their browser screen. Usually this comes in the form of a ‘normal’ 960px width site, and will also deliver a more condensed version for mobile platforms such as the iPad and smartphones. I decided to go a different route and create a demo that delivers content for a 960px width site, and also delivers an enhanced version for users with monitors that have a Full HD resolution (1920px width).

The site works best in webkit based browsers of course, but most of the quirks of older browers are brought up to speed using some different methods. I used CSS3PIE to enable most of the CSS3 properties used on the page to work in Internet Explorer 7 and 8. Media Queries are also a problem in IE 7-8, so I also employed a javascript project called css3-mediaqueries.js to enable them. While both of these methods have their quirks, they go a long way in helping to bring users with outdated browsers more advanced features.

Here is a list of some of the CSS3 features employed on this demo:

  • Media Queries
  • border-radius
  • box-shadow
  • linear-gradient
  • text-shadow
  • transitions
  • @font-face
  • RGBa/opacity

Please take a look at the demo I’ve created and feel free to browse the source to see how things were done. Users with a 1920px width monitor will get to see the CSS3 Media Query in action as it converts the site to a two column layout that takes advantage of the entire width of the site.  Also, if anyone is wondering what the image slider is on the demo page, it is a jQuery slider called Nivo Slider.

Click here to view the demo!


Tags: , ,
June 8th, 2010 by Brian under Web Development | 1 Comment »

HTML5/CSS3 Resume Demo

Recently I’ve been reading a lot about HTML5 and CSS3 and the amazing capabilities that these upcoming tools offer to us web developers. The border-radius and box-shadow properties themselves are huge steps forward. After looking at piles of HTML5 and CSS3 demos, I decided that it’s time to create one of my own.

For this project I decided to make a web-based resume. I actually began this project several months ago, but I was recently inspired to start over from scratch after viewing an HTML5/CSS3 layout by onextrapixel.com.

This demo works best in Google Chrome or Apple Safari. Firefox will work well enough if you don’t have either of those browsers available. I hope you enjoy it!

View The Demo: HTML5 and CSS3 Resume Demo


Tags: , ,
March 8th, 2010 by Brian under Portfolio | No Comments »

eBid Auctions

eBid Auctions is a website that I made during my internship at Landscape Forms for internal company auctions. This website uses ASP.NET and SQL Server with the jQuery User Interface to create an easy-to-use rich web application for employees to bid on auction items.  Fancy Box was also employed for image pop-ups and item descriptions.

Unfortunately I cannot link you to the website since it is internal, however I have uploaded some screen shots for your viewing pleasure.  Enjoy!


Tags: , ,
January 22nd, 2010 by Brian under News | 1 Comment »

It’s A New Year

Hello Everyone,

I would first like to apologize for not updating my site in a while. I’ve been extremely busy with the holidays and work and I just haven’t had the time! I finally finished my undergraduate program at Western Michigan University and I am now the proud owner of a BBA in Electronic Business Design! It feels incredible to be graduated from college and to be a part of the professional work force.

Speaking of which, I have been busy developing a website for the company where I am interning, Landscape Forms. This website is going to be the home for our new electronic auction system. Currently these auctions are all done via paper and pencil, and my job is to give them a more eBay like feel. I have been developing this website using ASP.NET and SQL Server, and it has been exciting learning new interactions between things such as ASP.NET and jQuery along the way. I would love to show you this website, but it is internal only. Sorry!

I hope that everyone reading this had a wonderful holiday season, and I’d like to remind you that Fro Designs is always happy to answer your web design and development needs. Enjoy the new year!


Tags: , ,
July 28th, 2009 by Brian under Web Development | 14 Comments »

Image Rollovers in WordPress

This article is an expansion upon my last article which discusses how to set up jQuery in WordPress. In this article, you will learn how to create a simple rollover image using jQuery.

First of all, you need to have your images created of course. For the sake of this article, the images should be named imagename.png, and imagename-hover.png (or any other picture file extension).

As you learned in the previous article, you need to enclose your jQuery function in a special function of its own.

This is called from an external .js file, and will work for any images inside of a div called #quote (or whatever fits your website).

jQuery(function($) {                    < --This is the enclosing function
    $(document).ready(function(){       <--This is the overall jQuery function
 
        $("#content #quote img").each(function () {    <--This function determines img src
            rollsrc = $(this).attr("src");
            rollON = rollsrc.replace(/.png$/gi, "-hover.png");
            $("<img>").attr("src", rollON);
        });
 
        $("#content #quote a").mouseover(function () {  < --This displays the -hover image
            imgsrc = $(this).children("img").attr("src");
            matches = imgsrc.match(/-hover/);
            if (!matches) {
                imgsrcON = imgsrc.replace(/.png$/gi, "-hover.png");
                $(this).children("img").attr("src", imgsrcON);
            }
        });
 
        $("#content #quote a").mouseout(function () {  <--This returns the image to normal
            $(this).children("img").attr("src", imgsrc);
        });
 
    });
});

The first part of each of the 3 functions that actually change the image contain a css path to the hyperlink (‘a’ tag). This will vary depending on the structure of your website. A good way to find the css path is to use the Firefox plugin called FireBug.

I hope this helps other developers in their WordPress and jQuery endeavors!


Tags: , ,
« Older Entries