Spry Tabbed Pannels issue: adding new divs disrupting widget

I am having issues adding divs to the existing html framework of the .TabbedPannel div. Once I add additional divs, the content for each individual tab is displayed in one long pannel. I think once I added the new divs, the javascript was messed up. I'm a newb when it comes to javascript. does someone have advice for this issue?
Note, once I added the ".b" ".l" ".r" class divs, the pannels got all messed up.

Hi,
As you are already aware, this is where it goes wrong:
       <div class="TabbedPanelsContentGroup" >
        <div class="b"><div class="l"><div class="r">
         <div class="TabbedPanelsContent" id="derek">
If you want to assign different CSS rules to your content-panel, then why not apply those rules as follows:
       <div class="TabbedPanelsContentGroup" >
        <div class="TabbedPanelsContent b l r" id="derek">
Also you can apply CSS rules within the TabbedPanelsContent-div to suit your needs.
I hope this helps.
Ben

Similar Messages

Spry Tabbed Pannel Trouble

Sorry for the newbie question, but I'm really in a bind right
now. I am using a spry tabbed pannel on my company's website that
I'm in the process of designing, and yesterday it worked perfectly.
At the end of the day yesterday, I did something and I'm not sure
what did it exactly, and now when I test it in the browser, I click
on one tab it shows me the contents of the wrong tab.
To try and paint a picture, I work for a small communications
company/ISP, so I have tabs for "home" "internet" "telus mobility"
"bell expressvu" "products" "about us".
Everything works left of "telus mobility". Once I click on
the telus one, it comes up blank. When I click on "bell expressvu"
the telus page comes up. When I click on "products" it comes up
blank. When I click on "About us" the telus page comes up.
I've tried making a new page and copying and pasting the
contents of the screwed up tab, but that just came up with the same
problems, so I'm thinking the problem is with the contents, and not
necessarily the CSS coding, but then again, I'm a total newbie and
I could be way off base. If anyone has any ideas I'm totally open
to hearing them. If you want to look at the page, I'd be happy to
send you the root folder.
I guess another option for me would be to just write the
whole page out again, which I guess wouldn't be the end of the
world, and might be faster. I was just hoping someone might have
had this problem before and knows what to do.
Thanks so much in advance.
-caleb

Post a link to the page, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"calskin" <[email protected]> wrote in
message
news:fp4ive$b0i$[email protected]..
> Sorry for the newbie question, but I'm really in a bind
right now. I am
> using
> a spry tabbed pannel on my company's website that I'm in
the process of
> designing, and yesterday it worked perfectly. At the end
of the day
> yesterday,
> I did something and I'm not sure what did it exactly,
and now when I test
> it in
> the browser, I click on one tab it shows me the contents
of the wrong tab.
>
> To try and paint a picture, I work for a small
communications company/ISP,
> so
> I have tabs for "home" "internet" "telus mobility" "bell
expressvu"
> "products"
> "about us".
>
> Everything works left of "telus mobility". Once I click
on the telus one,
> it
> comes up blank. When I click on "bell expressvu" the
telus page comes up.
> When I click on "products" it comes up blank. When I
click on "About us"
> the
> telus page comes up.
>
> I've tried making a new page and copying and pasting the
contents of the
> screwed up tab, but that just came up with the same
problems, so I'm
> thinking
> the problem is with the contents, and not necessarily
the CSS coding, but
> then
> again, I'm a total newbie and I could be way off base.
If anyone has any
> ideas
> I'm totally open to hearing them. If you want to look at
the page, I'd be
> happy to send you the root folder.
>
> I guess another option for me would be to just write the
whole page out
> again,
> which I guess wouldn't be the end of the world, and
might be faster. I
> was
> just hoping someone might have had this problem before
and knows what to
> do.
>
> Thanks so much in advance.
>
> -caleb
>

Spry Tabbed Pannels - Moving the tabs down

I am trying to learn Spry tabbed pannels. i opened dreamweaver and inserted a div and then a spry tabbed pannels into the div.
How do i move the tab 1, tab 2 ect.. down so its not above the changing content but rather hovering over it.
I am trying to create a simple efect where when you press each tab, it changes the picture, but i want the buttons to hover over the picture.
thank you in advance

Ok but to make that specific modification, what style sheet do i edit? spry creates several

Spry tabbed pannels

How do i make spry tabbed pannels automaticaly switch between tabbed panels every few seconds?

http://forums.adobe.com/thread/119099

Spry Tabbed Panels: Issue in Safar 4

