html/css/js question(S)

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • html/css/js question(S)

      moin.
      ich lern seit ca ner woche jetzt html und css weil ich eine webpage für eine entwicklungshilfe organisation einer freundin baun soll.

      ich arbeite mit dreamweaver und bisher konnte ich alle hürden überwinden aber ich würde auf einer seite gerne "spry tabbed panels" (mit scrollbar) verwenden und hab das problem, dass die scrollbar beim wechseln der tabs nicht resettet, man also irgendwo startet wenn man von einem tab in dem man gescrollt hat in ein anderes wechselt.
      ich fürchte mal das wird sich nicht per css lösen lassen und hab echt keine ahnung von js bzw keine zeit das dafür zu lernen...

      hatte schonmal wer das problem bzw gäbs ne "einfache" lösung?
      google half nicht weiter :/
      Spoiler anzeigen

      html:

      Quellcode

      1. <div id="TabbedPanels1" class="VTabbedPanels">
      2. <ul class="TabbedPanelsTabGroup">
      3. <li class="TabbedPanelsTab" tabindex="0">Invidun Tour</li>
      4. <li class="TabbedPanelsTab" tabindex="0">Elitr Tour</li>
      5. <li class="TabbedPanelsTab" tabindex="0">Ipsum Tour</li>
      6. <li class="TabbedPanelsTab" tabindex="0">Labore Tour</li>
      7. </ul>
      8. <div class="TabbedPanelsContentGroup">
      9. <div class="TabbedPanelsContent">Invidun Tour<img src="bilder/sa-bild.jpg" alt="südafrika ist nicht kenya" name="bild" width="320" height="240" id="bild" /><br /><br />
      10. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      12. <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br />
      13. </p>
      14. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      15. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      16. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      17. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      18. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      20. </div>
      21. <div class="TabbedPanelsContent">Content 3<br />
      22. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy<p>
      23. <p>Lorem ipsum dolor </p>
      24. <iframe width="420" height="345" src="http://www.youtube.com/embed/obtGsVcrE00" frameborder="0" allowfullscreen></iframe>
      25. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br />
      26. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br />
      27. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy </p>
      28. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      29. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      30. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      31. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      32. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      33. </div>
      34. <div class="TabbedPanelsContent">Content 4<br />
      35. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br />
      36. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy </p>
      37. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      38. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      39. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      40. </div>
      41. <div class="TabbedPanelsContent">Content 2<br />
      42. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      43. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      44. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      45. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      46. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      47. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      48. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      49. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      50. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      51. </div>
      52. </div>
      53. </div>
      54. <script type="text/javascript">
      55. var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
      56. </script>
      Alles anzeigen


      css:

      Quellcode

      1. @charset "UTF-8";
      3. /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
      5. /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
      7. /* Horizontal Tabbed Panels
      8. *
      9. * The default style for a TabbedPanels widget places all tab buttons
      10. * (left aligned) above the content panel.
      11. */
      13. /* This is the selector for the main TabbedPanels container. For our
      14. * default style, this container does not contribute anything visually,
      15. * but it is floated left to make sure that any floating or clearing done
      16. * with any of its child elements are contained completely within the
      17. * TabbedPanels container, to minimize any impact or undesireable
      18. * interaction with other floated elements on the page that may be used
      19. * for layout.
      20. *
      21. * If you want to constrain the width of the TabbedPanels widget, set a
      22. * width on the TabbedPanels container. By default, the TabbedPanels widget
      23. * expands horizontally to fill up available space.
      24. *
      25. * The name of the class ("TabbedPanels") used in this selector is not
      26. * necessary to make the widget function. You can use any class name you
      27. * want to style the TabbedPanels container.
      28. */
      29. .TabbedPanels {
      30. overflow: hidden;
      31. margin: 0px;
      32. padding: 0px;
      33. clear: none;
      34. width: 100%;
      35. }
      37. /* This is the selector for the TabGroup. The TabGroup container houses
      38. * all of the tab buttons for each tabbed panel in the widget. This container
      39. * does not contribute anything visually to the look of the widget for our
      40. * default style.
      41. *
      42. * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
      43. * necessary to make the widget function. You can use any class name you
      44. * want to style the TabGroup container.
      45. */
      46. .TabbedPanelsTabGroup {
      47. margin: 0px;
      48. padding: 0px;
      49. }
      51. /* This is the selector for the TabbedPanelsTab. This container houses
      52. * the title for the panel. This is also the tab "button" that the user clicks
      53. * on to activate the corresponding content panel so that it appears on top
      54. * of the other tabbed panels contained in the widget.
      55. *
      56. * For our default style, each tab is positioned relatively 1 pixel down from
      57. * where it wold normally render. This allows each tab to overlap the content
      58. * panel that renders below it. Each tab is rendered with a 1 pixel bottom
      59. * border that has a color that matches the top border of the current content
      60. * panel. This gives the appearance that the tab is being drawn behind the
      61. * content panel.
      62. *
      63. * The name of the class ("TabbedPanelsTab") used in this selector is not
      64. * necessary to make the widget function. You can use any class name you want
      65. * to style this tab container.
      66. */
      67. .TabbedPanelsTab {
      68. position: relative;
      69. top: 1px;
      70. float: left;
      71. padding: 4px 10px;
      72. /*margin: 0px 1px 0px 0px;*/
      73. font: bold 0.7em sans-serif;
      74. list-style: none;
      75. /*-moz-user-select: none;
      76. -khtml-user-select: none;*/
      77. cursor: pointer;
      78. }
      80. /* This selector is an example of how to change the appearnce of a tab button
      81. * container as the mouse enters it. The class "TabbedPanelsTabHover" is
      82. * programatically added and removed from the tab element as the mouse enters
      83. * and exits the container.
      84. */
      85. .TabbedPanelsTabHover {
      86. background-color: #FFF;
      87. }
      89. /* This selector is an example of how to change the appearance of a tab button
      90. * container after the user has clicked on it to activate a content panel.
      91. * The class "TabbedPanelsTabSelected" is programatically added and removed
      92. * from the tab element as the user clicks on the tab button containers in
      93. * the widget.
      94. *
      95. * As mentioned above, for our default style, tab buttons are positioned
      96. * 1 pixel down from where it would normally render. When the tab button is
      97. * selected, we change its bottom border to match the background color of the
      98. * content panel so that it looks like the tab is part of the content panel.
      99. */
      100. .TabbedPanelsTabSelected {
      102. }
      104. /* This selector is an example of how to make a link inside of a tab button
      105. * look like normal text. Users may want to use links inside of a tab button
      106. * so that when it gets focus, the text *inside* the tab button gets a focus
      107. * ring around it, instead of the focus ring around the entire tab.
      108. */
      109. .TabbedPanelsTab a {
      110. color: black;
      111. text-decoration: none;
      112. }
      114. /* This is the selector for the ContentGroup. The ContentGroup container houses
      115. * all of the content panels for each tabbed panel in the widget. For our
      116. * default style, this container provides the background color and borders that
      117. * surround the content.
      118. *
      119. * The name of the class ("TabbedPanelsContentGroup") used in this selector is
      120. * not necessary to make the widget function. You can use any class name you
      121. * want to style the ContentGroup container.
      122. */
      123. .TabbedPanelsContentGroup {
      124. clear: both;
      125. }
      127. /* This is the selector for the Content panel. The Content panel holds the
      128. * content for a single tabbed panel. For our default style, this container
      129. * provides some padding, so that the content is not pushed up against the
      130. * widget borders.
      131. *
      132. * The name of the class ("TabbedPanelsContent") used in this selector is
      133. * not necessary to make the widget function. You can use any class name you
      134. * want to style the Content container.
      135. */
      136. .TabbedPanelsContent {
      137. overflow: hidden;
      138. background-color: #FFF;
      139. padding-top: 5px;
      140. padding-right: 5px;
      141. padding-bottom: 5px;
      142. padding-left: 10px;
      143. }
      145. /* This selector is an example of how to change the appearnce of the currently
      146. * active container panel. The class "TabbedPanelsContentVisible" is
      147. * programatically added and removed from the content element as the panel
      148. * is activated/deactivated.
      149. */
      150. .TabbedPanelsContentVisible {
      152. }
      154. /* Vertical Tabbed Panels
      155. *
      156. * The following rules override some of the default rules above so that the
      157. * TabbedPanels widget renders with its tab buttons along the left side of
      158. * the currently active content panel.
      159. *
      160. * With the rules defined below, the only change that will have to be made
      161. * to switch a horizontal tabbed panels widget to a vertical tabbed panels
      162. * widget, is to use the "VTabbedPanels" class on the top-level widget
      163. * container element, instead of "TabbedPanels".
      164. */
      166. .VTabbedPanels {
      167. overflow: hidden;
      168. /*zoom: 1;???!!!*/
      169. background-color: #FFF;
      170. }
      172. /* This selector floats the TabGroup so that the tab buttons it contains
      173. * render to the left of the active content panel. A border is drawn around
      174. * the group container to make it look like a list container.
      175. */
      176. .VTabbedPanels .TabbedPanelsTabGroup {
      177. float: left;
      178. width: 8em;
      179. height: 10em;
      180. background-color: #FFF;
      181. position: relative;
      182. padding-top: 5px;
      183. }
      185. /* This selector disables the float property that is placed on each tab button
      186. * by the default TabbedPanelsTab selector rule above. It also draws a bottom
      187. * border for the tab. The tab button will get its left and right border from
      188. * the TabGroup, and its top border from the TabGroup or tab button above it.
      189. */
      190. .VTabbedPanels .TabbedPanelsTab {
      191. float: none;
      192. background-color: #CCC;
      193. margin-bottom: 3px;
      194. margin-left: 3px;
      195. line-height: 25px;
      196. font-size: 15px;
      197. border-top-width: 1px;
      198. border-right-width: 1px;
      199. border-bottom-width: 1px;
      200. border-left-width: 1px;
      201. border-top-style: solid;
      202. border-right-style: none;
      203. border-bottom-style: solid;
      204. border-left-style: solid;
      205. border-top-color: #000;
      206. border-right-color: #000;
      207. border-bottom-color: #000;
      208. border-left-color: #000;
      209. }
      211. /* This selector disables the float property that is placed on each tab button
      212. * by the default TabbedPanelsTab selector rule above. It also draws a bottom
      213. * border for the tab. The tab button will get its left and right border from
      214. * the TabGroup, and its top border from the TabGroup or tab button above it.
      215. */
      216. .VTabbedPanels .TabbedPanelsTabSelected {
      217. background-color: #FFF;
      218. border-right-style: none;
      219. }
      221. /* This selector floats the content panels for the widget so that they
      222. * render to the right of the tabbed buttons.
      223. */
      224. .VTabbedPanels .TabbedPanelsContentGroup {
      225. clear: none;/*right;*/
      226. float: left;
      227. background-color: #FFF;
      228. padding-top: 5px;
      229. width: 81%;
      230. border: 1px solid #000;
      231. overflow-y:scroll;
      232. height:33em;
      233. }
      235. /* Styles for Printing */
      236. @media print {
      237. .TabbedPanels {
      238. overflow: visible !important;
      239. }
      240. .TabbedPanelsContentGroup {
      241. display: block !important;
      242. overflow: visible !important;
      243. height: auto !important;
      244. color: #D6D6D6;
      245. }
      246. .TabbedPanelsContent {
      247. overflow: visible !important;
      248. display: block !important;
      249. clear:both !important;
      250. }
      251. .TabbedPanelsTab {
      252. overflow: visible !important;
      253. display: block !important;
      254. clear:both !important;
      255. }
      256. }
      Alles anzeigen


      js:

      Quellcode

      1. // SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
      2. //
      3. // Copyright (c) 2006. Adobe Systems Incorporated.
      4. // All rights reserved.
      5. //
      6. // Redistribution and use in source and binary forms, with or without
      7. // modification, are permitted provided that the following conditions are met:
      8. //
      9. // * Redistributions of source code must retain the above copyright notice,
      10. // this list of conditions and the following disclaimer.
      11. // * Redistributions in binary form must reproduce the above copyright notice,
      12. // this list of conditions and the following disclaimer in the documentation
      13. // and/or other materials provided with the distribution.
      14. // * Neither the name of Adobe Systems Incorporated nor the names of its
      15. // contributors may be used to endorse or promote products derived from this
      16. // software without specific prior written permission.
      17. //
      18. // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
      19. // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
      20. // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
      21. // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
      22. // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
      23. // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
      24. // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
      25. // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
      26. // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
      27. // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
      28. // POSSIBILITY OF SUCH DAMAGE.
      30. (function() { // BeginSpryComponent
      32. if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
      34. Spry.Widget.TabbedPanels = function(element, opts)
      35. {
      36. this.element = this.getElement(element);
      37. this.defaultTab = 0; // Show the first panel by default.
      38. this.tabSelectedClass = "TabbedPanelsTabSelected";
      39. this.tabHoverClass = "TabbedPanelsTabHover";
      40. this.tabFocusedClass = "TabbedPanelsTabFocused";
      41. this.panelVisibleClass = "TabbedPanelsContentVisible";
      42. this.focusElement = null;
      43. this.hasFocus = false;
      44. this.currentTabIndex = 0;
      45. this.enableKeyboardNavigation = true;
      46. this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
      47. this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
      49. Spry.Widget.TabbedPanels.setOptions(this, opts);
      51. // If the defaultTab is expressed as a number/index, convert
      52. // it to an element.
      54. if (typeof (this.defaultTab) == "number")
      55. {
      56. if (this.defaultTab < 0)
      57. this.defaultTab = 0;
      58. else
      59. {
      60. var count = this.getTabbedPanelCount();
      61. if (this.defaultTab >= count)
      62. this.defaultTab = (count > 1) ? (count - 1) : 0;
      63. }
      65. this.defaultTab = this.getTabs()[this.defaultTab];
      66. }
      68. // The defaultTab property is supposed to be the tab element for the tab content
      69. // to show by default. The caller is allowed to pass in the element itself or the
      70. // element's id, so we need to convert the current value to an element if necessary.
      72. if (this.defaultTab)
      73. this.defaultTab = this.getElement(this.defaultTab);
      75. this.attachBehaviors();
      76. };
      78. Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
      79. {
      80. if (ele && typeof ele == "string")
      81. return document.getElementById(ele);
      82. return ele;
      83. };
      85. Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
      86. {
      87. var children = [];
      88. var child = element.firstChild;
      89. while (child)
      90. {
      91. if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
      92. children.push(child);
      93. child = child.nextSibling;
      94. }
      95. return children;
      96. };
      98. Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
      99. {
      100. if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
      101. return;
      102. ele.className += (ele.className ? " " : "") + className;
      103. };
      105. Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
      106. {
      107. if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
      108. return;
      109. ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
      110. };
      112. Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
      113. {
      114. if (!optionsObj)
      115. return;
      116. for (var optionName in optionsObj)
      117. {
      118. if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
      119. continue;
      120. obj[optionName] = optionsObj[optionName];
      121. }
      122. };
      124. Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
      125. {
      126. if (this.element)
      127. {
      128. var children = this.getElementChildren(this.element);
      129. if (children.length)
      130. return children[0];
      131. }
      132. return null;
      133. };
      135. Spry.Widget.TabbedPanels.prototype.getTabs = function()
      136. {
      137. var tabs = [];
      138. var tg = this.getTabGroup();
      139. if (tg)
      140. tabs = this.getElementChildren(tg);
      141. return tabs;
      142. };
      144. Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
      145. {
      146. if (this.element)
      147. {
      148. var children = this.getElementChildren(this.element);
      149. if (children.length > 1)
      150. return children[1];
      151. }
      152. return null;
      153. };
      155. Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
      156. {
      157. var panels = [];
      158. var pg = this.getContentPanelGroup();
      159. if (pg)
      160. panels = this.getElementChildren(pg);
      161. return panels;
      162. };
      164. Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
      165. {
      166. ele = this.getElement(ele);
      167. if (ele && arr && arr.length)
      168. {
      169. for (var i = 0; i < arr.length; i++)
      170. {
      171. if (ele == arr[i])
      172. return i;
      173. }
      174. }
      175. return -1;
      176. };
      178. Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
      179. {
      180. var i = this.getIndex(ele, this.getTabs());
      181. if (i < 0)
      182. i = this.getIndex(ele, this.getContentPanels());
      183. return i;
      184. };
      186. Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
      187. {
      188. return this.currentTabIndex;
      189. };
      191. Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
      192. {
      193. return Math.min(this.getTabs().length, this.getContentPanels().length);
      194. };
      196. Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
      197. {
      198. try
      199. {
      200. if (element.addEventListener)
      201. element.addEventListener(eventType, handler, capture);
      202. else if (element.attachEvent)
      203. element.attachEvent("on" + eventType, handler);
      204. }
      205. catch (e) {}
      206. };
      208. Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
      209. {
      210. if (e.preventDefault) e.preventDefault();
      211. else e.returnValue = false;
      212. if (e.stopPropagation) e.stopPropagation();
      213. else e.cancelBubble = true;
      215. return false;
      216. };
      218. Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
      219. {
      220. this.showPanel(tab);
      221. return this.cancelEvent(e);
      222. };
      224. Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
      225. {
      226. this.addClassName(tab, this.tabHoverClass);
      227. return false;
      228. };
      230. Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
      231. {
      232. this.removeClassName(tab, this.tabHoverClass);
      233. return false;
      234. };
      236. Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
      237. {
      238. this.hasFocus = true;
      239. this.addClassName(tab, this.tabFocusedClass);
      240. return false;
      241. };
      243. Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
      244. {
      245. this.hasFocus = false;
      246. this.removeClassName(tab, this.tabFocusedClass);
      247. return false;
      248. };
      250. Spry.Widget.TabbedPanels.KEY_UP = 38;
      251. Spry.Widget.TabbedPanels.KEY_DOWN = 40;
      252. Spry.Widget.TabbedPanels.KEY_LEFT = 37;
      253. Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
      257. Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
      258. {
      259. var key = e.keyCode;
      260. if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
      261. return true;
      263. var tabs = this.getTabs();
      264. for (var i =0; i < tabs.length; i++)
      265. if (tabs[i] == tab)
      266. {
      267. var el = false;
      268. if (key == this.previousPanelKeyCode && i > 0)
      269. el = tabs[i-1];
      270. else if (key == this.nextPanelKeyCode && i < tabs.length-1)
      271. el = tabs[i+1];
      273. if (el)
      274. {
      275. this.showPanel(el);
      276. el.focus();
      277. break;
      278. }
      279. }
      281. return this.cancelEvent(e);
      282. };
      284. Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
      285. {
      286. var stopTraversal = false;
      287. if (root)
      288. {
      289. stopTraversal = func(root);
      290. if (root.hasChildNodes())
      291. {
      292. var child = root.firstChild;
      293. while (!stopTraversal && child)
      294. {
      295. stopTraversal = this.preorderTraversal(child, func);
      296. try { child = child.nextSibling; } catch (e) { child = null; }
      297. }
      298. }
      299. }
      300. return stopTraversal;
      301. };
      303. Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
      304. {
      305. var self = this;
      306. Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
      307. Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
      308. Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
      310. if (this.enableKeyboardNavigation)
      311. {
      312. // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
      313. // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
      314. // by default.
      316. // Find the first element within the tab container that has a tabindex or the first
      317. // anchor tag.
      319. var tabIndexEle = null;
      320. var tabAnchorEle = null;
      322. this.preorderTraversal(tab, function(node) {
      323. if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
      324. {
      325. var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
      326. if (tabIndexAttr)
      327. {
      328. tabIndexEle = node;
      329. return true;
      330. }
      331. if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
      332. tabAnchorEle = node;
      333. }
      334. return false;
      335. });
      337. if (tabIndexEle)
      338. this.focusElement = tabIndexEle;
      339. else if (tabAnchorEle)
      340. this.focusElement = tabAnchorEle;
      342. if (this.focusElement)
      343. {
      344. Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
      345. Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
      346. Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
      347. }
      348. }
      349. };
      351. Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
      352. {
      353. var tpIndex = -1;
      355. if (typeof elementOrIndex == "number")
      356. tpIndex = elementOrIndex;
      357. else // Must be the element for the tab or content panel.
      358. tpIndex = this.getTabIndex(elementOrIndex);
      360. if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
      361. return;
      363. var tabs = this.getTabs();
      364. var panels = this.getContentPanels();
      366. var numTabbedPanels = Math.max(tabs.length, panels.length);
      368. for (var i = 0; i < numTabbedPanels; i++)
      369. {
      370. if (i != tpIndex)
      371. {
      372. if (tabs[i])
      373. this.removeClassName(tabs[i], this.tabSelectedClass);
      374. if (panels[i])
      375. {
      376. this.removeClassName(panels[i], this.panelVisibleClass);
      377. panels[i].style.display = "none";
      378. }
      379. }
      380. }
      382. this.addClassName(tabs[tpIndex], this.tabSelectedClass);
      383. this.addClassName(panels[tpIndex], this.panelVisibleClass);
      384. panels[tpIndex].style.display = "block";
      386. this.currentTabIndex = tpIndex;
      387. };
      389. Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
      390. {
      391. var tabs = this.getTabs();
      392. var panels = this.getContentPanels();
      393. var panelCount = this.getTabbedPanelCount();
      395. for (var i = 0; i < panelCount; i++)
      396. this.addPanelEventListeners(tabs[i], panels[i]);
      398. this.showPanel(this.defaultTab);
      399. };
      401. })(); // EndSpryComponent
      Alles anzeigen

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von q-ruf ()

    • Javascript ist dein Retter

      Hi,

      also ich lasse jetzt mal alle Kommentare zu deinem verwendeten JS und CSS und generell und überhaupt.

      Hier das was du brauchst:

      gib der Div mit dem Inhalt eine ID, etwa so:

      <div class="TabbedPanelsContentGroup" id="scroller">

      Öffne jetzt das Javascript file, gehe zur Zeile 384, du findet dies hier:

      this.addClassName(tabs[tpIndex], this.tabSelectedClass);
      this.addClassName(panels[tpIndex], this.panelVisibleClass);
      panels[tpIndex].style.display = "block";

      Füge folgenden Text untendrunter hinzu:
      document.getElementById("scroller").scrollTop=0;

      Et voila :) scrollt immer schön nach oben.

      Rechnung kommt!
      Return of the Ape

    • ich nutze diesen thread einfach mal.
      folgendes:
      Ich stelle mich grade UNGLAUBLICH blöd an und finde eifnach nichts bei google, weil ich halt den TAG dafür nicht weiß:

      ich will die homepage in einzelne "spalten" einteilen, sodass ich links ne spalte mit links habe und rechts daneben den eigentlichen inhalt, mit <blablabla target="main">" und so.

      wie teile ich die seite nochmal ein?

      Stehe grad übelst aufem schlauch :/

      habs, ging um frame/frameset und so.

      Chrynox

    • neue probleme...

      hab eine accordion subnavigation gebaut und will ein (css) popup für bilder.

      damit das popup bild nicht hinter dem accordion verschwindet muss ich in zeile 26 der accordion css overflow auf visible haben nur dann funktioniert das gesammte accordion in firefox nicht mehr alle anderen browser die ich getestet hab (chrome,ie,safari) haben damit kein problem.

      kann ich den overflow fürs bild irgendwie extra setzen? hab schon einiges probiert aber ich bekomms nicht hin -.-

      hab mal den code möglichst gecleaned...
      Spoiler anzeigen

      html:

      Quellcode

      1. <body>
      2. <!-- TOUR 1B culture & nature -->
      3. <div id="Accordion1" class="Accordion" tabindex="0">
      4. <div class="AccordionPanel">
      5. <div class="AccordionPanelTab">
      6. <h3>1st day</h3>
      7. <h4>You travel to a town called Emali and visit a typical kenyan market.</h4>
      8. </div>
      9. <div class="AccordionPanelContent"> <!--content tour1 day 1-->
      10. <p>On your first day your guide picks you at the agreed meeting point in Nairobi around 1 pm and you take a Matatu to a town called Emali.<br />
      11. <a class="thumbnail" href="#thumb"><img name="thumbn" src="" width="150" height="150" alt="justatest" border="0" /><span><img name="BIG" src="" width="450" height="450" alt="justatestBIG" /><br /><!--not Emali market--></span></a>
      12. Due to the climatic conditions, the inhabitants and the impacts of the high rate of HIV positive living people, Emali is quite a poor town. As a result the need for charity programs arises.</p>
      13. <p>During this optional walk you go through the market in town with small shops and people selling their wares next to the road. You also have the chance to visit Mt. Zion CBO with its clinic for people living with HIV, in order to get acquainted with the prevailing conditions that make Emali the town it is.<br />
      14. Your means of transport are Matatus and either on foot.<br />
      15. You stay overnight in a hotel in Emali.</p>
      16. </div>
      17. </div>
      18. <div class="AccordionPanel">
      19. <div class="AccordionPanelTab">
      20. <h3>2nd day</h3>
      21. <h4>A daytrip gives you the chance to visit a traditional Maasai family, talk to the people and learn about their way of life.</h4>
      22. </div>
      23. <div class="AccordionPanelContent">
      24. </div>
      25. </div>
      26. <div class="AccordionPanel">
      27. <div class="AccordionPanelTab">
      28. <h3>3rd day</h3>
      29. <h4>Optional you visit the Tumbuni Community in the morning. Afterwards you travel to a typical Kamba community and stay with the people.</h4>
      30. </div>
      31. <div class="AccordionPanelContent">
      32. </div>
      33. </div>
      34. <div class="AccordionPanel">
      35. <div class="AccordionPanelTab">
      36. <h3>4th day</h3>
      37. <h4>On your forth day you visit Tsavo West National Park where a hired car takes you around.</h4>
      38. </div>
      39. <div class="AccordionPanelContent">
      40. </div>
      41. </div>
      42. <div class="AccordionPanel">
      43. <div class="AccordionPanelTab">
      44. <h3>5th day</h3>
      45. <h4>A daytrip takes you the Ngangao forest which is protected under the Taita Wildlife Forum and a guide provides insight in this natural reserve.</h4>
      46. </div>
      47. <div class="AccordionPanelContent">
      48. </div>
      49. </div>
      50. <div class="AccordionPanel">
      51. <div class="AccordionPanelTab">
      52. <h3>6th day</h3>
      53. <h4>Two different hillstops and a Taita community are your destinations on your sixth day.</h4>
      54. </div>
      55. <div class="AccordionPanelContent">
      56. </div>
      57. </div>
      58. <div class="AccordionPanel">
      59. <div class="AccordionPanelTab">
      60. <h3>7th day</h3>
      61. <h4>In the morning your guide takes you to the next town on the Nairobi-Mombasa highway and from there we have to say goodbye.</h4>
      62. </div>
      63. <div class="AccordionPanelContent">
      64. </div>
      65. </div>
      66. </div>
      67. <script type="text/javascript">
      68. var Accordion1 = new Spry.Widget.Accordion("Accordion1", {useFixedPanelHeights: false, defaultPanel: -1 });
      69. </script>
      70. </body>
      Alles anzeigen


      accordion css:

      Quellcode

      1. @charset "UTF-8";
      4. .Accordion {
      5. overflow: hidden;
      6. outline:none;
      7. width:800px
      8. }
      10. .AccordionPanel {
      12. }
      15. .AccordionPanelTab {
      17. cursor: pointer;
      18. font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
      19. color:black;
      20. margin:10px;
      21. -moz-user-select: none;
      22. -khtml-user-select: none;
      23. }
      25. .AccordionPanelContent {
      26. overflow:visible;
      27. margin: 0px;
      28. padding: 0px;
      29. padding-left:2em;
      30. }
      33. .AccordionPanelOpen .AccordionPanelTab {
      34. }
      37. .AccordionPanelTabHover {
      38. color:#754C24;
      39. }
      40. .AccordionPanelOpen .AccordionPanelTabHover {
      41. color:#754C24;
      42. }
      44. .AccordionFocused .AccordionPanelTab {
      46. }
      48. .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
      49. color:#754C24;
      50. }
      53. /* Rules for Printing */
      55. @media print {
      57. .Accordion {
      58. overflow: visible !important;
      59. }
      61. .AccordionPanelContent {
      62. display: block !important;
      63. overflow: visible !important;
      64. height: auto !important;
      65. }
      66. }
      Alles anzeigen


      popout css:

      Quellcode

      1. @charset "utf-8";
      2. /* CSS Document */
      4. .thumbnail{
      5. position: relative;
      6. float:right;
      7. z-index: 0;
      8. overflow:visible;
      9. }
      11. .thumbnail:hover{
      12. background-color: transparent;
      13. z-index: 50;
      14. }
      16. .thumbnail span{ /*CSS for enlarged image*/
      17. position: absolute;
      18. background-color:#CCC;
      19. padding: 5px;
      20. left: -1000px;
      21. visibility: hidden;
      22. color: black;
      23. text-decoration: none;
      24. }
      26. .thumbnail span img{ /*CSS for enlarged image*/
      27. border-width: 0;
      28. }
      30. .thumbnail:hover span{ /*CSS for enlarged image on hover*/
      31. visibility: visible;
      32. top: -20px;
      33. left: -300px;/*position where enlarged image should offset horizontally */
      34. }
      Alles anzeigen


      accordion js:

      Quellcode

      1. // SpryAccordion.js - version 0.17 - Spry Pre-Release 1.6.1
      2. //
      3. // Copyright (c) 2006. Adobe Systems Incorporated.
      4. // All rights reserved.
      5. //
      6. // Redistribution and use in source and binary forms, with or without
      7. // modification, are permitted provided that the following conditions are met:
      8. //
      9. // * Redistributions of source code must retain the above copyright notice,
      10. // this list of conditions and the following disclaimer.
      11. // * Redistributions in binary form must reproduce the above copyright notice,
      12. // this list of conditions and the following disclaimer in the documentation
      13. // and/or other materials provided with the distribution.
      14. // * Neither the name of Adobe Systems Incorporated nor the names of its
      15. // contributors may be used to endorse or promote products derived from this
      16. // software without specific prior written permission.
      17. //
      18. // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
      19. // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
      20. // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
      21. // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
      22. // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
      23. // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
      24. // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
      25. // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
      26. // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
      27. // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
      28. // POSSIBILITY OF SUCH DAMAGE.
      30. (function() { // BeginSpryComponent
      32. if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
      34. Spry.Widget.Accordion = function(element, opts)
      35. {
      36. this.element = this.getElement(element);
      37. this.defaultPanel = 0;
      38. this.hoverClass = "AccordionPanelTabHover";
      39. this.openClass = "AccordionPanelOpen";
      40. this.closedClass = "AccordionPanelClosed";
      41. this.focusedClass = "AccordionFocused";
      42. this.enableAnimation = true;
      43. this.enableKeyboardNavigation = true;
      44. this.currentPanel = null;
      45. this.animator = null;
      46. this.hasFocus = null;
      48. this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
      49. this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
      51. this.useFixedPanelHeights = true;
      52. this.fixedPanelHeight = 0;
      54. Spry.Widget.Accordion.setOptions(this, opts, true);
      56. if (this.element)
      57. this.attachBehaviors();
      58. };
      60. Spry.Widget.Accordion.prototype.getElement = function(ele)
      61. {
      62. if (ele && typeof ele == "string")
      63. return document.getElementById(ele);
      64. return ele;
      65. };
      67. Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
      68. {
      69. if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
      70. return;
      71. ele.className += (ele.className ? " " : "") + className;
      72. };
      74. Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
      75. {
      76. if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
      77. return;
      78. ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
      79. };
      81. Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
      82. {
      83. if (!optionsObj)
      84. return;
      85. for (var optionName in optionsObj)
      86. {
      87. if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
      88. continue;
      89. obj[optionName] = optionsObj[optionName];
      90. }
      91. };
      93. Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
      94. {
      95. if (panel)
      96. this.addClassName(this.getPanelTab(panel), this.hoverClass);
      97. return false;
      98. };
      100. Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
      101. {
      102. if (panel)
      103. this.removeClassName(this.getPanelTab(panel), this.hoverClass);
      104. return false;
      105. };
      107. Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
      108. {
      109. var panelA = this.currentPanel;
      110. var panelB;
      112. if (typeof elementOrIndex == "number")
      113. panelB = this.getPanels()[elementOrIndex];
      114. else
      115. panelB = this.getElement(elementOrIndex);
      117. if (!panelB || panelA == panelB)
      118. return null;
      120. var contentA = panelA ? this.getPanelContent(panelA) : null;
      121. var contentB = this.getPanelContent(panelB);
      123. if (!contentB)
      124. return null;
      126. if (this.useFixedPanelHeights && !this.fixedPanelHeight)
      127. this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
      129. if (this.enableAnimation)
      130. {
      131. if (this.animator)
      132. this.animator.stop();
      133. this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
      134. this.animator.start();
      135. }
      136. else
      137. {
      138. if(contentA)
      139. {
      140. contentA.style.display = "none";
      141. contentA.style.height = "0px";
      142. }
      143. contentB.style.display = "block";
      144. contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
      145. }
      147. if(panelA)
      148. {
      149. this.removeClassName(panelA, this.openClass);
      150. this.addClassName(panelA, this.closedClass);
      151. }
      153. this.removeClassName(panelB, this.closedClass);
      154. this.addClassName(panelB, this.openClass);
      156. this.currentPanel = panelB;
      158. return panelB;
      159. };
      161. Spry.Widget.Accordion.prototype.closePanel = function()
      162. {
      163. // The accordion can only ever have one panel open at any
      164. // give time, so this method only closes the current panel.
      165. // If the accordion is in fixed panel heights mode, this
      166. // method does nothing.
      168. if (!this.useFixedPanelHeights && this.currentPanel)
      169. {
      170. var panel = this.currentPanel;
      171. var content = this.getPanelContent(panel);
      172. if (content)
      173. {
      174. if (this.enableAnimation)
      175. {
      176. if (this.animator)
      177. this.animator.stop();
      178. this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
      179. this.animator.start();
      180. }
      181. else
      182. {
      183. content.style.display = "none";
      184. content.style.height = "0px";
      185. }
      186. }
      187. this.removeClassName(panel, this.openClass);
      188. this.addClassName(panel, this.closedClass);
      189. this.currentPanel = null;
      190. }
      191. };
      193. Spry.Widget.Accordion.prototype.openNextPanel = function()
      194. {
      195. return this.openPanel(this.getCurrentPanelIndex() + 1);
      196. };
      198. Spry.Widget.Accordion.prototype.openPreviousPanel = function()
      199. {
      200. return this.openPanel(this.getCurrentPanelIndex() - 1);
      201. };
      203. Spry.Widget.Accordion.prototype.openFirstPanel = function()
      204. {
      205. return this.openPanel(0);
      206. };
      208. Spry.Widget.Accordion.prototype.openLastPanel = function()
      209. {
      210. var panels = this.getPanels();
      211. return this.openPanel(panels[panels.length - 1]);
      212. };
      214. Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
      215. {
      216. if (panel != this.currentPanel)
      217. this.openPanel(panel);
      218. else
      219. this.closePanel();
      221. if (this.enableKeyboardNavigation)
      222. this.focus();
      224. if (e.preventDefault) e.preventDefault();
      225. else e.returnValue = false;
      226. if (e.stopPropagation) e.stopPropagation();
      227. else e.cancelBubble = true;
      229. return false;
      230. };
      232. Spry.Widget.Accordion.prototype.onFocus = function(e)
      233. {
      234. this.hasFocus = true;
      235. this.addClassName(this.element, this.focusedClass);
      236. return false;
      237. };
      239. Spry.Widget.Accordion.prototype.onBlur = function(e)
      240. {
      241. this.hasFocus = false;
      242. this.removeClassName(this.element, this.focusedClass);
      243. return false;
      244. };
      246. Spry.Widget.Accordion.KEY_UP = 38;
      247. Spry.Widget.Accordion.KEY_DOWN = 40;
      249. Spry.Widget.Accordion.prototype.onKeyDown = function(e)
      250. {
      251. var key = e.keyCode;
      252. if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
      253. return true;
      255. var panels = this.getPanels();
      256. if (!panels || panels.length < 1)
      257. return false;
      258. var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
      259. var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
      261. while (nextPanel)
      262. {
      263. if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
      264. break;
      265. nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
      266. }
      268. if (nextPanel && currentPanel != nextPanel)
      269. this.openPanel(nextPanel);
      271. if (e.preventDefault) e.preventDefault();
      272. else e.returnValue = false;
      273. if (e.stopPropagation) e.stopPropagation();
      274. else e.cancelBubble = true;
      276. return false;
      277. };
      279. Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
      280. {
      281. if (!panel)
      282. return;
      284. var tab = this.getPanelTab(panel);
      286. if (tab)
      287. {
      288. var self = this;
      289. Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
      290. Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
      291. Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
      292. }
      293. };
      295. Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
      296. {
      297. try
      298. {
      299. if (element.addEventListener)
      300. element.addEventListener(eventType, handler, capture);
      301. else if (element.attachEvent)
      302. element.attachEvent("on" + eventType, handler);
      303. }
      304. catch (e) {}
      305. };
      307. Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
      308. {
      309. var content = this.getPanelContent(panel);
      310. if (isDefault)
      311. {
      312. this.currentPanel = panel;
      313. this.removeClassName(panel, this.closedClass);
      314. this.addClassName(panel, this.openClass);
      316. // Attempt to set up the height of the default panel. We don't want to
      317. // do any dynamic panel height calculations here because our accordion
      318. // or one of its parent containers may be display:none.
      320. if (content)
      321. {
      322. if (this.useFixedPanelHeights)
      323. {
      324. // We are in fixed panel height mode and the user passed in
      325. // a panel height for us to use.
      327. if (this.fixedPanelHeight)
      328. content.style.height = this.fixedPanelHeight + "px";
      329. }
      330. else
      331. {
      332. // We are in variable panel height mode, but since we can't
      333. // calculate the panel height here, we just set the height to
      334. // auto so that it expands to show all of its content.
      336. content.style.height = "auto";
      337. }
      338. }
      339. }
      340. else
      341. {
      342. this.removeClassName(panel, this.openClass);
      343. this.addClassName(panel, this.closedClass);
      345. if (content)
      346. {
      347. content.style.height = "0px";
      348. content.style.display = "none";
      349. }
      350. }
      352. this.attachPanelHandlers(panel);
      353. };
      355. Spry.Widget.Accordion.prototype.attachBehaviors = function()
      356. {
      357. var panels = this.getPanels();
      358. for (var i = 0; i < panels.length; i++)
      359. this.initPanel(panels[i], i == this.defaultPanel);
      361. // Advanced keyboard navigation requires the tabindex attribute
      362. // on the top-level element.
      364. this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
      365. if (this.enableKeyboardNavigation)
      366. {
      367. var self = this;
      368. Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
      369. Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
      370. Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
      371. }
      372. };
      374. Spry.Widget.Accordion.prototype.getPanels = function()
      375. {
      376. return this.getElementChildren(this.element);
      377. };
      379. Spry.Widget.Accordion.prototype.getCurrentPanel = function()
      380. {
      381. return this.currentPanel;
      382. };
      384. Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
      385. {
      386. var panels = this.getPanels();
      387. for( var i = 0 ; i < panels.length; i++ )
      388. {
      389. if( panel == panels[i] )
      390. return i;
      391. }
      392. return -1;
      393. };
      395. Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
      396. {
      397. return this.getPanelIndex(this.currentPanel);
      398. };
      400. Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
      401. {
      402. if (!panel)
      403. return null;
      404. return this.getElementChildren(panel)[0];
      405. };
      407. Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
      408. {
      409. if (!panel)
      410. return null;
      411. return this.getElementChildren(panel)[1];
      412. };
      414. Spry.Widget.Accordion.prototype.getElementChildren = function(element)
      415. {
      416. var children = [];
      417. var child = element.firstChild;
      418. while (child)
      419. {
      420. if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
      421. children.push(child);
      422. child = child.nextSibling;
      423. }
      424. return children;
      425. };
      427. Spry.Widget.Accordion.prototype.focus = function()
      428. {
      429. if (this.element && this.element.focus)
      430. this.element.focus();
      431. };
      433. Spry.Widget.Accordion.prototype.blur = function()
      434. {
      435. if (this.element && this.element.blur)
      436. this.element.blur();
      437. };
      439. /////////////////////////////////////////////////////
      441. Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
      442. {
      443. this.timer = null;
      444. this.interval = 0;
      446. this.fps = 60;
      447. this.duration = 500;
      448. this.startTime = 0;
      450. this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;
      452. this.onComplete = null;
      454. this.panel = panel;
      455. this.panelToOpen = accordion.getElement(panel);
      456. this.panelData = [];
      457. this.useFixedPanelHeights = accordion.useFixedPanelHeights;
      459. Spry.Widget.Accordion.setOptions(this, opts, true);
      461. this.interval = Math.floor(1000 / this.fps);
      463. // Set up the array of panels we want to animate.
      465. var panels = accordion.getPanels();
      466. for (var i = 0; i < panels.length; i++)
      467. {
      468. var p = panels[i];
      469. var c = accordion.getPanelContent(p);
      470. if (c)
      471. {
      472. var h = c.offsetHeight;
      473. if (h == undefined)
      474. h = 0;
      476. if (p == panel && h == 0)
      477. c.style.display = "block";
      479. if (p == panel || h > 0)
      480. {
      481. var obj = new Object;
      482. obj.panel = p;
      483. obj.content = c;
      484. obj.fromHeight = h;
      485. obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
      486. obj.distance = obj.toHeight - obj.fromHeight;
      487. obj.overflow = c.style.overflow;
      488. this.panelData.push(obj);
      490. c.style.overflow = "hidden";
      491. c.style.height = h + "px";
      492. }
      493. }
      494. }
      495. };
      497. Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
      499. Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
      500. {
      501. var self = this;
      502. this.startTime = (new Date).getTime();
      503. this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
      504. };
      506. Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
      507. {
      508. if (this.timer)
      509. {
      510. clearTimeout(this.timer);
      512. // If we're killing the timer, restore the overflow
      513. // properties on the panels we were animating!
      515. for (i = 0; i < this.panelData.length; i++)
      516. {
      517. obj = this.panelData[i];
      518. obj.content.style.overflow = obj.overflow;
      519. }
      520. }
      522. this.timer = null;
      523. };
      525. Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
      526. {
      527. var curTime = (new Date).getTime();
      528. var elapsedTime = curTime - this.startTime;
      530. var i, obj;
      532. if (elapsedTime >= this.duration)
      533. {
      534. for (i = 0; i < this.panelData.length; i++)
      535. {
      536. obj = this.panelData[i];
      537. if (obj.panel != this.panel)
      538. {
      539. obj.content.style.display = "none";
      540. obj.content.style.height = "0px";
      541. }
      542. obj.content.style.overflow = obj.overflow;
      543. obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
      544. }
      545. if (this.onComplete)
      546. this.onComplete();
      547. return;
      548. }
      550. for (i = 0; i < this.panelData.length; i++)
      551. {
      552. obj = this.panelData[i];
      553. var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
      554. obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
      555. }
      557. var self = this;
      558. this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
      559. };
      561. })(); // EndSpryComponent
      Alles anzeigen

    • ne genau das is mein problem
      in firefox funktionierts nicht
      wenn man overflow in zeile 26 der accordionX.css auf auto stellt gehts in firefox aber und das is das problem das popup funktioniert nicht mehr so wies soll (es verschwindet hinterm accordion)

    • wenn ich in der zeile 347 content.style.height auf auto setze oder sie ganz auskommentiere funktionierts beim ersten öffnen des accordion so wie es soll. wenn ich das tab aber schließe und wieder öffne oder von einem anderen tab auf ein zuvor geöffnetes zurückgehe ist alles beim alten und der text überlappt wieder.
      ich nehme mal and dass irgendwo wieder height 0 zurückgegeben wird hab aber keine ahnung wo...

    • Hi,

      würd gern helfen aber versteh das Problem nicht.
      Hab die Seite mal im FF 8 aufgerufen. Im ersten Link klappt ein Text auf und geht auch wieder zu. Nur danach buggt er sich in den restlichen Text wenn ich nochmal klicke.
      Ist das das beschriebene Problem?
      Return of the Ape

    • Benutzer online 1

      1 Besucher