Tag Archives: CSS

CSS Display Inline-Block Contenteditable Tutorial

Posted on by

Yesterday’s CSS Display Inline-Block Primer Tutorial got us curious about other CSS “*” selector thoughts, and there is no way we’ll think of all the possibilities, so why not open it up to the user to control? We’ve discussed before the great … (element attribute)

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

CSS Display Inline-Block Primer Tutorial

Posted on by

The CSS property “display” is enormously useful for us here at RJM programming. The way we most commonly use it is in the form (for element ID=eleid) … <style> #eleid { display: none; } </style> … to make element “eleid” be invisible (and whitespace it would have occupied is squished up, as distinct from “#eleid { visibility: hidden; }” … as you can see that is useful. Now, putting that element “eleid” back to being visible can be achieved via … For “block” elements (eg. “table”, “iframe”) For “inline” elements (eg. :”span”, “a”) CSS <style> #eleid { display: block; } </style> <style> #eleid { display: inline-block; } </style> Javascript document.getElementById(‘eleid’).style.display=’block’; document.getElementById(‘eleid’).style.display=’inline-block’; … but the other day we stumbled on an incredible by-product of this topic. We accidentally did … <style> * { display: inline-block; } </style> … and we were gobsmacked by the result. So today we’ve written a “proof of concept” web application for you to see for yourself how display_inline_block_example_combobox.htm‘s “proof of concept” web application works … If this was interesting you may be interested in this too.

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

Google Chart Histogram Chart Pie Chart Tooltips Email Tutorial

Posted on by

So far, in our latest blog posting thread, regarding our integrations amongst … Dynamic Pollster Histogram Chart Pie Chart … we’ve honed in on the one major advance, “tooltips within the Pie Chart”, and it’s been a bit of a trip to make the execution happen for the active user using the web application combinations. But what if we want to share this Google Chart reporting? After all, if you could share that Pie Chart, and it had the tooltips, that would be good, wouldn’t it? But that “Email Snapshot” link down the bottom of the Pie Chart has only worked for non-tooltip Pie Charts up to Google Chart Histogram Chart Pie Chart Dynamic Pollster Tutorial, because the data size of the tooltip data precluded us from using its email client “a” “mailto” link methodologies. We decide to allow that same Pie Chart “a” link to work for tooltip scenarios (in a changed pie_chart.php) if we can dynamically add event logics for … onmouseover … to collect a “to” email address, as necessary, for non-mobile users … if (document.getElementById(‘remail’).outerHTML.indexOf(‘ onmouseover=’) == -1) { document.getElementById(‘remail’).onmouseover = function(event) { var to_is='<?php global $defto; echo $defto; ?>’; if (document.getElementById(‘remail’).href.replace(‘fillin.email@address’,”).indexOf(‘@’) == -1) { while (to_is == ”) { to_is=prompt(‘Email to?’, ”); if (to_is == null) { to_is=’ ‘; } } if (to_is.indexOf(‘@’) != -1) { var rstis=”; if (document.getElementById(‘remail’).href.indexOf(‘?’) != -1) { rstis=’?’ + document.getElementById(‘remail’).href.split(‘?’)[1]; } else if (document.getElementById(‘remail’).href.indexOf(‘&’) != -1) { rstis=document.getElementById(‘remail’).href.replace(document.getElementById(‘remail’).href.split(‘&’)[0], ”); } document.getElementById(‘remail’).href=document.getElementById(‘remail’).href.split(‘:’)[0] + ‘:’ + to_is + rstis; document.getElementById(‘remail’).click(); } } else { to_is=document.getElementById(‘remail’).href.split(‘:’)[1].split(‘?’)[0].split(‘&’)[0]; } }; } ontouchstart … to collect a “to” email address, as necessary, for mobile users (codewise very similar to above) onclick … if (document.getElementById(‘remail’).outerHTML.indexOf(‘ onclick=’) == -1) { document.getElementById(‘remail’).onclick = function(event) { var to_is='<?php global $defto; echo $defto; ?>’; if (document.getElementById(‘remail’).href.replace(‘fillin.email@address’,”).indexOf(‘@’) == -1) { while (to_is == ”) { to_is=prompt(‘Email to?’, ”); if (to_is == null) { to_is=’ ‘; } } if (to_is.indexOf(‘@’) != -1) { var rstis=”; if (document.getElementById(‘remail’).href.indexOf(‘?’) != -1) { rstis=’?’ + document.getElementById(‘remail’).href.split(‘?’)[1]; } else if (document.getElementById(‘remail’).href.indexOf(‘&’) != -1) { rstis=document.getElementById(‘remail’).href.replace(document.getElementById(‘remail’).href.split(‘&’)[0], ”); } document.getElementById(‘remail’).href=document.getElementById(‘remail’).href.split(‘:’)[0] + ‘:’ + to_is + rstis; document.getElementById(‘remail’).click(); } } else { to_is=document.getElementById(‘remail’).href.split(‘:’)[1].split(‘?’)[0].split(‘&’)[0]; } if (tdhuhta != ”) { document.getElementById(‘remail’).setAttribute(‘data-data’, encodeURIComponent(tdhuhta)); } if (to_is.indexOf(‘@’) != -1) { var zhr = new XMLHttpRequest(); var zform=new FormData(); zform.append(‘to’, to_is); zform.append(‘subj’, ‘My Big Pie Chart’); var xtdhuhta=”<body><form target=_blank id=mypieform action=’https://www.rjmprogramming.com.au/PHP/PieChart/pie_chart.php’ method=’POST’><input type=hidden name=title value='<?php global $GETtitle; echo str_replace(‘+’,’ ‘,urldecode($GETtitle)); ?>’ id=mypietitle></input><input type=hidden … Continue reading →

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