Ajax widget not working in iBook

I wrote a simple jQuery widget that loads some string from a remote server and pops it into a text label or text area when a button is pressed.  The widget works like a charm in mac os x dashcode.  But when I preview the widget one my iPad 1 and press the button.  Nothing happens.  So then to make sure that the ajax call was even going out I put a simple mail function in the remote file to shoot me an email everytime the ajax call is made.  Sure enough when I press the button on the iPad i get an email.  But the text does not apear in the textarea.

In the solution provided it misses the server part which is very important. You have to generate a javascript code on server side. It's a trick for JSONP.
When using JQuery and JSONP, a <script src="http://www.sample.ca/web_lib/jsonp.php?json_callback=jQuery19109327708575874567_1368632112217"> tag is added in background in your DOM
It means, based on the solution in frontend of mykg4orce that you have to implement a code like that in PHP on server side:
<?php
$array = array(
     "success" => true,
     "Firstname" => "Paul",
     "Name" => "Smith"
header('Content-Type: text/javascript');
echo $_GET['jsonp_callback'] . '(' . json_encode($array) . ');'; // it will generate something similar to jQuery19109327708575874567_1368632112217 ({ "success" : "true", "Firstname" : "Paul", "Lastname" : "Smith" });
JSONP is a method to have cross domain scripts

Similar Messages

  • HTML Widget not working with iBooks when exported

    I've created an HTML widget for my iBook using Tumult Hype. The widget itself uses the draggable code. When I test it on Chrome and Safari, the code works fine. However, when I use export the iBook and test it on my iPad, the images are not draggable. This is also a problem with movie files, accordion drag and drop lists, etc.
    Anyone know what's going on?

    I never used iWeb08, but I just tried to make a site in '09 and my HTML widgets don't work either, on the web. They work if I publish to a folder.
    The widgets load flash .swf files. I had to manually put them in the site folder on my computer, and in the widget I access them with a file name like "../flash/file.swf". It worked on the folder, but when I published to the site, they don't load.
    Since iWeb doesn't know about the folder I stuck in there, I had to upload it to the site folder also. But that still doesn't fix the problem. I looked at the HTML widget source, and to me it looks like the file pathnames are correct, it just doesn't seem to be running the widget.
    Anyone have a fix for this?
    Thanks
    Bob

  • Google Voice Widget Not Working in Safari 5.1 which is Adobe flash wmode transparent based

    Google Voice Widget Not Working in Safari 5.1 which is Adobe flash with wmode transparent set. For that matter all flash text fields in Safari 5.1 are not working accross the web when wmode is set to transparent. This is a Safari bug! Other browsers work fine.
    Well after much research Adobe flash text field with wmode transparent set is not working in Safari 5.1 when any flash object has the wmode set to "transparent", or "opaque". The problem is many site must layer flash objects with html so the wmode transparent must be used.
    Affecting sites like BEST BUY, WALMART, CVS, STAPLES, Chechout their flash based weekly ads and find one that you need to update the quantity in the flash pop-up and the text field with keyboard strokes will not work. Flash text fields were all working fine until several month ago when Safari rolled out 5.1 working for Google Voice Flash based widget which uses the wmode transparent. HELP!
    John Hooper
    Techno Online Problem Solver
    http://www.johnrhooper.com

    All 3 examples seem to render just fine in IE and FF.
    See comparison photo:
    http://www.cidigitalmedia.com/web_devel/background.jpg
    If not working for you, try clearing your cache to remove any old, non working versions.
    Test on some other machine besides yours.
    Code looks fine and seems to work.
    Best wishes,
    Adninjastrator

  • Does iSight not work in iBook?

    I bought iBook G4 in 2004.
    I have ordered iSight in apple store. Not yet shipped now.
    However today my friend told me iSight may not work in iBook.
    Is it right?

    Just for others,
    In Jaguar (10.2.5 - 10.2.8) Apple sold a version of iChat 2 for Jaguar from May 2004 until Oct 4th (or that weekend) that worked in the range shown. This is actually a very similar time frame to Panther (10.3) being released.
    It is of course unlikely that anyone is in the posistion of having bought this and never used it.
    11:07 PM Tuesday; October 24, 2006

  • Bug? ajax layers not working.

    hi
    just installed safari 5. i like the new address feature where we can type the page's title instead of the url. anyway, its a feature that firefox already had quite sometime.
    anyway, most pages with ajax is not working, especially those with layers. for example, the template monster search form, the options is not displaying. works fine in firefox though.
    is it a bug?

    hi
    just reset safari, and its now working.

  • Systran widget not working in OSX 10.9.5

    Systran widget not working in OSX 10.9.5.

    I've branched this to it's own thread, since the issue you're experiencing is unrelated to the one you replied to, and it would be confusing to try and handle them in the same thread.
    Please provide as many of the follow details as possible, so I can attempt to reproduce the issue you're describing (I realize you've provided some of it):
    Read Before Posting: How To Get A Useful Answer To Your Question

  • Currency Tracker Widget not working

    Hi
    Anyone else have their Apple Currency Tracker Widget not working - when I drop it on my dashboard it shows up but cannot be edited - when I try and click on the i button nothing happens - any ideas??

    Try deleting this pref/plist file in your /Library/Preferences folder:
    widget-com.cocoade.widget.currencytracker.plist

  • BBC Radio Widget not working on Intel iMac

    The BBC Radio Widget not working on Intel iMac - can anybody help?
    Thanks

    Thanks to Mike on Safari Help I am able to 'Listen Again' (as well as listen in real time) to BBC radio programmes on my Intel iMac. I don't know about the widget but the following works:
    Open Safari with CTRL key pressed
    Click Get Info
    Click the Rosetta option
    Restart
    Go to bbc.co.uk
    Download Real Player 10.
    Regards
    Kevin (Coventry, UK)

  • Dashboard widgets not working. I trash the dashboard .plist and redo all widgets then after a restart. Widget not working again.

    Dashboard widgets not working. I trash the dashboard .plist and redo all widgets then after a restart. Widget not working again.

    Yes hello,
    My widgets are not working as well, i looked on forms and it seams that the 10.5 update fix there problems. I also did an archive and install from 10.4... One of the major reasons i purchased the upgrade was to use widgets to clip parts of safari, i'am totaly bummed because all forums i find end with the question un answered. i'am a little bummed becuase there are a couple of things that worked with 10.4 that are not working in 10.5 (like some meg moives not playing.
    i do not wish to create a new account because i do not want to reinstall all my software, photoshop, final cut, dvd studio pro.. etc.
    i hope to find the fix some how.
    I have opened up the console application and when i select widgets load or delete them i see no activity in the console. I'am not familiar with the console app. or command lines.
    is there any more info on this matter? is there any support from apple?
    Thankyou

  • Translator Widget not working

    Yes i am connected to the internet and the translator widget says data unavailable. Whats up with the widget?

    I am also having a problem with my Translater Widget not working. When enter a phrase to be translated I get the following message: "Data unabailable." I don't understand what is happening. On day the Widget is working the next day it is not. Would appreciate knowing how to resolve this problem.
    iMac G5   Mac OS X (10.4.3)  

  • Rollovers in composition widgets not working

    I have an ongoing problem with the rollovers in the composition widgets not working once published. I have had this issue on more than one site. The only way I have been able to resolve the issue it to rebuild the composition from scratch. This is very time consuming and does not always resove the issue. Any suggestions?

    Does simply republishing afresh does not help?
    Could you provide a link to such a site where we can check this issue. Please also send the Muse source file for the site to [email protected] as well so that we may also try publishing at our end and investigate.
    Thanks,
    Vikas

  • HELP!  I cannot get any of my dashcode widgets to work in Ibooks Author

    I have developed a few small widgets to work with my book in Ibooks.  They work great in dashcode but when I deploy them to my book all I see is the default image.  It does not load any of the buttons or pictures to the book when clicked on by the user.  I am fairly new to this so any help you can give me is greatly appreciated.

    Seen this?
    iBooks Author: About HTML widget creation

  • Adobe Muse slideshow widget not working on Ipad

    The Muse slideshow widget i'm using is working fine in desktop version (on my Imac and Macbook Pro Retina), but the targets (buttons) are not working when i open the website in my Safari Ipad. When i open in Ipad Chrome, it's working fine.
    The address is http://www.safra7.com/clientes/pontual/linha_tempo
    I can't figure what's wrong, after trying various solutions.
    Thanks,
    Felipe de Mello.

    To answer your first question, a widget is essentially a app extension. Try the stock market app below, once you download it you'll be able to add a stock market widget to Notification Center. If the link below doesn't work go to the App Store and enter Stocks Widget by Peeksoft in the search field.
    Stocks Widget - Track stock market portfolios and quotes inside the Today notification center by Peeksoft LLC
    https://appsto.re/us/ARcd3.i

  • Airport card 1.2.1 does not work with Ibook G3 with OSx.4.2

    I just purchased a brand new airport express base station. It seems to be up and running on my G4Imac just fine as a server.
    For the client,
    I have an ibook G3 and now have OSX.3.4 on it.
    I installed my ancient Airport card- 1.2.1 into the Ibook.
    I installed the new software from the new Airport base station.
    I tried to install the old software from the Airport 1.2.1 card but dont have Classic- so would not install.
    Now, the Ibook does not allow me to choose Airport in the Network Preferences section- does not seem to recognize there is a card installed. So, no way to connect to the base station.
    My questions:
    1.can OS X..3.4 recognize the old Airport 1.2.1?
    2. Does the software from the new base station support the old card when used in the client?
    3. Do I need different software for the card in the iBook other then the base station software? ie, is there card software that needs to be installed, and if so what is it in system X?
    Im trying to figure out if I have a hardward problem- ie the card or slot is not working- or s software problem.
    Can anyone help?

    MacOS 10.3.x has all the software to use an Airport card already installed. All I would recommend you do is install the Airport 4.1 update provided at:
    http://www.apple.com/support/downloads/airport41formacosx.html
    The software that ships on the CD that came with the Airport Express is only used to configure an Airport Express. It doesn't provide any software updates for the MacOS itself, nor for the Airport card installed in that Mac.
    First thing I suggest you do - run the System Profiler utility on your Mac. See if it identifies that an Airport card is installed. If it does not then recheck the installation of the card - ie pull out the card, then plug it in again and make sure it is fully seated into its socket. Remember to also attach the antenna cable to the card. If the System Profiler still fails to "see" the installed Airport card, then the card itself is likely defective.
    [Side note: Airport 1.2.1 was the version of the Airport software required to provide software support for the card in ancient MacOS versions. Airport 1.2.1 is not actually installed on the Airport card itself, so if you install an original Airport card into another Mac it makes no difference what Airport version was installed on the Mac the card was pulled from.]

  • My VerticalTabs Spry widget not working - help

    My HTML file:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
        font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        background: #ffdcb2;
        margin: 0px;
        padding: 0px;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    a:link {
        color: #42413C;
        text-decoration: none;
    a:visited {
        color: #42413C;
        text-decoration: none;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: underline;
    /* ~~ this fixed width container surrounds all other divs~~ */
    .container {
        width: 1136px;
        background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
        overflow: hidden; /* this declaration makes the .container understand where the floated columns within ends and contain them */
        padding: 0px;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
        float: left;
        width: 18px;
        top: 0px;
        background-color: #ffdcb2;
        background-image: url(images/01-Pocetna-strana_08.png);
        background-repeat: repeat-y;
        background-position: right top;
        height: 2026px;
    .content {
        width: 1100px;
        float: left;
        height: 145px;
        top: 0px;
        background-color: #FFF;
    .sidebar2 {
        float: left;
        width: 18px;
        top: 0px;
        background-color: #ffdcb2;
        background-image: url(images/images/01-Pocetna-strana_04.png);
        background-repeat: repeat-y;
        background-position: left top;
        height: 2026px;
        padding: 0px;
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .apDiv7 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #333333;
        padding-top: 6px;
        padding-right: 0px;
        padding-left: 26px;
        background-color: #FFF;
        height: 53px;
        width: 1100px;
        background-image: url(images/01-Pocetna-strana_12.png);
        background-repeat: repeat-x;
    -->
    </style>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    </script>
    </head>
    <body onload="MM_preloadImages('images/01-akcija-popust-seva-obelezavanje.png','images/01-Bezbe dnosno-obelezavanje.png')">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" top="0px">
      <tr>
        <td>
        <div class="container">
      <div class="sidebar1"><!-- end .sidebar1 --> </div>
      <div class="content">
      <div id="wrap">
      <div id="apDiv2" style="position: inherit; left: 151px; top: 0px; width: 1100px; height: 145px; z-index: auto"><img src="images/01-poslovno-obelezavanje-header.png" width="1100" height="145" alt="poslovno obelezavanje header"></div>
      <div class="apDiv7" id="apDiv7" style="position: inherit; left: 135px; top: 145px; width: 1100px; height: 53px; z-index: auto"><a href="SEVA-PORTAL.html">ŠEVA-PORTAL</a> |  <a href="#" target="_self">Početna strana</a> | <a href="O-nama.html">O nama</a> |  <a href="01-Reference.html">Reference</a> |  <a href="Kontakt.html">Kontakt</a> |  <a href="01-Kako-do-nas.html">Kako nas naći</a></div>
      <div id="TabbedPanels1" class="VTabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0"><img src="images/01-Glavni-spoljni-natpis.png" name="Image2" width="240" height="163" border="0" id="Image2" /></li>
          <li class="TabbedPanelsTab" tabindex="10"><img src="images/01-Spoljni-putokazi.png" name="Image3" width="240" height="163" border="0" id="Image3" /></li>
          <li class="TabbedPanelsTab" tabindex="20"><img src="images/01-Centralna-INFO-tabla.png" width="240" height="163" /></li>
          <li class="TabbedPanelsTab" tabindex="30"><img src="images/01-Spratna-INFO-tabla.png" width="240" height="163" /></li>
          <li class="TabbedPanelsTab" tabindex="40"><img src="images/01-Unutrasnji-putokazi.png" width="240" height="163" /></li>
          <li class="TabbedPanelsTab" tabindex="50"><img src="images/01-Obelezja-prostorija.png" width="240" height="163" /></li>
          <li class="TabbedPanelsTab" tabindex="60"><img src="images/01-Oglasne-table-i-vitirine.png" width="240" height="163" /></li>
          <li class="TabbedPanelsTab" tabindex="70"><img src="images/01-Ostale-oznake.png" width="240" height="163" /></li>
          <li class="TabbedPanelsTab" tabindex="90"><img src="images/01-Bezbednosno-obelezavanje.png" width="240" height="188" /></li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
            <div id="apDiv1" style="position: fixed; left: 661px; top: 209px; width: 361px; height: 51px; z-index: auto"><img src="images/02-Glavni-spoljni-natpis.png" width="361" height="51" alt="seva, novi sad, beograd, poslovno, obelezavanje, oznake, prostor, poslovni, opstina, hotel, centar, oznaka, oznake" /></div>
          </div>
          <div class="TabbedPanelsContent">
            <div id="apDiv1" style="position: fixed; left: 698px; top: 211px; width: 287px; height: 40px; z-index: 1"><img src="images/03-Spoljni-putokazi.png" width="287" height="40" alt="seva, novi sad, beograd, poslovno, obelezavanje, oznake, prostor, poslovni, opstina, hotel, centar, oznaka, oznake, srbija" /></div>
          </div>
          <div class="TabbedPanelsContent">Content 3</div>
          <div class="TabbedPanelsContent">Content 4</div>
          <div class="TabbedPanelsContent">Content 5</div>
          <div class="TabbedPanelsContent">Content 6</div>
          <div class="TabbedPanelsContent">Content 7</div>
          <div class="TabbedPanelsContent">Content 8</div>
          <div class="TabbedPanelsContent">Content 9</div>
        </div>
    </div>
      </div>
      </div>
      <div class="sidebar2">
      </div>
    <!-- end .container --></div>
        </td>
      </tr>
    </table>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    and my modified SpryTabs CSS file is:
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container. For our
    * default style, this container does not contribute anything visually,
    * but it is floated left to make sure that any floating or clearing done
    * with any of its child elements are contained completely within the
    * TabbedPanels container, to minimize any impact or undesireable
    * interaction with other floated elements on the page that may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels widget, set a
    * width on the TabbedPanels container. By default, the TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
         overflow: hidden;
         margin: 0px;
         padding: 0px;
         clear: none;
         width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    /* This is the selector for the TabGroup. The TabGroup container houses
    * all of the tab buttons for each tabbed panel in the widget. This container
    * does not contribute anything visually to the look of the widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
         margin: 0px;
         padding-left: 10px;
    /* This is the selector for the TabbedPanelsTab. This container houses
    * the title for the panel. This is also the tab "button" that the user clicks
    * on to activate the corresponding content panel so that it appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1 pixel down from
    * where it wold normally render. This allows each tab to overlap the content
    * panel that renders below it. Each tab is rendered with a 1 pixel bottom
    * border that has a color that matches the top border of the current content
    * panel. This gives the appearance that the tab is being drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this selector is not
    * necessary to make the widget function. You can use any class name you want
    * to style this tab container.
    .TabbedPanelsTab {
         position: relative;
         float: left;
         background-color: #FFF;
         list-style: none;
         -moz-user-select: none;
         -khtml-user-select: none;
         cursor: pointer;
         width: 240px;
         margin-bottom: 10px;
    /* This selector is an example of how to change the appearnce of a tab button
    * container as the mouse enters it. The class "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
         background-color: #CCC;
    /* This selector is an example of how to change the appearance of a tab button
    * container after the user has clicked on it to activate a content panel.
    * The class "TabbedPanelsTabSelected" is programatically added and removed
    * from the tab element as the user clicks on the tab button containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are positioned
    * 1 pixel down from where it would normally render. When the tab button is
    * selected, we change its bottom border to match the background color of the
    * content panel so that it looks like the tab is part of the content panel.
    .TabbedPanelsTabSelected {
         background-color: #EEE;
         border-bottom: 1px solid #EEE;
    /* This selector is an example of how to make a link inside of a tab button
    * look like normal text. Users may want to use links inside of a tab button
    * so that when it gets focus, the text *inside* the tab button gets a focus
    * ring around it, instead of the focus ring around the entire tab.
    .TabbedPanelsTab a {
         color: black;
         text-decoration: none;
    /* This is the selector for the ContentGroup. The ContentGroup container houses
    * all of the content panels for each tabbed panel in the widget. For our
    * default style, this container provides the background color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
         clear: both;
         border-bottom: solid 1px #CCC;
         border-top: solid 1px #999;
         border-right: solid 1px #999;
         background-color: #EEE;
         padding-left: 11px;
         height: auto;
         width: auto;
    /* This is the selector for the Content panel. The Content panel holds the
    * content for a single tabbed panel. For our default style, this container
    * provides some padding, so that the content is not pushed up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the Content container.
    .TabbedPanelsContent {
         overflow: hidden;
         padding: 0px;
    /* This selector is an example of how to change the appearnce of the currently
    * active container panel. The class "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
         background-image: url(../images/01-Pocetna-strana_23.png);
         background-repeat: repeat-y;
         background-position: left top;
         height: auto;
         width: auto;
         padding-left: 11px;
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules above so that the
    * TabbedPanels widget renders with its tab buttons along the left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will have to be made
    * to switch a horizontal tabbed panels widget to a vertical tabbed panels
    * widget, is to use the "VTabbedPanels" class on the top-level widget
    * container element, instead of "TabbedPanels".
    .VTabbedPanels {
         overflow: hidden;
         zoom: 1;
    /* This selector floats the TabGroup so that the tab buttons it contains
    * render to the left of the active content panel. A border is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
         float: left;
         width: 240px;
         height: auto;
         background-color: #FFF;
         position: relative;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTab {
         float: none;
         /* [disabled]border-top: none; */
         /* [disabled]border-left: none; */
         /* [disabled]border-right: none; */
         height: auto;
         width: 240px;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTabSelected {
         background-color: #FFF;
         width: 240px;
         height: auto;
    /* This selector floats the content panels for the widget so that they
    * render to the right of the tabbed buttons.
    .VTabbedPanels .TabbedPanelsContentGroup {
         clear: none;
         float: left;
         padding: 0px;
         width: auto;
         height: auto;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
         overflow: visible !important;
    .TabbedPanelsContentGroup {
         display: block !important;
         overflow: visible !important;
         height: auto !important;
    .TabbedPanelsContent {
         overflow: visible !important;
         display: block !important;
         clear:both !important;
    .TabbedPanelsTab {
          overflow: visible !important;
          display: block !important;
          clear:both !important;
    I got preview in any browser OK, like I wanted but clicking on tabs not working and they not switching content per each tab. I maked tabindexes: 0, 10, 20,30, 40, 50, 60, 70, 80, 90 and nothing works.
    Where is problem?

    But the tabs do work and the content does show!
    Clicking the first two tabs causes the content to fly over to the right, outside of the content panel, exactly as the style rules tell it to.
    Clicking the other 7 tabs causes the content to show aligned to the left within the content panel, again as per the style rules.
    The total height of the tabs is 882 px including the bottom margins.
    The height of the content panels varies with the content, in case of the first two tabs there is no content contained within the content panel thus the height is zero; of the remaining content panels the height is about 1.5x the height of one line.
    In other words there are no surprises except for the fact that it would have been better not to have used the SpryTabbedPanels widget for this.
    Of course I am supposing that you have changed the personality of the TabbedPanel widget on purpose.
    If this is not the case then a good start will be
    to get rid of the modified SpryTabbedPanels.css and re-instate the original.
    to get rid of the all of the apDiv's including those inside the content panel.
    to reduce the overall height of the tabs to a manageable height by reducing the height of the images.
    Gramps

Maybe you are looking for