Responsive design with jQuery marquee
Created
12 December 2011
Herramientas de página |
Requisitos
Conocimientos previos
Previous experience working with Dreamweaver and setting up a local host server is recommended. Prior knowledge of HTML5 and JavaScript code is also required.
Nivel de usuario
Todos
Productos necesarios
- Dreamweaver (Download trial)
Archivos de muestra
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.
- Overview: jQuery + Dreamweaver
- Watch the video: Using the custom template
- Preview and download the template
Note: For more information on CSS-only responsive design template and a starter template, see Customizable starter design for multiscreen development.
Overview: 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
Chris Converse shows you how to 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.
Preview and download the template
More Like This
- Integrating Flash content with the HTML environment
- Checking for cross-browser CSS rendering issues
- Building scalable websites with Dreamweaver
- Dreamweaver templates: Customizable starter designs for beginners
- Applying design to Spry widgets
- HTML5 and CSS3 in Dreamweaver CS5 – Part 2: Styling the web page
- Understanding CSS basics
- Introducing the HTML5 video element
- Marking up your site for easier redesign in five steps
- Getting Started with CSS excerpts: Styling tables, backgrounds, and borders