Home > Tags > JQuery
Page 2

Clever Problem Solving Techniques for CSS

With the launch of HTML5 and CSS3 came new ways and techniques of using these advanced tools to resolve development challenges in clever ways. CSS3 can be implemented on websites to improve the browsing experience for users as well as help in quickly creating effects or functionality that for a long time required hours of labor for web developers. Below are clever ways to leverage CSS3 for Web developers: Responsive Images Responsive web design allows a design to scale perfectly based on the context....
Read more

Parallax Scrolling: An Introduction

Anyone who has played, watched friends play, or briefly saw video games that were released in the 80’s and 90’s is familiar with parallax scrolling. Think of games like Mario Bros, Streets of Rage, Kung Fu, Turtles in Time, or the original parallax scrolling game, Moon Patrol.  Parallax scrolling is when there are multiple layers of images all moving at different speeds, causing a 2D image to have a 3D-like effect. Why am I talking about retro video games on a web development site?  Well, the simple...
Read more

Developing a Responsive Website Part 4: Finishing The Homepage Portfolio Slider

This week we're going to finish up the portfolio slider on our homepage that we have already started. At this point, if you view your index.php file and scroll down to the secondary screen it should look something like this. We’re close, all we have to do now is plug in our jQuery elements and then add some CSS to make our secondary portfolio slider screen responsive. Go ahead and download the Java files you'll need from here, keep the js directory in your root folder and check out what out the image below...
Read more

Developing a Responsive Website: Secondary Page Part 2

We’re going to wrap up our tutorial on how to develop a responsive website this week by making our secondary page, well, responsive. We created our large layout for the page in our last tutorial, but now we want to make it fluid so that it will display nicely across various platforms, ranging from tablets and mobile devices to PC’s.  Let’s take a quick peak at what we’re working towards. Notice how once we hit the skinnier, mobile version of the site we go to a more vertical layout.  This makes it...
Read more

Developing a Responsive Website: Secondary Page

We’re going to begin to wrap up our tutorial on creating a responsive website this week by creating a secondary services page to feature the necessary, and important, content of our site.  Keeping a sites layout visually appealing is a crucial aspect of keeping a visitor on your site. Having a simple box filled with verbiage running from left to right is not very inviting, nor aesthetically pleasing.  When displayed like that, the sheer amount of text could be enough to cause your visitor to quickly...
Read more

Creating a Responsive Website: The Footer Part 2

We’re going to pick up where we left off in our last tutorial on creating our responsive web design footer. In the last tutorial you may recall that we laid out the large version of our footer and inserted a Twitter feed as well.  In this tutorial we’re going to finish off our footer by making it responsive and plugging in the jQuery necessary to make our Twitter feed work. If your dog ate your work up until this point, you can download the source code here. Before we get started, let’s take another quick...
Read more

Creating and Manipulating Modal Popups Part II

In the last post, Creating and Manipulating Modal Popups, I discussed what the JavaScript method showModalDialog is used for and how to implement it in your website. Part two of this topic will focus on using popups to manipulate data and pass information from the child page back to the parent. User Experience Manipulating data in the popup window can be tricky, because modal windows do not function like normal ones. In a normal window, when your page does a postback, the postback is rendered in the...
Read more

Developing a Responsive Website: The Footer

At this point we’re just about done with the homepage of our responsive website. We’ve got our navigation in place, our background images resize nicely, and our other elements are able to resize and adjust to various screen resolutions. Today we’re going to focus on tying the page off with a footer. I’ve always admired sites that put some thought in to the bottom of their page design. There are certainly times when a footer requires nothing more than some basic contact info and maybe a copyright...
Read more