On Fri, Jul 17, 2009 at 3:04 PM, biotech <[email protected]> wrote:
>
> Hello everyone,
> Complete newbie user so excuse the question if it has been already
> asked.
> I am trying to implement sliding tabs.
What do you mean by sliding tabs?
>
> using:
> $("#specials").tabs().tabs('rotate', 5000); // Rotate every 5 sec.
> works great for rotation thought the list.
>
> while toggle is not taking an effect when used and rotation continues
> as the above:
What do you expect to be seeing?
What are you seeing instead?
>
> $("#specials").tabs({fx:{opacity: 'toggle'}}).tabs('rotate', 5000);
> JS:=====================
> <link type="text/css" href="css/base/ui.all.css" rel="stylesheet" />
> <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
> <script type="text/javascript" src="js/ui.core.js"></script>
> <script type="text/javascript" src="js/ui.tabs.js"></script>
> <script type="text/javascript">
> $(function() {
> $("#specials").tabs().addClass('ui-tabs-vertical ui-helper-
> clearfix').removeClass('ui-corner-all'); // Verical tabs no rounded
> corners on container div
> $("#specials ul").removeClass('ui-corner-all').addClass('ui-corner-
> right');
> $("#specials li").removeClass('ui-corner-top').addClass('ui-corner-
> right');
> //$("#specials").tabs().tabs('rotate', 5000); // Rotate every 5
> sec. works
> $("#specials").tabs({fx:{opacity: 'toggle'}}).tabs('rotate',
> 5000);
> $(".block").animate({ opacity: 0.65 }, 1 ); //Set Opacity
> });
> </script>
> HTML:===================
> <div id="specials">
> <ul>
> <li><a href="#special-1"><span>Special 1:</span></a></
> li>
> <li><a href="#special-2"><span>Special 2</span></a></li>
> <li><a href="#special-3"><span>Special 3</span></a></li>
> </ul>
> <div id="special-1">
> <div class="desc">
> <div class="block">
> <h2>Title</h2>
> <p>Description</p>
> </div>
> </div><!-- end info -->
> <a href="http://site.com";><img src="images/special1.jpg"
> width="540" height="120" alt="Special #1 Title" /></a>
> </div>
> <div id="special-2">...
> ....
> </div>
>
> CSS:====================
> #specials {
> width: 764px; /* 540px + sidebar of 220px */
> }
> #special-1,#special-2,#special-3 { /* declared so classes do not mix
> with jquery */
> float: left;
> padding: 0;
> margin: -30px 0 0 0; /* pushes img up for the 'specials info' */
> }
> /* --- Specials Info --- */
> .desc {
> position: relative;
> bottom: -120px;
> left: 0; /* Stick the desc class to the bottom of our main image
> container */
> width: 540px;
> }
> .block{
> width: 540px;
> background: #111;
> border-top: 1px solid #000;
> color: #FFF;
> }
> .block h2 {
> font-size: 1em;
> font-weight: bold;
> padding-left: 4px;
> }
> .block p {
> padding: 4px;
> }
> =====================
Generally if you've got more than 2 or 3 lines of code to share (ie super
small example), pasting it in an email is not ideal. It's too much to weed
through and see what's relevant and what isn't. Much better would be to
share a live sample page, if you've got one. If you don't, you can create
one on jsbin.com:
http://jsbin.com/
1. Select jQuery UI in the 'Include Library' drop-down
2. Add your script on the 'JavaScrtip' tab
3. Add you html on the 'HTML' tab
4. Test on the 'Output' tab to ensure we'll be able to see what you're
seeing
5. Click 'Save to public URL' button and copy the url in your post
Thanks.
- Richard
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
