{"id":47166,"date":"2019-11-15T03:01:39","date_gmt":"2019-11-14T17:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47166"},"modified":"2019-11-15T16:58:39","modified_gmt":"2019-11-15T06:58:39","slug":"google-crawl-viewport-error-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-crawl-viewport-error-tutorial\/","title":{"rendered":"Google Crawl Viewport Error Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/MyBusinessEins\/index.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Crawl Viewport Error Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/MyBusinessEins\/viewport_issue.jpg\" title=\"Google Crawl Viewport Error Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Crawl Viewport Error Tutorial<\/p><\/div>\n<p>Continuing on with <a target=_blank title='Google Search Console' href='https:\/\/search.google.com\/search-console'>Google Search Console<\/a> (part of &#8220;Google Webmasters&#8221;) &#8220;Crawl Error&#8221; issues here at the RJM Programming domain, on top of yesterday&#8217;s <a title='Google Crawl Incompatible Plugin Error Tutorial' href='#gcipet'>Google Crawl Incompatible Plugin Error Tutorial<\/a>, today we examine another &#8220;Crawl Error&#8221; category (in the Mobility Fix super category) called &#8230;<\/p>\n<p><code><br \/>\nViewport not set to \"device-width\"<br \/>\n<\/code><\/p>\n<p> &#8230; the <a target=_blank href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp' title='Responsive Web Design - The Viewport'>viewport<\/a> meta tag being an important step towards a webpage being suitable for the variety of device widths that happen now with the many mobile platforms.<\/p>\n<p>As with yesterday&#8217;s work the RJM Programming domain URL of interest today is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/MyBusinessEins\/index.html\">https:\/\/www.rjmprogramming.com.au\/MyBusinessEins\/index.html<\/a> which we tested our local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache\/PHP\/MySql web server code changes (sftp&#8217;ed up to the RJM Programming domain) with an (iOS) iPhone 6.<\/p>\n<p>And so, within the &lt;head&gt; &lt;\/head&gt; section we plumped for the &#8230;<\/p>\n<ul>\n<li>viewport meta tag &#8230;<br \/>\n<code><br \/>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=0.4\"&gt;<br \/>\n<\/code><br \/>\n &#8230; and then tried, for mobile platforms such as the iPhone 6 to &#8230;\n<\/li>\n<li>try to make the text of the web page that little bit bigger (and so more legible <font size=1>but perhaps non-intuitively<\/font>) &#8230; called at the document.body <b>onload<\/b> event &#8230;<br \/>\n<code><br \/>\n&lt;body style=\"background: #ffffff url(Welcome_files\/PhotoGray_nav_bg.jpg) repeat scroll top left; margin: 0pt; \" onload=\"<b>onlm();<\/b> setTimeout(avoidflash,2000);  onPageLoad();\" onunload=\"onPageUnload();\"&gt;<br \/>\n<\/code><br \/>\n &#8230; calling the new Javascript functions (thanks to <a target=_blank title='Great help, thanks' href='https:\/\/stackoverflow.com\/questions\/16460990\/change-text-font-size-of-whole-page-content'>this great webpage<\/a>) &#8230;<br \/>\n<code><br \/>\n    &lt;script type='text\/javascript'&gt;<br \/>\n    function changeFont(element) {  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/16460990\/change-text-font-size-of-whole-page-content<br \/>\n    element.setAttribute(\"style\",element.getAttribute(\"style\")+\";font-size: 103%\");<br \/>\n    for(var i=0; i &lt; element.children.length; i++){<br \/>\n        changeFont(element.children[i]);<br \/>\n    }<br \/>\n    }<br \/>\n    function onlm() {<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n        document.getElementById('widget1').style.left='400px';  \/\/ make way<br \/>\n        document.getElementById('widget1').style.width='260px'; \/\/ for the<br \/>\n        document.getElementById('widget1').style.height='80px'; \/\/ bigger text here<br \/>\n        changeFont(document.getElementsByTagName(\"body\")[0]);<br \/>\n    }<br \/>\n    }<br \/>\n    &lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Click the Validate Fix button back at <a target=_blank title='Google Search Console' href='https:\/\/search.google.com\/search-console'>Google Search Console<\/a> and the issue is fixed, or a reworked code cycle begins, hopefully the former.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-crawl-viewport-error-tutorial\/'>Google Crawl Viewport Error Tutorial<\/a>.<\/p>\n<hr>\n<p id='gcipet'>Previous relevant <a target=_blank title='Google Crawl Incompatible Plugin Error Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-crawl-incompatible-plugin-error-tutorial\/'>Google Crawl Incompatible Plugin Error Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/MyBusinessEins\/index.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Crawl Incompatible Plugin Error Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/MyBusinessEins\/plugin_incompatibility.jpg\" title=\"Google Crawl Incompatible Plugin Error Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Crawl Incompatible Plugin Error Tutorial<\/p><\/div>\n<p>As a webmaster it can be good to get an outside view of the issues on the website you manage.  <a target=_blank title='Google' href='http:\/\/google.com'>Google<\/a> provide this with <a target=_blank title='Google Search Console' href='https:\/\/search.google.com\/search-console'>Google Search Console<\/a> (part of &#8220;Google Webmasters&#8221;) as a &#8230;<\/p>\n<ul>\n<li>search engine &#8230; helping out webmasters of websites in relation to &#8230;<\/li>\n<li>the search engine crawling of URLs they discover with regard to your website domain<\/li>\n<\/ul>\n<p> &#8230; with a variety of &#8220;Crawl Error&#8221; category we last talked about with, regarding &#8220;Broken Links&#8221; when we presented the previous <a title='Google Crawl Errors Primer Tutorial' href='#gcept'>Google Crawl Errors Primer Tutorial<\/a> below.<\/p>\n<p>Today, we revisit &#8220;Google Crawl Error&#8221; territory, this time regarding a &#8220;Crawl Error&#8221; category &#8220;Uses incompatible plugins&#8221;.  The URL pointed to by the error message link got us to &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/MyBusinessEins\/index.html\">https:\/\/www.rjmprogramming.com.au\/MyBusinessEins\/index.html<\/a> &#8230; and we knew what would be the incompatibility here, yet you should read below us being objective here, getting to the same conclusion that &#8230;<\/li>\n<li><a target=_blank title='Adobe Flash Player' href='http:\/\/adobe.com\/products\/flashplayer'>Adobe Flash Player<\/a> was the applicable &#8220;incompatible plugin&#8221; here, with this Google Crawl Error<\/li>\n<\/ul>\n<p>This is a troubleshooting issue.  As such, we recommend acting in an objective way, and try to find an independent test environment both to &#8230;<\/p>\n<ul>\n<li>recreate the live environment, enough, to mimic the problem of the &#8220;live&#8221; URL with a &#8220;test&#8221; equivalent (so downloaded, via sftp, the &#8220;subdomain&#8221; (sort of) to our local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache\/PHP\/MySql web server) &#8230; where we saw an Adobe Flash Player window warning of the issue and offering to &#8220;Download Flash&#8230;&#8221;, an offer we have decided to skirt around (but read on) &#8230;<\/li>\n<li>prove\/disprove or find out what is wrong on the &#8220;test&#8221; web server<\/li>\n<li>change code of the &#8220;test&#8221; web server and unit test and rechange and test again until satisfied, on the &#8220;test&#8221; web server<\/li>\n<li>show a working set of changed code on the &#8220;test&#8221; web server<\/li>\n<li>upload, via sftp, changed &#8220;test&#8221; web server files to the &#8220;live&#8221; web server<\/li>\n<\/ul>\n<p> &#8230; a tried and many times tested paradigm, that in broad brush terms, suits many types of troubleshooting problems.<\/p>\n<p>Within <i>prove\/disprove or find out what is wrong on the &#8220;test&#8221; web server<\/i> we &#8230;<\/p>\n<ol>\n<li>turned off the need for Adobe Flash Player via the <b>!&#8211;<\/b> and <b>&#8212;<\/b> encased &#8230;<br \/>\n<code><br \/>\n&lt;<b>!--<\/b>object type=\"application\/x-shockwave-flash\" width=\"122\" height=\"110\" id=\"BZ9F1B51BAAA56473FBB39\" data=\"bzAnimation.swf?swfId=BZ9F1B51BAAA56473FBB39&xmlPath=bz.xml&imgPath=img&soundPath=false&urlType=_top&showInfo=1&themeMode=2\"&gt;&lt;param name=\"movie\" value=\"bzAnimation.swf?swfId=BZ9F1B51BAAA56473FBB39&xmlPath=bz.xml&imgPath=.\/\/img&soundPath=false&urlType=_top&showInfo=1&themeMode=2\" \/&gt;&lt;param name=\"allowScriptAccess\" value=\"always\"&gt;&lt;\/param&gt;&lt;param name=\"wmode\" value=\"transparent\"&gt;&lt;\/param&gt;<br \/>\n&lt;\/object<b>--<\/b>&gt;<br \/>\n<\/code><br \/>\n &#8230; and lo and behold, Adobe Flash Player plugin no longer required, the good news, but the not so good news is a lack of animation interest &#8230; so &#8230;\n<\/li>\n<li>examining the webpage via the web browser web inspector we discovered that there was an HTML5 <a target=_blank title='HTML5 canvas element information from w3schools ... thanks' href='http:\/\/www.w3schools.com\/html\/html5_canvas.asp'>canvas<\/a> element left behind for us to work with, and we decided to do our own animation with this canvas via new document.body onload <b>call<\/b> &#8230;<\/p>\n<p><code><br \/>\n&lt;body style=\"background: #ffffff url(Welcome_files\/PhotoGray_nav_bg.jpg) repeat scroll top left; margin: 0pt; \" onload=\"<b>setTimeout(avoidflash,2000);<\/b>  onPageLoad();\" onunload=\"onPageUnload();\"&gt;<br \/>\n<\/code><br \/>\n &#8230; calling on new Javascript &#8230;<br \/>\n<code><br \/>\n    &lt;script type=\"text\/javascript\"&gt;<br \/>\n    var imgs=['img\/E2056759-788F-47B2-B890.png','img\/4BFD4F98-069C-450F-9B2F.png','img\/13925BFD-163A-439F-8CBB.jpg','img\/BFA442D7-A0A2-48E0-AE4C.jpg','img\/F6351070-2CC4-4914-A785.jpg','img\/E9BFF839-D932-49B4-8270.jpg','img\/EA588468-4D33-4FD6-9D25.png','img\/37FA1992-4889-4F6D-84AD.jpg','img\/1781F2A2-50AC-4A89-94E5.jpg','img\/4B76B23B-840C-4E0B-B57C.jpg','img\/16C4852F-A463-452B-BACA.jpg'];<br \/>\n    var elem=[null];<br \/>\n    var context=[null];<br \/>\n    function chooseanother() {<br \/>\n       var iuy=Math.floor(Math.random() * imgs.length);<br \/>\n       document.getElementById('imgf').src=imgs[iuy] + '?x=' + Math.floor(Math.random() * 19876543);<br \/>\n    }<br \/>\n    function showthis(ithis) {<br \/>\n        for (var ics=1; ics&lt;context.length; ics++) {<br \/>\n          context[ics].drawImage(ithis, 0, 0, ithis.width, ithis.height, 10, 10, eval(-20 + elem[ics].width), eval(-20 + elem[ics].height));<br \/>\n        }<br \/>\n        setTimeout(chooseanother, 2000);<br \/>\n    }<br \/>\n    function avoidflash() {<br \/>\n      var cs=document.getElementsByTagName('canvas');<br \/>\n      if (cs.length &gt; 0) {<br \/>\n        elem[0]=cs[0];<br \/>\n        context[0]=elem[0].getContext('2d');<br \/>\n        for (var ics=1; ics&lt;cs.length; ics++) {<br \/>\n          elem.push(cs[ics]);<br \/>\n          context.push(cs[ics].getContext('2d'));<br \/>\n        }<br \/>\n        document.getElementById('iidiv').innerHTML='&lt;img onload=showthis(this); id=imgf src=' + imgs[0] + '&gt;&lt;\/img&gt;';<br \/>\n      }<br \/>\n    }<br \/>\n    &lt;\/script&gt;<br \/>\n<\/code><br \/>\n &#8230; to suit our purposes, not quite as cute as Flash, but serviceable, and animated\n<\/li>\n<li>back at &#8220;Google Crawl Errors&#8221; click the &#8220;Validate Fix&#8221; button to the right of &#8220;Done fixing?&#8221; wording to see whether your fix also fixes Google&#8217;s &#8220;Crawl View&#8221; of the website affected<\/li>\n<\/ol>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-crawl-incompatible-plugin-error-tutorial\/'>Google Crawl Incompatible Plugin Error Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcept'>Previous relevant <a target=_blank title='Google Crawl Errors Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-crawl-errors-primer-tutorial\/'>Google Crawl Errors Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/broken_links.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Crawl Errors Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/broken_links.jpg\" title=\"Google Crawl Errors Primer Tutorial\"  style=\"float:left;\" id='giow10' onmouseover=\" this.src=this.src.replace('-111of.j','-112of.xj').replace('-112of.j','-113of.xj').replace('-113of.j','-114of.xj').replace('-114of.j','-115of.xj').replace('-115of.j','-116of.xj').replace('-116of.j','-112of.xj').replace('.xj','.j');   \" \/><\/a><p class=\"wp-caption-text\">Google Crawl Errors Primer Tutorial<\/p><\/div>\n<p>When you are a webmaster (of a web domain, such as <a target=_blank title='RJM Programming landing page' href='http:\/\/www.rjmprogramming.com.au'>www.rjmprogramming.com.au<\/a>) <a target=_blank title='Google Webmasters information from Google' href='https:\/\/www.google.com.au\/intl\/en\/webmasters\/'>registered with Google<\/a> you can receive (Google) console notifications from unusual events.  Thanks for the heads up, Google.  This is like a sanity check, independently, for webmasters, registering websites at Google.<\/p>\n<p>Lately, we&#8217;ve been noticed a bit, we guess, because of the introduction of <i>index.htm<\/i> into the picture (that we talked about last with <a target=_blank tit;le='Landing Page Mobile Phone Crontab Curl Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-mobile-phone-crontab-curl-tutorial\/'>Landing Page Mobile Phone Crontab Curl Tutorial<\/a>) &#8230; you&#8217;ll see it middle top of today&#8217;s tutorial picture &#8230; saying cheese &#8230; sorry, the dogs <a target=_blank title='The Pups' href='https:\/\/www.rjmprogramming.com.au\/Android\/NalaLuna.jpg'><img title='The Pups' src='https:\/\/www.rjmprogramming.com.au\/Android\/NalaLuna.jpg' style='width:60px;'><\/img><\/a> got involved in today&#8217;s blog posting &#8230; they&#8217;re sooooooooooo immature &#8230; unlike the humans, of course!?<\/p>\n<p>Anyway, mistakes of the past hand crafting blog posting have come back to bite, and the Google <a target=_blank title='Google Crawl Error information from Google' href='https:\/\/support.google.com\/webmasters\/answer\/35120?hl=en'>crawl error<\/a> count for <a target=_blank title='HTTP 404 error information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/HTTP_404'>error 404<\/a> has gone up, for www.rjmprogramming.com.au, quite a bit lately.  Another term for this is &#8220;broken links&#8221;.<\/p>\n<p>No excuse, but when hand crafting blog posts, care is needed with HTML <i>a<\/i> links, pretty obviously, regarding &#8230;<\/p>\n<ul>\n<li>spelling mistakes<\/li>\n<li>copying and pasting (absolute) URLs (often from a search engine result set) and forgetting the <i>http:\/\/<\/i> or <i>https:\/\/<\/i> bit (which does not always appear with a copied URL from the search engine results, for instance) &#8230; which, if left out, as you can imagine, leads the web browser to want to search through your domain for that (what becomes &#8220;orphaned&#8221;) URL reference &#8230; we make this mistake quite a bit with Wikipedia and W3schools &#8230; sorry, guys<\/li>\n<li>for us, moving between WordPress blog URLs that are non-permalink pointing to the <a target=_blank title='WordPress permalinks' href='https:\/\/codex.wordpress.org\/Using_Permalinks'>permalink<\/a> ones and misspelling, or not properly working(\/mapping) out the permalink, or forgetting to change the blog posting title into its URL-part-of constituent (see also <a target=_blank title='WordPress Upgrade Links Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-upgrade-links-tutorial\/'>WordPress Upgrade Links Tutorial<\/a>), properly, in our heads (Nala??!!)<\/li>\n<\/ul>\n<p>Of course, all this should be checked with the WordPress (Blog Post) Preview button ahead of it going live, but, there you go. <font size=1>Nala????!!!!<\/font>  We&#8217;re fixing them gradually, as an ongoing issue.<\/p>\n<p>We&#8217;ve talked about broken links, and a programmable way to detect them, previously, with <a title='More Bookmarklet via Javascript Tutorial' href='#mbvjt'>More Bookmarklet via Javascript Tutorial<\/a> and WordPress plugins such as <a target=_blank title='Broken Link Checker' href='https:\/\/wordpress.org\/plugins\/broken-link-checker\/'>Broken Link Checker<\/a> could help with this issue, as well.<\/p>\n<p>And you&#8217;ll be pleased to know <i><font size=2>No puppy feelings were hurt in the production of this blog posting<\/font><font size=1> &#8230; it ended up being my fault.<\/font><\/i><\/p>\n<hr>\n<p id='mbvjt'>Previous relevant <a target=_blank title='More Bookmarklet via Javascript Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/more-bookmarklet-via-javascript-tutorial\/'>More Bookmarklet via Javascript Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/Bookmarklet\/BrokenLinks\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"More Bookmarklet via Javascript Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/Bookmarklet\/BrokenLinks\/Bookmarklet_BrokenLinks-4of.jpg\" title=\"More Bookmarklet via Javascript Tutorial\"  \/><\/a><p class=\"wp-caption-text\">More Bookmarklet via Javascript Tutorial<\/p><\/div>\n<p>\nHave you heard of Bookmarklets?<\/p>\n<p>Are you a person with a cluttered (thoughtfully placed, of course) desk?<\/p>\n<p>Yes?   Read on &#8230; even if not, <strike>&#8220;Go to Jail &#8230; Do Not Pass Go&#8221;<\/strike> (maybe you were impressed by that idea that the <a target=_blank title=\"Lord's Prayer was Once Etched on a Pinhead\" href='http:\/\/www.dailymail.co.uk\/news\/article-1252765\/The-man-carved-Lords-Prayer-head-pin.html'>Lord&#8217;s Prayer was Once Etched on a Pinhead<\/a>? &#8230; yes? &#8230; read on down below &#8230; are you here? &#8230; oops &#8230; c&#8217;est la vie &#8230; <span style=\"font-size:6px;\">read on<\/span>) &#8230; read on &#8230; why?<\/p>\n<p>This tutorial builds on <a target=_blank href='#mvjpt' title='Bookmarklet via Javascript Primer Tutorial'>Bookmarklet via Javascript Primer Tutorial<\/a> below.   For our tutorial we write a bookmarklet to check for Broken Links, something that could be very useful to run against the very common Links pages on websites today, so that you can check for those Broken Links that annoy the search engines so much and contribute to a lower SEO &#8220;score&#8221;.<\/p>\n<p><strong><em><br \/>\n&lt;script type=&#8221;text\/javascript&#8221;&gt;<br \/>\nfunction checkBrokenLink() {<br \/>\n var bWin,j,b=&#8221;,tl=40,dl=document.links;<br \/>\n for(j=0;j&lt;dl.length;j++){<br \/>\n  if(b.indexOf(dl[j].href)&lt;0){<br \/>\n   bWin=window.open(dl[j].href,&#8217;BW&#8217;+j,&#8217;top=&#8217;+tl+&#8217;,left=620,width=400,height=120,<br \/>\n              scrollbars=yes,menubar=no,titlebar=no,toolbar=no,status=no&#8217;);<br \/>\n   tl+=120;<br \/>\n   b+='&lt;tr style=&#8221;height:120&#8243;&gt;&lt;td&gt;&#8217;+dl[j].href+'&lt;\/td&gt;&lt;td&gt;&#8217;;<br \/>\n   b+=dl[j].target+'&lt;\/td&gt;&lt;td&gt;&#8217;+dl[j].id+'&lt;\/td&gt;&lt;td&gt;&#8217;;<br \/>\n   b+=dl[j].className+'&lt;\/td&gt;&lt;td&gt;&#8211;&gt;&lt;\/td&gt;&lt;\/tr&gt;&#8217;;<br \/>\n  }<br \/>\n }<br \/>\n if(b===&#8221;){<br \/>\n  alert(&#8216;No links&#8217;);<br \/>\n }else{<br \/>\n  bWin=window.open(&#8221;,&#8217;Links of &#8216;+document.title,&#8217;top=0,left=0,width=600,height=800,scrollbars=yes&#8217;);<br \/>\n  bWin.title=&#8217;Links of &#8216;+document.title;<br \/>\n  bWin.document.body.innerHTML='&lt;table border=1 cellpadding=5 cellspacing=0&gt;&lt;tr&gt;&lt;th&gt;Link of &#8216;;<br \/>\n  bWin.document.body.innerHTML+=document.title+'&lt;\/th&gt;&lt;th&gt;Target&lt;\/th&gt;&lt;th&gt;ID&lt;\/th&gt;&lt;&#8216;;<br \/>\n  bWin.document.body.innerHTML+=&#8217;th&gt;Class&lt;\/th&gt;&lt;th&gt;Broken?&lt;\/th&gt;&lt;\/tr&gt;&#8217;+b+'&lt;\/table&gt;&#8217;;<br \/>\n }<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n<\/strong><\/em><\/p>\n<p>To get some downloadable Javascript programming code for this bookmarklet please rename to <a target=_blank title='Broken Links bookmarklet Javascript code' href='http:\/\/www.rjmprogramming.com.au\/Javascript\/Bookmarklet\/BrokenLinks\/BrokenLinks.js_GETME'>BrokenLinks.js<\/a> and copy its contents into the address of your Bookmarklet to try this yourself.<\/p>\n<p>Okay, if you have downloaded, take a look at how similar it is to code above.   So you just place javascript: in front of the Javascript code required to do something interesting, all squeezed together onto the one line (no pinheads please) &#8230; this is where the cluttered desk people may continue breathing easily but others may falter.<\/p>\n<p>Well, if you can place this sort of thing into a browser Bookmark then that is a Bookmarklet.   Remember the Javascript calculator rave in previous tutorials?<\/p>\n<p>Bear in mind we show Firefox in tutorial but all browsers have something similar, whether that be called Bookmarks or Favourites.   Our tutorial shows the Safari browser using this Bookmarklet.<\/p>\n<p>Regarding this Bookmarklet tutorial topic I really like <em>\u201cJavaScript &#038; Ajax\u201d<\/em> seventh edition by <em>Tom Negrino and Dori Smith<\/em>.<\/p>\n<p>Click <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/Javascript\/Bookmarklet\/BrokenLinks\/'>on picture above<\/a> to go to tutorial about Bookmarklets.<\/p>\n<p><strong><em>Did you know &#8230;<\/em><\/strong><br \/>\nJavaScript makes a great easy-access Calculator?<\/p>\n<p>Try typing the lines below into the address bar of your favourite browser:<\/p>\n<p>Javascript: eval(512 \/ 380);<br \/>\nJavascript: eval(512 * 380);<br \/>\nJavascript: eval(512 &#8211; 380);<br \/>\nJavascript: eval(512 + 380);<br \/>\nJavascript: eval(512 % 380);<\/p>\n<p>These days we spend so much time on the Internet it is a much quicker way to get to a calculator!\n<\/p>\n<hr \/>\n<p id=\"mvjpt\">Previous <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=3789' title='Bookmarklet via Javascript Primer Tutorial'>Bookmarklet via Javascript Primer Tutorial<\/a> below &#8230; <\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/Bookmarklet\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Bookmarklet via Javascript Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/Bookmarklet\/Bookmarklet_Primer-4of.jpg\" title=\"Bookmarklet via Javascript Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Bookmarklet via Javascript Primer Tutorial<\/p><\/div>\n<p>\nHave you heard of Bookmarklets?<\/p>\n<p>Are you a person with a cluttered (thoughtfully placed, of course) desk?<\/p>\n<p>Yes?   Read on &#8230; even if not &#8230; read on &#8230; why?<\/p>\n<p><strong><em><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;script type=&#8221;text\/javascript&#8221;&gt;<\/p>\n<p>while (&#8220;abracadabra&#8221; != prompt(&#8220;Guess the magic word?&#8221;).toLowerCase()) {<br \/>\n   alert(&#8220;Bad Luck&#8221;);<br \/>\n}<br \/>\ndocument.write(&#8220;&lt;html&gt;&lt;body&gt;&lt;p&gt;You win a cupee doll!&lt;\/body&gt;&lt;\/html&gt;&#8221;);<\/p>\n<p>&lt;\/script&gt;<br \/>\n&lt;a href=&#8217;#&#8217; onclick=&#8217;javascript: while (&#8220;abracadabra&#8221; != prompt(&#8220;Guess the magic word?&#8221;).toLowerCase()) { alert(&#8220;Bad Luck&#8221;); } document.write(&#8220;&lt;html&gt;&lt;body&gt;&lt;p&gt;You win a cupee doll!&lt;\/body&gt;&lt;\/html&gt;&#8221;);&#8217;&gt;Click me for another (confirmed) go &#8230; but limited offer on cupee dolls!&lt;\/a&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/em><\/strong><\/p>\n<p>Look at the cutesy wootsey HTML\/Javascript above.   Isn&#8217;t it cuuuuuuute?!<br \/>\n Isn&#8217;t it sweeeeeet?!<\/p>\n<blockquote><p>&#9835; Oh, aint she sweet, when she&#8217;s walking down the street,<br \/>\n Well I ask you very confidentially &#8230; aint &#8230; she &#8230; sweet. &#9835; <\/p><\/blockquote>\n<p>  Enough of a sell job?<\/p>\n<p>Okay look at the Javascript of one vs Javascript of one below in the a tag onclick bit.   So you just place javascript: in front of the Javascript code required to do something interesting, all squeezed together onto the one line &#8230; this is where the cluttered desk people may continue breathing easily but others may falter.<\/p>\n<p>Well, if you can place this sort of thing into a browser Bookmark then that is a<br \/>\n Bookmarklet.   Remember the Javascript calculator rave in previous tutorials?<\/p>\n<p>Bear in mind we show Firefox in tutorial but all browsers have something similar, whether that be called Bookmarks or Favourites.\n<\/p>\n<p>Click <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/Javascript\/Bookmarklet\/'>on picture above<\/a> to go to tutorial about Bookmarklets.<\/p>\n<p>Link to downloadable source code of HTML above is <a href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/Bookmarklet\/bmark.html_GETME\" title='bmark.html'>bmark.html<\/a> which you need to rename in order to try.<\/p>\n<p><strong><em>Did you know &#8230;<\/em><\/strong><br \/>\nJavaScript makes a great easy-access Calculator?<\/p>\n<p>Try typing the lines below into the address bar of your favourite browser:<\/p>\n<p>Javascript: eval(512 \/ 380);<br \/>\nJavascript: eval(512 * 380);<br \/>\nJavascript: eval(512 &#8211; 380);<br \/>\nJavascript: eval(512 + 380);<br \/>\nJavascript: eval(512 % 380);<\/p>\n<p>These days we spend so much time on the Internet it is a much quicker way to get to a calculator!\n<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d887' onclick='var dv=document.getElementById(\"d887\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d887' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d3798' onclick='var dv=document.getElementById(\"d3798\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d3789' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d20207' onclick='var dv=document.getElementById(\"d20207\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20207' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47156' onclick='var dv=document.getElementById(\"d47156\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/plugin\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47156' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47166' onclick='var dv=document.getElementById(\"d47166\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/viewport\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47166' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Continuing on with Google Search Console (part of &#8220;Google Webmasters&#8221;) &#8220;Crawl Error&#8221; issues here at the RJM Programming domain, on top of yesterday&#8217;s Google Crawl Incompatible Plugin Error Tutorial, today we examine another &#8220;Crawl Error&#8221; category (in the Mobility Fix &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-crawl-viewport-error-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[184,1980,3143,322,2518,1929,451,513,3145,2197,576,578,652,714,744,795,1969,997,1111,1254,1319,1373,3144,1411,2257],"class_list":["post-47166","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-canvas","tag-crawl","tag-crawl-error","tag-device","tag-drawimage","tag-error","tag-font","tag-google","tag-google-search-console","tag-google-webmaster","tag-html","tag-html5","tag-javascript","tag-local-web-server","tag-mamp","tag-mobile","tag-mobile-device","tag-programming","tag-search-engine","tag-text","tag-tutorial","tag-viewport","tag-web-inspectot","tag-web-server","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47166"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=47166"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47166\/revisions"}],"predecessor-version":[{"id":47179,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47166\/revisions\/47179"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}