Tag Archives: viewport

Responsive Design Viewport Initial Scale Tutorial

Posted on by

The recent Responsive Design Viewport Width Considerations Tutorial was a Responsive Design improvement step for our Landing Page series of HTML/Javascript/CSS webpages at RJM Programming, but what it addressed was “what not to do”. Today, it is more the case, with mobile devices less than 700px wide, viewport wise, what is a “good step to do”? In really simple terms it is getting the head around … treating the meta tag viewport (within the head tag of a webpage) like a lot of other HTML tags within the body tag, do not hold off from giving it an ID attribute (actually restoring, somewhat) how we used to do it) … so we did … <meta id=”myviewport” name=”viewport” content=”width=device-width, initial-scale=1.0″> … and then … add into that Javascript function widthfix the new code … function widthfix() { // if (navigator.userAgent.match(/Android|BlackBerry|iPad|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device if (screen.width < 700) { var mvp = document.getElementById(‘myviewport’); mvp.setAttribute(‘content’,’width=device-width, initial-scale=’ + eval(screen.width / 768)); } } // Below is as per the previous posting if (1 == 7 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device document.getElementById(‘body_content’).style.width=’100%’; document.getElementById(‘nav_layer’).style.width=’100%’; document.getElementById(‘widget0′).style.width=’100%’; } } … adjusting that “Initial Scale” setting of the viewport for those smaller devices, off the webpage document onload event If you are on such a mobile device, perhaps you see this improvement when accessing the RJM Programming Landing Page. You can also see this play out at WordPress 4.1.1’s Responsive Design Viewport Initial Scale Tutorial. Previous relevant Responsive Design Viewport Width Considerations Tutorial is shown below. Regarding our Landing Page series of HTML/Javascript/CSS webpages here at RJM Programming, we’re streamlining our device width (Responsive Web Design) considerations of … Mobile Friendly Meta Viewport Tag Zoom Tutorial by now going with … Was .. Now is … <meta id=”myviewport” name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes” /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> Google PageSpeed and Firebug Mobile Friendly Primer Tutorial by now going with … Was .. function widthfix() { // if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device document.getElementById(‘body_content’).style.width=’100%’; document.getElementById(‘nav_layer’).style.width=’100%’; document.getElementById(‘widget0′).style.width=’100%’; } Now is … function widthfix() { // if (1 == 7 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device document.getElementById(‘body_content’).style.width=’100%’; document.getElementById(‘nav_layer’).style.width=’100%’; document.getElementById(‘widget0′).style.width=’100%’; } Why? viewport advice of W3School’s Responsive Web Design – The Viewport useful link, thanks … to keep it simple … <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> we were able to use Safari (web browser) Develop Menu “Responsive Design Mode” functionality (as per Safari Develop Menu Responsive Design Primer Tutorial) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts Food for thought, we hope, for those chipping away at responsive design amalgamations! If this was interesting you may be interested in this too. If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , | Leave a comment

Viewport and CSS Calc Intersection Resize Tutorial

Posted on by

Yesterday’s Viewport and CSS Calc Intersection Algorithm Tutorial showed no issues with … mobile “pinch” and “spread” gestures … no issues surprisingly … but there were with … non-mobile “onresize” (of window) created issue of a misplaced yellow intersection HTML div Fixing this bug was interesting. At first we thought that yesterday’s … … we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in px specified) to represent the intersection of Polygon 5 and 6. … should be arranged to be … … we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in % specified) to represent the intersection of Polygon 5 and 6. … but found that that (idea that “W% = (WpxValue * 100.0 / screen.width)”) was not really the silver bullet here. What was better was to create a bit of a “rubber band” feel (for 1/20 of a second of flexibility) to onresize events as per … // HTML <body onload=’dbih=document.body.innerHTML; divpolys();’ onresize=’if (!rdone) { rdone=true; setTimeout(reloadit, 50); divpolys(); } else { divpolys(); }’> // Javascript var rdone=false; function reloadit() { location.href=document.URL; } Yet again, take a look at the changed viewport_poc.htm‘s live run link … Now Was Previous relevant Viewport and CSS Calc Intersection Algorithm Tutorial is shown below. Do you eat “separatist style”? I used to, leaving the good stuff until last, until one day a grandparent kindly taught me the weakness with this system, quietly pinching the best stuff during the prelude period. The recent Viewport and CSS Calc Primer Tutorial has set us on a “separatist course” (which we hope does not lead to any tears at bedtime) … initially talking just HTML and CSS (and no Javascript) with that first incarnation of the “Viewport and CSS Calc” proof of concept web application as above … and now today … we add Javascript (that dynamically creates its own HTML and CSS via two conduit helpers … those being … <body onload=’divpolys();’> function divpolys() { var divsii; divs=document.getElementsByTagName(‘div’); for (var ii=0; ii<divs.length; ii++) { divsii=divs[ii].getBoundingClientRect(); // the way CSS proportionate styling can become co-ordinate reality // co-ordinate finding processing continues } // More work here } … helping us show, in another “proof of concept” that will get nuanced and genericized (we hope) to show “Two Convex Polygon Intersections”) “Nuanced and genericized”? Yes, as our case is even simpler (because in our case the polygons are always rectangles) than the premise of our muse for today’s work, the wonderful algorithmic ideas for Intersection of Convex Polygons Algorithm (and also helped out by the great PNPOLY – Point Inclusion in Polygon Test) but we plump for an array of structures data arrangement (rather than classes) reminiscent of our book web application discussion at Javascript Array of Structures Primer Tutorial (and also see MySql Polygon Spatial Relations … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Viewport and CSS Calc Intersection Algorithm Tutorial

