[Frage] Typo3 + jQuery + Android Standardbrowser --> Bilder aus Conten Elemententen werden im 1. Ladevorgang nicht angezeigt [Gelöst] TYPO3-Version: -

  • angsch-li angsch-li
    Padawan
    0 x
    43 Beiträge
    0 Hilfreiche Beiträge
    15. 08. 2014, 15:50

    Hallo Leute,

    Seit langem durfte ich wieder eine Webseite bauen und dachte mir ich versuche es gleich mit "responsive Design" und HTML5 / CSS3.

    So weit, so gut.. die letzten 20% der Webseite benötigen wieder einmal 80% der Zeit.

    Vorab technische Angaben: TYPO3 6.2.1
    Seite: http://www.perfectyou.ch

    Ab
    "@media only screen and (max-width: 650px)"
    beginnt ein verstecktes Menü, welches mit jQuery ein- und ausgeblendet werden kann.

    Dort beginnt auch das Problem... und zwar, so viel ich weiss, nur beim Android Standardbrowser.

    Die Bilder im Headerbereich werden via Html/Css geladen...kein Problem.
    Aber die Bilder, welche sich im Content-Bereich befinden und über Typo3 Content-Elemente eingebunden werden, werden nicht geladen. Lediglich der Text wird angezeigt. Wenn man jedoch die Seite dann nochmals aktualisert kommen auch plötzlich die Bilder?!

    Nach meinen unzähligen Testversuchen liegt es eindeutig am jQuery. Wenn ich das nämlich deaktiviere, dann werden auch die Bilder angezeigt (nach gelöschtem Cache, versteht sich).

    Ich bin nun leider kein Javascript /jQuery Hirsch, deshalb meine Frage an euch.. kennt jemand dieses Phänomen? Ist etwas falsch am js-code? Gemäss Validation müsste er korrekt sein.

    Vielen Dank für eure Hilfe.

    lg
    angsch-li

    Hier noch meine Daten:

    1. jQuery(document).ready(function($){
    2. $('#navphone').hide();
    3.  
    4. $('.test').click(function(einblenden){
    5. $('#navphone').slideToggle();
    6. });
    7.  
    8.  
    9. })

    1. @import url('http://fonts.googleapis.com/css?family=Nunito:400,300,');
    2.  
    3. @font-face {
    4. font-family : "'Nunito'";
    5. font-style : normal;
    6. font-weight : 300;
    7. src : local('Nunito-Light'), url(http://fonts.gstatic.com/s/nunito/v6/1TiHc9yag0wq3lDO9cw0vqCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
    8. }
    9.  
    10. @font-face {
    11. font-family : "'Nunito'";
    12. font-style : normal;
    13. font-weight : 400;
    14. src : local('Nunito-Regular'), url(http://fonts.gstatic.com/s/nunito/v6/kpI87QY2ce-mk2ZnKb-r0g.ttf) format('truetype');
    15. }
    16.  
    17.  
    18. header, footer, content, nav {
    19. margin: 0;
    20. padding: 0;
    21. border: none;
    22. }
    23.  
    24.  
    25. body {
    26. margin : 0;
    27. }
    28.  
    29. li {
    30. font-size : 90%;
    31. font-family : 'Nunito', Arial, Helvetica, sans-serif;
    32. font-weight : 300;
    33. color : #000000;
    34. }
    35.  
    36. p {
    37. font-size : 90%;
    38. font-family : 'Nunito', Arial, Helvetica, sans-serif;
    39. font-weight : 300;
    40. color : #000000;
    41. }
    42.  
    43. td {
    44. font-size : 90%;
    45. font-family : 'Nunito', Arial, Helvetica, sans-serif;
    46. font-weight : 300;
    47. color : #000000;
    48. border : 0;
    49. width : 100%;
    50. padding : 10px;
    51. }
    52.  
    53. table {
    54. border-collapse: separate;
    55. border-spacing: 0;
    56. }
    57.  
    58. tr:nth-child(even) {
    59. background-color: #fff;
    60. }
    61. tr:nth-child(odd) {
    62. background-color: #FFEBF5;
    63. }
    64.  
    65.  
    66. td:nth-child(even) {
    67. text-align: right;
    68. }
    69. td:nth-child(odd) {
    70. text-align: left;
    71. }
    72.  
    73.  
    74. iframe {
    75. width : 100%;
    76. min-height : 500px;
    77. border : 0;
    78. }
    79.  
    80.  
    81.  
    82. #nav-icon{
    83. display:none;
    84. }
    85.  
    86.  
    87. #content h1{
    88. font-size: 100%;
    89. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    90. font-weight: 300;
    91. color: #ff0090;
    92. }
    93.  
    94. #content p {
    95. padding: 0 0 8% 0;
    96. font-size: 90%;
    97. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    98. font-weight: 300;
    99. color: #000000;
    100. border-bottom-width:0;
    101. border-bottom-style:solid;
    102. border-bottom-color:#FFCBEA;
    103. }
    104.  
    105. #content a:link { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    106. #content a:visited { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    107. #content a:hover { color: #000000; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    108. #content a:active { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    109.  
    110. #content2 h1{
    111. font-size: 100%;
    112. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    113. font-weight: 300;
    114. color: #ff0090;
    115. }
    116.  
    117. #content2 p {
    118. padding: 0 0 8% 0;
    119. font-size: 90%;
    120. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    121. font-weight: 300;
    122. color: #000000;
    123. border-bottom-width:0;
    124. border-bottom-style:solid;
    125. border-bottom-color:#FFCBEA;
    126. }
    127.  
    128. #content2 a:link { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    129. #content2 a:visited { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    130. #content2 a:hover { color: #000000; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    131. #content2 a:active { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    132.  
    133.  
    134. #content3 h1{
    135. font-size: 100%;
    136. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    137. font-weight: 300;
    138. color: #ff0090;
    139. }
    140.  
    141. #content3 p {
    142. padding: 0 0 8% 0;
    143. font-size: 90%;
    144. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    145. font-weight: 300;
    146. color: #000000;
    147. border-bottom-width:0;
    148. border-bottom-style:solid;
    149. border-bottom-color:#FFCBEA;
    150.  
    151. }
    152.  
    153. #content3 a:link { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    154. #content3 a:visited { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    155. #content3 a:hover { color: #000000; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    156. #content3 a:active { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    157.  
    158.  
    159.  
    160. #footer h1 {
    161. font-size: 100%;
    162. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    163. font-weight: 300;
    164. color: #999999;
    165. }
    166.  
    167.  
    168. #footer p {
    169. font-size: 90%;
    170. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    171. font-weight: 300;
    172. color: #999999;
    173. }
    174.  
    175. #footer a:link { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    176. #footer a:visited { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    177. #footer a:hover { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    178. #footer a:active { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    179.  
    180.  
    181. #footermenu a:link { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    182. #footermenu a:visited { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    183. #footermenu a:hover { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    184. #footermenu a:active { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    185.  
    186.  
    187. #footermenu ul li {
    188. list-style: none;
    189. float:none;
    190. font-size: 90%;
    191. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    192. font-weight: 300;
    193. color: #999999;
    194. }
    195.  
    196.  
    197. .navfont {
    198. font-size: 110%;
    199. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    200. font-weight: 300;
    201. }
    202.  
    203. .navphonefont {
    204. font-size: 120%;
    205. font-family: 'Nunito', Arial, Helvetica, sans-serif;
    206. font-weight: 300;
    207. }
    208.  
    209.  
    210. /*DIV Containers*/
    211.  
    212.  
    213. #container {
    214. width:100%;
    215. }
    216.  
    217. #headerbereich {
    218. margin: auto;
    219. height: 30%;
    220. }
    221.  
    222.  
    223. #gepflegt-bild {
    224. display: inline-block;
    225. margin-top: 15%;
    226. margin-bottom: auto;
    227. width: 300px;
    228. }
    229.  
    230. #schoen-bild {
    231. display: inline-block;
    232. margin-top: 15%;
    233. margin-bottom: auto;
    234. width: 300px;
    235. }
    236.  
    237.  
    238. #gepflegt {
    239. position:relative;
    240. /*margin: 6% 5% auto 15%;
    241.   padding:1%;*/
    242. margin: 0;
    243. padding: 0;
    244. /*width: 17%;*/
    245. min-width: 40%;
    246. float:left;
    247. border:0;
    248. text-align: center;
    249. /* -webkit-animation-name: button-gepflegt;
    250.   -webkit-animation-duration: 10s;
    251.   -webkit-animation-iteration-count: infinite;
    252.   -webkit-animation-direction: normal;
    253.   -moz-animation-name: button-gepflegt;
    254.   -moz-animation-duration: 10s;
    255.   -moz-animation-iteration-count: infinite;
    256.   -moz-animation-direction: normal;
    257.   -o-animation-name: button-gepflegt;
    258.   -o-animation-duration: 10s;
    259.   -o-animation-iteration-count: infinite;
    260.   -o-animation-direction: normal;
    261.   -ms-animation-name: button-gepflegt;
    262.   -ms-animation-duration: 10s;
    263.   -ms-animation-iteration-count: infinite;
    264.   -ms-animation-direction: normal;
    265.   animation-name: button-gepflegt;
    266.   animation-duration: 10s;
    267.   animation-iteration-count: infinite;
    268.   animation-direction: normal;*/
    269. }
    270.  
    271.  
    272. /*@keyframes button-gepflegt {
    273.   0% { opacity: 0; transition: opacity .10s ease-in-out;}
    274.   50% { opacity: 1; transition: opacity .10s ease-in-out;}
    275.   100% { opacity: 0; transition: opacity .10s ease-in-out;}
    276. }
    277.  
    278. @-webkit-keyframes button-gepflegt {
    279.   0% { opacity: 0; transition: opacity .10s ease-in-out;}
    280.   50% { opacity: 1; transition: opacity .10s ease-in-out;}
    281.   100% { opacity: 0; transition: opacity .10s ease-in-out;}
    282. }
    283.  
    284. @-moz-keyframes button-gepflegt {
    285.   0% { opacity: 0; transition: opacity .10s ease-in-out;}
    286.   50% { opacity: 1; transition: opacity .10s ease-in-out;}
    287.   100% { opacity: 0; transition: opacity .10s ease-in-out;}
    288. }
    289.  
    290. @-ms-keyframes button-gepflegt {
    291.   0% { opacity: 0; transition: opacity .10s ease-in-out;}
    292.   50% { opacity: 1; transition: opacity .10s ease-in-out;}
    293.   100% { opacity: 0; transition: opacity .10s ease-in-out;}
    294. }
    295.  
    296. @-o-keyframes button-gepflegt {
    297.   0% { opacity: 0; transition: opacity .10s ease-in-out;}
    298.   50% { opacity: 1; transition: opacity .10s ease-in-out;}
    299.   100% { opacity: 0; transition: opacity .10s ease-in-out;}
    300. }*/
    301.  
    302.  
    303. #logo {
    304. position:relative;
    305. margin: 0;
    306. padding: 0;
    307. float: left;
    308. min-width: 20%;
    309. text-align: center;
    310. }
    311.  
    312.  
    313. #logo-bild {
    314. display: inline-block;
    315. margin-left: auto;
    316. margin-right: auto;
    317. background-image: url("../pix/Header-Logo_perfectYou-100.jpg");
    318. background-repeat:no-repeat;
    319. width: 170px;
    320. height: 336px;
    321. }
    322.  
    323.  
    324.  
    325. #schoen {
    326. position:relative;
    327. /*margin: 6% 15% auto 5%;
    328.   padding:1%;*/
    329. margin: 0;
    330. padding: 0;
    331. /*width: 17%;*/
    332. min-width: 40%;
    333. float:left;
    334. border:0;
    335. text-align: center;
    336. /*
    337.   -webkit-animation-name: button-gepflegt;
    338.   -webkit-animation-duration: 10s;
    339.   -webkit-animation-iteration-count: infinite;
    340.   -webkit-animation-direction: normal;
    341.   -moz-animation-name: button-gepflegt;
    342.   -moz-animation-duration: 10s;
    343.   -moz-animation-iteration-count: infinite;
    344.   -moz-animation-direction: normal;
    345.   -o-animation-name: button-gepflegt;
    346.   -o-animation-duration: 10s;
    347.   -o-animation-iteration-count: infinite;
    348.   -o-animation-direction: normal;
    349.   -ms-animation-name: button-gepflegt;
    350.   -ms-animation-duration: 10s;
    351.   -ms-animation-iteration-count: infinite;
    352.   -ms-animation-direction: normal;
    353.   animation-name: button-gepflegt;
    354.   animation-duration: 10s;
    355.   animation-iteration-count: infinite;
    356.   animation-direction: normal;*/
    357. }
    358.  
    359. /*@keyframes button-schoen {
    360.   0% { opacity: 1; transition: opacity .10s ease-in-out;}
    361.   50% { opacity: 0; transition: opacity .10s ease-in-out;}
    362.   100% { opacity: 1; transition: opacity .10s ease-in-out;}
    363. }
    364.  
    365. @-webkit-keyframes button-schoen {
    366.   0% { opacity: 1; transition: opacity .10s ease-in-out;}
    367.   50% { opacity: 0; transition: opacity .10s ease-in-out;}
    368.   100% { opacity: 1; transition: opacity .10s ease-in-out;}
    369. }
    370.  
    371. @-moz-keyframes button-schoen {
    372.   0% { opacity: 1; transition: opacity .10s ease-in-out;}
    373.   50% { opacity: 0; transition: opacity .10s ease-in-out;}
    374.   100% { opacity: 1; transition: opacity .10s ease-in-out;}
    375. }
    376.  
    377. @-ms-keyframes button-schoen {
    378.   0% { opacity: 1; transition: opacity .10s ease-in-out;}
    379.   50% { opacity: 0; transition: opacity .10s ease-in-out;}
    380.   100% { opacity: 1; transition: opacity .10s ease-in-out;}
    381. }
    382.  
    383. @-o-keyframes button-schoen {
    384.   0% { opacity: 1; transition: opacity .10s ease-in-out;}
    385.   50% { opacity: 0; transition: opacity .10s ease-in-out;}
    386.   100% { opacity: 1; transition: opacity .10s ease-in-out;}
    387. }*/
    388.  
    389. #nav {
    390. clear: both;
    391. position:relative;
    392. padding: 0;
    393. left:0;
    394. right:0;
    395. width:100%;
    396. z-index:20;
    397. }
    398.  
    399.  
    400. #navphone {
    401. display: none;
    402. position:relative;
    403. padding: 0;
    404. left: 0;
    405. right:0;
    406. z-index:21;
    407. }
    408.  
    409.  
    410.  
    411. #content {
    412. position:relative;
    413. padding: 1% 3%;
    414. left:0;
    415. right:0;
    416. width:27%;
    417. float:left;
    418. border-right-width:0;
    419. border-right-style:solid;
    420. border-right-color:#FFCBEA;
    421. z-index:2;
    422. }
    423.  
    424. #content2 {
    425. position:relative;
    426. padding:1% 3%;
    427. left: 0;
    428. right:0;
    429. width:27%;
    430. float:left;
    431. border-right-width:0;
    432. border-right-style:solid;
    433. border-right-color:#FFCBEA;
    434. z-index:1;
    435. }
    436.  
    437. #content3 {
    438. position:relative;
    439. padding:1% 3%;
    440. left: 0;
    441. right:0;
    442. width:27%;
    443. float:left;
    444. border-right-width:0;
    445. border-right-style:solid;
    446. border-right-color:#FFCBEA;
    447. z-index:1;
    448. }
    449.  
    450.  
    451. #footerwrap {
    452. margin: 0;
    453. padding: 10px 0 10px 0;
    454. position:relative;
    455. float:left;
    456. width:100%;
    457. background-color: #000;
    458. }
    459.  
    460. #footermenu {
    461. margin: 0 0 0 -10px;
    462. padding:0;
    463. text-align: left;
    464. float:left;
    465. width: 48%;
    466. }
    467.  
    468.  
    469. #footer {
    470. margin: 0 -10px 0 0;
    471. padding:0;
    472. text-align: right;
    473. float:left;
    474. width: 50%;
    475. }
    476.  
    477.  
    478.  
    479.  
    480.  
    481. /* Bilder Grössen Anpassung */
    482.  
    483.  
    484. img {
    485. display: block;
    486. width:100%;
    487. height: auto;
    488. -ms-interpolation-mode: nearest-neighbor;
    489. }
    490.  
    491.  
    492.  
    493.  
    494.  
    495. @media only screen and (max-width: 650px) {
    496.  
    497. #footermenu ul li {
    498. font-size: 130%;
    499. }
    500.  
    501. }
    502.  
    503.  
    504.  
    505. @media only screen and (max-width: 900px) {
    506.  
    507.  
    508. #nav-icon{
    509. display:block;
    510. position:absolute;
    511. top: 20px;
    512. right: 20px;
    513. width: 40px;
    514. height: 32px;
    515. margin: 0;
    516. padding:0;
    517. z-index:2000;
    518. }
    519.  
    520.  
    521.  
    522.  
    523. #navphone {
    524. display: block;
    525. float: none;
    526. }
    527.  
    528. #nav {
    529. clear: both;
    530. display: none;
    531. }
    532.  
    533.  
    534.  
    535. #content {
    536. width:94%;
    537. }
    538.  
    539. #content h1{
    540. font-size: 110%;
    541. }
    542.  
    543. #content p {
    544. padding: 0 0 2% 0;
    545. border-bottom-width:1px;
    546. border-bottom-style:solid;
    547. border-bottom-color:#FFCBEA;
    548. }
    549.  
    550. #content2 h1{
    551. font-size: 110%;
    552. }
    553.  
    554. #content2 {
    555. width:94%;
    556. }
    557. #content2 p {
    558. padding: 0 0 2% 0;
    559. border-bottom-width:1px;
    560. border-bottom-style:solid;
    561. border-bottom-color:#FFCBEA;
    562. }
    563.  
    564. #content3 h1{
    565. font-size: 110%;
    566. }
    567.  
    568. #content3 {
    569. width:94%;
    570. }
    571. #content3 p {
    572. padding: 0 0 2% 0;
    573. border-bottom-width:1px;
    574. border-bottom-style:solid;
    575. border-bottom-color:#FFCBEA;
    576. }
    577.  
    578.  
    579. .navfont {
    580. font-size: 100%;
    581. }
    582.  
    583.  
    584. #gepflegt {
    585. clear: both;
    586. float: none;
    587. display: none;
    588. }
    589.  
    590. #schoen {
    591. clear: both;
    592. float: none;
    593. display: none;
    594. }
    595.  
    596. /*#logo {
    597.   float: none;
    598.   margin-left:auto;
    599.   margin-right:auto;
    600.   width: 20%;
    601.  
    602. }*/
    603.  
    604. #logo {
    605. float: none;
    606. width: 95%;
    607. margin-left:auto;
    608. margin-right:auto;
    609. }
    610.  
    611.  
    612. #logo-bild {
    613. background-image: url("../pix/Header-Logo_perfectYou-klein.jpg");
    614. background-repeat:no-repeat;
    615. width: 110px;
    616. height: 217px;
    617. margin-left:auto;
    618. margin-right:auto;
    619. }
    620.  
    621.  
    622.  
    623.  
    624. }
    625.  
    626.  
    627. @media only screen and (min-width: 900px) {
    628. #logo {
    629. max-width: 18%;
    630. text-align: center;
    631. }
    632.  
    633. #schoen {
    634. max-width: 14%;
    635. }
    636.  
    637. #gepflegt {
    638. max-width: 14%;
    639. }
    640. }

    1. #navphone {
    2. padding: 0;
    3. margin: 0;
    4. /*width: 100%;*/
    5. }
    6.  
    7. #navphone ul {
    8. width: 100%;
    9. padding: 0;
    10. margin: 0;
    11. }
    12.  
    13.  
    14.  
    15. #navphone ul li {
    16. /*clear: both;*/
    17. list-style: none;
    18. width: 100%;
    19. float: none;
    20. position: relative;
    21. display: inline-block;
    22. }
    23.  
    24.  
    25. #navphone ul li a {
    26. text-decoration: none;
    27. display: block;
    28. color: #fff;
    29. text-align: center;
    30. padding: 2.5% 0 2.5% 0;
    31. background-color: #ff0090;
    32. font-size: 100%;
    33. -webkit-transition: none;
    34. -moz-transition: none;
    35. -o-transition: none;
    36. transition: none;
    37. border-bottom-width: 1px;
    38. border-bottom-style:solid;
    39. border-bottom-color:#fff;
    40. }
    41.  
    42. #navphone ul li:hover a, #navphone ul li:hover > ul li a {
    43. background-color: #FFEBF5;
    44. }
    45.  
    46.  
    47.  
    48. #navphone ul li:hover > a {
    49. color: #ff0090;
    50. background-color: #FFEBF5;
    51. display:block;
    52.  
    53. }
    54.  
    55.  
    56.  
    57. /*#navphone ul li ul li:hover > a {
    58.   color: #fff;
    59.   background-color: green;
    60.   display:block;
    61. }*/
    62.  
    63.  
    64.  
    65. #navphone ul li:hover > ul {
    66. visibility: visible;
    67. }
    68.  
    69.  
    70. #navphone ul li ul{
    71. /*display: block;*/
    72. visibility: visible;
    73. position: relative;
    74. color: #000;
    75. z-index: 15;
    76. }
    77.  
    78.  
    79. #navphone ul li ul li{
    80. float: none;
    81. width: 100%;
    82. }
    83.  
    84.  
    85.  
    86. #navphone ul li ul li a {
    87. background-color: #FFEBF5;
    88. color: #ff0090;
    89. font-size: 95%;
    90. }
    91.  
    92.  
    93.  
    94.  
    95. #navphone ul li ul li a:hover{
    96. color: #fff;
    97. background-color: #FF1FA5;
    98.  
    99. }
    100.  
    101.  
    102.  
    103.  
    104. /*Dritte Stufe*/
    105.  
    106. /*#navphone ul li ul li ul :before{
    107.   display: inline;
    108.   visibility: block;
    109.   position: absolute;
    110.   z-index: 10;
    111.   display: none;
    112. }*/
    113.  
    114.  
    115. /*#navphone ul li ul li ul :after{
    116.   display: block;
    117. }*/
    118.  
    119.  
    120.  
    121. /*#navphone ul li ul li ul li{
    122.   float: none;
    123.   width: 100%;
    124. }*/
    125.  
    126.  
    127.  
    128. /*#navphone ul li ul li ul li a {
    129.   color: #ff0090;
    130.   font-size: 140%;
    131. }*/
    132.  
    133.  
    134.  
    135.  
    136. /*test*/
    137.  
    138.  
    139. /*#navphone ul li > #navphone ul li ul li {
    140. height: 0;
    141.   /*overflow: hidden;*/
    142. /*-webkit-transition: all .2s ease-in-out;
    143.   -moz-transition: all .2s ease-in-out;
    144.   -o-transition: all .2s ease-in-out;
    145.   -ms-transition: all .2s ease-in-out;
    146.   transition: all .2s ease-in-out;
    147. }*/
    148.  
    149. /*#navphone ul li:target > #navphone ul li ul li {
    150.   height: 98px;
    151. }*/
    152.  
    153.  
    154.  
    155. }

    1. # Allgemeine TypoScript-Konfigurationen
    2. config {
    3. doctype = html5
    4. metaCharset = utf-8
    5. no_cache = 0
    6. admPanel = 0
    7. debug = 0
    8. baseURL = http://www.perfectYou.ch/
    9. simulateStaticDocuments = 0
    10. tx_realurl_enable = 1
    11. uniqueLinkVars = 1
    12. linkVars = L(0-3)
    13. language = de
    14. #xmlprologue = none
    15. #locale_all = german
    16. #htmlTa­g_l­angKey = de
    17. #sys_la­ngu­age_uid = 0
    18. #htmlTag_setParams = none
    19. #doctype = xhtml_trans
    20. #xhtml_cleaning = all
    21. #htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"
    22. #prefixLocalAnchors = all
    23. #typolinkCheckRootline = 1
    24. #typolinkEnableLinksAcrossDomains = 1
    25. }
    26.  
    27.  
    28.  
    29. page = PAGE
    30.  
    31. page.includeCSS {
    32. stylesheet1 = fileadmin/templates/perfectYou.css
    33. stylesheet2 = fileadmin/templates/perfectYou-menu.css
    34. stylesheet3 = fileadmin/templates/perfectYou-menu-phone.css
    35. }
    36.  
    37. page.includeJSFooter.jquery.external = 1
    38. page.includeJSFooter.jquery = https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
    39. page.includeJSFooter.myjavascript = fileadmin/templates/perfectYou-menu.js
    40.  
    41.  
    42. page.headerData.1 = TEXT
    43. page.headerData.1.value (
    44. <link rel="shortcut icon" href="fileadmin/pix/favicon.ico" type="image/x-icon" />
    45. )
    46.  
    47.  
    48. page {
    49. typeNum = 0
    50.  
    51. #includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
    52.  
    53. # Allgemeine Seiteneigenschaften setzen
    54. #bodyTag = <body bgcolor="ffffff" topmargin="0" leftmargin="0">
    55.  
    56. meta {
    57. viewport = width=device-width, initial-scale=1, user-scalable=no
    58. apple-mobile-web-app-capable = yes
    59.  
    60. keywords = kosmetik, cosmetic, behandlung, schönheit, beauty, perfekt, wachsen, waxing, haarentfernung, gesicht, pflege, breitenbach, franziska, borer, breitenbach, thierstein, laufental,
    61. description = perfectYou cosmetic - Schön und gepflegt ist die moderne Frau von heute! Kosmetikstudio in Breitenbach.
    62. author = angie.graphics
    63. robots = index,follow
    64. }
    65.  
    66.  
    67.  
    68.  
    69. 10 = TEMPLATE
    70. 10.template = FILE
    71. 10.template.file = fileadmin/templates/template-new.html
    72.  
    73. # Ersetzt Subpart Dokument im Template, damit keine doppelte Ausgabe von doctype und co.
    74. 10.workOnSubpart = DOKUMENT
    75.  
    76. 10.marks {
    77.  
    78.  
    79.  
    80.  
    81.  
    82. # Inhalt ausgeben
    83. table = tt_content
    84. #styles.content.get
    85. where = colPos = 1
    86. orderBy = sorting
    87. languageField = sys_language_uid
    88. }
    89. }
    90.  
    91. # Inhalt ausgeben
    92. CONTENT2 = CONTENT
    93. CONTENT2 {
    94. table = tt_content
    95. where = colPos = 0
    96. orderBy = sorting
    97. languageField = sys_language_uid
    98. }
    99. }
    100.  
    101.  
    102. # Inhalt ausgeben
    103. CONTENT3 = CONTENT
    104. CONTENT3 {
    105. table = tt_content
    106. where = colPos = 2
    107. orderBy = sorting
    108. languageField = sys_language_uid
    109. }
    110. }
    111.  
    112. # Inhalt ausgeben
    113. FOOTER = CONTENT
    114. FOOTER {
    115. table = tt_content
    116. where = colPos = 3
    117. orderBy = sorting
    118. languageField = sys_language_uid
    119. }
    120. }
    121.  
    122.  
    123.  
    124.  
    125.  
    126.  
    127.  
    128.  
    129.  
    130. # Das Hauptmenü erstellen
    131. MENU = HMENU
    132. MENU {
    133. special = directory
    134. special.value = 3
    135. wrap = <div id="nav">|</div>
    136. ### Erste Ebene ###
    137. 1 = TMENU
    138. 1 {
    139. wrap = <ul class="nav">|</ul>
    140. expAll = 1
    141. NO.wrapItemAndSub = <li>|</li>
    142. ACT < .NO
    143. ACT = 1
    144. ACT.ATagParams = class="active"
    145. }
    146. ### Zweite Ebene ###
    147. 2 < .1
    148. }
    149.  
    150.  
    151.  
    152.  
    153.  
    154.  
    155.  
    156.  
    157. # Phonemenu Versuch
    158. MENUPHONE = HMENU
    159. MENUPHONE {
    160. special = directory
    161. special.value = 3
    162. wrap = <div id="navphone">|</div>
    163. ### Erste Ebene ###
    164. 1 = TMENU
    165. 1 {
    166. wrap = <ul class="navphone">|</ul>
    167. expAll = 1
    168. NO.wrapItemAndSub = <li>|</li>
    169. ACT < .NO
    170. ACT = 1
    171. ACT.ATagParams = class="active"
    172. }
    173. ### Zweite Ebene ###
    174. 2 < .1
    175.  
    176. ### DritteEbene ###
    177. 3 < .1
    178. }
    179.  
    180.  
    181.  
    182. # Das Footermenu erstellen
    183. FOOTERMENU = HMENU
    184. FOOTERMENU {
    185. special = directory
    186. special.value = 20
    187. wrap = <div id="footermenu">|</div>
    188. ### Erste Ebene ###
    189. 1 = TMENU
    190. 1 {
    191. wrap = <ul class="footermenu">|</ul>
    192. expAll = 1
    193. NO.wrapItemAndSub = <li>|</li>
    194. ACT < .NO
    195. ACT = 1
    196. ACT.ATagParams = class="active"
    197. }
    198. ### Zweite Ebene ###
    199. 2 < .1
    200. }
    201.  
    202.  
    203.  
    204.  
    205.  
    206. }
    207. }
    208.  
    209.  
    210. tt_content.menu = COA
    211. tt_content.menu.10 =< lib.stdheader
    212. tt_content.menu.20 = TEXT

  • angsch-li angsch-li
    Padawan
    0 x
    43 Beiträge
    0 Hilfreiche Beiträge
    03. 09. 2014, 17:18 - Lösung

    Falls es jemanden geben sollte, in Zukunft, der das gleiche Problem hat...
    ich hätte nun die Lösung.

    Es lag an den vielen "csc..."div's, welche um die Bilder im Content gelegt wurden. Dies kann man aber im TS ausschalten. Und nun klappts auch (mit dem Nachbarn). :-D

    TS Code:

    1. ###DIV Wraps entfernen###
    2. tt_content.stdWrap.innerWrap >
    3. lib.stdheader.stdWrap.dataWrap >
    4.  
    5. tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    6. width.unset = 1
    7. height.unset = 1
    8. }
    9. tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    10. width.unset = 1
    11. height.unset = 1
    12. }
    13. lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    14. width.unset = 1
    15. height.unset = 1
    16. }


  • 1
  • angsch-li angsch-li
    Padawan
    0 x
    43 Beiträge
    0 Hilfreiche Beiträge
    18. 08. 2014, 12:30

    Ich habe es echt versucht..aber ich bin kein sehr geduldiger Mensch... ;)
    Hatte echt noch niemand dasselbe Problem? Scheint auch beim iPad der 1. Generation mit iOS 5 der Fall zu sein, dass die Bilder nicht angezeigt werden.

    Gibt es dafür einen Hack?

    Danke für eure Hilfe...

    angsch-li

  • angsch-li angsch-li
    Padawan
    0 x
    43 Beiträge
    0 Hilfreiche Beiträge
    03. 09. 2014, 17:18

    Falls es jemanden geben sollte, in Zukunft, der das gleiche Problem hat...
    ich hätte nun die Lösung.

    Es lag an den vielen "csc..."div's, welche um die Bilder im Content gelegt wurden. Dies kann man aber im TS ausschalten. Und nun klappts auch (mit dem Nachbarn). :-D

    TS Code:

    1. ###DIV Wraps entfernen###
    2. tt_content.stdWrap.innerWrap >
    3. lib.stdheader.stdWrap.dataWrap >
    4.  
    5. tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    6. width.unset = 1
    7. height.unset = 1
    8. }
    9. tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    10. width.unset = 1
    11. height.unset = 1
    12. }
    13. lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    14. width.unset = 1
    15. height.unset = 1
    16. }

  • 1