Jump to content

Peter64

Members
 View Profile  See their activity

  • Posts

    34

  • Joined

  • Last visited

 Content Type 

Everything posted by Peter64

  1. Peter64
    Sorry should be: I will try this, many thanks for your help and time.
  2. Peter64
    I will trie this, many thanks for your help and time.
  3. Peter64
    Okay, I start from scratch, with an media queries for portrait and for landscape with there own width. Maybe that will turn out like I want to. Many thanks for your help.
  4. Peter64
    But when I change <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'css/style.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href ='https://fonts.googleapis.com/css?family=Raleway;'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> to <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway;"> Than firebug shows me that it is placed in the head section allthough the position in the head is equal to the javascript one. Sadly enough it doesn't change anything for the position of the elements in the work section on landscape.
  5. Peter64
    I have add the css with javascript, I changed that position in the head section just before <style> like displayed below <title>IVO RIKKERT FASHION BEAUTY PHOTOGRAPHER- EDITORIAL COMMERCIAL ADVERTISING PHOTOGRAPHY</title> <meta name="description" content="Netherlands | Germany | Beauty | Music | Advertising | Commercial | High Fashion | Photography. Estetica Magazine, Famous, FHM, Fuente International. Popular Best..."> <meta name="keyword" content="Estetica Magazine, Famous, FHM, Fuente International"> <meta name="HandheldFriendly" content="True" /> <meta name="MobileOptimized" content="320"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'css/style.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href ='https://fonts.googleapis.com/css?family=Raleway;'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> <style> html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } etc. But still when I check with firebug it appears like it is befor the <head> tag, when I think that the java script for defer loading is doing this. But although I replace the css or remove the javascript media queries only work in portrait and not in Landscape.
  6. Peter64
    Thanks to the both of you for your answers. My head section looks like: <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]--> <title>IVO RIKKERT FASHION BEAUTY PHOTOGRAPHER- EDITORIAL COMMERCIAL ADVERTISING PHOTOGRAPHY</title> <meta name="description" content="Netherlands | Germany | Beauty | Music | Advertising | Commercial | High Fashion | Photography. Estetica Magazine, Famous, FHM, Fuente International. Popular Best..."> <meta name="keyword" content="Estetica Magazine, Famous, FHM, Fuente International"> <meta name="HandheldFriendly" content="True" /> <meta name="MobileOptimized" content="320"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *::after, *::before { content: ''; } some more in-line css </style> </head> When I look in firebug I see that css-style_sheet is loaded before the head section, but they only way I load css is with javascript that is placed at the bottom of the page (Could that be the reason that it appears at the top, above the head section?) The css and js is loaded like: </main> <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'css/style.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href ='https://fonts.googleapis.com/css?family=Raleway;'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "js/jquery-2.1.4.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </body> </html> After the closing main tag and before the closing body tag. I have added three breaking lines for the working section: @media only screen and (min-width: 230px) and (max-width: 650px) { some css } @media only screen and (min-width: 651px) and (max-width: 1150px) { some css } @media only screen and (min-width: 1151px) and (max-width: 1370px) { some css } when displayed on mobile the images should be organized in portrait as well as in landscape like the correct image, https://flic.kr/p/L9tiej but in landscape the images are organized like the wrong image https://flic.kr/p/LW2dVU Sorry but I really don't understand why media queries ia working for portrait, but is ignored in landscape. Thanks again.
  7. Peter64
    Sorry about that, I have forgotten to add the link: http://psteintj.home.xs4all.nl/ Thanks
  8. Peter64
    Correct me if I am wrong, I try to understand html css, but it isn't that easy. For example: when I have an device let's say: heigh 680px width 450px and I turn it 90 degrees so the width is 680px and the heigth becomes 450px. Shouldn't it than follow the css from the media queries @media only screen and (min-width: 651px) and (max-width: 1150px) { css for this width } Or should I allways insert @media only screen and (min-width: 651px) and (max-width: 1150px) and (orientation:portrait) { css for this width } @media only screen and (min-width: 651px) and (max-width: 1150px) and (orientation:landscape){ css for this width } so landscape and portrait insert separate allthough the css is the same for both off them? I am honest I have tried building a website a few times but media queries worked allways like expected. thanks
  9. Peter64
    Thanks for the replay. I hope that this is what you mean. These media queries are in the top of the index.html because the css for these items all so is in the top of the index.html. The order is @media only screen and (min-width: 230px) and (max-width: 650px) { css for this width } than @media only screen and (min-width: 651px) and (max-width: 1150px) { css for this width } than @media only screen and (min-width: 1151px) and (max-width: 1370px) { css for this width } and what I don't understand is why it works on portrait but not on landscape. Thanks again.
  10. Peter64
    I am trying to help an friend with a new website and it seem that at the work section, media queries are ignored in landscape, portrait is working fine. The problem is that I realy don't know what I am doing wrong, maybe someone could tell me where I have done something wrong. When looking on mobile device the work images (buttons) should be organized one under each other. In portrait this works fine, but in landscape it ignores the media queries and the work images (buttons) are displayed as on desktop next to each other en up on each other. Why are media queries working in portrait but are ignored in landscape. One of the media queries is: @media only screen and (min-width: 230px) and (max-width: 650px) { .work { height: 1670px; } .work_container { right: 0%; width: 100%; } .work_layer { opacity: 1; background-color: rgba(0, 0, 0, 0.3); } .beauty { top: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .beauty:hover { top: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: auto; } .hair { top: 525px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .hair:hover { top: 525px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: auto; } .advertising { top: 740px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .advertising:hover { top: 740px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: auto; } .fashion { top: 1240px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .fashion:hover { top: 1240px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: auto; } .lingerie { top: 1455px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .lingerie:hover { top: 1455px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: auto; } .landscape { height: 190px; width: 300px; } .line_bottom { width: 197px; } .be { width: 200px; } .ha { width: 110px; } .ad { width: 115px; } .fa { width: 145px; } .lin { width: 120px; } } I tried changing @media only screen and (min-width: 230px) and (max-width: 650px) to @media only screen and (min-width: 230px) and (max-width: 650px) and (orientation:landscape) So one media querie for landscape and one for portrait, both with the same css, whitout succes. Then all so portrait works fine, landscape ingnored. Viewport is set to <meta name="viewport" content="width=device-width, initial-scale=1.0"> I tried to load it to my friends own server, but that didn't change anything. I know have solved it by making 2 section one fot landscape and one for portrait, so I can display ore hide them with display:none on portrait or landscape. But I am just curious what I have done wrong and why media queries only not working in landscape. Thanks
  11. Peter64
    Dsonesuk thanks for the Reply, This is the exact same problem. I have changed: <meta name="viewport" id="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no"/> to: <meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/> and now the problem is solved. Could anyone tell me why the second line is fixing this problem? I know it helps and that is the important thing, but it would be great to know why it is helping. Dsonesuk again many thanks for your help.
  12. Peter64
    Thanx for your reply. Needless to say but this is all kind of new for me and I have tried to build this for an acquaintance of mine. I ran the script through https://validator.w3.org/ and https://developers.google.com/ and it all seems fine. On iPad It looked fine untill it was updated from ios 8 to ios 9. How could I remove bloat, is his a matter of removing images or should I look a different way. ( my acquaintance loves his cars and want to show as much as possible of them ) Thanx again
  13. Peter64
    I have tried to create a website http://markgeessink-classiccars.com/ on this worked fine on iPad untill the iPad has been updated to IOS 9. After the update the side loads in half pages and blocks. After some time the site expands so the whole screen is filled and works fine. Befor the update there wasn't a problem. Could any one tell me how I could solve this problem. As tags I have choosen html, css and js because I don't know what causes the problem. Sorry for that. Thanks
  14. Peter64
    I am trying to use fancybox with filter and that is working fine. But there is a problem with waypoints: When I am scrolling down there appears a red border on the rightside. In this border there should fadein a vertical text-image when this border reaches the top of the viewport. This all works fine. At the end the text image should fadeOut when the red border ends. This works well untill the fancybox filter is used (and the fancybox page is getting smaller). When the filter is used the text image won't fadeOut, I think because it doesn't reach the waypoint. The waypoint is set to "bottom in view" on the page where the contact slider is located. Could anyone tell me why the waypoint isn't moving up when the filter is used and how I can solve this? A link to the side is: http://main-site.nl/peter/ Thanx
  15. Peter64
    That wasn't the problem, now I have changed media queries from: @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) to: @media only screen and (max-width: 480px) and (orientation: portrait), and that doesn't change anything. When I look at her phone with Chrome it is fine but looking with search on the main screen (called internet) it is messed up. On an older iPad it won't work as well. Maybe some thinks can't be fixed. although when ther is a solution I would like to hear it. Again many thanks for your help.
  16. Peter64
    Okay, That is worth trying. Thanx again.
  17. Peter64
    This weekend I have tried to make the website work on the phone of my daughter, unfortunately without succes. The html is loaded, but it look likes there is no css loaded to organize the items. This is a cheaper phone (Samsung Galaxy Core 2) and maybe this causes the problems and I have to accept it. Many thanks again for your time and help.
  18. Peter64
    Again many thanks, one of these days I try to get further with this. Thanks again: I owe you one.
  19. Peter64
    Thanks again for your reply, I set the browsercache a couple of days ago, but I have removed them, I am afraid that by setting this changes won't be displayed immediately ( so I will set them completly at the end when I think it all finished, at this moment it is hard enough understand what is going on when building a website, and when changes will be delayed it going to be much more confusing then it is allready ). When I am correct you mean this: ## EXPIRES CACHING ##<IfModule mod_expires.c>ExpiresActive OnExpiresByType http://main-site.nl/img/Logo_one_page1.png "access 1 month”ExpiresByType http://main-site.nl/img/Logo_one_page2.png "access 1 month"ExpiresByType http://main-site.nl/img/cd-icon-menu.svg "access 1 month"ExpiresByType http://main-site.nl/img/cd-logo.png "access 1 month"ExpiresByType http://main-site.nl/img/facebook.active.jpg "access 1 month"ExpiresByType http://main-site.nl/img/facebook.jpg "access 1 month"ExpiresByType http://main-site.nl/img/google.active.jpg "access 1 month"ExpiresByType http://main-site.nl/img/google.jpg "access 1 month"ExpiresByType http://main-site.nl/img/scroll_down.png "access 1 month"ExpiresByType http://main-site.nl/img/twitter.active.jpg "access 1 month"ExpiresByType http://main-site.nl/img/twitter.jpg "access 1 month”ExpiresByType http://main-site.nl/work/thumbs/Dutch_view_transparant.png "access 1 month"ExpiresByType http://main-site.nl/work/thumbs/Logo_Ton_Rita_lijn_transparant.png "access 1 month"ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-01.jpg "access 1 second”ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-02.jpg "access 1 second”ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-03.jpg "access 1 second"ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-04.jpg "access 1 second"ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-05.jpg "access 1 second"ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-06.jpg "access 1 second"ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-07.jpg "access 1 month"ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-08.jpg "access 1 month"ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-09.jpg "access 1 month"ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-10.jpg "access 1 month"ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-11.jpg "access 1 month"ExpiresByType http://main-site.nl/img/work/thumbs/gallery-thumb-12.jpg "access 1 month"ExpiresByType http://main-site.nl/work/thumbs/te_riet.png "access 1 month"ExpiresDefault "access 1 month"</IfModule>## EXPIRES CACHING ### Insert output filter by typeAddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascriptAddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xmlAddOutputFilterByType DEFLATE application/javascript application/x-javascriptAddOutputFilterByType DEFLATE application/x-httpd-phpAddOutputFilterByType DEFLATE application/cgi-php5AddOutputFilterByType DEFLATE application/cgi-php53AddOutputFilterByType DEFLATE application/cgi-php54# Don't compress images, compressed files, docs nor moviesSetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-varySetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-varySetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-varySetEnvIfNoCase Request_URI .(?:avi|mov|mp3|mp4|rm)$ no-gzip dont-vary<ifModule mod_headers.c> Header set Connection keep-alive </ifModule> Yesterday you mentioned: Is that the same programm as it is here: http://developer.android.com/sdk/index.html so I can use it myself? Thanks again for your help.
  20. Peter64
    Thanks for your reply, I have crlead the history cache and tried it again, without result. When I watch it on my phone or in firefox/ responsive-design it looks just fine, the starting image is loaded and the image gallery displays the images directly among each other, by clicking on the image the link is popping up in an layer. When displayed on my daughters mobile there are no background images loaded, the image in the gallery are displayed among each other but with a white space with the link between them. by tapping the link the image will be displayed much to big for the screen. It looks that all the background images and all the other things that are in the style.css aren't loading on her phone. I tried to make a screen shot, but I can't figger out how to enter it. But I just saw that lookin here, there is the same screen shot: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmain-site.nl%2F. Thanks again
  21. Peter64
    I am trying to make a website that follows the rulles of Google insights. Most of the time it works fine, but yesterday I found out, by watching the website on my daughters phone, that it doesn't display well on Android 4.4.2 and an older iPod it looks like that the style.css ( that should load after the html and a small part of the more important CSS have been loaded ) is not loading. On a Android 5 or iPad it looks just fine. Her is the code I have been using to delay the loading: <script type="text/javascript"> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'css/style.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> Here is a link to the site I am talking about: http://main-site.nl/
  22. Peter64
    I solved the problem as described befor. As Dsonesuk said I have made 2 css files, the first one has the most elementary css whisch is needed for starting up the first page. This css is places in script tags in the head. The second css is loaded with the following java code: <script type="text/javascript"> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'css/style.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> and is placed just befor the closing body tag. After including this, Pagespeed inside tells me that there are .js files that are delaying the loading of the page ( befor adding this Google didn't report these ). All so I had to load the Google css fonts, I have loaded these with the following java code allso placed just befor the closing body tag: <script type="text/javascript"> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'http://fonts.googleapis.com/css?family=Roboto:400,700,300'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> After doing this there wasn't a report anymore about any .js files that were delaying the loading of the page. ( I don't know why, but insight told me that the problem was solved, maybe someone can tell me why adding these fonts this way solved the problem with the delaying .js ) Some other things except the help from Dsonesuk that helped me solve this: http://www.giftofspeed.com/defer-loading-css/ https://www.feedthebot.com/ https://www.youtube.com/watch?v=YV1nKLWoARQ Maybe this can help someone out when he is facing the same problem.
  23. Peter64
    I have been trying to dynamically load the css by adding the code found on http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml in to my html. It looks like this: <script type="text/javascript"> function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("css/style.css", "css") ////dynamically load and add this .css file</script> and I have placed at the and before the closing body tag. After including this, Pagespeed inside tells me that I still have 3 .css files that are delaying the loading of the webpage, but allso the .js files are delaying the loading of the page ( befor adding this Google didn't report these ). It doesn't make any difference if I place it in the head or at the and I keep getting this same message. I have allso tried loadCSS and scripts that should do the same trick, but all with the same result. (I haven't put the important css in-line that I will do later when the render blocking issue is fixed) Could some one tell me what I am doing wrong and why this doesn't work?
  24. Peter64
    I think that the website you have in mind is a little bit to much when you know the basics of html and css. Offen there is jquery, javascript, php invilved. Maybe it is better to look for an free template and start changing that to something suitable. There are many usefull and nice templates. (https://onepagelove.com/, codyhouse.co/, http://www.alessioatzeni.com/blog/brushed-template/.
  25. Peter64
    Ok now it is completely clear, again many thanks for your help.
×
×
  • Create New...