Responsive design with jQuery marquee
Created
12 December 2011
Requirements
Prerequisite knowledge
Previous experience working with Dreamweaver and setting up a local host server is recommended. Prior knowledge of HTML5 and JavaScript code is also required.
User level
All
Required products
- Dreamweaver (Download trial)
Sample files
This template design combines both responsive design techniques coupled with a self-running jQuery promotional marquee. The unique challenge this template solves is that it uses jQuery’s Ajax feature to load additional interactive data into the template based on the user’s screen size. Combined with CSS3 media queries, this template offers a compelling user experience across devices, while maintaining a shared set of HTML and CSS markup.
Note: For more information on CSS-only responsive design template and a starter template, see Customizable starter design for multiscreen development.
jQuery + Dreamweaver
One of the great new features of Dreamweaver CS5.5 is the built-in support of jQuery. Whether you are just getting started with jQuery, or are a seasoned JavaScript developer, Dreamweaver's code completion and built-in references for jQuery are sure to increase your productivity (see Figure 1). In addition to jQuery support, Dreamweaver CS5.5 also features robust support for CSS3 media queries, making Multiscreen—or Responsive Design—a snap to set up.
Custom jQuery scripts
This template features a custom script we developed at Codify Design Studio that allows you to create an interactive homepage marquee, automatically populated and animated based on standard HTML loaded into your web page. The marquee consists of a series of panels, or slides, that contain an image, caption, and links between the panels. The panels and navigation are dynamically constructed based on the HTML content in the marquee_panels.html file (see Figure 2). There is also an autoplay feature built-in, so the marquee will advance on it’s own; however, when a user moves their mouse inside, the autoplay is disabled to allow interaction with the marquee.
Note: Special thanks to Dimas Begunoff for giving us permission to include his jQuery Image Preloader plug-in.
Dynamic loading based on screen size
When the viewport width is wider than 550 pixels, we load the HTML page containing all of the marquee panels, preload the images, then start the interactive marquee. When this design is accessed by a device with a viewport less than 550 pixels wide, we hide the marquee container div, and load an HTML file containing only a single promotion (see Figure 3). This technique significantly lessens the load on smaller screens, while still maintaining all of the advantages of CSS3 media queries.
Note to Chrome users: At the time of this article, Chrome disabled Ajax loading of local files from your operating system. This will result in a blank area where the marquee/promo area should be loaded. Chrome supports this feature when your file is served from a web server, or from a locally running web service. Read more at the Chromium open source browser project.
In addition to HTML, CSS, and jQuery, this template comes with a pre-sliced Photoshop file, allowing you to customize the design elements of the template to match your organization's branding requirements.
Watch the video: Using the custom template
The following video explains how you can use the Dreamweaver jQuery marquee template to load interactive data based on screen size. Combined with CSS3 media queries, the jQuery Ajax feature creates a compelling user experience across devices, while maintaining a shared set of HTML and CSS markup.
Learn how to use the provided Dreamweaver jQuery marquee template to create a compelling user experience across devices, while maintaining a shared set of HTML and CSS markup. (Running time: 5:38)
Preview and download the template
More Like This
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 2: Modifying the HTML and CSS
- What's new in Dreamweaver CS5.5
- Introduction to media queries – Part 1: What are media queries?
- Scripting the web – Part 2: Introduction to jQuery
- Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 1: Exporting the design
- HTML5 and CSS3 in Dreamweaver CS5.5 – Part 3: Using CSS media queries to target different screen resolutions
- HTML5 and CSS3 in Dreamweaver CS5.5 – Part 2: Styling the web page
- Getting started with jQuery Mobile
- Understanding Spry basics
Tutorials and samples |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
