Friday, March 26, 2010

Accordion Link to tab?

Okay,  I know this isnt anything new.  But, I have looked all through the forums trying to find an answer that works for me.  I am building a website and I am using the Spry accordion widget as part of my page not as a menu.  I am trying to then create a drop down menu and then link to a particular tab of my accordion.  I am using the accordion for the services page and each tab holds information for the different services the company offers.  I have tried the html code that is found in the adobe help but that did not work for me.  Maybe I pasted the code in the wrong place or something...im not sure.  I put the code in the body of my page.  I got the buttons to pop up but when you click on the buttons they dont take you anywhere.  I could always create seperate pages that start with a different tab open but that kind of defeats the whole purpose of using the spry accordion.  I am using dreamweaver cs3 i updated my spry to 1.6.  Any help would be greatly appreciated.   The test link on the server is www.vsncom.com/corprint/services.html  give that a look see.  Now I have not created the menu yet.  I keep putting buttons in and keep trying to get this to work before I do build my menu.  So, you can atleast look at the code.  I will also post the code here.  I appreciate the help you can offer.

Matt

%26lt;!DOCTYPE html PUBLIC ''-//W3C//DTD XHTML 1.0 Transitional//EN'' ''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd''%26gt;

%26lt;html xmlns=''http://www.w3.org/1999/xhtml''%26gt;

%26lt;head%26gt;

%26lt;meta http-equiv=''Content-Type'' content=''text/html; charset=UTF-8'' /%26gt;

%26lt;title%26gt;Untitled Document%26lt;/title%26gt;

%26lt;style type=''text/css''%26gt;

%26lt;!--

body {

background-image: url(textureyellow.jpg);

background-color: #FFCC66;

background-repeat: repeat;

}

.style2 {

color: #000000;

font-size: 18px;

font-family: Helvetica;

}

--%26gt;

%26lt;/style%26gt;

%26lt;script src=''SpryAssets/SpryAccordion.js'' type=''text/javascript''%26gt;%26lt;/script%26gt;

%26lt;link href=''SpryAssets/SpryAccordion.css'' rel=''stylesheet'' type=''text/css'' /%26gt;

%26lt;style type=''text/css''%26gt;

%26lt;!--

.style4 {

font-family: Helvetica;

font-size: 18px;

}

.style5 {

font-family: Helvetica;

font-size: 24px;

}

.style6 {font-size: 24px}

.style7 {font-family: Helvetica}

.style8 {font-size: 18px}

.style9 {font-family: Helvetica; font-size: 36px; }

--%26gt;.Accordion {

border-left: solid 0px gray;

border-right: solid 0px black;

border-bottom: solid 0px gray;

overflow: hidden;

}

.AccordionPanel {

margin: 0px;

padding: 0px;

}

.AccordionPanelTab {

background-color: #CCCCCC;

border-top: solid 0px black;

border-bottom: solid 0px gray;

margin: 0px;

padding: 2px;

cursor: pointer;

}

.AccordionPanelContent {

overflow: auto;

margin: 0px;

padding: 0px;

height: 300px;

}

.AccordionPanelOpen .AccordionPanelTab {

background-color: #EEEEEE;

}

.AccordionPanelClosed .AccordionPanelTab {

}

/*Accordion behaviors  classes*/

.AccordionPanelTabHover {

color: #555555;

}

.AccordionPanelOpen .AccordionPanelTabHover {

color: #555555;

}

.AccordionFocused .AccordionPanelTab {

background-color: #3399FF;

}

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {

background-color: #33CCFF;

}

%26lt;/style%26gt;

%26lt;/head%26gt;

%26lt;body%26gt;%26lt;center%26gt;%26lt;table width=''760'' border=''0''%26gt;

  %26lt;tr%26gt;

    %26lt;td height=''99''%26gt;%26lt;div align=''center''%26gt;%26lt;img src=''new corprint logo.jpg'' width=''600'' height=''200'' /%26gt;%26lt;/div%26gt;%26lt;/td%26gt;

  %26lt;/tr%26gt;

  %26lt;tr%26gt;

    %26lt;td height=''99''%26gt;%26lt;div align=''center''%26gt;%26lt;img src=''banner.jpg'' width=''600'' height=''100'' align=''top'' /%26gt;%26lt;/div%26gt;%26lt;/td%26gt;

  %26lt;/tr%26gt;

%26lt;/table%26gt;

%26lt;/center%26gt;

%26lt;center%26gt;%26lt;p%26gt; %26lt;/p%26gt;

