Using jQTouch in Dreamweaver

I was playing around with a Web Site developed using jQTouch (which is very cool, BTW) in Dreamweaver and I quickly realized that I could not see anything in Design View. jQTouch web sites consist of a single HTML file and each "page" is a <div> which is a direct descendent of the <body>. The site interaction is implemented with a combination of CSS and (unobtrusive) JavaScript.

I know that the Design View does not execute JS, so it will not render the styles applied via JS in jQTouch, and will not look like browsers (starting with CS4 you can use Live View for that), but it’s sometimes helpful to see the static content and to be able to select elements for navigating to them in Code View for editing.

So, I created a Design-time Style Sheet with the following CSS rules and attached it to my page:

* {
display: inherit !important;    /* override display:none */
font-family: Arial !important;  /* Windows: no Helvetica */
body > div {
visibility: hidden !important;  /* hide divs (except if selected) */

Now I get a list of the "pages" in the AP Elements Panel. They are all hidden (so all of the AP Elements don’t render on top of each other), but when I choose the one I want to edit, I see the static content in Design View (which displays selected AP Elements even if hidden) and the markup is selected in Code View. Here’s how it looks in DW CS4:


Get Started

Free TrialInspired by what you've read? Kick off your next project with Dreamweaver. It's part of Creative Cloud. Download a trial for free!

Share your thoughts

Your email address will not be published. Required fields are marked *