Tabular Single Row Emoji Sharing Menu Tutorial
Onto yesterday’s Tabular Single Row YouTube API Radio Play Textbox Tutorial, today, we are adding …
- to that slivery left hand table cell … remaining slivery because what we are adding is what we like to call …
- “emoji buttons” related to Sharing functionality … regarding …
- Email 📧
- SMS 📟
- Save 💾
… hooking into the Recall functionality set up when textareas got those additional “smarts” a few days ago.
This happens in …
- the modified stop_start_youtube.html YouTube API caller … supervised by the top level …
- changed swipe_media.html Tabular Single Row Media Gallery … helped out by …
- ytaudioonly.js external Javascript helper
Previous relevant Tabular Single Row YouTube API Radio Play Textbox Tutorial is shown below.
Tabular Single Row YouTube API Radio Play Textbox Tutorial
Apart from yesterday’s Tabular Single Row YouTube API Radio Play Tutorial‘s mainly HTML input type=checkbox means by which the user could control their YouTube video “Radio play” modes of use, there was one more aspect to user control we wanted to offer, that being to …
allow user to change a "Radio playlist" member in real time by changing the textboxes to the right of the individual checkboxes, primarily to enter in their own YouTube 11 character video identifier
… and have the software detect this event programmatically and update various aspects of that “Radio play” scenario.
This means, now, we can publish a more complete Javascript interventional snippet of code of relevance to yesterday’s and today’s work below …
function playingvideo() {
var mytos='', onethous=1000;
sparedur=-1;
beenbefore=true;
if (('' + parent.document.URL + 's').replace(/\#https/g,'') != ('' + parent.document.URL + 's')) {
//setTimeout(playingvideo, onethous);
var xvcen='';
if (eval('' + duration) <= 0) {
try {
duration='' + event.target.getDuration();
parent.document.getElementById('myh1').innerHTML='' + event.target.getVideoData().title;
setTimeout(function(){
parent.document.getElementById('youtube_duration').value='' + parent.document.getElementById('j' + ivid).value; // duration
}, 2000);
onethous=2500;
if (parent.document.getElementById('mytopspan')) { // && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
mytos=parent.document.getElementById('mytopspan').innerHTML;
if (parent.document.getElementById('mytopspan').innerHTML.indexOf(' unmute ') == -1) {
if (('' + top.document.URL).indexOf('isradio=') != -1 && ('' + top.document.URL).indexOf('audioyoutube=') != -1 && nextvidi == 1) {
parent.document.getElementById('mytopspan').innerHTML='<font color=red>Please unmute within 30 seconds ... </font>' + mytos;
setTimeout(function(){
parent.document.getElementById('mytopspan').innerHTML=parent.document.getElementById('mytopspan').innerHTML.replace(' within 30 seconds ', ' as you require ').replace(' color="red"', ' color="blue"');
}, 30000);
} else {
parent.document.getElementById('mytopspan').innerHTML='<font color=blue>Please unmute as required ... </font>' + mytos;
}
}
}
} catch(xfghgf) {
duration='' + player.getDuration();
setTimeout(function(){
parent.document.getElementById('myh1').innerHTML='' + player.getVideoData().title;
parent.document.getElementById('youtube_duration').value='' + '' + parent.document.getElementById('j' + ivid).value; // duration;
}, 2000);
onethous=2500;
if (parent.document.getElementById('mytopspan')) { // && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
mytos=parent.document.getElementById('mytopspan').innerHTML;
if (parent.document.getElementById('mytopspan').innerHTML.indexOf(' unmute ') == -1) {
if (('' + top.document.URL).indexOf('isradio=') != -1 && ('' + top.document.URL).indexOf('audioyoutube=') != -1 && nextvidi == 1) {
parent.document.getElementById('mytopspan').innerHTML='<font color=red>Please unmute within 30 seconds ... </font>' + mytos;
setTimeout(function(){
parent.document.getElementById('mytopspan').innerHTML=parent.document.getElementById('mytopspan').innerHTML.replace(' within 30 seconds ', ' as you require ').replace(' color="red"', ' color="blue"');
}, 30000);
} else {
parent.document.getElementById('mytopspan').innerHTML='<font color=blue>Please unmute as required ... </font>' + mytos;
}
}
}
}
}
try {
xvcen='' + event.target.getCurrentTime();
} catch(xfghgf) {
xvcen='' + player.getCurrentTime();
}
var aswellas=0;
if (parent.document.getElementById('c' + ivid)) {
if (!parent.document.getElementById('c' + ivid).checked) {
aswellas=eval(1 + eval('' + duration));
}
}
var ipo=0;
var xxcen=eval(aswellas + eval('' + xvcen));
if (eval(1 + xxcen) >= eval('' + duration)) {
//alert('here RE ' + duration + ' stduration=' + stduration);
if (nextvidi >= 0) {
if (parent.document.getElementById('c' + nextvidi)) {
if (!parent.document.getElementById('c' + nextvidi).checked) {
ipo=0;
while (parent.document.getElementById('xx' + ipo)) {
parent.document.getElementById('xx' + ipo).style.backgroundColor='pink';
ipo++;
}
while (!parent.document.getElementById('c' + nextvidi).checked) {
if (parent.document.getElementById('shufflechk')) {
if (!parent.document.getElementById('shufflechk').checked) {
nextvidi++;
if (eval('' + viddurs.length) <= nextvidi) {
if (parent.document.getElementById('loopchk')) {
if (!parent.document.getElementById('loopchk').checked) {
nextvidi--;
player.stopVideo();
} else {
nextvidi=0;
}
} else {
nextvidi=0;
}
}
} else {
nextvidi=Math.floor(Math.random() * eval('' + viddurs.length));
}
} else {
nextvidi++;
if (eval('' + viddurs.length) <= nextvidi) {
if (parent.document.getElementById('loopchk')) {
if (!parent.document.getElementById('loopchk').checked) {
nextvidi--;
player.stopVideo();
} else {
nextvidi=0;
}
} else {
nextvidi=0;
}
}
}
}
}
}
if (eval('' + viddurs.length) <= nextvidi) {
nextvidi=0;
ipo=0;
while (parent.document.getElementById('xx' + ipo)) {
parent.document.getElementById('xx' + ipo).style.backgroundColor='pink';
ipo++;
}
if (parent.document.getElementById('xx' + nextvidi)) {
parent.document.getElementById('xx' + nextvidi).style.backgroundColor='lightgreen';
}
} else if (parent.document.getElementById('xx' + nextvidi)) {
if (parent.document.getElementById('shufflechk')) {
if (parent.document.getElementById('shufflechk').checked) {
ipo=0;
while (parent.document.getElementById('xx' + ipo)) {
parent.document.getElementById('xx' + ipo).style.backgroundColor='pink';
ipo++;
}
}
}
parent.document.getElementById('xx' + nextvidi).style.backgroundColor='lightgreen';
}
duration=-1;
wasno=('' + nextvidi);
wasdur=('' + viddurs[nextvidi]);
wasvid='' + vidarrv[nextvidi];
wasstart=('' + vidstarts[nextvidi]);
wasdos=viddos[nextvidi];
newdos=viddos[nextvidi];
newno=('' + nextvidi);
newdur=('' + viddurs[nextvidi]);
newvid='' + vidarrv[nextvidi];
newstart=('' + vidstarts[nextvidi]);
wastitle='';
newtitle='';
if (parent.document.getElementById('i' + nextvidi)) {
//alert(1);
if (eval('' + ('' + parent.document.getElementById('i' + nextvidi).value).length) >= 11 && parent.document.getElementById('i' + nextvidi).value.indexOf('' + vidarrv[nextvidi]) == -1) {
beenbefore=false;
//alert(11);
if (parent.document.getElementById('i' + nextvidi).value.indexOf('|') != -1) {
newstart=parent.document.getElementById('i' + nextvidi).value.split('|')[0];
vidstarts[nextvidi]='' + newstart;
newvid=parent.document.getElementById('i' + nextvidi).value.split('|')[1].split('#')[0];
vidarrv[nextvidi]='' + newvid;
} else {
newstart='0';
vidstarts[nextvidi]='' + newstart;
newvid=parent.document.getElementById('i' + nextvidi).value.split('#')[0];
vidarrv[nextvidi]='' + newvid;
}
if (parent.document.getElementById('c' + nextvidi)) {
if (parent.document.getElementById('c' + nextvidi).checked) {
newdos=true;
viddos[nextvidi]=true;
} else {
newdos=false;
viddos[nextvidi]=false;
}
}
}
}
if (top.document.getElementById('divtitles')) {
if (top.document.getElementById('divtitles').innerHTML.indexOf('|' + vidarrv[nextvidi] + '') == -1) {
//alert(111);
beenbefore=false;
}
}
//alert('1111 ' + viddurs[nextvidi] + ' beenbefore=' + beenbefore);
//if (('' + viddurs[nextvidi]) == '' || eval('0' + viddurs[nextvidi]) <= 0 || !beenbefore) {
//alert('changed');
//} else {
//alert('not changed');
//}
if (('' + viddurs[nextvidi]) == '' || eval('0' + viddurs[nextvidi]) <= 0 || !beenbefore) {
if (top.document.getElementById('divtitles')) {
if (top.document.getElementById('divtitles').innerHTML.indexOf('|' + viddurs[nextvidi] + '') != -1) {
if (top.document.getElementById('divtitles').innerHTML.indexOf('|' + viddurs[nextvidi] + '#') != -1) {
wastitle=top.document.getElementById('divtitles').innerHTML.split('|' + viddurs[nextvidi] + '#')[1].split('</')[0];
newtitle=wastitle;
}
}
}
player.loadVideoById(vidarrv[nextvidi], eval('' + vidstarts[nextvidi]), "large");
try {
ivid=nextvidi;
sparedur='' + event.target.getDuration();
//alert('3:' + sparedur);
viddurs[ivid]='' + sparedur;
newdur='' + viddurs[ivid];
setTimeout(function(){
parent.document.getElementById('myh1').innerHTML='' + event.target.getVideoData().title;
newtitle='' + event.target.getVideoData().title;
if (!beenbefore) {
top.document.getElementById('divtitles').innerHTML+='<span>' + newstart + '|' + newvid + '#' + newtitle.replace(/\&\;/g,'and').replace(/\ \&\ /g,' and ') + '</span>';
parent.fixdoc('' + ivid, '' + ('' + newdos).replace('false','off').replace('true','on') + '#' + newstart + '|' + newvid + '#' + newdur + '#' + newtitle);
} else if (newstart != wasstart || newvid != wasvid || newtitle != wastitle) {
top.document.getElementById('divtitles').innerHTML=top.document.getElementById('divtitles').innerHTML.replace(wasvid, 'cannotenda2');
top.document.getElementById('divtitles').innerHTML+='<span>' + newstart + '|' + newvid + '#' + newtitle.replace(/\&\;/g,'and').replace(/\ \&\ /g,' and ') + '</span>';
parent.fixdoc('' + ivid, '' + ('' + newdos).replace('false','off').replace('true','on') + '#' + newstart + '|' + newvid + '#' + newdur + '#' + newtitle);
}
parent.document.getElementById('youtube_duration').value='' + parent.document.getElementById('j' + ivid).value; // duration
}, 2000);
onethous=2500;
if (parent.document.getElementById('mytopspan')) { // && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
mytos=parent.document.getElementById('mytopspan').innerHTML;
if (parent.document.getElementById('mytopspan').innerHTML.indexOf(' unmute ') == -1) {
if (('' + top.document.URL).indexOf('isradio=') != -1 && ('' + top.document.URL).indexOf('audioyoutube=') != -1 && nextvidi == 1) {
parent.document.getElementById('mytopspan').innerHTML='<font color=red>Please unmute within 30 seconds ... </font>' + mytos;
setTimeout(function(){
parent.document.getElementById('mytopspan').innerHTML=parent.document.getElementById('mytopspan').innerHTML.replace(' within 30 seconds ', ' as you require ').replace(' color="red"', ' color="blue"');
}, 30000);
} else {
parent.document.getElementById('mytopspan').innerHTML='<font color=blue>Please unmute as required ... </font>' + mytos;
}
}
}
} catch(xfghgf) {
ivid=nextvidi;
setTimeout(function(){
sparedur='' + player.getDuration();
viddurs[ivid]='' + sparedur; //duration;
newdur='' + viddurs[ivid]
parent.document.getElementById('youtube_duration').value='' + '' + parent.document.getElementById('j' + ivid).value; // duration;
parent.document.getElementById('myh1').innerHTML='' + player.getVideoData().title;
newtitle='' + parent.document.getElementById('myh1').innerHTML;
//alert('4:' + sparedur + ' newtitle=' + newtitle + ' beenbefore=' + beenbefore);
if (!beenbefore) {
top.document.getElementById('divtitles').innerHTML+='<span>' + newstart + '|' + newvid + '#' + newtitle.replace(/\&\;/g,'and').replace(/\ \&\ /g,' and ') + '</span>';
parent.fixdoc('' + ivid, '' + ('' + newdos).replace('false','off').replace('true','on') + '#' + newstart + '|' + newvid + '#' + newdur + '#' + newtitle);
} else if (newstart != wasstart || newvid != wasvid || newtitle != wastitle) {
top.document.getElementById('divtitles').innerHTML=top.document.getElementById('divtitles').innerHTML.replace(wasvid, 'cannotenda2');
top.document.getElementById('divtitles').innerHTML+='<span>' + newstart + '|' + newvid + '#' + newtitle.replace(/\&\;/g,'and').replace(/\ \&\ /g,' and ') + '</span>';
parent.fixdoc('' + ivid, '' + ('' + newdos).replace('false','off').replace('true','on') + '#' + newstart + '|' + newvid + '#' + newdur + '#' + newtitle);
}
}, 2000);
onethous=2500;
if (parent.document.getElementById('mytopspan')) { // && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
mytos=parent.document.getElementById('mytopspan').innerHTML;
if (parent.document.getElementById('mytopspan').innerHTML.indexOf(' unmute ') == -1) {
if (('' + top.document.URL).indexOf('isradio=') != -1 && ('' + top.document.URL).indexOf('audioyoutube=') != -1 && nextvidi == 1) {
parent.document.getElementById('mytopspan').innerHTML='<font color=red>Please unmute within 30 seconds ... </font>' + mytos;
setTimeout(function(){
parent.document.getElementById('mytopspan').innerHTML=parent.document.getElementById('mytopspan').innerHTML.replace(' within 30 seconds ', ' as you require ').replace(' color="red"', ' color="blue"');
}, 30000);
} else {
parent.document.getElementById('mytopspan').innerHTML='<font color=blue>Please unmute as required ... </font>' + mytos;
}
}
}
}
} else {
player.loadVideoById(vidarrv[nextvidi], eval('' + vidstarts[nextvidi]), eval(eval('' + viddurs[nextvidi]) - eval('' + vidstarts[nextvidi])));
}
ivid=nextvidi;
if (parent.document.getElementById('shufflechk')) {
if (!parent.document.getElementById('shufflechk').checked) {
nextvidi++;
if (eval('' + viddurs.length) <= nextvidi) {
nextvidi=0;
}
} else {
nextvidi=Math.floor(Math.random() * eval('' + viddurs.length));
}
} else {
nextvidi++;
if (eval('' + viddurs.length) <= nextvidi) {
nextvidi=0;
}
}
}
}
setTimeout(playingvideo, onethous);
return '';
}
inplaying=true;
// rest of function playingvideo() as before ...
// end of function playingvideo()
}
… in …
- the changed karaoke_youtube_api.htm inhouse YouTube video interfacer … calling …
- the modified stop_start_youtube.html YouTube API caller … supervised by the top level …
- changed swipe_media.html Tabular Single Row Media Gallery
Previous relevant Tabular Single Row YouTube API Radio Play Tutorial is shown below.
Tabular Single Row YouTube API Radio Play Tutorial
Today, we’re back to the Tabular Single Row Media Gallery ideas regarding the web application of the recent Tabular Single Row Textarea Sharing Tutorial and we’re involving more “button innards” thinking, with respect to adding onto the pre-existing …
- radio play with YouTube audio stream only non-mobile platform incarnation … involving textarea usage … with, today, after getting the YouTube API inhouse web application, better attuned to …
- radio play with YouTube audio stream only mobile platform incarnation … and …
- radio play with YouTube video play on non-mobile platform incarnation … and …
- radio play with YouTube video play on mobile platform incarnation
… additional functionalities allowing for …
- looping (though the total list) … default for “radio play” …
- shuffling … non-default …
- individual YouTube video checkbox user control can end a song before it’s finish
- recognition of individual YouTube video checkbox user control as above (can mean an individual song can be looped or deliberately ignored)
- saving the playlist for user recall on the same web browser
… functionalities within those three new incarnations. We could organize the first to use the YouTube API in that “vertical in the one table cell, with checkboxes” way, too, but see the textareas of different interest in an ongoing sense. We’ll see whether we offer that YouTube API approach in a future release?!
Codewise, this involved …
- the changed karaoke_youtube_api.htm inhouse YouTube video interfacer … calling …
- the modified stop_start_youtube.html YouTube API caller … supervised by the top level …
- changed swipe_media.html Tabular Single Row Media Gallery
Previous relevant Tabular Single Row Textarea Sharing Tutorial is shown below.
Tabular Single Row Textarea Sharing Tutorial
Yesterday’s Tabular Single Row Radio Play Tutorial‘s web application has two interesting features …
- lots of use of textarea element placeholder attribute for explaining more complex data entry scenarios … and as of today …
- a button element with the potential that it’s “innards” (ie. it’s innerHTML) is filled by a dropdown (ie. select element)
… it being our first time trying any HTML button element “innards” that were not always straight text. Is this the “comboBox” style of arrangement we used to see with desktop application GUIs and have long wished to simulate the usefulness of, online?!
Well, we’re not quite sure, but we think we’re going to look into it more into the future. So, what are we storing in this dropdown? We’re offering the user the chance … over to you code …
document.getElementById('inp' + potlist[jwq] + '_' + document.getElementById(potlist[jwq]).target).title+='Entries starting with _ can describe ... ' + String.fromCharCode(10) + String.fromCharCode(10);
document.getElementById('inp' + potlist[jwq] + '_' + document.getElementById(potlist[jwq]).target).title+=' Comma separated audio stream only list of your own recallable YouTube IDs playlist' + String.fromCharCode(10);
document.getElementById('inp' + potlist[jwq] + '_' + document.getElementById(potlist[jwq]).target).title+=' Semicolon separated video list of your own recallable YouTube IDs playlist' + String.fromCharCode(10);
document.getElementById('inp' + potlist[jwq] + '_' + document.getElementById(potlist[jwq]).target).title+=' One of these inhouse playlist names above which start with tube' + perusedlist + String.fromCharCode(10);
document.getElementById('inp' + potlist[jwq] + '_' + document.getElementById(potlist[jwq]).target).title+=' YouTube Playlist 34 character identifier' + String.fromCharCode(10);
document.getElementById('inp' + potlist[jwq] + '_' + document.getElementById(potlist[jwq]).target).title+=' Spotify Playlist 22 character identifier' + String.fromCharCode(10);
document.getElementById('inp' + potlist[jwq] + '_' + document.getElementById(potlist[jwq]).target).title+=' Sundry _email _sms _saverecall _http://youtube.com#example' + String.fromCharCode(10);
document.getElementById('inp' + potlist[jwq] + '_' + document.getElementById(potlist[jwq]).target).ondblclick=function(event){ alert(event.target.title); };
… culminating in this new Javascript function …
function underscoresystem(inans, inota) {
var anchor=null, subjh='?subject=Hello';
var outans=inans;
var ytpllen=34; //eval('' + ('PLNtJQ2eJVoAMFocY7LOANvPH3cLyUonin').length);
var onevlen=11;
var sppllen=22;
var inhouse='';
var rperson='';
var mperson='';
var tperson='';
var jnota=inota;
if (outans.trim() != '') {
if (outans.toLowerCase().indexOf('mailto') == 0 || outans.toLowerCase().indexOf('email') == 0 || outans.toLowerCase().indexOf('sms') == 0 || outans.toLowerCase().indexOf('http') == 0 || outans.toLowerCase().indexOf('//') == 0 || outans.toLowerCase().indexOf('www.') == 0 || outans.toLowerCase().indexOf('save') == 0 || outans.toLowerCase().indexOf('recall') == 0) {
outans='_' + inans;
}
if (outans.replace(/^tube/g,'_').substring(0,1) == '_') {
subjh='?subject=' + encodeURIComponent('' + document.title + ' regarding ' + document.URL);
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
}
}
if (('' + top.document.URL).indexOf('/swipe_media.htm') != -1) {
subjh='?subject=' + encodeURIComponent('' + document.title + ' regarding ' + document.URL);
if (('' + top.document.URL).indexOf('youtube=') != -1) {
if (('' + top.document.URL).indexOf('audioyoutube=') != -1 && ('' + top.document.URL).indexOf('isradio=') != -1) {
tperson='tuberadioapl_';
} else if (('' + top.document.URL).indexOf('youtube=') != -1 && ('' + top.document.URL).indexOf('isradio=') != -1) {
tperson='tuberadiovpl_';
} else if (('' + top.document.URL).indexOf('audioyoutube=') != -1 && ('' + top.document.URL).indexOf('isradio=') == -1) {
tperson='tubeapl_';
} else {
tperson='tubevpl_';
}
}
} else if ((outans + ' ').substring(0,4) == '____') {
tperson='tuberadioapl_';
outans=outans.replace(/^\_\_\_\_/g,'_');
} else if ((outans + ' ').substring(0,3) == '___') {
tperson='tuberadiovpl_';
outans=outans.replace(/^\_\_\_/g,'_');
} else if ((outans + ' ').substring(0,2) == '__') {
tperson='tubeapl_';
outans=outans.replace(/^\_\_/g,'_');
}
if (outans.indexOf('_recall') == 0 || outans.indexOf('_save') == 0) {
newlsval=tperson + ( ('' + Math.floor(Math.random() * 19897654)) + ('' + Math.floor(Math.random() * 19897654)) + ('' + Math.floor(Math.random() * 19897654)) + '000000000000000000000000000').substring(0,27);
if (perusedlist == '') { perusedlist=' ( and we found )'; }
perusedlist=perusedlist.replace(' )', ' ' + newlsval + ' )');
lastbize(newlsval, document.URL);
window.localStorage.setItem(newlsval, encodeURIComponent(document.URL));
jnota.title+=' ... for future recall reenter in web browser similar textarea playlist name ' + newlsval;
outans='';
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
}
jnota.value='';
}
if (document.getElementById('recallable')) {
document.getElementById('recallable').innerHTML=newlsval;
document.getElementById('recallable').style.visibility='visible';
lastrecall=maybeselize(document.URL,lastrecall,newlsval);
}
newlsval='';
} else if (outans.toLowerCase().indexOf('_mailto') == 0 || outans.toLowerCase().indexOf('_email') == 0) {
anchor = document.createElement('a');
if (outans.toLowerCase().replace('_email','_mailto').indexOf('mailto:') != -1 && (outans.toLowerCase().trim() + '?').replace('_email','_mailto').indexOf('mailto:?') == -1) {
anchor.href = 'mailto:' + (outans.toLowerCase().trim() + '?').replace('_email','_mailto').split('mailto:')[1].split('?')[0] + subjh + '&body=' + encodeURIComponent(document.URL);
} else {
anchor.href = 'mailto:' + subjh + '&body=' + encodeURIComponent(document.URL);
}
anchor.style.display='none';
document.body.appendChild(anchor);
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();
outans='';
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
}
jnota.value='';
}
} else if (outans.toLowerCase().indexOf('_sms') == 0) {
subjh='';
anchor = document.createElement('a');
if (outans.toLowerCase().indexOf('sms:') != -1 && (outans.toLowerCase().trim().replace('&','?') + '?').indexOf('sms:?') == -1) {
anchor.href = 'sms:' + (outans.toLowerCase().trim().replace('&','?') + '?').split('sms:')[1].split('?')[0] + subjh + '&body=' + encodeURIComponent(document.URL);
} else {
anchor.href = 'sms:' + subjh + '&body=' + encodeURIComponent(document.URL);
}
anchor.style.display='none';
document.body.appendChild(anchor);
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
outans='';
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
}
jnota.value='';
}
} else if (outans.toLowerCase().indexOf('_http') == 0) {
window.open(outans.substring(5).replace(/^s/g,'').replace(/^\:/g,''), '_blank', 'top=50,left=50,width=500,height=500');
outans='';
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
}
jnota.value='';
}
} else if (outans.toLowerCase().indexOf('_//') == 0) {
window.open(outans.substring(1), '_blank', 'top=50,left=50,width=500,height=500');
outans='';
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
}
jnota.value='';
}
} else if (outans.toLowerCase().indexOf('_www') == 0) {
window.open('//' + outans.substring(1), '_blank', 'top=50,left=50,width=500,height=500');
outans='';
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
}
jnota.value='';
}
} else if (outans.indexOf(',') != -1) { // tuberadioapl_
if (eval(eval('' + outans.replace(/\,/g,'').replace(/\;/g,'').length) % 11) == 1) {
if (tperson == '') { tperson='tubeapl_'; }
newlsval=tperson + ( ('' + Math.floor(Math.random() * 19897654)) + ('' + Math.floor(Math.random() * 19897654)) + ('' + Math.floor(Math.random() * 19897654)) + '000000000000000000000000000').substring(0,27);
if (perusedlist == '') { perusedlist=' ( and we found )'; }
perusedlist=perusedlist.replace(' )', ' ' + newlsval + ' )');
lastbize(newlsval, outans.substring(1).replace(/\;/g,','));
window.localStorage.setItem(newlsval, encodeURIComponent(outans.substring(1).replace(/\;/g,',')));
if (inota) {
jnota.title+=' ... for future recall reenter in this web browser similar textarea playlist name ' + newlsval;
}
return underscoresystem(newlsval, inota);
} else if (eval(eval('' + outans.replace(/\;/g,'').replace(/\,/g,'').length) % 11) == 0) {
if (tperson == '') { tperson='tuberapl_'; }
newlsval=tperson + ( ('' + Math.floor(Math.random() * 19897654)) + ('' + Math.floor(Math.random() * 19897654)) + ('' + Math.floor(Math.random() * 19897654)) + '000000000000000000000000000').substring(0,27);
if (perusedlist == '') { perusedlist=' ( and we found )'; }
perusedlist=perusedlist.replace(' )', ' ' + newlsval + ' )');
lastbize(newlsval, outans.substring(0).replace(/\;/g,','));
window.localStorage.setItem(newlsval, encodeURIComponent(outans.substring(0).replace(/\;/g,',')));
if (inota) {
jnota.title+=' ... for future recall reenter in web browser similar textarea playlist name ' + newlsval;
}
return underscoresystem(newlsval, inota);
}
} else if (outans.indexOf(';') != -1) { // tuberadiovpl_
if (eval(eval('' + outans.replace(/\;/g,'').replace(/\,/g,'').length) % 11) == 1) {
if (tperson == '') { tperson='tubevpl_'; }
newlsval=tperson + ( ('' + Math.floor(Math.random() * 19897654)) + ('' + Math.floor(Math.random() * 19897654)) + ('' + Math.floor(Math.random() * 19897654)) + '000000000000000000000000000').substring(0,27);
if (perusedlist == '') { perusedlist=' ( and we found )'; }
perusedlist=perusedlist.replace(' )', ' ' + newlsval + ' )');
window.localStorage.setItem(newlsval, encodeURIComponent(outans.substring(1).replace(/\;/g,',')));
lastbize(newlsval, outans.substring(1).replace(/\;/g,','));
if (inota) {
jnota.title+=' ... for future recall reenter in web browser similar textarea playlist name ' + newlsval;
}
return underscoresystem(newlsval, inota);
} else if (eval(eval('' + outans.replace(/\;/g,'').replace(/\,/g,'').length) % 11) == 0) {
if (tperson == '') { tperson='tubevpl_'; }
newlsval=tperson + ( ('' + Math.floor(Math.random() * 19897654)) + ('' + Math.floor(Math.random() * 19897654)) + ('' + Math.floor(Math.random() * 19897654)) + '000000000000000000000000000').substring(0,27);
if (perusedlist == '') { perusedlist=' ( and we found )'; }
perusedlist=perusedlist.replace(' )', ' ' + newlsval + ' )');
window.localStorage.setItem(newlsval, encodeURIComponent(outans.substring(0).replace(/\;/g,',')));
lastbize(newlsval, outans.substring(0).replace(/\;/g,','));
if (inota) {
jnota.title+=' ... for future recall reenter in web browser similar textarea playlist name ' + newlsval;
}
return underscoresystem(newlsval, inota);
}
} else {
switch ('' + eval('' + outans.length)) {
case '23':
outans=outans.replace(/^\_/g,'');
case '22':
window.open('//open.spotify.com/playlist/' + outans,'_blank'); //,'top=0,left=0,width=" + screen.width + ",height=" + screen.height);
outans='';
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
}
jnota.value='';
}
break;
case '35':
outans=outans.replace(/^\_/g,'');
case '34':
window.open('//www.youtube.com/playlist?list=' + outans,'_blank'); //,'top=0,left=0,width=" + screen.width + ",height=" + screen.height);
outans='';
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
}
jnota.value='';
}
break;
case '12':
outans=outans.replace(/^\_/g,'');
case '11':
if (('' + top.document.URL).indexOf('youtube=') != -1) {
top.location.href=top.document.URL.split('youtube=')[0] + 'youtube=' + outans;
outans='';
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
}
jnota.value='';
}
} else {
underscorewo=window.open("//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=" + outans + "&justaJUNKudio=&youtube_duration=22234.0&email=&emoji=on&c0=off&i0=0&j0=22234&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=","_blank","top=10,left=10,width=800,height=800");
outans='';
if (inota) {
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
jnota.value='';
}
}
}
break;
default:
if (outans.toLowerCase().indexOf('_tube') == 0) { outans=outans.replace(/^\_/g,''); }
if (outans.toLowerCase().indexOf('tuberadiovpl_') == 0) {
inhouse=('' + window.localStorage.getItem(outans)).replace(/^undefined/g,'').replace(/^null/g,'');
newlsval='';
} else if (outans.toLowerCase().indexOf('tuberadioapl_') == 0) {
inhouse=('' + window.localStorage.getItem(outans)).replace(/^undefined/g,'').replace(/^null/g,'');
newlsval='';
} else if (outans.toLowerCase().indexOf('tuberadiopl_') == 0) {
inhouse=('' + window.localStorage.getItem(outans)).replace(/^undefined/g,'').replace(/^null/g,'');
newlsval='';
} else if (outans.toLowerCase().indexOf('tubeapl_') == 0) {
inhouse=('' + window.localStorage.getItem(outans)).replace(/^undefined/g,'').replace(/^null/g,'');
newlsval='';
} else if (outans.toLowerCase().indexOf('tubevpl_') == 0) {
inhouse=('' + window.localStorage.getItem(outans)).replace(/^undefined/g,'').replace(/^null/g,'');
newlsval='';
} else if (outans.toLowerCase().indexOf('tubepl_') == 0) {
inhouse=('' + window.localStorage.getItem(outans)).replace(/^undefined/g,'').replace(/^null/g,'');
newlsval='';
} else if (eval('' + outans.length) == 28) {
inhouse=('' + window.localStorage.getItem('tubepl_' + outans.replace(/^\_/g,''))).replace(/^undefined/g,'').replace(/^null/g,'');
if (inhouse == '') {
inhouse=('' + window.localStorage.getItem('tubevpl_' + outans.replace(/^\_/g,''))).replace(/^undefined/g,'').replace(/^null/g,'');
}
if (inhouse == '') {
mperson='audio'
inhouse=('' + window.localStorage.getItem('tubeapl_' + outans.replace(/^\_/g,''))).replace(/^undefined/g,'').replace(/^null/g,'');
}
if (inhouse == '') {
mperson='isradio=y&audio'
inhouse=('' + window.localStorage.getItem('tuberadioapl_' + outans.replace(/^\_/g,''))).replace(/^undefined/g,'').replace(/^null/g,'');
}
if (inhouse == '') {
mperson='isradio=y&'
inhouse=('' + window.localStorage.getItem('tuberadiovpl_' + outans.replace(/^\_/g,''))).replace(/^undefined/g,'').replace(/^null/g,'');
}
} else if (eval('' + outans.length) == 27) {
inhouse=('' + window.localStorage.getItem('tubepl_' + outans)).replace(/^undefined/g,'').replace(/^null/g,'');
if (inhouse == '') {
inhouse=('' + window.localStorage.getItem('tubevpl_' + outans)).replace(/^undefined/g,'').replace(/^null/g,'');
}
if (inhouse == '') {
mperson='audio'
inhouse=('' + window.localStorage.getItem('tubeapl_' + outans)).replace(/^undefined/g,'').replace(/^null/g,'');
}
if (inhouse == '') {
inhouse=('' + window.localStorage.getItem('tuberadioapl_' + outans)).replace(/^undefined/g,'').replace(/^null/g,'');
}
if (inhouse == '') {
mperson='isradio=y&'
inhouse=('' + window.localStorage.getItem('tuberadiovpl_' + outans)).replace(/^undefined/g,'').replace(/^null/g,'');
}
}
if (inhouse.trim() != '') {
if (decodeURIComponent(inhouse).toLowerCase().indexOf('rjmprogramming.com.au') != -1) {
if (!inota) { return decodeURIComponent(inhouse) + '#' + outans; }
underscorewo=window.open(inhouse + '#' + outans,"_blank","top=0,left=0,width=" + screen.width + ",height=" + screen.height);
outans='';
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
jnota.value='';
}
} else {
if (!inota) { return "//www.rjmprogramming.com.au/HTMLCSS/swipe_media.html?" + mperson + "youtube=" + encodeURIComponent(decodeURIComponent(inhouse)) + "#" + outans; }
underscorewo=window.open("//www.rjmprogramming.com.au/HTMLCSS/swipe_media.html?" + mperson + "youtube=" + encodeURIComponent(decodeURIComponent(inhouse)) + "#" + outans,"_blank","top=0,left=0,width=" + screen.width + ",height=" + screen.height);
outans='';
if (document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target)) {
jnota=document.getElementById('inp' + inota.id + '_' + document.getElementById(inota.id).target);
jnota.value='';
}
}
}
break;
}
}
}
}
return outans;
}
Yes, the placeholder was struggling with what we wanted to offer as functionality, so we’re putting more into the textarea title attribute. These options allow users to create their own recallable playlists or access existant YouTube or Spotify ones to keep the music rolling in changed swipe_media.html Tabular Single Row Media Gallery helped out by ytaudioonly.js external Javascript helper.
Previous relevant Tabular Single Row Radio Play Tutorial is shown below.
Tabular Single Row Radio Play Tutorial
We do not expect many readers to have thought yesterday’s YouTube Audio Only Mobile Looping Tutorial that little bit different. It was long in the making, and difficult (at least for us), but a brief tutorial. Too brief for interested parties, and we intended it as a seminal discussion, but it’s meaning got subsumed, if you will, with the goings on of the blog posting thread last talked about with the day before’s Tabular Single Row Image Gallery Linking Tutorial.
You see, the YouTube audio stream only inhouse looping control is an essential thing we needed to tie down for today’s progress in this blog posting thread, that being the first incarnation of …
Radio Play
… sequenced modes of play we’re offering today, as a start, for …
- non-mobile users
- using audio stream only button option clicks
So what was (most) …
difficult (at least for us)
… about getting this first Radio Play idea happening? In a word …
Focus
You find yourself wanting to do lots of …
[element].click();
… and …
[element].blur();
… types of work, which work best with focus (and boy, did we need to “focus”?!) We’ve minimised this where we could, but what we highly recommend users of this functionality doing is …
- be presented with the solo web browser full screen (initial) window with the radio emoji
- click desired first song link when the song link emojis appear … then …
- it’s best to make this window small and away from other web browser windows but not overlapping for the best chance of …
- songs play in sequence and loop back through the list
… within changed swipe_media.html Tabular Single Row Media Gallery helped out by ytaudioonly.js external Javascript helper.
Previous relevant Tabular Single Row Image Gallery Linking Tutorial is shown below.
Tabular Single Row Image Gallery Linking Tutorial
After yesterday’s Tabular Single Row YouTube Audio or Video Buttons Tutorial work mainly regarding audio and video media, today we return to those …
- background WordPress Blog random tutorial images … and link them via a modified 404.php creator’s …
<?php
if (strpos(('?' . $_SERVER['QUERY_STRING']), '?rand=') !== false) {
$huht=@file_get_contents('http://www.rjmprogramming.com.au/HTMLCSS/select_palette.php?putrandom=' . urlencode('?rand=' . $_GET['rand'] . '.' . $pnumis . $ptitle));
}
?>
… calling on … - a modified select_palette.php helper …
<?php
if (isset($_GET['putrandom'])) {
$contis=str_replace(' ','++',str_replace('+',' ',urldecode($_GET['putrandom']))) . "\n";
$xcurgmt=gmdate("Ymd");
if (!file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm')) {
foreach (glob($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . '*.htm') as $dfilename) {
unlink($dfilename);
}
file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm', $contis);
} else {
file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm', file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm') . $contis);
}
exit;
} else if (isset($_GET['getrandom'])) {
$xcurgmt=gmdate("Ymd");
$imode=0;
$contis="";
$idp="";
$jdp="";
$pfix="";
$sfix="";
if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm')) {
$contis=file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm');
if (strlen($_GET['getrandom']) > 0) {
$relstuffs=explode(str_replace(' ','++',str_replace('+',' ',strtolower(urldecode($_GET['getrandom'])))) . '.', $contis);
if (sizeof($relstuffs) > 1) {
$isub=0;
$jdp=str_replace('rand=','',str_replace(' ','++',str_replace('+',' ',strtolower(urldecode($_GET['getrandom'])))));
$imode=1;
while (substr(substr($relstuffs[-1 + sizeof($relstuffs)],$isub),0,1) >= '0' && substr(substr($relstuffs[-1 + sizeof($relstuffs)],$isub),0,1) <= '9') {
if ($imode == 0) {
$jdp.=substr(substr($relstuffs[-1 + sizeof($relstuffs)],$isub),0,1);
} else {
$idp.=substr(substr($relstuffs[-1 + sizeof($relstuffs)],$isub),0,1);
}
$isub++;
if (substr(substr($relstuffs[-1 + sizeof($relstuffs)],$isub),0,1) == '.') {
$imode=1;
$isub++;
}
}
if (isset($_GET['via'])) {
$pfix=" if (parent.document.getElementById('" . $_GET['via'] . "')) { parent.document.getElementById('" . $_GET['via'] . "').style.width='100%;'; parent.document.getElementById('" . $_GET['via'] . "').innerHTML+='<iframe style=width:100%;height:800px; src=!!!></iframe>'; } else { ";
$sfix=" } ";
}
if (strtolower(urldecode($_GET['getrandom'])) != urldecode($_GET['getrandom'])) { // Cut to the Chase
echo "<html><body onload=\"" . str_replace('!!!','/slideshow.html?title=' . explode(" (", explode("\n", explode('=' . $jdp . '.' . $idp, $contis)[1])[0])[0],$pfix) . " parent.window.open('/slideshow.html?title=" . explode(" (", explode("\n", explode('=' . $jdp . '.' . $idp, $contis)[1])[0])[0] . " " . $sfix . " ','_blank','top=200,left=200,width=600,height=600');\"></body></html>";
exit;
} else { // WordPress Blog Posting
echo "<html><body onload=\"" . str_replace('!!!','/ITblog/?p=' . $idp . '#content',$pfix) . " parent.window.open('/ITblog/?p=" . $idp . "#content','_blank','top=200,left=200,width=600,height=600'); " . $sfix . " \"></body></html>";
exit;
}
}
}
}
echo "<html><body><pre>" . $contis . '</pre></body></html>';
exit;
}
?>
… called at the parent window by … - changed swipe_media.html Tabular Single Row Media Gallery …
function checkmeout(evt, iscuttothechase) {
if (evt.target.outerHTML.split('>')[0].indexOf('url(') != -1) {
if (evt.target.outerHTML.split('>')[0].split('url(')[1].split(')')[0].indexOf('?rand=') != -1) {
if (iscuttothechase) {
document.getElementById('sparepal').src='/HTMLCSS/select_palette.php?getrandom=' + encodeURIComponent('RAND=' + evt.target.outerHTML.split('>')[0].split('url(')[1].split(')')[0].split('?rand=')[1].split("'")[0].split('"')[0].split(')')[0].split('"')[0]); // + ('&viJUNKa=' + evt.target.id).replace('td','div')
} else {
document.getElementById('sparepal').src='/HTMLCSS/select_palette.php?getrandom=' + encodeURIComponent('rand=' + evt.target.outerHTML.split('>')[0].split('url(')[1].split(')')[0].split('?rand=')[1].split("'")[0].split('"')[0].split(')')[0].split('"')[0]); // + ('&viJUNKa=' + evt.target.id).replace('td','div')
}
}
}
}
… web application, now accepting …
- click on one of these WordPress Blog random tutorial images to open window to relevant WordPress Blog posting … or …
- right click on one of these WordPress Blog random tutorial images to open window to relevant Cut to the Chase web application or presentation media regarding that blog posting above
Previous relevant Tabular Single Row YouTube Audio or Video Gallery Tutorial is shown below.
Tabular Single Row YouTube Audio or Video Gallery Tutorial
Today we’ve connected …
- yesterday’s Tabular Single Row Image Gallery Primer Tutorial Image Gallery ideas with …
- our “Brady Bunch” YouTube iframe arrangement peer to peer suite (eg. The Wrecking Crew)
… which now have three new functionality options …
- <–> … link to align the (previously) “Brady Bunch” YouTube iframes into a single row in the same web browser tab
- <–>A+V … call of yesterday’s Media Gallery web application playing our “inhouse” YouTube iframe video playing web application in a new web browser tab
- <–>A-V … link to our “inhouse” audio stream only YouTube iframe playing functionality in a new web browser tab
… involving changes to …
- our changed …
var ytlist='';
if (('' + document.URL + ('' + location.hash)).indexOf('onerow=') != -1) {
setTimeout(function(){
var inis='';
var iwis=document.getElementById('vplayer1').getBoundingClientRect().width;
var ifsare=document.getElementsByTagName('iframe');
for (var jtt=0; jtt<ifsare.length; jtt++) {
//alert(ifsare[jtt].src);
if (ifsare[jtt].src.indexOf('/embed/') != -1) {
if (ytlist == '') {
ytlist='' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
} else {
ytlist+=',' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
}
}
ifsare[jtt].style.width='' + iwis + 'px';
}
var toho=document.getElementsByTagName('table')[0];
var tih=toho.innerHTML;
var newtih=tih;
//alert(tih);
var thingos=tih.split('<tr');
for (var itt=3; itt>=1; itt--) {
if (itt == 1) {
inis='<tr' + thingos[itt].split('</tr>')[0] + '</tr>';
newtih=newtih.replace(inis, inis.replace('</tr>','<!--/tr-->'));
} else if (itt == 3) {
inis='<tr' + thingos[itt].split('</tr>')[0] + '</tr>';
newtih=newtih.replace(inis, inis.replace('<tr>','<!--tr-->'));
} else {
inis='<tr' + thingos[itt].split('</tr>')[0] + '</tr>';
newtih=newtih.replace(inis, inis.replace('<tr>','<!--tr-->').replace('</tr>','<!--/tr-->'));
}
}
toho.innerHTML=newtih;
toho.style.width='1000%';
}, 4000);
}
setTimeout(function(){
var antwo='';
if (ytlist == '') {
var ifsare=document.getElementsByTagName('iframe');
for (var jtt=0; jtt<ifsare.length; jtt++) {
//alert(ifsare[jtt].src);
if (ifsare[jtt].src.indexOf('/embed/') != -1) {
if (ytlist == '') {
ytlist='' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
} else {
ytlist+=',' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
}
}
}
}
if (ytlist != '') {
antwo+=' <a title="Audio and video plays of YouTube videos" target=_blank href="/HTMLCSS/swipe_media.html?youtube=' + encodeURIComponent(ytlist) + '"><--><sup>A+V</sup></a>';
antwo+=' <a title="Audio only plays of YouTube videos" target=_blank href="/HTMLCSS/swipe_media.html?audioyoutube=' + encodeURIComponent(ytlist) + '"><--><sub>A-V</sub></a>';
}
if (document.URL.indexOf('?') != -1) {
document.getElementById('wshuffle').innerHTML+=' <a title="Present in one table row" target=_self href="' + document.URL.replace('?', '?onerow=' + Math.floor(Math.random() * 1989786)) + '"><--></a>' + antwo + ' ';
} else {
document.getElementById('wshuffle').innerHTML+=' <a title="Present in one table row" target=_self href="' + document.URL + '?onerow=' + Math.floor(Math.random() * 1989786) + '"><--></a>' + antwo + ' ';
}
}, 9000);
… youtube_brady_bunch.js being used in our inhouse Disco web application “peer to peer suite” web application “grandparent” level example … - “second draft” swipe_media.html Tabular Single Row Image Gallery web application
Previous relevant Tabular Single Row Image Gallery Primer Tutorial is shown below.
Tabular Single Row Image Gallery Primer Tutorial
“Tabular Single Row Image Gallery” …
Smabular Single Row Image Gallery
… we’re sure is the reaction of some readers out there, to today’s “starting draft” for an idea we had. Today’s part of the jigsaw we want to explore may be “ho hum” and “so non-mobile”, but we’re hoping the thread appeals to more modern ideas as we go along.
So much for the apologies, and so let’s now look at the basis to this start …
- media (so far just image) …
- gallery … presented in …
- table … HTML element … in …
- single tr row
- deliberately overflowing to the right of the screen view of the webpage … and so …
- scrollable (ie. window scrollable) to … those right hand parts …
- only “media loaded” …
- as “scrolled to” or “stumbled upon”
So far the window scrollable detection goes (thanks to this useful link) …
window.onscroll = function (e) {
// called when the window is scrolled.
vspos4=document.body.scrollTop;
vspos3=document.body.scrollLeft;
var vstdn=Math.ceil(eval('' + vspos3) / eval('' + amin));
if (curtdn != vstdn) {
checkthen(vstdn);
}
}
… and the CSS produced “wording (ie. non-media) content” is produced down the bottom left of “inhouse WordPress Blog image cell background” ( possible because of background-size:contain ) we think is interesting …
<style>
td {
border: 1px dotted green;
}
.inhouse {
vertical-align: bottom;
padding-bottom: 20px;
}
.inhouse::after {
content: 'Media Gallery \a RJM Programming \a August, 2025 \a Thanks to Lorem Picsum at https://picsum.photos/ \a ' attr(alt);
white-space: pre-wrap;
}
</style>
… in a “first draft” Tabular Single Row Image Gallery web application for your perusal. Thanks to Lorem Picsum regarding, as so often happens for us, when we’d like beautiful random images to be involved with web applications!
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
