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...
HTML5 offers lots of significant advantages to developers, but browser support is still pretty low. There's no reason not to start inserting HTML5 functions into sites now, as long as you take the necessary steps to check for browser support and provide alternative content for everyone else. In this tutorial we'll go over the basics of using HTML5 and JavaScript to exploit the enhanced storage facilities on offer. With HTML5 you can store more data - and store it more efficiently. The two main data storage...
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...
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...
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...
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....
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....