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:
jQuery(document).ready(function($){ $('#navphone').hide(); $('.test').click(function(einblenden){ $('#navphone').slideToggle(); }); })
@import url('http://fonts.googleapis.com/css?family=Nunito:400,300,'); @font-face { font-family : "'Nunito'"; font-style : normal; font-weight : 300; src : local('Nunito-Light'), url(http://fonts.gstatic.com/s/nunito/v6/1TiHc9yag0wq3lDO9cw0vqCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); } @font-face { font-family : "'Nunito'"; font-style : normal; font-weight : 400; src : local('Nunito-Regular'), url(http://fonts.gstatic.com/s/nunito/v6/kpI87QY2ce-mk2ZnKb-r0g.ttf) format('truetype'); } header, footer, content, nav { margin: 0; padding: 0; border: none; } body { margin : 0; } li { font-size : 90%; font-family : 'Nunito', Arial, Helvetica, sans-serif; font-weight : 300; color : #000000; } p { font-size : 90%; font-family : 'Nunito', Arial, Helvetica, sans-serif; font-weight : 300; color : #000000; } td { font-size : 90%; font-family : 'Nunito', Arial, Helvetica, sans-serif; font-weight : 300; color : #000000; border : 0; width : 100%; padding : 10px; } table { border-collapse: separate; border-spacing: 0; } tr:nth-child(even) { background-color: #fff; } tr:nth-child(odd) { background-color: #FFEBF5; } td:nth-child(even) { text-align: right; } td:nth-child(odd) { text-align: left; } iframe { width : 100%; min-height : 500px; border : 0; } #nav-icon{ display:none; } #content h1{ font-size: 100%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; color: #ff0090; } #content p { padding: 0 0 8% 0; font-size: 90%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; color: #000000; border-bottom-width:0; border-bottom-style:solid; border-bottom-color:#FFCBEA; } #content a:link { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content a:visited { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content a:hover { color: #000000; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content a:active { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content2 h1{ font-size: 100%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; color: #ff0090; } #content2 p { padding: 0 0 8% 0; font-size: 90%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; color: #000000; border-bottom-width:0; border-bottom-style:solid; border-bottom-color:#FFCBEA; } #content2 a:link { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content2 a:visited { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content2 a:hover { color: #000000; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content2 a:active { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content3 h1{ font-size: 100%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; color: #ff0090; } #content3 p { padding: 0 0 8% 0; font-size: 90%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; color: #000000; border-bottom-width:0; border-bottom-style:solid; border-bottom-color:#FFCBEA; } #content3 a:link { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content3 a:visited { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content3 a:hover { color: #000000; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #content3 a:active { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #footer h1 { font-size: 100%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; color: #999999; } #footer p { font-size: 90%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; color: #999999; } #footer a:link { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #footer a:visited { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #footer a:hover { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #footer a:active { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #footermenu a:link { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #footermenu a:visited { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #footermenu a:hover { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #footermenu a:active { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none } #footermenu ul li { list-style: none; float:none; font-size: 90%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; color: #999999; } .navfont { font-size: 110%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; } .navphonefont { font-size: 120%; font-family: 'Nunito', Arial, Helvetica, sans-serif; font-weight: 300; } /*DIV Containers*/ #container { width:100%; } #headerbereich { margin: auto; height: 30%; } #gepflegt-bild { display: inline-block; margin-top: 15%; margin-bottom: auto; width: 300px; } #schoen-bild { display: inline-block; margin-top: 15%; margin-bottom: auto; width: 300px; } #gepflegt { position:relative; /*margin: 6% 5% auto 15%; padding:1%;*/ margin: 0; padding: 0; /*width: 17%;*/ min-width: 40%; float:left; border:0; text-align: center; /* -webkit-animation-name: button-gepflegt; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -moz-animation-name: button-gepflegt; -moz-animation-duration: 10s; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -o-animation-name: button-gepflegt; -o-animation-duration: 10s; -o-animation-iteration-count: infinite; -o-animation-direction: normal; -ms-animation-name: button-gepflegt; -ms-animation-duration: 10s; -ms-animation-iteration-count: infinite; -ms-animation-direction: normal; animation-name: button-gepflegt; animation-duration: 10s; animation-iteration-count: infinite; animation-direction: normal;*/ } /*@keyframes button-gepflegt { 0% { opacity: 0; transition: opacity .10s ease-in-out;} 50% { opacity: 1; transition: opacity .10s ease-in-out;} 100% { opacity: 0; transition: opacity .10s ease-in-out;} } @-webkit-keyframes button-gepflegt { 0% { opacity: 0; transition: opacity .10s ease-in-out;} 50% { opacity: 1; transition: opacity .10s ease-in-out;} 100% { opacity: 0; transition: opacity .10s ease-in-out;} } @-moz-keyframes button-gepflegt { 0% { opacity: 0; transition: opacity .10s ease-in-out;} 50% { opacity: 1; transition: opacity .10s ease-in-out;} 100% { opacity: 0; transition: opacity .10s ease-in-out;} } @-ms-keyframes button-gepflegt { 0% { opacity: 0; transition: opacity .10s ease-in-out;} 50% { opacity: 1; transition: opacity .10s ease-in-out;} 100% { opacity: 0; transition: opacity .10s ease-in-out;} } @-o-keyframes button-gepflegt { 0% { opacity: 0; transition: opacity .10s ease-in-out;} 50% { opacity: 1; transition: opacity .10s ease-in-out;} 100% { opacity: 0; transition: opacity .10s ease-in-out;} }*/ #logo { position:relative; margin: 0; padding: 0; float: left; min-width: 20%; text-align: center; } #logo-bild { display: inline-block; margin-left: auto; margin-right: auto; background-image: url("../pix/Header-Logo_perfectYou-100.jpg"); background-repeat:no-repeat; width: 170px; height: 336px; } #schoen { position:relative; /*margin: 6% 15% auto 5%; padding:1%;*/ margin: 0; padding: 0; /*width: 17%;*/ min-width: 40%; float:left; border:0; text-align: center; /* -webkit-animation-name: button-gepflegt; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -moz-animation-name: button-gepflegt; -moz-animation-duration: 10s; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -o-animation-name: button-gepflegt; -o-animation-duration: 10s; -o-animation-iteration-count: infinite; -o-animation-direction: normal; -ms-animation-name: button-gepflegt; -ms-animation-duration: 10s; -ms-animation-iteration-count: infinite; -ms-animation-direction: normal; animation-name: button-gepflegt; animation-duration: 10s; animation-iteration-count: infinite; animation-direction: normal;*/ } /*@keyframes button-schoen { 0% { opacity: 1; transition: opacity .10s ease-in-out;} 50% { opacity: 0; transition: opacity .10s ease-in-out;} 100% { opacity: 1; transition: opacity .10s ease-in-out;} } @-webkit-keyframes button-schoen { 0% { opacity: 1; transition: opacity .10s ease-in-out;} 50% { opacity: 0; transition: opacity .10s ease-in-out;} 100% { opacity: 1; transition: opacity .10s ease-in-out;} } @-moz-keyframes button-schoen { 0% { opacity: 1; transition: opacity .10s ease-in-out;} 50% { opacity: 0; transition: opacity .10s ease-in-out;} 100% { opacity: 1; transition: opacity .10s ease-in-out;} } @-ms-keyframes button-schoen { 0% { opacity: 1; transition: opacity .10s ease-in-out;} 50% { opacity: 0; transition: opacity .10s ease-in-out;} 100% { opacity: 1; transition: opacity .10s ease-in-out;} } @-o-keyframes button-schoen { 0% { opacity: 1; transition: opacity .10s ease-in-out;} 50% { opacity: 0; transition: opacity .10s ease-in-out;} 100% { opacity: 1; transition: opacity .10s ease-in-out;} }*/ #nav { clear: both; position:relative; padding: 0; left:0; right:0; width:100%; z-index:20; } #navphone { display: none; position:relative; padding: 0; left: 0; right:0; z-index:21; } #content { position:relative; padding: 1% 3%; left:0; right:0; width:27%; float:left; border-right-width:0; border-right-style:solid; border-right-color:#FFCBEA; z-index:2; } #content2 { position:relative; padding:1% 3%; left: 0; right:0; width:27%; float:left; border-right-width:0; border-right-style:solid; border-right-color:#FFCBEA; z-index:1; } #content3 { position:relative; padding:1% 3%; left: 0; right:0; width:27%; float:left; border-right-width:0; border-right-style:solid; border-right-color:#FFCBEA; z-index:1; } #footerwrap { margin: 0; padding: 10px 0 10px 0; position:relative; float:left; width:100%; background-color: #000; } #footermenu { margin: 0 0 0 -10px; padding:0; text-align: left; float:left; width: 48%; } #footer { margin: 0 -10px 0 0; padding:0; text-align: right; float:left; width: 50%; } /* Bilder Grössen Anpassung */ img { display: block; width:100%; height: auto; -ms-interpolation-mode: nearest-neighbor; } @media only screen and (max-width: 650px) { #footermenu ul li { font-size: 130%; } } @media only screen and (max-width: 900px) { #nav-icon{ display:block; position:absolute; top: 20px; right: 20px; width: 40px; height: 32px; margin: 0; padding:0; z-index:2000; } #navphone { display: block; float: none; } #nav { clear: both; display: none; } #content { width:94%; } #content h1{ font-size: 110%; } #content p { padding: 0 0 2% 0; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#FFCBEA; } #content2 h1{ font-size: 110%; } #content2 { width:94%; } #content2 p { padding: 0 0 2% 0; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#FFCBEA; } #content3 h1{ font-size: 110%; } #content3 { width:94%; } #content3 p { padding: 0 0 2% 0; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#FFCBEA; } .navfont { font-size: 100%; } #gepflegt { clear: both; float: none; display: none; } #schoen { clear: both; float: none; display: none; } /*#logo { float: none; margin-left:auto; margin-right:auto; width: 20%; }*/ #logo { float: none; width: 95%; margin-left:auto; margin-right:auto; } #logo-bild { background-image: url("../pix/Header-Logo_perfectYou-klein.jpg"); background-repeat:no-repeat; width: 110px; height: 217px; margin-left:auto; margin-right:auto; } } @media only screen and (min-width: 900px) { #logo { max-width: 18%; text-align: center; } #schoen { max-width: 14%; } #gepflegt { max-width: 14%; } }
#navphone { padding: 0; margin: 0; /*width: 100%;*/ } #navphone ul { width: 100%; padding: 0; margin: 0; } #navphone ul li { /*clear: both;*/ list-style: none; width: 100%; float: none; position: relative; display: inline-block; } #navphone ul li a { text-decoration: none; display: block; color: #fff; text-align: center; padding: 2.5% 0 2.5% 0; background-color: #ff0090; font-size: 100%; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; border-bottom-width: 1px; border-bottom-style:solid; border-bottom-color:#fff; } #navphone ul li:hover a, #navphone ul li:hover > ul li a { background-color: #FFEBF5; } #navphone ul li:hover > a { color: #ff0090; background-color: #FFEBF5; display:block; } /*#navphone ul li ul li:hover > a { color: #fff; background-color: green; display:block; }*/ #navphone ul li:hover > ul { visibility: visible; } #navphone ul li ul{ /*display: block;*/ visibility: visible; position: relative; color: #000; z-index: 15; } #navphone ul li ul li{ float: none; width: 100%; } #navphone ul li ul li a { background-color: #FFEBF5; color: #ff0090; font-size: 95%; } #navphone ul li ul li a:hover{ color: #fff; background-color: #FF1FA5; } /*Dritte Stufe*/ /*#navphone ul li ul li ul :before{ display: inline; visibility: block; position: absolute; z-index: 10; display: none; }*/ /*#navphone ul li ul li ul :after{ display: block; }*/ /*#navphone ul li ul li ul li{ float: none; width: 100%; }*/ /*#navphone ul li ul li ul li a { color: #ff0090; font-size: 140%; }*/ /*test*/ /*#navphone ul li > #navphone ul li ul li { height: 0; /*overflow: hidden;*/ /*-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }*/ /*#navphone ul li:target > #navphone ul li ul li { height: 98px; }*/ }
# Allgemeine TypoScript-Konfigurationen config { doctype = html5 metaCharset = utf-8 no_cache = 0 admPanel = 0 baseURL = http://www.perfectYou.ch/ simulateStaticDocuments = 0 tx_realurl_enable = 1 uniqueLinkVars = 1 linkVars = L(0-3) language = de #xmlprologue = none #locale_all = german #htmlTag_langKey = de #sys_language_uid = 0 #htmlTag_setParams = none #doctype = xhtml_trans #xhtml_cleaning = all #htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" #prefixLocalAnchors = all #typolinkCheckRootline = 1 #typolinkEnableLinksAcrossDomains = 1 } page.includeCSS { stylesheet1 = fileadmin/templates/perfectYou.css stylesheet2 = fileadmin/templates/perfectYou-menu.css stylesheet3 = fileadmin/templates/perfectYou-menu-phone.css } page.includeJSFooter.jquery.external = 1 page.includeJSFooter.jquery = https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js page.includeJSFooter.myjavascript = fileadmin/templates/perfectYou-menu.js page.headerData.1.value ( <link rel="shortcut icon" href="fileadmin/pix/favicon.ico" type="image/x-icon" /> ) page { typeNum = 0 #includeLibs.gmenu_layers = media/scripts/gmenu_layers.php # Allgemeine Seiteneigenschaften setzen #bodyTag = <body bgcolor="ffffff" topmargin="0" leftmargin="0"> meta { viewport = width=device-width, initial-scale=1, user-scalable=no apple-mobile-web-app-capable = yes keywords = kosmetik, cosmetic, behandlung, schönheit, beauty, perfekt, wachsen, waxing, haarentfernung, gesicht, pflege, breitenbach, franziska, borer, breitenbach, thierstein, laufental, description = perfectYou cosmetic - Schön und gepflegt ist die moderne Frau von heute! Kosmetikstudio in Breitenbach. author = angie.graphics robots = index,follow } 10.template.file = fileadmin/templates/template-new.html # Ersetzt Subpart Dokument im Template, damit keine doppelte Ausgabe von doctype und co. 10.workOnSubpart = DOKUMENT 10.marks { # Inhalt ausgeben CONTENT { table = tt_content #styles.content.get select { where = colPos = 1 orderBy = sorting languageField = sys_language_uid } } # Inhalt ausgeben CONTENT2 = CONTENT CONTENT2 { table = tt_content select { where = colPos = 0 orderBy = sorting languageField = sys_language_uid } } # Inhalt ausgeben CONTENT3 = CONTENT CONTENT3 { table = tt_content select { where = colPos = 2 orderBy = sorting languageField = sys_language_uid } } # Inhalt ausgeben FOOTER = CONTENT FOOTER { table = tt_content select { where = colPos = 3 orderBy = sorting languageField = sys_language_uid } } # Das Hauptmenü erstellen MENU = HMENU MENU { special = directory special.value = 3 ### Erste Ebene ### 1 { expAll = 1 } ### Zweite Ebene ### 2 < .1 } # Phonemenu Versuch MENUPHONE = HMENU MENUPHONE { special = directory special.value = 3 ### Erste Ebene ### 1 { expAll = 1 } ### Zweite Ebene ### 2 < .1 ### DritteEbene ### 3 < .1 } # Das Footermenu erstellen FOOTERMENU = HMENU FOOTERMENU { special = directory special.value = 20 ### Erste Ebene ### 1 { expAll = 1 } ### Zweite Ebene ### 2 < .1 } } } tt_content.menu.10 =< lib.stdheader