I am having an issue with Spry Tabbed Panels that only seems to happen in Safari 4. I am using Spry Tabbed Panels 1.4 through Dreamweaver CS3. The tab panel still works great. Now, though, when you select a tab, it put a blue link border around the tab itself. When you load the page the tabs are fine. It only occurs when you select a tab and only on the selected tab. I looked around for any other sites that were using tabbed panels and it happens on those sites as well.
I am including a site I found that has a perfect example:
http://www.daughterskitchen.com/cookiediet.html
Click on one of the tabs where it says about the cookie diet.
I have looked into any way to stop this from happening. Has anyone seen this and come up with a solution?
If you need more info, let me know.
Thanks.

I think your are referring to the css attribute: outline:none;
Added outline:none; to the css rule and it should be gone.

Firefox - Spry tabbed panel issue

Hi, need a little trouble shooting help here.
This works fine in ie7 but not Firefox 2 or 3. The Spry
Tabbed Panel just looks like an ordinary unordered list but it's
still clickable.
I've placed the script in the header and the css is imported
in the main style sheet.
The live site is here:
www.precisionhomesanddesign.com
Thanks to all who take a moment to look into this.
- palmtek

Cory C. wrote:
> Hi, need a little trouble shooting help here.
> This works fine in ie7 but not Firefox 2 or 3. The Spry
Tabbed Panel just
> looks like an ordinary unordered list but it's still
clickable.
> I've placed the script in the header and the css is
imported in the main style
> sheet.
> The live site is here:
http://www.precisionhomesanddesign.com/
Cory,
I copied and pasted your code into a new document locally and
then attached the JavaScript and CSS files for the Tabbed panels
and it styled and worked correctly for me. I then noticed that your
live page you have the Spry CSS files imported into your mainStyler
using the following syntax:
@import url ("../includes/SpryTabbedPanels.css");
I tried similar syntax using Dreamweaver to link in the css
file into an attached CSS file and it created code like this:
@import url("../SpryAssets/SpryTabbedPanels.css");
and it then began to work. It took a while, but it finally
struck me that there is a space between url and ( in your code and
none in the code I had created. So I added a space to my code and
then the styling broke, removed it and the styling came back. So
try removing the space (probably for all 3 @imported files) and see
how that works out for you.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry Tabbed Panels issue

I'm having an issue with a footer table that is underneath my spray asset. When you open the site in Safari, this table appears off to the side of the spry content, when I'd like it to appear beneath the content..as it is a footer..This ONLY happens in Safari! It works perfectly fine in IE, Chrome, and Firefox.
I think it may have something to do with the fact that each content area of the tabbed panels is a different height, but I'm not sure how to go about fixing this. Can anyone help me?
Here's the website:
http://www.duffsdepew.com
Thanks so much!

You are using Spry version 1.4. At the very least you should be using Spry version 1.6 which will likely overcome your problem.
Even better is if you switch to Spry Tabbed Panels 2. Have a look here http://labs.adobe.com/technologies/spry/ui/
I hope this helps.
Ben

Adding new divs for banner ad placement

Hello,
I am attempting to add new divs for banner ads to the left and right of the page inside my container and can't figure out how to position them. I have modified a screen shot below to show where I want them (they are just layers I created in photoshop). I didn't create the page and am lost. Is it a matter of 'splitting' the current divs in the doc?
I added padding to create space to the left but I don't think that was the way to go...
Thanks a ton for help on this one!

Is this a template that you purchased... you didn't do the actual layout yourself?
There are a ton of nested <div>s in there used for some background images.... I really have no idea why so many! I would have used maybe a couple of background images and called it good. Anyway, now you'll have to work around all those nested <div>s.
The area on the left is because of the 150 px of padding in <div class="aside">.
To make that space available, you'll need to remove that padding, and use two floated elements instead of just the one element that's there now.
I'd suggest that you review how the CSS box model works, along with how to "float" an element. Then you'll be able to align two or more container <div>s side by side.
http://www.w3schools.com/css/css_boxmodel.asp
http://www.w3schools.com/css/css_float.asp
You may have a better learning experience if you start very simple... on a new, blank Web page, work in code view and place 4 <div>s, use the first <div> to wrap around and contain the other 3. Then place those 3 side by side. Give each a width, height, and a different background color so you can see where and how they align when floated. Play around with it a little until you understand how floats work.... then tackle your actual Web page.
Best wishes,
Adninjastrator

Spry tab pannel with safari

in our asp.net application we are using spry tabbed panel and
rad(telerik) ajax manager.
there are some images and on image click the respective
datalist will be populated the data display is done by using
partial post back.
Its working fine in ie6,ie7 firefox But not working in safari
3.1.1.
the loading image keeps loading without any data display.
Its real urgent so if anybody can please help me out.

Exactly the same problem, but in Safari 3.04
If anyone know...please help
Tha

Display Issue with Spry Tabbed Pannel

Please help! I have been reading discussions for hours and still cannot figure out why my tabbed panel will not display properly in firefox or iexplorer. It looks correct in design mode in cs5 and in browser check. Here is the URL http://www.rrsfoodservice.com/indextest2.html. Any help is appreciated.
Stephanie

I have had another look at your page.
It seems like you haven't got round to uploading those spry files yet or are you having some other trouble.
I checked your page in the validator again and came accross this:
   
    <link href="library/RRS_NavMenu-files/styles_um4yi.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
    A#vbUL_um4yia{display:none}
    </style>
    
    </head>
    <body>
    
I suspect that's a bit of careless cutting and pasting?
Martin

Issue adding new transaction to CHM-PM CHM-PARTNERMANAGER Role

7.0 SP05. We want our channel partner CHM-PM to be able to create a return complaint CRMR (we copied to ZRMR)
I can not figure out how to assign the document type to allow the role to create it despite adding the Complaints and Returns tab on the left hand side of the role.
I copied business role & PFCG role to new Z roles and PFCG security
CHM-PM & SAP_CRM_UIU_CHM_PARTNERMANAGER
and
SERVICEPRO & SAP_CRM_UIU_SRV_PROFESSIONAL
I added both Z roles in SU01 to my user and assigned my user 2 positions with both roles.
I adjusted my role ZCHM_PM setup so they have the "Complaints and Returns" tab as in the SERVICEPRO.
The use can find created ZRMR documents and edit them, but when I do create no document type is found.
My SERVICEPRO role has no issue creating the ZRMR document, and since both roles are assigned to the same user, this should eliminate security being an issue.
In the define roles CRMC_UI_PROFILE, the CHM-PM has profile type "No Clssification" where the SERVICEPRO has Profile type C CRM Webclient Business Role.
In the IMG SPRO > CRM > Basic Functions > Worklist > Define Business Transaction Inbox > Define Inbox Profile I assigned the ZRMR document to the profile CHM-PM but it did not resolve my issue.
Is there an additional config step(s) that I am missing?

In the NAV Bar profile for my channel partner profile, in the "Define Generic OP" I was missing the entries for BT120_CPL that are in the servicepro role.
the IMG SPRO > CRM > Basic Functions > Worklist > Define Business Transaction Inbox > Define Inbox Profile do not seem to be limiting the just the desired complaint transactions, but I'll treat that as a separate issue.

Spry Tabbed Pannels With Button - Button Breaks When Trying To Make Horizontal Aligned, Plz Help!

I use Spry Panels with buttons in it.
These buttons work like a charm and show from top to bottom. Never had problems.
But now i wanted to make a variation, where these buttons go from left to right. So i tryd making them horizontally but without succes.
I did got them horizontally but then the button-code wont work...
Can anyone plz take a look and tell me how to get these horizontally?
My efforts so far broke the code of the buttons.
The original VTabbedPanels Code;
[code]
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
      <div class="TabbedPanelsTab" >
        <table class="Button" >
          <tr>
            <td style="padding-right:0px" title ="Home"><a href="#" title="Info" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br />
            </a></td>
          </tr>
        </table>
      </div>
      <div class="TabbedPanelsTab" >
        <table class="Button" >
          <tr>
            <td style="padding-right:0px" title ="Info"><a href="javascript:TabbedPanels1.showPanel(2);" title="Info" style="background-image:url(Buttons/Info.png);width:172px;height:75px;display:block;"><br />
            </a></td>
         </tr>
        </table>
      </div>
      <div class="TabbedPanelsTab" >
        <table class="Button" >
          <tr>
            <td style="padding-right:0px" title ="Gallerij"><a href="javascript:TabbedPanels1.showPanel(3);" title="Gallerij" style="background-image:url(Buttons/Gallerij.png);width:172px;height:75px;display:block;" ><br/>
            </a></td>
          </tr>
        </table>
      </div>
      <div class="TabbedPanelsTab" >
        <table class="Button" >
          <tr>
            <td style="padding-right:0px" title ="Contact"><a href="javascript:TabbedPanels1.showPanel(4);" title="Contact" style="background-image:url(Buttons/Contact.png);width:172px;height:75px;display:block;"> <br/>
            </a></td>
          </tr>
        </table>
      </div>
[/code]
All i want is these buttons in a horizontal configuration inst of vertical.
I left unneccesary code, if you need the complete code plz ask and ill post it.
Plz tell me what needs to be done to get this horizontal without broken buttons.

The removing of the V didnt work.
The following code makes the buttons horizontally, but breaks function of the button code, so buttons wont work anymore.
EDIT: The buttons do move from up - down state but links are broken. Code doesnt open tab content.
<div id="TabbedPanels1" class="TabbedPanels">
            <ul class="TabbedPanelsTabGroup">
      <div class="TabbedPanelsTab" >
        <table class="Button" >
          <tr>
            <td style="padding-right:0px" title ="Home"><a href="#" title="Info" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br /></a>
            </td>
            <td style="padding-right:0px" title ="Info"><a href="javascript:TabbedPanels1.showPanel(2);" title="Info" style="background-image:url(Buttons/Info.png);width:172px;height:75px;display:block;"><br /></a>
            </td>
            <td style="padding-right:0px" title ="Gallerij"><a href="javascript:TabbedPanels1.showPanel(3);" title="Gallerij" style="background-image:url(Buttons/Gallerij.png);width:172px;height:75px;display:block;" ><br/></a>
            </td>
            <td style="padding-right:0px" title ="Contact"><a href="javascript:TabbedPanels1.showPanel(4);" title="Contact" style="background-image:url(Buttons/Contact.png);width:172px;height:75px;display:block;"> <br/></a>
            </td>
          </tr>
        </table>
      </div>
Can someone explain why the button code doesnt work anymore?
Bec i really dont have a clue.

Having issues adding new package in brushes library?

i purchased a symbol package online and it came with these instructions ... http://www.vectorian.net/pages/how-to-us… that i followed to a T. the problem.,. well the symbols and the brushes do not show in library for me to use. the package name showed in the library.. but when i click on it, the list is empty. what may i be doing wrong? how can i get them to show in the library permanently please?
by the way, when i open the downloaded package using Ai, the symbols are there and i am able to open them no problem. but i can't get them to populate in the brushes, symbols library.

You can load any AI file as a library file. Just use Window>Brush Library>Other Library and navigate to the AI file.
Notice how they are all listed as AI files.
And here's the Grunge brushes vector pack.ai as a library

Spry tabbed pannels not working on iexplore 9 firefox 5 and others

Hi I have this website http://www.vlahell.com/vph and does not displays correct on many web browsers. Sometimes the last block goes down.
On Internet Explorer 6 , 7, 8 it's ok but on version 9 none.
Also Firefox 5 , 7 not good but on firefox 8 it's ok. Anything obscure going on here?
Also if possible the validator says tabindex does not exist; and the blue container at the bottom is unable to move to the left, even using the negative margin.
Thanks in advance.
Sincerely Vladimir Orona
CEO http://www.vlahell.com

You pointed in the right direction. I Changed the width, so now looks very close to each other; the container moved to the right, then I removed the border and now it's pretty equal on different navigators.
Still bugs on iexplore 9, but it's minimal. Offset of 5px, but It's ok.
Thanks

Spry Tab as a link problem

Hi All,
this is hopefully a simple thing to fix but I've spend nearly two days messing with it and I'm stumped. I've had a fairly good look on the forums, on the net in general and even some IRC channels but to no avail. If theres a thread on the form I've missed please let me know. Basicall I'm using a spry tabbed pannel with 8 main links in it. Two of these, the first and the sixth I want to be a link themslves, ie they don't have any sub panel below. the first one is a "HOME" buttom that brings you to the home page and the sixth one is to ring you to a different page altogher, off site. here is the code i've been using so far ( for simplicity, I'll just put up a condnsed link version without the sub pannel stuff)
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0"><a href="http://google.com/">HOME</a></li>
            <li class="TabbedPanelsTab" tabindex="1">Admin</li>
            <li class="TabbedPanelsTab" tabindex="2">school</li>
            <li class="TabbedPanelsTab" tabindex="3">Randomness</li>
            <li class="TabbedPanelsTab" tabindex="4">Shop</li>
            <li class="TabbedPanelsTab" tabindex="5">IBU</li>
            <li class="TabbedPanelsTab" tabindex="6">Holidays</li>
            <li class="TabbedPanelsTab" tabindex="7">Links</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">
            </div>
When I click on the first tab, HOME nothing happens. The browser knows its a link but wont follow it, only if i right click and choose open in new tab/page will it follow the link.
Any suggestion, I'v tryed a lot of different possible solution al to no avail, shurly it should't be this difficult to do such a simple thing?
Any and all help would be appreciated.

Try
<li class="TabbedPanelsTab" tabindex="0"><a href="http://google.com/" onClick="window.location = this.href; return false;">HOME</a></li>

Spry Tabbed Pannels issue: adding new divs disrupting widget

Similar Messages

Maybe you are looking for