[Frage] Script funktioniert nicht mehr nachdem ich meinen Code aufgeräumt habe, HILFE !!! TYPO3-Version: 6.1.7

  • daisy42 daisy42
    T3PO
    0 x
    27 Beiträge
    0 Hilfreiche Beiträge
    24. 02. 2014, 01:15

    Bin verzweifelt. Habe es wunderbar geschafft mein Menu beim Scrollen der Seite immer am oberen Rand festkleben zu lassen.

    Dann habe ich meinen TypoScript und CSS Code bissel aufgeräumt und nun gehts gar nicht mehr. Ich hab schon alles nachgeschaut, ich finde den Fehler nicht.

    Meine Seite ist hier: http://mobile.psychotherapie-schicktanz.de

    Die Anleitung habe ich hier her: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements

    Ich bin grad echt verzweifelt, vor allem weil ich es nach 2 Tagen endlich geschafft hatte :-(

    Laut Quellcode siehts aber so aus als würde alles korrekt geladen...

    Meine Template-Datei:

    1. <div id="main">
    2.  
    3. <div id="header-wrapper">
    4. <div id="header"></div>
    5. </div>
    6.  
    7. <div id="menu-wrapper">
    8. <div class="my-sticky-element">###MENU###</div>
    9. </div>
    10.  
    11.  
    12. <div id="teaser-wrapper">
    13. <div id="banner2"></div>
    14. <div id="extra-bar"></div>
    15. </div>
    16.  
    17. <div id="content-wrapper">
    18. <div id="content-all">
    19. <div id="sidebar">###SIDEBAR###</div>
    20. <div id="content">###CONTENT###</div>
    21. </div>
    22. </div>
    23.  
    24. <div id="push">
    25. </div>
    26.  
    27. <div id="footer-wrapper">
    28. <div id="footer">
    29. ###FOOTER###
    30. ###FOOTER2###
    31. </div>
    32. </div>

    Mein TS (Auszug):

    1. # Page title
    2. page.headerData {
    3. 5 = TEXT
    4. 5.field = title
    5. 5.wrap = <title>{$project.WebsiteTitle}&nbsp;&ndash;&nbsp;|</title>
    6.  
    7. 60 = TEXT
    8. 60.value = <link href='http://fonts.googleapis.com/css?family=Telex' rel='stylesheet' type='text/css'>
    9.  
    10. 2 = TEXT
    11. 2.value (
    12.  
    13. <script>
    14.  
    15. ############################################ Wichtig, Menuleiste ##################################
    16.  
    17. $(document).ready(function(){
    18. $("ul.sf-menu").supersubs({
    19. minWidth: 12, // minimum width of sub-menus in em units
    20. maxWidth: 27, // maximum width of sub-menus in em units
    21. extraWidth: 1 // extra width can ensure lines don't sometimes turn over
    22. // due to slight rounding differences and font-family
    23. }).superfish(); // call supersubs first, then superfish, so that subs are
    24. // not display:none when measuring. Call before initialising
    25. // containing tabs for same reason.
    26. });
    27.  
    28. ############################################ Wichtig, Menuleiste ##################################
    29.  
    30. ############################################ Menuleiste "sticky" am oberen Bildrand beim scrollen ##################################
    31.  
    32. $(document).ready(function() {
    33. $('.my-sticky-element').waypoint('sticky');
    34. });
    35.  
    36. ############################################ Menuleiste "sticky" am oberen Bildrand beim scrollen ##################################
    37.  
    38. </script>
    39. ) // closes <script>
    40. } // closes page.headerData

    Meine Haupt-CSS:

    1. * {
    2. margin:0;
    3. padding:0;
    4. border:0;
    5. font-family:'MetaWeb','Arial',sans-serif;
    6. }
    7.  
    8. html,body {
    9. height:100%;
    10. margin:0;
    11. padding:0;
    12. }
    13.  
    14. body {
    15. /* Schriftgrösse Inhalt */
    16. font-size:.9em;
    17. background-color:#FFFDEA;
    18. }
    19.  
    20. /* ################### Main ################### */
    21. #main {
    22. min-height: 100%;
    23. height: auto !important;
    24. height: 100%;
    25. margin: 0 auto -75px;
    26. width:100%;
    27. text-align:center;
    28. background:#FFFDEA; /* Hintergrund hellgelb */
    29. color:#666666; /* Schriftfarbe dunkelgrau */
    30. }
    31.  
    32.  
    33. /* ################### Header ################### */
    34.  
    35. #header-wrapper {
    36. overflow:hidden;
    37. height:200px; /* damit Platz ist für den "menu-wrapper", der muss ja noch über dem "teaser-wrapper" reinpassen */
    38. z-index:12;
    39. }
    40.  
    41. #header {
    42. background:url('../images/header.png') #fffdea;
    43. background-repeat:no-repeat;
    44. display: block;
    45. height: 125px;
    46. margin: 20px auto;
    47. padding: 25px 0 0 10px;
    48. text-align: left;
    49. width: 940px;
    50. }
    51.  
    52.  
    53. /* ################### Menu, sticky beim scrollen ################### */
    54.  
    55. .my-sticky-element.stuck {
    56. position:fixed;
    57. top:0;
    58. z-index:150;
    59. }
    60.  
    61. #menu-wrapper{
    62. position:absolute;
    63. width:940px; /* Ganze Seitenbreite nutzen für das Menu */
    64. top:140px; /* wegen Header Grösse muss es "top:" nach unten rutschen */
    65. left:50%;
    66. margin:0 0 0 -470px;
    67. overflow:visible;
    68. }
    69.  
    70.  
    71. /* ################### Teaser / Banner / Box ################### */
    72.  
    73. #teaser-wrapper{
    74. height: 219px;
    75. margin: 0 auto;
    76. overflow: hidden;
    77. padding: 0;
    78. text-align: center;
    79. width: 960px;
    80. z-index: 6;
    81. position: relative;
    82. }
    83.  
    84.  
    85. #banner2 { /* Bild unter dem Menu, über dem Content, ganze Seitenbreite */
    86. background: url("/fileadmin/template/images/700x210.jpg") no-repeat scroll 0 0 #D8D1C3;
    87. height: 210px;
    88. position: relative;
    89. width: 700px;
    90. float:left;
    91. overflow:hidden;
    92. border-radius:5px;
    93. border: 1px solid #FFFDEA; /* #d3cdd3;*/
    94. text-align:left;
    95. }
    96.  
    97. #teaser img {
    98. position: absolute;
    99. left:0;
    100. top:0;
    101. float:left;
    102. border-radius:5px;
    103. }
    104.  
    105. #extra-bar {
    106. height: 210px;
    107. position: relative;
    108. padding:10px;
    109. width:220px;
    110. background: url("/fileadmin/template/images/box.jpg") no-repeat scroll 0 0 transparent;
    111. float:right;
    112. }
    113.  
    114.  
    115. /* ################### Haupt-Content ################### */
    116.  
    117. #content-wrapper {
    118. text-align:left;
    119. margin: 0 auto;
    120. width:940px;
    121. padding-left:15px;
    122. position:relative;
    123. z-index:2;
    124. }
    125.  
    126. #content_all {
    127. padding: 0 0 30px;
    128. }
    129.  
    130. #content {
    131. float: left;
    132. padding: 20px 0 0;
    133. width: 670px;
    134. }
    135.  
    136. /* ### Sidebar im Haupt-Content ### */
    137.  
    138. #sidebar {
    139. float:right;
    140. width: 240px;
    141. padding: 20px 0 0 0;
    142. }
    143.  
    144. #sidebar .csc-textpic-clear {
    145. height:30px;
    146. }
    147. #sidebar ul {
    148. padding-left : 15px;
    149. margin-left : 0;
    150. }
    151.  
    152. #sidebar li {
    153. padding-left : 0;
    154. margin-left : 0;
    155. text-align: left;
    156. }
    157.  
    158.  
    159. /* ################### Push Platzhalter zur Fussleiste ################### */
    160.  
    161. #push {
    162. height: 95px;
    163. clear:both;
    164. }
    165.  
    166.  
    167. /* ################### Footer ################### */
    168.  
    169. #footer-wrapper {
    170. font-size:12px;
    171. color: #353535;
    172. background: url("/fileadmin/template/images/bg_footer.png") repeat-x scroll center 0 transparent;
    173. display:block;
    174. height: 55px;
    175. margin: 0 auto;
    176. overflow: hidden;
    177. width: 960px;
    178. line-height:1.4em;
    179. border-radius: 5px;
    180. }
    181.  
    182. #footer-wrapper a {
    183. color: #633163;
    184. text-decoration:none;
    185. }
    186.  
    187. #footer-wrapper a:hover {
    188. color: #633163;
    189. text-decoration:underline;
    190. }
    191.  
    192. #footer-text a {
    193. text-decoration:underline;
    194. }
    195.  
    196. #footer-text a:hover {
    197. text-decoration:none;
    198. }
    199.  
    200. #footer {
    201. width:960px;
    202. height: 37px;
    203. display:block;
    204. margin: 0 auto;
    205. padding-left: 20px;
    206. padding-top: 18px;
    207. text-align: left;
    208. }
    209.  
    210. #footer ul {
    211. list-style-type : none;
    212. margin : 18px 0 0;
    213. padding : 0;
    214. }
    215.  
    216.  
    217. #footer .csc-frame-frame1 {
    218. font-style: italic;
    219. }
    220.  
    221.  
    222. /* ################### Currently not used ################### */
    223.  
    224. #home_link a {
    225. text-indent: -999px;
    226. display: block;
    227. position: absolute;
    228. width: 838px;
    229. height: 220px;
    230. margin-top: -130px;
    231. }
    232.  
    233.  
    234. #small_buttons {
    235. top:0;
    236. position:absolute;
    237. margin-left:841px;
    238. z-index:101;
    239. }
    240.  
    241. #small_buttons div {
    242. width:51px;
    243. height:54px;
    244. text-indent:-9999px;
    245. float:left;
    246. margin-right:-10px;
    247. }
    248.  
    249. #small_buttons div a {
    250. display:block;
    251. width:51px;
    252. height:54px;
    253. outline:none;
    254. }
    255.  
    256. #small_buttons #facebook_button {
    257. background:url('../images/facebook.png');
    258. }


  • 1
  • daisy42 daisy42
    T3PO
    0 x
    27 Beiträge
    0 Hilfreiche Beiträge
    24. 02. 2014, 09:09

    Hat sich grad gelöst (war wohl auch ein wenig der Müdigkeit gestern nacht geschuldet)

    Im TypoScript muss der Code für die Funktion als ERSTES in den <script></script>-Tags kommen.

    Also so:

    1. <script>
    2. $(document).ready(function() {
    3. $('.my-sticky-element').waypoint('sticky');
    4. });
    5.  
    6. (restlicher Code)
    7. </script>

  • 1