LINKS

Web Studio Next Accordian



If this is your first Add-on and you aren't too familiar with web studio use the instruction page
It will open in a new window so you can refer to it as you go along.



Web Studio Next

What are the ADD ON effects made with?

I use jQuery a JavaScript library that works in all browsers designed
to simplify the client-side scripting of HTML.
It hasn’t been around very long, being released in January 2006.
It's a new and exciting technology that is catching on quickly
by making the internet more interactive and enjoyable.

Why use that?

jQuery provides us with a special utility on the document object, called “ready”,
allowing us to execute code ONLY after the page has completely finished loading.
It is unobtrusive scripting, as it allows us to completely separate the code from our markup.
There is no plugin needed to render jQuery web-page ready and it will help with search engines
not leave a blank hole like Flash plus it works on ipads and iphones that's just for starters...
It's about size, speed and what you can do with it, and this is just the beginning.

Sounds large, does it slow the page down?

The opposite, the core is only 20KB that's smaller than most thumbnail images and I make
it so it loads that from google so the possibily is high that it is already in your browser cache.
Take the full background ADD ON for example, that uses a small image and makes it fill the browser screen. That used to not be possible without a huge image download.

Who uses it?

I've read that of the top 10,000 sites over 60% use jQuery already.
Google, Amazon, IBM, Microsoft, Twitter, Dell, NBC, CBS, Bank of America just to name a few...
I figure it's time to get our web studio sites up to date too.

This is what a typical ADD ON page looks like

Select the HTML TAB, INSERT PAGE HTML and put this INSIDE HEAD

Select the HTML TAB, in ADD HTML select HTML OBJECT

1. Put the code in the head, and put the HTML OBJECT object on your page.
2. Double click on the HTML Object and paste the code press Okay to Save
3. Select the HTML OBJECT and drag it by the handles to the width you like
4. The height will be determined automatically by the content
5. Type in the messages you want and the Titles where shown
6. To have it drop down over something on your page use "bring to" Front in Page Layout

Customizing

In the HEAD
You can change the Title and Content font colors and background colors
Look for the [+] boxes

In the HTML object
You type your Messages and Titles and you can add or delete the amount of sections
Look for the green notes <!-- the notes look like this --> they will show you the sections
aaaaaaaaaaaaiii