Jump to content

Peter64

Members
 View Profile  See their activity

  • Posts

    34

  • Joined

  • Last visited

About Peter64

  • Birthday 07/15/1964

Peter64's Achievements

Newbie

Newbie (1/7)

0

Reputation

  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.
×
×
  • Create New...