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...
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...
CSS3 transforms allow you to apply various visual effects to the items in your Web pages, including scaling elements to either increase or decrease their size. The scale transform requires only a single CSS declaration, but to ensure your pages work in the different CSS3 supporting browsers, you do need to add amended versions of the declaration to your code. As with any transform, you can apply the CSS3 scale effect on user interaction, as well as using an animated transition. Create a Page ... Create...
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 our last PHP Ad Tracker lesson, we constructed the database tables for our ad banner application. Now we are ready to construct the data object that will hold the variables and functions that will display, add, edit and delete the data in those tables. Once we name all of the variables and functions, we will start applying the code to them. Variables: The data object class will hold two variables: one to hold the banner ad ID number from the ads table, and one to hold the database connection information....
CSS3 offers a wealth of possibilities in terms of visual and interactive effects, even allowing you to create animated elements without the need for either Flash or JavaScript. In this tutorial we'll go through the process of translating a page element using a CSS3 transform. The translate function essentially moves an element by a specified distance along the X and Y axes. You do need to provide browser-specific code to create reliable transforms, but the technique is not particularly complex....
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...
Occasionally, I have needed a web page to call a child page in order to display information or to be used in a way to maintain information that will then be re-displayed back on the parent page. I didn’t want the user to be able to get back to the parent page until they have performed some function on the child page. One solution for this scenario is to use Modal Popups. In this tutorial, I will show how to use JavaScript’s window.showModalDialog() to create a Popup window and display information....