Once we have finished, our Panel will appear like this:
Content Containers and Tabs
[ 238 ]
Preparation
Make a new copy of the following files in the yuisite folder:
fantasy.html
fantasy.css
Rename them to:
panels.html
panels.css
Make sure you also have the following images in your images folder:
image1_thumb.jpg
image1_full.jpg
image2_thumb.jpg
image2_full.jpg
The New Code
The CSS file will only require one new rule, which should be added to the end of
the file:
.panel {
display:none;
}
The reason for this rule is to counteract the content-flicker that can occur if the page
loads a little slowly. The flicker occurs because the panels are initially part of the
page before they are hidden by each Panel's initialization function. Setting their
display property to none makes sure they are always hidden.
We'll need to make some substantial changes to panels.html before it will function
correctly, and will require additions to both the HTML and the JavaScript in order to
function correctly.
We'll look at the additional HTML first. Change the underlying mark up of the page
so that it appears the same as below, the new code has been highlighted:
Pages:
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313