%26lt;table width=''762'' height=''557'' border=''0''  style=''background:url('africa.jpg') no-repeat;''%26gt;

  %26lt;tr%26gt;

    %26lt;td width=''745'' align=''top'' height=''5''%26gt;%26lt;table width=''748'' height=''514'' border=''0''%26gt;

      %26lt;tr%26gt;

        %26lt;td width=''1'' height=''20''%26gt; %26lt;/td%26gt;

        %26lt;td width=''718''%26gt;%26lt;div align=''center'' class=''style9''%26gt;Services%26lt;/div%26gt;%26lt;/td%26gt;

        %26lt;td width=''15''%26gt; %26lt;/td%26gt;

      %26lt;/tr%26gt;

      %26lt;tr%26gt;

        %26lt;td%26gt; %26lt;/td%26gt;

        %26lt;td valign=''top''%26gt;%26lt;br/%26gt;%26lt;div id=''Services'' class=''Accordion'' tabindex=''0''%26gt;

          %26lt;div id=''business'' class=''AccordionPanel''%26gt;

            %26lt;div class=''AccordionPanelTab style7 style6''%26gt;Business%26lt;/div%26gt;

            %26lt;div id=''business''class=''AccordionPanelContent style7 style8''%26gt;%26lt;p%26gt;From brochures to boxes, bags to business cards; from catalogs to coffee sleeves, and point of purchase to product specification sheets CORPrint offers an array of ideas, designs and creative print pieces to fulfill the needs of today’s tight, competitive business climate. The next time you need in house inventory cards, or that top end marketing package think CORPrint. And for that focused design piece, or last minute emergency the digital, variable data, high speed press stands ready to open doors of opportunity to the creative business client.%26lt;/div%26gt;

          %26lt;/div%26gt;

          %26lt;div id=''college'' class=''AccordionPanel''%26gt;

            %26lt;div class=''AccordionPanelTab style7 style6''%26gt;College%26lt;/div%26gt;

            %26lt;div class=''AccordionPanelContent style7 style8''%26gt;%26lt;p%26gt;From books to banners; admissions to sports, catalogs to disks, and on to sports and curriculum CORPrint management has scored an “A” in performance and service for well over 40 years of supplying quality materials to the field of education. When it comes to education the “presses print college.”%26lt;/div%26gt;

          %26lt;/div%26gt;

          %26lt;div id=''tourism'' class=''AccordionPanel''%26gt;

            %26lt;div class=''AccordionPanelTab style5''%26gt;Tourism%26lt;/div%26gt;

            %26lt;div class=''AccordionPanelContent''%26gt;

              %26lt;span class=''style4''%26gt;%26lt;p%26gt;From brochures to billboards; rack cards to T-shirts; maps to bus tour programs…

              %26lt;/p%26gt;

              %26lt;/span%26gt;

              %26lt;p class=''style4''%26gt; … the experience CORPrint has gained from its alliance with the tourism and hospitality industry often allows for questions to be answered before they are asked. Whether it is a school group, or a small convention; whether they are visiting a historic site or a sandy beach vacation spot the “presses print hospitality”, and CORPrint designs fun, fuzzy, warm and welcome.%26lt;/p%26gt;

            %26lt;/div%26gt;

          %26lt;/div%26gt;

          %26lt;div id=''international'' class=''AccordionPanel''%26gt;

            %26lt;div class=''AccordionPanelTab style4 style6''%26gt;International%26lt;/div%26gt;

            %26lt;div class=''AccordionPanelContent''%26gt;

              %26lt;span class=''style4''%26gt;%26lt;p%26gt;To identify the needs of the American marketplace is a big enough task, but to attempt to market, print and prepare promotional materials for another part of the world is daunting. With indepth involvement in a major humanitarian program in Malawi, Africa the owners of CORPrint set out to identify the means through which they could obtain the needed resources from the world market and focus them on Malawi, the third poorest nation on earth. With a combination of design, print, video, email and web marketing the Malawi Project has been established as a major contributor to this tiny nation in the sub-Sahara of Africa.

              %26lt;/p%26gt;

              %26lt;/span%26gt;

              %26lt;p class=''style4''%26gt; This experience gives a cutting edge to the organization that goes to CORPrint to assist in the design and print of literature with a world slant. Remember, the “presses print international.”%26lt;/p%26gt;

            %26lt;/div%26gt;

          %26lt;/div%26gt;

          %26lt;div id=''notforprofit'' class=''AccordionPanel''%26gt;

            %26lt;div class=''AccordionPanelTab style4 style6''%26gt;Not For Profit%26lt;/div%26gt;

            %26lt;div id=''notforprofit'' class=''AccordionPanelContent style4''%26gt;%26lt;p%26gt;From churches to charities; agencies to associations, … CORPrint …%26lt;/div%26gt;

          %26lt;/div%26gt;

        %26lt;/div%26gt;        %26lt;p align=''left'' class=''style2''%26gt; %26lt;/p%26gt;          %26lt;/td%26gt;

        %26lt;td%26gt; %26lt;/td%26gt;

      %26lt;/tr%26gt;

      %26lt;tr%26gt;

        %26lt;td%26gt; %26lt;/td%26gt;

        %26lt;td%26gt; %26lt;/td%26gt;

        %26lt;td%26gt; %26lt;/td%26gt;

      %26lt;/tr%26gt;

    %26lt;/table%26gt;%26lt;/td%26gt;

  %26lt;/tr%26gt;

%26lt;/table%26gt;%26lt;/center%26gt;

%26lt;script type=''text/javascript''%26gt;

%26lt;!--

var Accordion1 = new Spry.Widget.Accordion(''Services'');

//--%26gt;

%26lt;/script%26gt;

%26lt;/body%26gt;

%26lt;/html%26gt;

Accordion Link to tab?

follow this; http://foundationphp.com/tutorials/spry_url_utils.php

No comments:

Post a Comment