Posted on by

Do you eat “separatist style”? I used to, leaving the good stuff until last, until one day a grandparent kindly taught me the weakness with this system, quietly pinching the best stuff during the prelude period. The recent Viewport and CSS Calc Primer Tutorial has set us on a “separatist course” (which we hope does not lead to any tears at bedtime) … initially talking just HTML and CSS (and no Javascript) with that first incarnation of the “Viewport and CSS Calc” proof of concept web application as above … and now today … we add Javascript (that dynamically creates its own HTML and CSS via two conduit helpers … those being … <body onload=’divpolys();’> function divpolys() { var divsii; divs=document.getElementsByTagName(‘div’); for (var ii=0; ii<divs.length; ii++) { divsii=divs[ii].getBoundingClientRect(); // the way CSS proportionate styling can become co-ordinate reality // co-ordinate finding processing continues } // More work here } … helping us show, in another “proof of concept” that will get nuanced and genericized (we hope) to show “Two Convex Polygon Intersections”) “Nuanced and genericized”? Yes, as our case is even simpler (because in our case the polygons are always rectangles) than the premise of our muse for today’s work, the wonderful algorithmic ideas for Intersection of Convex Polygons Algorithm (and also helped out by the great PNPOLY – Point Inclusion in Polygon Test) but we plump for an array of structures data arrangement (rather than classes) reminiscent of our book web application discussion at Javascript Array of Structures Primer Tutorial (and also see MySql Polygon Spatial Relations via Image Map Tutorial for GIS MySql Spatial functions regarding some of this same line of thinking). And so, being that simple, we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in px specified) to represent the intersection of Polygon 5 and 6. Again, take a look at the changed viewport_poc.html‘s live run link … … or HTML iframe supervision to see what we are getting at here. Previous relevant Viewport and CSS Calc Primer Tutorial is shown below. Keeping on with some themes of yesterday’s Responsive Design Viewport Width Considerations Tutorial, today, we combine ideas around … (meta) viewport … and … (CSS) calc … in a “proof of concept” web application we are using to explore ideas from the ground up … hello, wormies! This is precise pixel placement 101, bringing us to a division of concept with webpage design … Screen Viewport Width and Height Unitary Units px px Width Proportionate Units % vx Height Proportionate Units % vh Width (or Left) Calc-friendly %,px %,px,100vx Height (or Top) Calc-friendly %,px %,px,vh,100vh … where our “proof of concept” findings (on Safari, Firefox, Chrome, Opera and Safari simulations of Edge and Internet Explorer) so far make us believe the Viewport width: calc(100vx – 60px); CSS definition type of syntax that sounds great … Continue reading →

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Viewport and CSS Calc Primer Tutorial

Posted on by

Keeping on with some themes of yesterday’s Responsive Design Viewport Width Considerations Tutorial, today, we combine ideas around … (meta) viewport … and … (CSS) calc … in a “proof of concept” web application we are using to explore ideas from the ground up … hello, wormies! This is precise pixel placement 101, bringing us to a division of concept with webpage design … Screen Viewport Width and Height Unitary Units px px Width Proportionate Units % vx Height Proportionate Units % vh Width (or Left) Calc-friendly %,px %,px,100vx Height (or Top) Calc-friendly %,px %,px,vh,100vh … where our “proof of concept” findings (on Safari, Firefox, Chrome, Opera and Safari simulations of Edge and Internet Explorer) so far make us believe the Viewport width: calc(100vx – 60px); CSS definition type of syntax that sounds great on paper does not appear to work in practice. So take a look at our very symmetric viewport_poc.html‘s live run link … … or HTML iframe supervision to see what we are getting at here. Previous relevant Responsive Design Viewport Width Considerations Tutorial is shown below. Regarding our Landing Page series of HTML/Javascript/CSS webpages here at RJM Programming, we’re streamlining our device width (Responsive Web Design) considerations of … Mobile Friendly Meta Viewport Tag Zoom Tutorial by now going with … Was .. Now is … <meta id=”myviewport” name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes” /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> Google PageSpeed and Firebug Mobile Friendly Primer Tutorial by now going with … Was .. function widthfix() { // if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device document.getElementById(‘body_content’).style.width=’100%’; document.getElementById(‘nav_layer’).style.width=’100%’; document.getElementById(‘widget0′).style.width=’100%’; } Now is … function widthfix() { // if (1 == 7 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device document.getElementById(‘body_content’).style.width=’100%’; document.getElementById(‘nav_layer’).style.width=’100%’; document.getElementById(‘widget0′).style.width=’100%’; } Why? viewport advice of W3School’s Responsive Web Design – The Viewport useful link, thanks … to keep it simple … <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> we were able to use Safari (web browser) Develop Menu “Responsive Design Mode” functionality (as per Safari Develop Menu Responsive Design Primer Tutorial) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts Food for thought, we hope, for those chipping away at responsive design amalgamations! If this was interesting you may be interested in this too. If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , | Leave a comment

Responsive Design Viewport Width Considerations Tutorial

Posted on by

Regarding our Landing Page series of HTML/Javascript/CSS webpages here at RJM Programming, we’re streamlining our device width (Responsive Web Design) considerations of … Mobile Friendly Meta Viewport Tag Zoom Tutorial by now going with … Was .. Now is … <meta id=”myviewport” name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes” /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> Google PageSpeed and Firebug Mobile Friendly Primer Tutorial by now going with … Was .. function widthfix() { // if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device document.getElementById(‘body_content’).style.width=’100%’; document.getElementById(‘nav_layer’).style.width=’100%’; document.getElementById(‘widget0′).style.width=’100%’; } Now is … function widthfix() { // if (1 == 7 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device document.getElementById(‘body_content’).style.width=’100%’; document.getElementById(‘nav_layer’).style.width=’100%’; document.getElementById(‘widget0′).style.width=’100%’; } Why? viewport advice of W3School’s Responsive Web Design – The Viewport useful link, thanks … to keep it simple … <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> we were able to use Safari (web browser) Develop Menu “Responsive Design Mode” functionality (as per Safari Develop Menu Responsive Design Primer Tutorial) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts Food for thought, we hope, for those chipping away at responsive design amalgamations! If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , | Leave a comment

Other Side of the World Google Chart Tutorial

Posted on by

Google Charts provides great chart tools for various purposes. We already use the Map Chart heavily with our “Other Side of the World” recent web application we last talked about below with Other Side of the World Continents and Countries Tutorial. This is no surprise given the geolocation and positioning and mapping aspects to the project. But also apt is the … Geo Chart which displays nominated countries and/or regions on a world map … and we also thought it would be good to call on a … Bar Chart can display Great Circle distances between places the user identifies during an execution of the “Other Side of the World” web application session Over time you get a feeling for what Google Chart suits what scenario of data arrangements. Perhaps, here it would be instructional to read Google’s miscellaneous examples if you are wondering what is possible with this great software suite. We interface to many of these charts here at this blog and to read through these you could visit this link. Today, as far as this “feel” goes, we’d like to admire how the Google Chart “way” of being housed in an HTML div element leads itself to scaling ready for smaller format devices, so long as you, the coder above, “play the game” so to speak, trying to specify percentage values for HTML element width properties where possible. This came to play with today’s Google Chart Bar Chart “fitting in” with right column table cell (td) widths with today’s “Other Side of the World” web application. These two code files were involved in these changes … other_side_of_the_world.htm (changed in this way) … and you can try a live run or Seattle live run tz_places.php (changed this way) As per usual, we encourage you to try the web application, and compare the goings on with code, and a good web inspector tool. Previous relevant Other Side of the World Continents and Countries Tutorial is shown below. Today, as with WordPress 4.1.1’s Other Side of the World Continents and Countries Tutorial, we came across a scenario where there was a tiny advantage being Australian, in that our “Continent Name” equals our “Country Name” … which I suppose you could argue for Antarctica, maybe?! We were amused by this at school, and now have the first real world “application” of this in that today’s task, much harder than we thought it would be, was, with our “Other Side of the World” web application (we last talked about with Other Side of the World Timezone Tutorial as shown below) to link the two bigger data sets up the top of the list of three datasets going on with our application … Weather Underground database via its API … thanks PHP TimeZone functionality … why thank you, kind Open Sourcers (and the plates as well) the useful webpage … thank you again … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Other Side of the World Continents and Countries Tutorial

Posted on by

Today we came across a scenario where there was a tiny advantage being Australian, in that our “Continent Name” equals our “Country Name” … which I suppose you could argue for Antarctica, maybe?! We were amused by this at school, and now have the first real world “application” of this in that today’s task, much harder than we thought it would be, was, with our “Other Side of the World” web application (we last talked about with Other Side of the World Timezone Tutorial as shown below) to link the two bigger data sets up the top of the list of three datasets going on with our application … Weather Underground database via its API … thanks PHP TimeZone functionality … why thank you, kind Open Sourcers (and the plates as well) the useful webpage … thank you again The Weather Underground tends to talk about Placenames and their Country Names whereas the PHP TimeZones tend to link Placenames with Continent (or region) Names … and the missing link between these two talking to each other a good percentage of the time involves the PHP’s getLocation() functionality we’ve talked about before as a method for the DateTimeZone class, along with some 2 character ISO Country code information you can read more about at HTTP://stackoverflow.com/questions/17842003/php-intl-country-code-2-chars-to-country-name. Making this link has lots of benefits … our “closest to” lists now have more data to call on (supplementing the last of those datasets above) … and … we can now allow for searches by Country on that top HTML select (dropdown) element … we can fill in more specified places now that we can add in a Country so often and often reach a point with the Weather Underground scrutiny where there is only one returned value, at which point, some days ago, we added logic to say just go and display this on the Map Chart and the rest straight away to save some time people tend to think of a Country when they think of a place, at least on dry land, that is. An unusual code threesome were involved in these changes … other_side_of_the_world.htm (changed in this way) … and you can try a live run or Johannesburg live run daylight_saving_time.html (changed this way) tz_places.php (changed this way) … that last one getting a new calling method just for this purpose of … take a placename take its inputted Continent (or region) Name … and … have the supervisory codes send to tz_places.php a $_GET[] call for the purpose of … using getLocation() functionality find a 2 character ISO Country Code … and … link this to a full Country Name via various arrays we have in the PHP … and finish off by … sign off the PHP (in an HTML iframe element) by changing relevant fields in top.document or parent.document DOM HTML elements via a simple HTML body onload … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Other Side of the World Timezone Tutorial

Posted on by

We’ve got a lot of “where” functionality mixed in with “when” functionality with our “Other Side of the World” web application. To us, the easiest way to link “where” and “when” in the world is the concept of Earth’s timezones. We spent a lot of time looking into this with the blog thread ending with TimeZone Country Places Data Tutorial and then it went through another makeover when we tackled its integration into the Weather Underground API inspired blog postings culminating in Weather API via Iframe jQuery Ajax AutoComplete Tutorial Reading down that first blog posting thread to its “Primer Tutorial” … Into the mix of the logic here, we need to venture into the world of two letter ISO Country Codes, and we work this with help from //php.net/manual/en/datetimezone.getlocation.php and //stackoverflow.com/questions/17842003/php-intl-country-code-2-chars-to-country-name and //php.net/manual/en/function.timezone-identifiers-list.php and //www.timezoneconverter.com/ to “hardcode” our HTML select “dropdown” elements we create in the process, and offer TimeZone information HTML select “dropdown” elements as well. … you can see how good PHP is, natively, with timezones, and how approachable all this is for all PHP programmers … exciting stuff! And there’s another series of blog postings culminating in HTML/PHP Timezone Feed Function Keys Tutorial involved in this same realm of thinking, that we use today, along with the … you guessed it … Client Pre-emptive Iframe technique approaches to making use of what it helps with. Integrating “what it helps with” is quite interesting, and quite “Ajax”y in its ways. We call its supervisory web application into a new HTML iframe element of our “Other Side of the World” web application and pluck out only its initial “Digital Clock” HTML table display, and transfer that HTML table and its modified CSS styling over into a new HTML div element within the “Other Side of the World” web application, initially style “display:none;” but capable of being called into play via the user selecting an “Hour Time of the Day” value of interest, that causes the iframed daylight_saving_time.html (changed this way). What the user sees/does to use this new functionality looks like … they see the “Hour of the Day” dropdown they select an “Hour of the Day” value of interest … in today’s tutorial picture, here in AEST Australia (around about 8pm) we chose “07am” the “Digital Clock” flashes random current times of day from around the “TimeZone Places World” and when it lobs onto the first matching time between 07am and 08am (exclusive) … that matching “TimeZone Place” is copied into the “Other Side of the World” Place textbox … and … the “Weather Underground” (autocomplete) database is scrutinized for a match, and if so … the Map Chart shows the matched place as the base position along with its “Other Side of the World” counterpart, allowing for Google Chart click/touch (its “select”) event logic to allow for other functionalities that include a Weather link and TimeZone … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment