Drag and Drop Peers External Javascript Tutorial

Drag and Drop Peers External Javascript Tutorial

There would have to be lots of provisos, but wouldn’t it be good regarding yesterday’s Drag and Drop Peers Primer Tutorial‘s Drag and Drop supervisor web application, for mobile, if …

Some form of external Javascript tool could help out and improve on the dropdown with size attribute greater than one not showing option elements up front regarding their rendered display

? We think so. To our mind, the provisos are …

• prove that the size attribute greater than one rendering not being honoured by the web browser (which have always been regarding mobile platforms, in our experience) … we can do this via getBoundingClientRect check of rendered dropdown element height …
• prove that dropdown multiple attribute not present …
• map a clear dropdown onchange event logic to a new onclick one, possible, we think, if …
  1. down from the dropdown … via <br> …
  2. with the dropdown width (and getBoundingClientRect height) … we add …
  3. button elements whose value attribute, if not nothing, matches that of a corresponding dropdown option subelement … and …
  4. button element innerHTML matches that of a corresponding dropdown option subelement

We applied all these checks into some proof of concept selectbuttons.js external Javascript logic …


// selectbuttons.js
// RJM Programming
// November, 2025
// Where apt help out select size=>1 not multiple not with code complexity scenarios with buttons, especially for mobile platforms
// Thanks to https://www.google.com/search?q=can+button+element+still+get+given+a+value+attribute&rlz=1C5OZZY_en&oq=can+button+element+still+get+given+a+value+attribute&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRiPAtIBCTE0MDM0ajBqNKgCALACAQ&sourceid=chrome&ie=UTF-8#cobssid=s

function selbutcheck() {
var thispartoh='', izs=1, rectsis=null, bheight=0, bwidth=0, oncis='', optswillbe=[], iow=0, bihfrom='', bihto='';
var selsarr=document.getElementsByTagName('select');
for (var iselr=0; iselr<selsarr.length; iselr++) {
thispartoh=selsarr[iselr].outerHTML.split('>')[0];
if (thispartoh.indexOf(' multiple') == -1) {
if (thispartoh.indexOf(' size="') != -1 || thispartoh.indexOf(" size='") != -1) {
izs=eval(thispartoh.split(' size=')[1].substring(1).split(thispartoh.split(' size=')[1].substring(0,1))[0]);
if (izs > 1) {
rectsis=selsarr[iselr].getBoundingClientRect();
bheight=Math.floor(eval('' + rectsis.height) / eval('' + eval('' + selsarr[iselr].size)))
bwidth=eval('' + rectsis.width);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (eval('' + rectsis.height) < 33) {
bheight=eval('' + rectsis.height);
if (thispartoh.indexOf(' onchange="') != -1 || thispartoh.indexOf(" onchange='") != -1) {
oncis=' onclick=' + thispartoh.split(' onchange=')[1].substring(0,1) + thispartoh.split(' onchange=')[1].substring(1).split(thispartoh.split(' onchange=')[1].substring(0,1))[0] + thispartoh.split(' onchange=')[1].substring(0,1) + ' ';
optswillbe=selsarr[iselr].innerHTML.split(selsarr[iselr].innerHTML.split('</option>')[0] + '</option>')[1].split('</option>');
bihfrom=selsarr[iselr].outerHTML;
bihto=selsarr[iselr].outerHTML;
for (iow=0; iow<optswillbe.length; iow++) {
if (optswillbe[iow].trim() != '') {
bihto+='<br><button style="width:' + bwidth + 'px;height:' + bheight + 'px;" ' + oncis + ' value="' + optswillbe[iow].split(' value="')[1].split('"')[0] + '">' + optswillbe[iow].split('>')[1] + '</button>';
}
}
if (bihto != bihfrom) {
document.body.innerHTML=document.body.innerHTML.replace(bihfrom, bihto);
}
}
}
}
}
}
}
}
}

setTimeout(selbutcheck, 5000);


… to a changed experimental_peers_drag_and_drop.php PHP Drag and Drop supervisor web application you can also try below, and we were happy with the result applied to yesterday’s starting logic. We even left the dropdown in for mobile platforms, and it was our view that made it “sort of” become better than non-mobile for how we perceived our user experience to be. Either dropdown or buttons could achieve their aim on mobile platforms.

Previous relevant Drag and Drop Peers Primer Tutorial is shown below.

Drag and Drop Peers Primer Tutorial

We’ve decided to gather the Drag and Drop games into a “peerage” of web applications so that one central supervisory web application can point the user into the correct direction to find them, or one of them, as per the PHP glob and “clone” based …


<?php
// experimental_peers_drag_and_drop.php
// RJM Programming
// November, 2025
// Make peers of all the experimental drag and drop logic based web applications

$sofar="";
$listis='';
foreach (glob(dirname(__FILE__) . DIRECTORY_SEPARATOR . '*.php') as $filename) {
$contis=file_get_contents($filename);
if (strpos($contis, "templa" . "tegame=file_get_contents('./experimental_drag_and_drop.htm") !== false) {
if (strpos($filename, "_new_") === false && strpos($sofar, str_replace('_','',str_replace($_SERVER['DOCUMENT_ROOT'], '', $filename))) === false) {
if ($listis == '') {
$listis.=str_replace($_SERVER['DOCUMENT_ROOT'], '', $filename);
} else {
$listis.=',' . str_replace($_SERVER['DOCUMENT_ROOT'], '', $filename);
}
$sofar.=str_replace('_','',str_replace($_SERVER['DOCUMENT_ROOT'], '', $filename));
}
}
}
$larris=explode(',', $listis);
$htmlis='<html><head><title>Experimental Drag and Drop Peers - RJM Programming - November, 2025</title></head><body><h1>Experimental Drag and Drop Peers</h1><h3>RJM Programming - November, 2025</h3><select onchange="if (this.value.length != 0) { window.open(this.value,' . "'_blank','top=120,left=510,width=940,height=660'" . '); }" id=mysel size=' . (3 + sizeof($larris)) . '><option value="">Optionally select an Experimental Drag and Drop web application, to try, below ...</option><option value="/HTMLCSS/chess_game.php">Chess game</option><option value="/HTMLCSS/gradual_reveal_country_game.htm">Reveal country game</option></select></body></html>';

if ($listis != '') {
for ($i=0; $i<sizeof($larris); $i++) {
$htmlis=str_replace('</select>', '<option value="' . $larris[$i] . '">' . strtoupper(substr(str_replace('_',' ',explode('.', basename($larris[$i]))[0]),0,1)) . substr(str_replace('_',' ',explode('.', basename($larris[$i]))[0]),1) . "</option></select>", $htmlis);
}
echo $htmlis;
}

?>


… as a proof of concept Drag and Drop supervisor web application you can also try below …

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.