{"id":58884,"date":"2023-04-06T03:01:48","date_gmt":"2023-04-05T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=58884"},"modified":"2023-04-05T20:34:59","modified_gmt":"2023-04-05T10:34:59","slug":"svg-and-gradient-fraction-game-operators-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/svg-and-gradient-fraction-game-operators-tutorial\/","title":{"rendered":"SVG and Gradient Fraction Game Operators Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG and Gradient Fraction Game Operators Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors_rotation.jpg\" title=\"SVG and Gradient Fraction Game Operators Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG and Gradient Fraction Game Operators Tutorial<\/p><\/div>\n<p>Onto the SVG &#8220;cake&#8221; display functionality added with yesterday&#8217;s <a title='SVG and Gradient Fraction Game Tutorial' href='#svggfgt'>SVG and Gradient Fraction Game Tutorial<\/a> into our Fractions Game web application, we&#8217;re adding &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> circle &#8220;cakes&#8221; that can be rotated &#8230; but not in the SVG &#8230; rather in the nesting HTML div &#8230; <font color=blue>as per<\/font> &#8230;<br \/>\n<code><br \/>\n        <font color=blue>rotdeg=eval(Math.floor(eval(360.0 * numerator \/ denominator)) % 360);<br \/>\n        rotdegr=eval(Math.floor(eval(360.0 * numeratortwo \/ denominatortwo)) % 360);<\/font><br \/>\n        document.getElementById('dstyle').innerHTML+='&lt;style&gt;' + ' #atend { background-image: none !important;<font color=blue> transform: rotate(' + rotdeg + 'deg);<\/font> } &lt;\/style&gt;';<br \/>\n        document.getElementById('dstyle').innerHTML+='&lt;style&gt;' + ' #atright { background-image: none !important;<font color=blue> transform: rotate(' + rotdegr + 'deg);<\/font> } &lt;\/style&gt;';<br \/>\n<\/code><br \/>\n &#8230; as a &#8220;distinguisher&#8221; (of SVG as distinct from conic-gradient) and &#8220;for user interest, and challenge, sake&#8221;\n<\/li>\n<li>two new mathematics operators to offer on that &#8220;operator dropdown&#8221; &#8230; in addition to + &#8211; x \/ &#8230;\n<ul>\n<li>&nbsp;% <font size=1>(ie. modulo eg. in Javascript eval(3\/4 % 1\/2) is 1\/4 is 0.25)<\/font><\/li>\n<li>&nbsp;^ <font size=1>(ie. &#8220;left fraction base&#8221; to the power of &#8220;right fraction power&#8221; eg. (1\/4 ^ 1\/2) ( we can internally express as Math.pow(1\/4, 1\/2) ) is 1\/2 is 0.5)<\/font><\/li>\n<\/ul>\n<p> &#8230; today, again &#8220;for user interest, and challenge, sake&#8221; &#8230; naturally, as far as answers go, we&#8217;ve always accepted decimal answers\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html-----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html-----GETME\">circular_sectors.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html?btis=My80\">Fractions Game<\/a>.<\/p>\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\/svg-and-gradient-fraction-game-operators-tutorial\/'>SVG and Gradient Fraction Game Operators Tutorial<\/a>.<\/p-->\n<hr>\n<p id='svggfgt'>Previous relevant <a target=_blank title='SVG and Gradient Fraction Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/svg-and-gradient-fraction-game-tutorial\/'>SVG and Gradient Fraction Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"SVG and Gradient Fraction Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors_svg.jpg\" title=\"SVG and Gradient Fraction Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">SVG and Gradient Fraction Game Tutorial<\/p><\/div>\n<p>To add onto yesterday&#8217;s <a title='Gradient Fraction Game Mobile Tutorial' href='#gfgmt'>Gradient Fraction Game Mobile Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>exclusively <i>gradient<\/i> &#8230;\n<ul>\n<li>conic<\/li>\n<li>linear<\/li>\n<li>radial<\/li>\n<\/ul>\n<p> &#8230; &#8220;cake&#8221; displays in our Fractions Game &#8230; and add in &#8230;<\/li>\n<li><a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> circle and rect<font size=1>angle<\/font> alternative displays<\/li>\n<\/ul>\n<p> &#8230; it is not hard coding work, only really involving the rearrangement of the &#8220;stop colour&#8221; element &#8230;<\/p>\n<p><code><br \/>\n  function stopit(incsv) {<br \/>\n    \/\/alert(incsv);<br \/>\n    \/\/ &lt;stop offset='0%' stop-color='#f00'\/&gt;&lt;stop offset='100%' stop-color='#0ff'\/&gt;<br \/>\n    var incsvs=incsv.split('%, ');<br \/>\n    var outstops=\"&lt;stop offset='0%' stop-color='\" + incsvs[0].split(' ')[0] + \"'\/&gt;\";<br \/>\n    for (var iis=1; iis&lt;incsvs.length; iis++) {<br \/>\n      outstops+=\"&lt;stop offset='\" + (incsvs[iis].split(' ')[1].trim() + \"%\").replace('%%','%') + \"' stop-color='\" + incsvs[iis].split(' ')[0] + \"'\/&gt;\";<br \/>\n    }<br \/>\n    \/\/alert(outstops);<br \/>\n    \/\/document.getElementById('atend').title=outstops.replace(\/255\/g, '127');<br \/>\n    return outstops.replace(\/255\/g, '127');<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; code syntax.<\/p>\n<p>But before that we went down a garden path thinking we could have all 5 &#8220;cake&#8221; display options be &#8230;<\/p>\n<ul>\n<li>as the CSS property <i>background-image<\/i> to a table cell nesting HTML div element &#8230; sort of like <a target=_blank title='Useful ideas but not used' href='https:\/\/stackoverflow.com\/questions\/10768451\/inline-svg-in-css'>this webpage<\/a>&#8216;s (thanks all the same) &#8230;<br \/>\n<code><br \/>\n#atright {<br \/>\n background-image: url(\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10'&gt;&lt;linearGradient id='gradient'&gt;&lt;stop offset='10%' stop-color='%23F00'\/&gt;&lt;stop offset='90%' stop-color='%23fcc'\/&gt; &lt;\/linearGradient&gt;&lt;rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'\/&gt;&lt;\/svg&gt;\");<br \/>\n}<br \/>\n\/\/ ... or ...<br \/>\n#atend {<br \/>\n background-image: url(\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+\");<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and though we had lots of success with work of this ilk with our <a target=_blank title='Just Javascript blog postings' href='https:\/\/www.rjmprogramming.com.au\/itnewblog\/match\/mapper.php?pm=Just%20Javascript'>&#8220;Just Javascript&#8221;<\/a> series of blog posts, we found the technique flaky today, so opted to, instead &#8230;<\/p>\n<\/li>\n<li>\n<ol>\n<li>fill HTML div element&#8217;s innerHTML (ie. content) with &#8220;raw&#8221; SVG<\/li>\n<li>set that HTML div element&#8217;s CSS style property background-image to &#8220;none&#8221;<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; as the approach we landed upon, <font color=blue>allowing for SVG<\/font> &#8230;<\/p>\n<p><code><br \/>\n        <font color=blue>if (issvg &gt; 0) {<br \/>\n        var mySVG = \"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10'&gt;&lt;linearGradient id='gradient'&gt;&lt;stop offset='10%' stop-color='#F00'\/&gt;&lt;stop offset='90%' stop-color='#fcc'\/&gt; &lt;\/linearGradient&gt;&lt;rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'\/&gt;&lt;\/svg&gt;\";<br \/>\n        if (issvg == 1) {<br \/>\n          mySVG=\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='\" + pwidth + \"' height='\" + pheight + \"' viewport='0 0 100 100'&gt;&lt;linearGradient id='test'&gt;\" + stopit(newlist) + \" &lt;\/linearGradient&gt;&lt;circle fill='url(#test)' cx='\" + eval(pwidth \/ 2) + \"' cy='\" + eval(pheight \/ 2) + \"' r='\" + eval(pwidth \/ 2) + \"' stroke='none' stroke-width='12'\/&gt;&lt;\/svg&gt;\"; \/\/.replace(\/\\~\/g, String.fromCharCode(10));<br \/>\n        } else if (issvg == 2) {<br \/>\n          mySVG=\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='\" + pwidth + \"' height='\" + pheight + \"' viewport='0 0 100 100'&gt;&lt;linearGradient id='test'&gt;\" + stopit(newlist) + \" &lt;\/linearGradient&gt;&lt;rect fill='url(#test)' width='\" + eval(pwidth \/ 1) + \"' height='\" + eval(pheight \/ 1) + \"' stroke='none' stroke-width='12'\/&gt;&lt;\/svg&gt;\"; \/\/.replace(\/\\~\/g, String.fromCharCode(10));<br \/>\n        }<br \/>\n        document.getElementById('atend').innerHTML=mySVG;<br \/>\n        if (issvg == 1) {<br \/>\n         mySVG=\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='\" + pwidth + \"' height='\" + pheight + \"' viewport='0 0 100 100'&gt;&lt;linearGradient id='testr'&gt;\" + stopit(newlistr) + \" &lt;\/linearGradient&gt;&lt;circle fill='url(#testr)' cx='\" + eval(pwidth \/ 2) + \"' cy='\" + eval(pheight \/ 2) + \"' r='\" + eval(pwidth \/ 2) + \"' stroke='none' stroke-width='12'\/&gt;&lt;\/svg&gt;\"; \/\/.replace(\/\\~\/g, String.fromCharCode(10));<br \/>\n        } else if (issvg == 2) {<br \/>\n         mySVG=\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='\" + pwidth + \"' height='\" + pheight + \"' viewport='0 0 100 100'&gt;&lt;linearGradient id='testr'&gt;\" + stopit(newlistr) + \" &lt;\/linearGradient&gt;&lt;rect fill='url(#testr)' width='\" + eval(pwidth \/ 1) + \"' height='\" + eval(pheight \/ 1) + \"' stroke='none' stroke-width='12'\/&gt;&lt;\/svg&gt;\"; \/\/.replace(\/\\~\/g, String.fromCharCode(10));<br \/>\n        }<br \/>\n        document.getElementById('atright').innerHTML=mySVG;<br \/>\n        document.getElementById('dstyle').innerHTML+='&lt;style&gt;' + ' #atend { background-image: none !important; } &lt;\/style&gt;';<br \/>\n        document.getElementById('dstyle').innerHTML+='&lt;style&gt;' + ' #atright { background-image: none !important; } &lt;\/style&gt;';<br \/>\n        } else {<br \/>\n        document.getElementById('atend').innerHTML='';<br \/>\n        document.getElementById('atright').innerHTML='';<\/font><br \/>\n        document.getElementById('dstyle').innerHTML+='&lt;style&gt;' + ' #atend { background-image: ' + gprefix.toLowerCase() + '-gradient(' + newlist + ') !important; } &lt;\/style&gt;';<br \/>\n        document.getElementById('dstyle').innerHTML+='&lt;style&gt;' + ' #atright { background-image: ' + gprefix.toLowerCase() + '-gradient(' + newlistr + ') !important; } &lt;\/style&gt;';<br \/>\n        <font color=blue>}<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html----GETME\">circular_sectors.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html?btis=My80\">Fractions Game<\/a>.<\/p>\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\/svg-and-gradient-fraction-game-tutorial\/'>SVG and Gradient Fraction Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gfgmt'>Previous relevant <a target=_blank title='Gradient Fraction Game Mobile Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gradient-fraction-game-mobile-tutorial\/'>Gradient Fraction Game Mobile Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Gradient Fraction Game Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors_iphone.gif\" title=\"Gradient Fraction Game Mobile Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Gradient Fraction Game Mobile Tutorial<\/p><\/div>\n<p>Many <i>responsive web design<\/i> purists will push the web developers out there to never &#8230;<\/p>\n<ul>\n<li>express HTML element dimensions in &#8220;static&#8221; &#8220;px&#8221; types of units &#8230; but rather &#8230;<\/li>\n<li>express  HTML element dimensions in &#8220;%&#8221; or &#8220;vx&#8221; or &#8220;vh&#8221; proportional style of units &#8230; and, of course, their advice has a lot of merit, but, sometimes, like today, we want to be a bit pragmatic here and say &#8230;<\/li>\n<li>a third way, particularly suiting an initial development phase that suited a display on a laptop (and deploying &#8220;static&#8221; &#8220;px&#8221; types of units that look okay on a laptop), for instance, but then wanting to look more apt on your smaller mobile devices, you could &#8230;\n<ol>\n<li>ensure you have within the webpage head element a &#8220;meta&#8221; viewport element such as (our) &#8230;<br \/>\n<code><br \/>\n&lt;meta id='myviewport' name='viewport' content='width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes'  &gt;<br \/>\n<\/code>\n<\/li>\n<li>stay with &#8220;static&#8221; &#8220;px&#8221; types of units but if analysis (which can be before document.body &#8220;onload&#8221; event <font size=1>(and, you couldn&#8217;t possibly have heard it from me, cough cough, but dovetail findings within Javascript <i>document.write<\/i> statements within the document.body static HTML)<\/font>) of either\/both <i>screen.width<\/i> and\/or <i>screen.height<\/i> indicates lack of suitablility &#8230;<br \/>\n<code><br \/>\n  var fromprefix='border-radius: 612px;', toprefix=\"margin-top: 0px;\";<br \/>\n  var pwidth=602, pheight=602, pbr=612, ptop=17.3594, pleft=386.5, thirtytwo=32, ocbit='';<br \/>\n  var worry=false;<br \/>\n<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && btoas.trim() == '' && denominator == '0' && numerator == '0') {<br \/>\n     ocbit=' onclick=\" viadb=true; ask(); \" ';<br \/>\n  }<br \/>\n  if (eval(eval('' + screen.width) - eval(eval('' + pbr) * 2)) &lt; 0 && (btoas.trim() != '' || denominator != '0' || numerator != '0')) {<br \/>\n     thirtytwo=Math.floor(eval(eval('' + thirtytwo) * Math.floor(eval(eval('' + screen.width) \/ 2.1)) \/ eval('' + pbr)));<br \/>\n     ptop=eval(eval('' + ptop) * Math.floor(eval(eval('' + screen.width) \/ 2.1)) \/ eval('' + pbr));<br \/>\n     pleft=eval(eval('' + pleft) * Math.floor(eval(eval('' + screen.width) \/ 2.1)) \/ eval('' + pbr));<br \/>\n     pbr=Math.floor(eval(eval('' + screen.width) \/ 2.1));<br \/>\n     fromprefix='border-radius: ' + pbr + 'px;'<br \/>\n     pwidth=eval(-10 + pbr);<br \/>\n     pheight=eval(-10 + pbr);<br \/>\n     worry=true;<br \/>\n     \/\/alert('width,height,br,top,left=' + pwidth + ',' + pheight + ',' + pbr + ',' + ptop + ',' + pleft);<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; Javascript &#8220;head&#8221; code affecting the &#8220;body&#8221; &#8230;<br \/>\n<code><br \/>\n&lt;body&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  document.write('&lt;table id=mytable&gt;&lt;tbody id=mytbody&gt;&lt;tr id=mytr&gt;&lt;td id=mytd&gt;');<br \/>\n  if (denominator == '0' && btoas == '') {<br \/>\n    if (worry) {<br \/>\n    document.write('&lt;div' + ocbit + ' ondblclick=\" viadb=true; ask(); \" title=\"Analogue Clock via Conic Gradient or Double Click for Fractions Game toggle - RJM Programming - March, 2023\" id=\"atend\" style=\"position: absolute; left: ' + pleft + 'px; top: ' + ptop + 'px; width: ' + pwidth + 'px;  height: ' + pheight + 'px; border-radius: ' + pbr + 'px; \"&gt;');<br \/>\n    } else {<br \/>\n    document.write('&lt;div' + ocbit + ' ondblclick=\" viadb=true; ask(); \" title=\"Analogue Clock via Conic Gradient or Double Click for Fractions Game toggle - RJM Programming - March, 2023\" id=\"atend\" style=\"position: absolute; left: 386.5px; top: 17.3594px; width: 602px;  height: 602px; border-radius: 612px; \"&gt;');<br \/>\n    }<br \/>\n    document.write('&lt;iframe scrolling=\"no\" frameborder=\"0\" style=\"z-index:23;margin-left:127px;margin-top:130px;height:400px;\" src=\"analogue_clock.htm?backcol=transparent&x=7654#xbody\"&gt;&lt;\/iframe&gt;');<br \/>\n  } else {<br \/>\n    if (worry) {<br \/>\n    document.write('&lt;div' + ocbit + ' ondblclick=\" viadb=true; ask(); \" title=\"Analogue Clock via Conic Gradient or Double Click for Fractions Game toggle - RJM Programming - March, 2023\" id=\"atend\" style=\"width: ' + pwidth + 'px;  height: ' + pheight + 'px; border-radius: ' + pbr + 'px; \"&gt;');<br \/>\n    } else {<br \/>\n    document.write('&lt;div' + ocbit + ' ondblclick=\" viadb=true; ask(); \" title=\"Analogue Clock via Conic Gradient or Double Click for Fractions Game toggle - RJM Programming - March, 2023\" id=\"atend\" style=\"width: 602px;  height: 602px; border-radius: 612px; \"&gt;');<br \/>\n    }<br \/>\n  }<br \/>\n  if (worry) {<br \/>\n    document.write('&lt;\/div&gt;&lt;\/td&gt;&lt;td id=mymtd style=display:none;vertical-align:middle;&gt;&nbsp;&nbsp;&lt;select id=ssign style=font-size:' + thirtytwo + 'px;background-color:yellow; readonly disable&gt;&lt;option value=\"+\"&gt;&#10133;&lt;\/option&gt;&lt;option value=\"-\"&gt;&#10134;&lt;\/option&gt;&lt;option value=\"x\"&gt;&#10006;&lt;\/option&gt;&lt;option value=\"\/\"&gt;&#10135;&lt;\/option&gt;&lt;\/select&gt;&lt;\/td&gt;&lt;td id=myrtd style=display:none;&gt;&nbsp;&nbsp;&lt;div ondblclick=\" viadb=true; ask(); \" title=\"Analogue Clock via Conic Gradient or Double Click for Fractions Game toggle - RJM Programming - March, 2023\" id=\"atright\" style=\"width: ' + pwidth + 'px;  height: ' + pheight + 'px; border-radius: ' + pbr + 'px; \"&gt;&lt;\/div&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/tbody&gt;&lt;\/table&gt;');<br \/>\n  } else {<br \/>\n    document.write('&lt;\/div&gt;&lt;\/td&gt;&lt;td id=mymtd style=display:none;vertical-align:middle;&gt;&nbsp;&nbsp;&lt;select id=ssign style=font-size:' + thirtytwo + 'px;background-color:yellow; readonly disable&gt;&lt;option value=\"+\"&gt;&#10133;&lt;\/option&gt;&lt;option value=\"-\"&gt;&#10134;&lt;\/option&gt;&lt;option value=\"x\"&gt;&#10006;&lt;\/option&gt;&lt;option value=\"\/\"&gt;&#10135;&lt;\/option&gt;&lt;\/select&gt;&lt;\/td&gt;&lt;td id=myrtd style=display:none;&gt;&nbsp;&nbsp;&lt;div ondblclick=\" viadb=true; ask(); \" title=\"Analogue Clock via Conic Gradient or Double Click for Fractions Game toggle - RJM Programming - March, 2023\" id=\"atright\" style=\"width: 602px;  height: 602px; border-radius: 612px; \"&gt;&lt;\/div&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/tbody&gt;&lt;\/table&gt;');<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;div id=dstyle&gt;&lt;\/div&gt;<br \/>\n&lt;\/body&gt;<br \/>\n<\/code><br \/>\n &#8230; element, to lean on &#8220;hardcodings become parameter&#8221; types of thinking to proceed with a more apt dimensional display (that is all sorted out ahead of document.body &#8220;onload&#8221; event, still not associated with any Javascript code, above)\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Yes, you can develop web applications on mobile.  There are ways.  But we find it much more natural and easy to develop web applications on a laptop, here it being a MacBook Air at the moment.  One reason we&#8217;d give, is that the quality of laptop web browser web inspectors is sky high, and all the modern browsers seem to have a (laptop) version now.<\/p>\n<p>And as such, improving mobile usage of yesterday&#8217;s <a title='Gradient Fraction Game Equations Tutorial' href='#gfget'>Gradient Fraction Game Equations Tutorial<\/a> we have in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html---GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html---GETME\">circular_sectors.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html?btis=My80\">Fractions Game<\/a>.<\/p>\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\/gradient-fraction-game-mobile-tutorial\/'>Gradient Fraction Game Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gfget'>Previous relevant <a target=_blank title='Gradient Fraction Game Equations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gradient-fraction-game-equations-tutorial\/'>Gradient Fraction Game Equations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Gradient Fraction Game Equations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors_yetmore.jpg\" title=\"Gradient Fraction Game Equations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Gradient Fraction Game Equations Tutorial<\/p><\/div>\n<p>There are three styles of CSS gradient &#8230;<\/p>\n<ul>\n<li>conic<\/li>\n<li>linear<\/li>\n<li>radial<\/li>\n<\/ul>\n<p> &#8230; and <i>&#8220;different folks may learn via diff&#8217;rent CSS strokes&#8221;<\/i>, so we incorporate a way for the user, when using the Fractions Game component of our latest web application, so that they can toggle the &#8220;cake&#8221; display among these three styles of gradient display.<\/p>\n<p>Also, extending yesterday&#8217;s <a title='Conic Gradient Fraction Game Equations Tutorial' href='#cgfget'>Conic Gradient Fraction Game Equations Tutorial<\/a>, we &#8230;<\/p>\n<ul>\n<li>allow, during the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html?btis=My80\">Fractions Game<\/a> mode usage, have a window.prompt Cancel click send the user back to the Analogue Clock, so that unnecessary and errant window.prompt popup windows are avoided &#8230; and &#8230;<\/li>\n<li>we incorporate &#8220;lowest common denominator&#8221; &#8230;<br \/>\n<code><br \/>\n  function lcdextra(varn, vard) {<br \/>\n    var retv='', iv=0;<br \/>\n    for (iv=Math.min(Math.abs(varn),Math.abs(vard)); iv&gt;=2; iv--) {<br \/>\n      if (eval(Math.abs(varn) % iv) == 0 && eval(Math.abs(vard) % iv) == 0) {<br \/>\n        varn \/= iv;<br \/>\n        vard \/= iv;<br \/>\n        retv+=' = ' + varn + ' \/ ' + vard + String.fromCharCode(10);<br \/>\n      }<br \/>\n    }<br \/>\n    return retv;<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; calculations into our &#8220;show workings&#8221; section <font size=1>as Ms Trimpole would have wanted<\/font>\n<\/li>\n<li>involve emoji operators in that same &#8220;show workings&#8221; section <font size=1>to better mimic how we were taught at school in Mathematics class<\/font><\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html--GETME\">circular_sectors.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html?btis=My80\">Fractions Game<\/a>.<\/p>\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\/gradient-fraction-game-equations-tutorial\/'>Gradient Fraction Game Equations Tutorial<\/a> ...<\/p-->\n<hr>\n<p id='cgfget'>Previous relevant <a target=_blank title='Conic Gradient Fraction Game Equations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/conic-gradient-fraction-game-equations-tutorial\/'>Conic Gradient Fraction Game Equations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Conic Gradient Fraction Game Equations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors_more.gif\" title=\"Conic Gradient Fraction Game Equations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Conic Gradient Fraction Game Equations Tutorial<\/p><\/div>\n<p>We&#8217;re extending the functionality started with yesterday&#8217;s <a title='Dual Purpose Conic Gradient Primer Tutorial' href='#dpcgpt'>Dual Purpose Conic Gradient Primer Tutorial<\/a>&#8216;s second &#8220;dual purpose&#8221; &#8230;<\/p>\n<ul>\n<li>Fractions Game piece of functionality &#8230;<\/li>\n<li>Adding to its possibility the optional user job of solving operator &#8230;\n<ul>\n<li>&nbsp;+<\/li>\n<li>&nbsp;&#8211;<\/li>\n<li>&nbsp;x<\/li>\n<li>&nbsp;\/<\/li>\n<\/ul>\n<p> &#8230; types of fraction based equations<\/li>\n<\/ul>\n<p>Simply put, changes to allow for this involved &#8230;<\/p>\n<ul>\n<li>forsaking <i>position:absolute<\/i> &#8220;cakes&#8221; for your usual default <i>position:relative<\/i> positioning &#8230; within &#8230;<\/li>\n<li>single row, three cell (cake, sign, cake) display &#8230; prior to &#8230;<\/li>\n<li>hardly changed window.prompt user interaction, to answer &#8230; but &#8230;<\/li>\n<li>more complex analysis for equation based scenarios &#8230;<br \/>\n<code><br \/>\n  function showworking(instr, realans) {<br \/>\n    var outstr=instr;<br \/>\n    var xnumerator=numerator, xnumeratortwo=numeratortwo, xdenominatortwo=denominatortwo;<br \/>\n    var varw='';<br \/>\n    if (document.getElementById('ssign').value == '+') {<br \/>\n      if (denominatortwo == denominator.slice(-1)) {<br \/>\n        varw+=' = (' + numerator + ' + ' + numeratortwo + ') \/ ' + denominatortwo + String.fromCharCode(10);<br \/>\n        varw+=' = ' + eval(eval('' + numerator) + eval('' + numeratortwo)) + ' \/ ' + xdenominatortwo + String.fromCharCode(10);<br \/>\n      } else {<br \/>\n        varw+=' = (' + numerator + ' x ' + denominatortwo + ' + ' + numeratortwo + ' x ' + denominator.slice(-1) + ') \/ (' + denominator.slice(-1) + ' x ' + denominatortwo + ')' + String.fromCharCode(10);<br \/>\n        xnumerator*=denominatortwo;<br \/>\n        xnumeratortwo*=eval('' + denominator.slice(-1));<br \/>\n        xdenominatortwo*=eval('' + denominator.slice(-1));<br \/>\n        varw+=' = (' + xnumerator + ' + ' + xnumeratortwo + ') \/ ' + xdenominatortwo + String.fromCharCode(10);<br \/>\n        varw+=' = ' + eval(eval('' + xnumerator) + eval('' + xnumeratortwo)) + ' \/ ' + xdenominatortwo + String.fromCharCode(10);<br \/>\n      }<br \/>\n    } else if (document.getElementById('ssign').value == '-') {<br \/>\n      if (denominatortwo == denominator.slice(-1)) {<br \/>\n        varw+=' = (' + numerator + ' - ' + numeratortwo + ') \/ ' + denominatortwo + String.fromCharCode(10);<br \/>\n        varw+=' = ' + eval(numerator - numeratortwo) + ' \/ ' + xdenominatortwo + String.fromCharCode(10);<br \/>\n      } else {<br \/>\n        varw+=' = (' + numerator + ' x ' + denominatortwo + ' - ' + numeratortwo + ' x ' + denominator.slice(-1) + ') \/ (' + denominator.slice(-1) + ' x ' + denominatortwo + ')' + String.fromCharCode(10);<br \/>\n        xnumerator*=denominatortwo;<br \/>\n        xnumeratortwo*=eval('' + denominator.slice(-1));<br \/>\n        xdenominatortwo*=eval('' + denominator.slice(-1));<br \/>\n        varw+=' = (' + xnumerator + ' - ' + xnumeratortwo + ') \/ ' + xdenominatortwo + String.fromCharCode(10);<br \/>\n        varw+=' = ' + eval(eval('' + xnumerator) - eval('' + xnumeratortwo)) + ' \/ ' + xdenominatortwo + String.fromCharCode(10);<br \/>\n      }<br \/>\n    } else if (document.getElementById('ssign').value == '\/') {<br \/>\n        varw+=' = (' + numerator + ' \/ ' + denominator.slice(-1) + ') x (' + denominatortwo + ' \/ ' + numeratortwo + ')' + String.fromCharCode(10);<br \/>\n        varw+=' = ' + eval(eval('' + numerator) * eval('' + denominatortwo)) + ' \/ ' + eval(eval('' + denominator.slice(-1)) * eval('' + numeratortwo)) + String.fromCharCode(10);<br \/>\n    } else if (document.getElementById('ssign').value == 'x' || document.getElementById('ssign').value == '*') {<br \/>\n        varw+=' = (' + numerator + ' \/ ' + denominator.slice(-1) + ') x (' + numeratortwo + ' \/ ' + denominatortwo + ')' + String.fromCharCode(10);<br \/>\n        varw+=' = ' + eval(eval('' + numerator) * eval('' + numeratortwo)) + ' \/ ' + eval(eval('' + denominator.slice(-1)) * eval('' + denominatortwo)) + String.fromCharCode(10);<br \/>\n    }<br \/>\n    return outstr + String.fromCharCode(10) + varw + ' = ' + realans + ' ' + String.fromCharCode(10);<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html-GETME\">circular_sectors.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html?btis=My80\">Fractions Game<\/a>.<\/p>\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\/conic-gradient-fraction-game-equations-tutorial\/'>Conic Gradient Fraction Game Equations Tutorial<\/a>.<\/p-->\n<hr>\n<p id='dpcgpt'>Previous relevant <a target=_blank title='Dual Purpose Conic Gradient Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/dual-purpose-conic-gradient-primer-tutorial\/'>Dual Purpose Conic Gradient 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\/HTMLCSS\/circular_sectors.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dual Purpose Conic Gradient Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.jpg\" title=\"Dual Purpose Conic Gradient Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Dual Purpose Conic Gradient Primer Tutorial<\/p><\/div>\n<p>Yes, today, we have a &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html_GETME\">circular_sectors.html<\/a> &#8230;<\/p>\n<ul>\n<li>dual purpose &#8230; as a &#8230;\n<ol>\n<li>local time <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html\" title=\"Click picture\">analogue clock<\/a> (also, <a style=\"cursor:pointer;text-decoration:underline;\" onclick=\"document.getElementById('dacb').innerHTML=String.fromCharCode(60) + 'iframe id=acb style=width:100%;height:900px;  src=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html' + String.fromCharCode(62) + String.fromCharCode(60) + '\/iframe' + String.fromCharCode(62); document.getElementById('sacb').innerHTML=' ... '; location.href='#acb'; \" data-href=\"#acb\">below<\/a>) &#8230; calling on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.html----GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.html----GETME\">analogue_clock.html<\/a> &#8230; or &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_sectors.html?btis=My80\">Fractions Game<\/a><\/li>\n<\/ol>\n<\/li>\n<li><i>ondblclick<\/i> (double click) event &#8230; <i>ondblclick=&#8221; viadb=true; ask(); &#8220;<\/i> &#8230; toggling &#8230;<br \/>\n<code><br \/>\n  var viadb=false;<br \/>\n<br \/>\n  function ask() {<br \/>\n    var ans='';<br \/>\n    if (!viadb) {<br \/>\n    while (('' + ans).indexOf('\/') == -1 && ('' + ans.replace(\/^1$\/g, '1.0')).indexOf('.') == -1) {<br \/>\n      ans=prompt('What fraction of the \"cake\" is coloured?  (eg. 2\/3)', '');<br \/>\n    }<br \/>\n    if (ans == '' + numerator + '\/' + denominator.substring(1) || Math.abs(eval('' + numerator + '\/' + denominator.substring(1)) - eval('' + ans)) &lt; 0.005) {<br \/>\n      score++;<br \/>\n      goes++;<br \/>\n      alert('Well done!  This makes your Fractions Game score to be ' + score + ' of ' + goes);<br \/>\n    } else {<br \/>\n      goes++;<br \/>\n      alert('Sorry ... the fraction you wanted is ' + numerator + '\/' + denominator.substring(1) + ' leaving your Fractions Game score as ' + score + ' of ' + goes);<br \/>\n    }<br \/>\n    }<br \/>\n    numerator='' + eval(1 + Math.floor(Math.random() * 7));<br \/>\n    denominator='0';<br \/>\n    while (eval('' + denominator) &lt; eval('' + numerator)) {<br \/>\n     denominator='' + eval(0 + Math.floor(Math.random() * 9));<br \/>\n    }<br \/>\n    if (viadb) {<br \/>\n     if (btoas == '') {<br \/>\n      location.href=document.URL.split('?')[0].split('#')[0] + '?btis=' + encodeURIComponent(btoa('' + numerator + '\/' + denominator));<br \/>\n     } else {<br \/>\n      location.href=document.URL.split('?')[0].split('#')[0]; \/\/ + '?btis=' + encodeURIComponent(btoa('' + numerator + '\/' + denominator));<br \/>\n     }<br \/>\n    }<br \/>\n    viadb=false;<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; control &#8230; using &#8230;<\/li>\n<li>CSS conic-gradient background &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n  #atend {<br \/>\n  background: conic-gradient(rgba(255,0,0,0.5) 0deg, rgba(0,0,255,0.5) 30deg, rgba(0,255,0,0.5) 60deg, rgba(255,192,203,0.5) 90deg, rgba(0,0,139,0.5) 120deg, rgba(144,238,144,0.5) 150deg, rgba(255,165,0,0.5) 180deg, rgba(173,216,230,0.5) 210deg, rgba(2,48,32,0.5) 240deg, rgba(255,0,255,0.5) 270deg, rgba(0,100,100,0.5) 300deg, rgba(128,128,0,0.5) 330deg);<br \/>\n  }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/li>\n<\/ul>\n<p> &#8230; scenario, building on what we learnt when we presented <a title='CSS Gradient Creations Conic Tutorial' href='#cssgcct'>CSS Gradient Creations Conic Tutorial<\/a> a little while back<span id=sacb>.<\/span><\/p>\n<div id='dacb'><\/div>\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\/dual-purpose-conic-gradient-primer-tutorial\/'>Dual Purpose Conic Gradient Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssgcct'>Previous relevant <a target=_blank title='CSS Gradient Creations Conic Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-conic-tutorial\/'>CSS Gradient Creations Conic Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Gradient Creations Conic Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations_conic.jpg\" title=\"CSS Gradient Creations Conic Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Gradient Creations Conic Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title=\"CSS Conic Gradient Primer Tutorial\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-conic-gradient-primer-tutorial\/\">CSS Conic Gradient Primer Tutorial<\/a> set us to thinking about integrating these Conic Gradients into our &#8220;Gradient Central&#8221; web application where you can create your own gradients which we last talked about with <a title='CSS Gradient Creations Mobile Width Tutorial' href='#cssgcmwt'>CSS Gradient Creations Mobile Width Tutorial<\/a>.<\/p>\n<p>These gradients &#8230;<\/p>\n<ul>\n<li>linear-gradient<\/li>\n<li>radial-gradient<\/li>\n<li>conic-gradient<\/li>\n<\/ul>\n<p> &#8230; are helping our webpage designs allow for colour gradation and subtlety we appreciate around here.  They can often effectively fill in for that &#8220;graphic flair&#8221; not all of us possess, in our webpage designs.<\/p>\n<p>What came up that was a bit new to us with this <a target=_blank title='CSS Conic Gradient info from W3schools' href='https:\/\/www.w3schools.com\/cssref\/func_conic-gradient.php'>Conic Gradient<\/a> integration?  <font size=1>And yes, most tutorials bring up <i>something<\/i> new!<\/font>  Input element textboxes can be made inoperable by the setting of the Javascript DOM <i>readOnly<\/i> attribute, as with (Javascript code like) &#8230;<\/p>\n<p><code><br \/>\n   document.getElementById('mytextbox').readOnly=<i>true<\/i>;  \/\/ and to make readable again use <i>false<\/i> instead<br \/>\n<\/code> <\/p>\n<p> &#8230; but we found we couldn&#8217;t do that with select (ie. dropdown) elements.  <a target=_blank href='https:\/\/stackoverflow.com\/questions\/368813\/html-form-readonly-select-tag-input' title='Useful link, thanks'>This useful link<\/a>, thanks, put us right in our thinking to do this when <i>conic-gradient<\/i> selected &#8230;<\/p>\n<p><code><br \/>\n    document.getElementById('sdirection').disabled=<i>true<\/i>;  \/\/ and to make enabled again use <i>false<\/i> instead<br \/>\n<\/code> <\/p>\n<p> &#8230; because a <i>conic-gradient<\/i> direction value is much less nuanced than a <i>linear-gradient<\/i> direction value.<\/p>\n<p>Feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html-----GETME\" title=\"gradient_creations.htm\">this changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html-----GETME\" title=\"gradient_creations.htm\">gradient_creations.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.htm\" title=\"Click picture\">&#8220;Gradient Creations&#8221; live run<\/a> link, or try below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.htm\" style=\"width:100%;height:920px;\"><\/iframe><\/p>\n<p><i><b>Stop Press<\/b><\/i><\/p>\n<p>Today&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-conic-tutorial\/' title='CSS Gradient Creations Conic Tutorial'>CSS Gradient Creations Conic Tutorial<\/a>&#8216;s integration of yesterday&#8217;s  <a target=_blank title='CSS Conic Gradient Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-conic-gradient-primer-tutorial'>CSS Conic Gradient Primer Tutorial<\/a>&#8216;s work was missing some of the features of that latter <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/congrad.html\">web application<\/a>, involving its textarea flexibility to add user additional dynamic CSS into the mix.  No problems any longer, as we make use of the work we&#8217;ll talk about tomorrow, integrating into <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-conic-tutorial\/' title='CSS Gradient Creations Conic Tutorial'>CSS Gradient Creations Conic Tutorial<\/a>&#8216;s <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.htm'>web application<\/a> one new line of code &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript' src='\/divceditin.js?todowith=tdlook&after=tdcss&blurb=%2F*%20More%20gradient%20CSS%20styling%20can%20go%20here%20via%20a%20click%20...%20eg.%20border-radius%3A%2050%25%3B%20%20*%2F'&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; to offer that possibility.  That will outline our use of element type div contenteditable=true with an input type=text value=&#8221;&#8221; placeholder=[Some Blurb] readonly prototype tool enabling users to add in their own dynamic CSS in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html------GETME\" title=\"gradient_creations.htm\">the tweaked<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html------GETME\" title=\"gradient_creations.htm\">gradient_creations.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.htm\" title=\"Click picture\">&#8220;Gradient Creations&#8221; live run<\/a> link, as also shown above this &#8230;<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_css_content_collection_usage_and_call.gif' title='As you can see here'><\/img><\/p>\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\/css-gradient-creations-conic-tutorial\/'>CSS Gradient Creations Conic Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssgcmwt'>Previous relevant <a target=_blank title='CSS Gradient Creations Mobile Width Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-mobile-width-tutorial\/'>CSS Gradient Creations Mobile Width Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Gradient Creations Mobile Width Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations_width_mobile_viewport.gif\" title=\"CSS Gradient Creations Mobile Width Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Gradient Creations Mobile Width Tutorial<\/p><\/div>\n<p>When it comes to &#8220;width&#8221; (CSS styling) considerations with webpage design on mobile platforms where you are not prepared to &#8220;de-complex-ify&#8221; (if you know what I mean) the webpage contents you can run into the dual issues &#8230;<\/p>\n<ul>\n<li>you want to show HTML elements legibly &#8230; and &#8230;<\/li>\n<li>you also want to show the big picture<\/li>\n<\/ul>\n<p>You see, with yesterday&#8217;s <a title='CSS Gradient Creations Width Makeover Tutorial' href='#cssgcwmt'>CSS Gradient Creations Width Makeover Tutorial<\/a> we did hint when we said &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-width-makeover-tutorial\/'><p>\n&#8230; we saw that it overshot the right hand border on the MacBook Air webpage screen.\n<\/p><\/blockquote>\n<p> &#8230; that the work yesterday was suited more towards your laptop usage rather than mobile phone (and to a less extent mobile tablet) usage.<\/p>\n<p>There is a CSS styling &#8220;tool&#8221; to hand just for this scenario, though, the <a target=_blank title='meta name=viewport information from W3schools' href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp'><i>meta<\/i> name=viewport<\/a> (within &lt;head&gt; &#8230; &lt;\/head&gt; header element, usually) element, ours being, <i>initially<\/i>, for today&#8217;s work &#8230;<\/p>\n<p><code><br \/>\n&lt;meta <i>id=\"myviewport\"<\/i> name=\"viewport\" content=\"width=device-width, <i>initial-scale<\/i>=1, <i>minimum-scale<\/i>=0.1, <i>maximum-scale<\/i>=8, user-scalable=yes\" &gt;<br \/>\n<\/code><\/p>\n<p> &#8230; the &#8220;red rag to a bull&#8221; signs that Javascript might come into it (to allow <i>initially<\/i> become <i>eventually<\/i>) being &#8230;<\/p>\n<ol>\n<li>the <i>id=&#8221;myviewport&#8221;<\/i> unusual attribute for a header element<\/li>\n<li>the big range difference between <i>minimum-scale<\/i> and <i>maximum-scale<\/i> but <i>initial-scale<\/i> being so conventionally valued<\/li>\n<\/ol>\n<p> &#8230; in other words, today &#8230;<\/p>\n<ul>\n<li>we start mobile platform web application <i>&#8220;first few seconds&#8221; of display<\/i> in &#8220;you want to show HTML elements legibly&#8221; mode &#8230; and that <i>&#8220;first few seconds&#8221; of display<\/i> tells us &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>? &#8230; yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Ariel_Knafo-Noam'>Ariel<\/a> &#8230; <font color=blue>we use setTimeout to delay<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;body onload=\"<font color=blue>setTimeout(fixmobilewidth,5000);<\/font> sdih=document.getElementById('sdirection').innerHTML; osdih=document.getElementById('rdirection').innerHTML; checkol();\"&gt;<br \/>\n<\/code><br \/>\n &#8230; five seconds before &#8230;\n<\/li>\n<li>we use Javascript DOM to adjust the meta name=viewport element as per &#8230;<br \/>\n<code><br \/>\n function fixmobilewidth() {<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    var rectt=document.getElementsByTagName('table')[0].getBoundingClientRect();<br \/>\n    document.getElementById(\"myviewport\").setAttribute(\"content\", \"width=device-width, initial-scale=\" + eval(-0.35 + eval('' + (window.orientation == 0 ? window.innerHeight: window.innerWidth)) \/ eval('' + rectt.width)) + \", minimum-scale=0.1, maximum-scale=8, user-scalable=yes\");<br \/>\n  }<br \/>\n }<br \/>\n<\/code><br \/>\n &#8230; &#8220;to show the big picture&#8221; <font size=1>(of what&#8217;s available to the user to work the web application&#8217;s full functionality)<\/font>\n<\/li>\n<\/ul>\n<p>The control of whitespace came into the picture too.  We replace in a lot of the table cells the non-breaking spaces (ie. &amp;nbsp;) as per &#8230;<\/p>\n<p><code><br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c1 value='#ff0000'&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs1 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur='lookup(this.value,this);' type=text id=sc1 placeholder='Colour by name'&gt;&lt;\/input&gt;&amp;nbsp;Opacity:&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o1 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c2 value='#0000ff'&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs2 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur='lookup(this.value,this);' type=text id=sc2 placeholder='Colour by name'&gt;&lt;\/input&gt;&amp;nbsp;Opacity:&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o2 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c3 value='#ffffff'&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs3 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur='lookup(this.value,this);' type=text id=sc3 placeholder='Colour by name'&gt;&lt;\/input&gt;&amp;nbsp;Opacity:&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o3 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c4 value='#ffffff'&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs4 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur='lookup(this.value,this);' type=text id=sc4 placeholder='Colour by name'&gt;&lt;\/input&gt;&amp;nbsp;Opacity:&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o4 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c5 value='#ffffff'&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs5 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur='lookup(this.value,this);' type=text id=sc5 placeholder='Colour by name'&gt;&lt;\/input&gt;&amp;nbsp;Opacity:&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o5 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c6 value='#ffffff'&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs6 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur='lookup(this.value,this);' type=text id=sc6 placeholder='Colour by name'&gt;&lt;\/input&gt;&amp;nbsp;Opacity:&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o6 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c7 value='#ffffff'&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs7 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur='lookup(this.value,this);' type=text id=sc7 placeholder='Colour by name'&gt;&lt;\/input&gt;&amp;nbsp;Opacity:&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o7 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c8 value='#ffffff'&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs8 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&amp;nbsp;&lt;input onblur='lookup(this.value,this);' type=text id=sc8 placeholder='Colour by name'&gt;&lt;\/input&gt;&amp;nbsp;Opacity:&amp;nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o8 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; with line breaks (ie. &lt;br&gt;) as per &#8230;<\/p>\n<p><code><br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c1 value='#ff0000'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs1 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur='lookup(this.value,this);' type=text id=sc1 placeholder='Colour by name'&gt;&lt;\/input&gt;&lt;br&gt;Opacity:&nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o1 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c2 value='#0000ff'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs2 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur='lookup(this.value,this);' type=text id=sc2 placeholder='Colour by name'&gt;&lt;\/input&gt;&lt;br&gt;Opacity:&nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o2 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c3 value='#ffffff'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs3 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur='lookup(this.value,this);' type=text id=sc3 placeholder='Colour by name'&gt;&lt;\/input&gt;&lt;br&gt;Opacity:&nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o3 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c4 value='#ffffff'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs4 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur='lookup(this.value,this);' type=text id=sc4 placeholder='Colour by name'&gt;&lt;\/input&gt;&lt;br&gt;Opacity:&nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o4 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c5 value='#ffffff'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs5 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur='lookup(this.value,this);' type=text id=sc5 placeholder='Colour by name'&gt;&lt;\/input&gt;&lt;br&gt;Opacity:&nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o5 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c6 value='#ffffff'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs6 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur='lookup(this.value,this);' type=text id=sc6 placeholder='Colour by name'&gt;&lt;\/input&gt;&lt;br&gt;Opacity:&nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o6 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c7 value='#ffffff'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs7 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur='lookup(this.value,this);' type=text id=sc7 placeholder='Colour by name'&gt;&lt;\/input&gt;&lt;br&gt;Opacity:&nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o7 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=color id=c8 value='#ffffff'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=text id=hcs8 value='' placeholder='Colour Stop %' style=width:120px;&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onblur='lookup(this.value,this);' type=text id=sc8 placeholder='Colour by name'&gt;&lt;\/input&gt;&lt;br&gt;Opacity:&nbsp;&lt;input onblur=\"changeit();\" onchange=\"changeit();\" type=number id=o8 min=0.0 max=1.0 step=0.1 value='1.0'&gt;&lt;\/input&gt;&lt;\/td&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; to lessen the table cell width innards (at the expense, perhaps, of the table cell innard heights) that might become involved in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html----GETME\" title=\"gradient_creations.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html----GETME\" title=\"gradient_creations.htm\">gradient_creations.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.htm\" title=\"Click picture\">&#8220;Gradient Creations&#8221; live run<\/a> link.<\/p>\n<p>Is the 5 seconds enough on your thinner mobile platform widths?   That&#8217;s debatable, but the &#8220;spreading&#8221; gesture awaits those more accepting mobile phone users!<\/p>\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\/css-gradient-creations-mobile-width-tutorial\/'>CSS Gradient Creations Mobile Width Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssgcwmt'>Previous relevant <a target=_blank title='CSS Gradient Creations Width Makeover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-width-makeover-tutorial\/'>CSS Gradient Creations Width Makeover Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Gradient Creations Width Makeover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_web_application_makeover.gif\" title=\"CSS Gradient Creations Width Makeover Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Gradient Creations Width Makeover Tutorial<\/p><\/div>\n<p>Revisits to a web application, after some time, can bring &#8220;adverse&#8221; categories of reaction to me &#8230;<\/p>\n<ul>\n<li>UX (user experience) Javascript criticism &#8230;<\/li>\n<li>styling CSS annoyance<\/li>\n<\/ul>\n<p> &#8230; and today&#8217;s work, on our &#8220;Gradient Creations&#8221; web application, is as a result of that second &#8220;styling CSS annoyance&#8221;.<\/p>\n<p>Possibly the second is &#8220;less serious&#8221; in our mind, but, nonetheless, invariably we learn (or remember) quite a bit, researching them.<\/p>\n<p>Maybe you can see from today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_web_application_makeover.gif\" title=\"Tutorial picture\">tutorial animated GIF picture<\/a> we categorized the slides into &#8230;<\/p>\n<table>\n<tr>\n<th>Slide &#8230;<\/th>\n<th>&#8230; with our commentary regarding <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html---GETME\" title=\"gradient_creations.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html---GETME\" title=\"gradient_creations.htm\">gradient_creations.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.htm\" title=\"Click picture\">&#8220;Gradient Creations&#8221; live run<\/a> link<\/th>\n<\/tr>\n<tr>\n<td>The problem &#8230;<\/td>\n<td>At 100% zoom level with the Google Chrome browser pointing at the previous &#8220;Gradient Creations&#8221; web application incarnation we saw that it overshot the right hand border on the MacBook Air webpage screen.<\/td>\n<\/tr>\n<tr>\n<td>The culprit &#8230;<\/td>\n<td>Looking at the web page in Crome&#8217;s web inspector we identify the &#8220;Colour Name&#8221; textboxes (whose &#8220;id&#8221; starts with &#8220;sc&#8221; (as we mention later, to our advantage)) as being too wide and to lessen that width could improve the aesthetics.<\/td>\n<\/tr>\n<tr>\n<td>The pathway &#8230;<\/td>\n<td>\n<ol>\n<li><font size=1><a target=_blank title='Google search, thanks' href='https:\/\/www.google.com\/search?q=css+for+input+id+starts+with+s&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=css+for+input+id+starts+with+s&#038;aqs=chrome..69i57j33i22i29i30l2.9642j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>This search<\/a>, thanks, got us to<\/font> <a target=_blank href='https:\/\/stackoverflow.com\/questions\/11496645\/how-to-get-css-to-select-id-that-begins-with-a-string-not-in-javascript' title='html - How to get CSS to select ID that begins with a string (not in Javascript)? - Stack Overflow'>html &#8211; How to get CSS to select ID that begins with a string (not in Javascript)? &#8211; Stack Overflow<\/a>, thanks, which taught us that, yes, &#8220;regex&#8221; is a friend to CSS selectors &#8230; as well as &#8230;<\/li>\n<li><font size=1><a target=_blank title='Google search, thanks' href='https:\/\/www.google.com\/search?q=css+10%25+of+screen+width&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=css+10%25+of+screen+width&#038;aqs=chrome..69i57j33i22i29i30l9.8858j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>This search<\/a>, thanks, got us to<\/font> <a target=_blank href='https:\/\/stackoverflow.com\/questions\/10075524\/sizing-div-based-on-window-width' title='css - sizing div based on window width - Stack Overflow'>css &#8211; sizing div based on window width &#8211; Stack Overflow<\/a> which taught us (and reminded us) that the CSS width unit &#8220;vw&#8221; could be used like a percentage of screen width, our preferred expression of width, since we knew how many cells we wanted to cater for across the webpage, ahead of time, and so we picked &#8220;the conservative&#8221; &#8220;8vw&#8221; as this improved [id^=sc] selector improvement.<\/li>\n<\/ol>\n<\/td>\n<\/tr>\n<tr>\n<td>The intervention &#8230;<\/td>\n<td>Within the webpage&#8217;s &lt;head&gt; &#8230; &lt;\/head&gt; section we add &#8230;<code><br \/>\n&lt;style&gt;<br \/>\n  [id^=sc] {<br \/>\n    width: 8vw;<br \/>\n  }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/td>\n<\/tr>\n<tr>\n<td>The improvement &#8230;<\/td>\n<td>The test shows improved aesthetics.  Yay!<\/td>\n<\/tr>\n<\/table>\n<p>By the way, further reading on this topic (and web application) is available with <a title='CSS Gradient Creations Sharing Tutorial' href='#cssgcst'>CSS Gradient Creations Sharing Tutorial<\/a> below.<\/p>\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\/css-gradient-creations-sharing-tutorial\/'>CSS Gradient Creations Width Makeover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssgcst'>Previous relevant <a target=_blank title='CSS Gradient Creations Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-sharing-tutorial\/'>CSS Gradient Creations Sharing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Gradient Creations Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations_more.jpg\" title=\"CSS Gradient Creations Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Gradient Creations Sharing Tutorial<\/p><\/div>\n<p>Turning a web application like yesterday&#8217;s <a title='CSS Gradient Creations Tutorial' href='#cssgct'>CSS Gradient Creations Tutorial<\/a> &#8220;Gradient Creations&#8221; one into a web application where you can share your discoveries is an exercise in both &#8230;<\/p>\n<ul>\n<li>sharing and collaboration &#8230; as well as &#8230;<\/li>\n<li>accountability<\/li>\n<\/ul>\n<p> &#8230; opening up something that used to be just for private use only, to being one that is open to the rest of the online wooooorrrrllllddd.<\/p>\n<p>As well as this new email and SMS sharing capability we add another <i><a target=_blank title=Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true<\/i> incursion into the mix as another selling product for our web application.  Just quietly, perhaps you can use it as a &#8220;digital card&#8221; creator, as we offer to augment &#8230;<\/p>\n<ul>\n<li>the table cell with a gradient <i>background<\/i> &#8230; with the idea that the user &#8230;<\/li>\n<li>can write their wording (of say, a card) in the <i>foreground<\/i> of that same table cell<\/li>\n<\/ul>\n<p> &#8230; and then allow the user to append a space to their Javascript prompt window answering of the emailee address to indicate to the web application that the email should just be that table cell content.  On the way a collaboration phase is possible by tweaking the HTML &#8230;<\/p>\n<p><code><br \/>\n   xform.append('body',(document.body.outerHTML.split('&lt;\/form&gt;')[0] + '&lt;\/form&gt;&lt;\/body&gt;').replace(\/NONE\\;\/g, 'inline-block;').replace('&lt;div ','&lt;input type=text style=width:50%; ').replace('&gt;background:', ' value=\"').replace('&lt;\/div&gt;', '\"&gt;&lt;\/input&gt;').replace('\"&gt;&lt;\/textarea&gt;', '\"&gt;' + document.getElementById('tdlook').innerHTML.replace(\/\\&lt;br\\&gt;\/g,String.fromCharCode(10)) + '&lt;\/textarea&gt;'));<br \/>\n<\/code><\/p>\n<p> &#8230; to work with a form method=GET way for the emailee to adjust the gradient CSS to send off a return email (or one to a third party) in response to that first email.  No collaboration here, but we also allow for SMS communications too.<\/p>\n<p>Also, along the way, we allow for a colour to be defined by its name, if it makes the web application&#8217;s colour array list.<\/p>\n<p>You can try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html-GETME\" title=\"gradient_creations.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html-GETME\" title=\"gradient_creations.htm\">gradient_creations.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html\" title=\"Click picture\">live run<\/a> link, to see what we mean.<\/p>\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\/css-gradient-creations-sharing-tutorial\/'>CSS Gradient Creations Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssgct'>Previous relevant <a target=_blank title='CSS Gradient Creations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-tutorial\/'>CSS Gradient Creations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Gradient Creations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradientcreations.jpg\" title=\"CSS Gradient Creations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Gradient Creations Tutorial<\/p><\/div>\n<p>The great CSS background &#8220;gradient&#8221; functionalities can come in four forms, those being &#8230;<\/p>\n<ul>\n<li>linear gradient (and repeating linear gradient)<\/li>\n<li>radial gradient (and repeating radial gradient)<\/li>\n<\/ul>\n<p> &#8230; as a means to add background interest, even to the point where the background can have some (different) transparency (level) compared to the foreground, <font color=blue>as per<\/font> example CSS like &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\nhtml::before {<br \/>\n background: <font color=blue>linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),<\/font>URL('\/\/www.rjmprogramming.com.au\/MyBusinessUnidad\/Welcome_files\/logo.jpg') repeat;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>With tutorials like <a title='CSS Repeating Radial Gradients Primer Tutorial' href='#cssrrgpt'>CSS Repeating Radial Gradients Primer Tutorial<\/a> we allowed you to create some gradients, but we wanted a more detailed approach that was generic in its approach and left you with some CSS of use, which is often not the go with many other (albeit useful and inspiring) websites on the net.<\/p>\n<p>There are a whole range of what you might call &#8220;directional&#8221; nuances you can apply to your gradients.  There is opacity to allow for.  There are &#8220;hard colour stops&#8221; you can apply.  For linear gradients you can apply a variable angle.  For radial gradients there are positional nuances that can be applied.<\/p>\n<p>And then there are the colours.  We are not sure of the limits, but we allow for up to eight colours.  Enough to simulate the seven colours of the rainbow we go for with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradientcreations.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> arrangement whereby it tweaked with us that the HTML input type=color elements are all well and good but we needed to allow our CSS be editable by nesting into an HTML div contenteditable=true elements that can be tweaked for exact rgb or rgba colour definitions (<a target=_blank title='Rainbow information from Wikipedia, thanks' href='https:\/\/simple.wikipedia.org\/wiki\/Rainbow'>thanks, Wikipedia<\/a>), as we could look up for the purposes of displaying a rainbow coloured gradient background (we hope you like)!<\/p>\n<p>Or see a repeating radial gradient example below &#8230;<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rrgc.jpg\" title=\"repeating radial gradient\" style=\"width:100%;\"><\/img><\/p>\n<p>So feel free to try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html_GETME\" title=\"gradient_creations.html\">gradient_creations.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html\" title=\"Click picture\">live run<\/a> link, to see what we mean.<\/p>\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\/new-css-repeating-radial-gradients-primer-tutorial\/'>New CSS Repeating Radial Gradients Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssrrgpt'>Previous relevant <a target=_blank title='CSS Repeating Radial Gradients Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/\"css-gradient-creations-tutorial\/'>&#8220;CSS Gradient Creations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/radial_gradients.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Radial Gradients Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/radial_gradients.jpg\" title=\"CSS Radial Gradients Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Repeating Radial Gradients Primer Tutorial<\/p><\/div>\n<p>Way back when with <a title='HTML\/Javascript Canvas Rainbow Primer Tutorial' href='#html\/jcrpt'>HTML\/Javascript Canvas Rainbow Primer Tutorial<\/a> we talked about CSS <a target=_blank title='Linear gradients information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/linear-gradient'>linear gradients<\/a> and radial gradients in the one blog posting, but ever since then, it has so much more that linear gradients have been useful to us here at this blog.<\/p>\n<p>Today, though, we turn a bit of attention to radial gradients, specifically <a target=_blank title='Repeated radial gradients information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/repeating-radial-gradient'>repeated radial gradients<\/a>.<\/p>\n<p>We&#8217;ve got a simple web application to play around with them in terms of &#8230;<\/p>\n<ul>\n<li>ellipse versus circle<\/li>\n<li>coloured versus black and white<\/li>\n<li>extent keyword (closest-corner, closest-side, farthest-corner, farthest-side)<\/li>\n<\/ul>\n<p>Below is one example of the CSS &#8230;<\/p>\n<p><code><br \/>\n.circlefarthest-corner {<br \/>\n  background: repeating-radial-gradient(circle farthest-corner,<br \/>\n      red, black 5%, blue 5%, green 10%);<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Feel free to play away at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/radial_gradients.html\" title=\"Click picture\">live run<\/a> that has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/radial_gradients.html_GETME\" title=\"radial_gradients.html\">radial_gradients.html<\/a> downloadable underlying HTML and CSS (and event logic Javascript that changes the HTML div element className property, to suit).<\/p>\n<hr>\n<p id='html\/jcrpt'>Previous relevant <a target=_blank title='HTML\/Javascript Canvas Rainbow Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-canvas-rainbow-primer-tutorial\/'>HTML\/Javascript Canvas Rainbow 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\/HTMLCSS\/Canvas\/canvasrainbow.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Rainbow Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/canvasrainbow.jpg\" title=\"HTML\/Javascript Canvas Rainbow Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Rainbow Primer Tutorial<\/p><\/div>\n<p>The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n<p>In today&#8217;s tutorial we touch on a couple of the two dimensional Javascript functions to draw a rectangle or arc, but in the two dimensional context, canvas HTML elements can be used to draw text, lines, boxes and circles as well.  We also touch on two functions to create a <a target=_blank title='HTML canvas linear gradient' href='http:\/\/www.w3schools.com\/tags\/canvas_createlineargradient.asp'>linear<\/a> or <a target=_blank title='HTML canvas radial gradient' href='http:\/\/www.w3schools.com\/tags\/canvas_createradialgradient.asp'>radial<\/a> gradient to the fillStyle and\/or strokeStyle of your HTML element placed onto the canvas.<\/p>\n<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/canvasrainbow.html-GETME' title='canvasrainbow.html'>canvasrainbow.html<\/a>\n<\/p>\n<p>Here is a new link to some downloadable HTML programming source code explaining changes made (from <a target=_blank title='HTML\/Javascript Canvas Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5539'>HTML\/Javascript Canvas Primer Tutorial<\/a>)  <a target=_blank title='canvasrainbow.html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/canvasrainbow.html-GETME\">here<\/a>.<\/p>\n<p>You&#8217;ll notice heavy use of the Javascript <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> function.<\/p>\n<p>We hope you enjoy this tutorial as a rainbow coloured <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/canvasrainbow.html\">live run<\/a>.<\/p>\n<p>Yes &#8230; you&#8217;ve reached the end &#8230; have a top supportive rainbow coloured day!<\/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='#d5747' onclick='var dv=document.getElementById(\"d5747\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5747' 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='#d37372' onclick='var dv=document.getElementById(\"d37372\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37372' 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='#d49892' onclick='var dv=document.getElementById(\"d49892\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49892' 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='#d49902' onclick='var dv=document.getElementById(\"d49902\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49902' 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='#d54253' onclick='var dv=document.getElementById(\"d54253\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/unit\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54253' 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='#d54263' onclick='var dv=document.getElementById(\"d54263\"); 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='d54263' 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='#d57713' onclick='var dv=document.getElementById(\"d57713\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57713' 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='#d58838' onclick='var dv=document.getElementById(\"d58838\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/conic-gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58838' 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='#d58851' onclick='var dv=document.getElementById(\"d58851\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/equation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58851' 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='#d58858' onclick='var dv=document.getElementById(\"d58858\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58858' 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='#d58864' onclick='var dv=document.getElementById(\"d58864\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dimensions\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58864' 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='#d58873' onclick='var dv=document.getElementById(\"d58873\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58873' 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='#d58884' onclick='var dv=document.getElementById(\"d58884\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/operator\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58884' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Onto the SVG &#8220;cake&#8221; display functionality added with yesterday&#8217;s SVG and Gradient Fraction Game Tutorial into our Fractions Game web application, we&#8217;re adding &#8230; SVG circle &#8220;cakes&#8221; that can be rotated &#8230; but not in the SVG &#8230; rather in &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/svg-and-gradient-fraction-game-operators-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,14,15,37],"tags":[3084,126,127,208,1933,4165,281,322,2507,2365,392,1518,459,4302,3148,2258,579,630,652,2020,4303,752,795,4308,4309,2269,2255,1954,997,4304,3665,2526,2132,1071,1072,4305,1226,1298,1319,3873,1899,2257],"class_list":["post-58884","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-analogue-clock","tag-background","tag-background-image","tag-circle","tag-clock","tag-conic-gradient","tag-css","tag-device","tag-dimension","tag-dimensions","tag-equation","tag-fraction","tag-fractions","tag-fractions-game","tag-gradient","tag-height","tag-htmlcss","tag-ipad","tag-javascript","tag-linear-gradient","tag-lowest-common-denominator","tag-mathematics","tag-mobile","tag-modulo","tag-modulus","tag-operator","tag-percentage","tag-power","tag-programming","tag-proprtional","tag-px","tag-radial-gradient","tag-rectangle","tag-rotate","tag-rotation","tag-stop-colour","tag-svg","tag-transform","tag-tutorial","tag-unit","tag-units","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58884"}],"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=58884"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58884\/revisions"}],"predecessor-version":[{"id":58890,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58884\/revisions\/58890"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=58884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=58884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=58884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}