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='';
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 changedswipe_media.htmlTabular Single Row Media Gallery helped out by ytaudioonly.jsexternal Javascript helper.
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
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));
}
changedswipe_media.htmlTabular 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
… 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 …
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
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));
}
changedswipe_media.htmlTabular 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
… 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 …
External Javascript YouTube Audio of Video Research Tutorial
In the same line of thinking as yesterday’s External Javascript YouTube Audio of Video Switch Tutorial we probably have a little more room in that textarea (user interactions menu) for a couple more switch/class hotkey options, in the research line of thinking, we’ll call …
G=Google
W=Wikipedia
… the first having an obvious connection, where the title of a YouTube video is likely to resonate with Google.
But do you ever “go fishing” in Wikipedia? It won’t give up on you even if you are asking for strange information, that is, suggesting other avenues to research using “words, basically”.
And so, like with yesterday (and it’s work augmented a bit), we’ve got to say the Javascript function playingvideo‘s switch and case based logic stuck out because the coding involves words that relate to functionality far better than an if code structure. And so all we needed to do for our change, between the Javascript’s switch and first case was add …
External Javascript YouTube Audio of Video Switch Tutorial
If we say …
switch … and then …
case
… related to Javascript coding, what’s the reaction around here? Well, we’d say …
One of the most relatable and easily revisited modus operandi, within Javascript, to pick up where you left off or add more
Doesn’t exactly “roll off the tongue”, but we’ll leave that for you should you read this blog posting, and agree?!
In a similar line of thinking as External Javascript YouTube Audio of Video Snippet Tutorial, what did we want to achieve with today’s modification to YouTube Audio of Video Stream Play Only web application, is, once the user is into the YouTube play and you get to that textarea menu that works like a hotkey (and we can thank that for what must have been clear and relatable thinking that day) is to add a Y hotkey possibility to open a popup window back to a YouTube based play of the video concerned.
We’ve got to say the Javascript function playingvideo‘s switch and case based logic stuck out because the coding involves words that relate to functionality far better than an if code structure. And so all we needed to do for our change, between the Javascript’s switch and first case was add …
case 'Y':
window.open('//www.youtube.com/watch?v=' + vid, '_blank', 'top=100,left=100,width=600,height=600');
parent.parent.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
External Javascript YouTube Audio of Video Snippet Tutorial
Given the current Play Audio Stream of Selected YouTube Video In Place functionality talked about, last, at External Javascript YouTube Audio of Video Numericals Tutorial occurs “in place” there’s a good chance what the user may want to describe is either …
audio starting at a given timed position …
audio starting at a given timed position and ending at another timed position … ie. an audio snippet
. Well, today, we’re allowing for either possibility above to value add to our work.
So, YouTube URLs are already possible in the first of the modes above, such as the URL …
Right click opens in new window the video and audio but normal click just plays audio in place. Numerical only entry in textarea seeks that audio timing position. Numerical space search text does YouTube search of search text to create the numerical number of audio only YouTube video links. Eg. 7 octopus anatomy
… and the purple functionality has been going two days now, because we found it convenient debugging the fallback logic, while the blue is today’s new functionality which opens the door to a user creating their own dynamically created audio stream part of YouTube video playing links presented close to yesterday’s textarea element information … perhaps three doors down from MacArthur Park?
This new hierarchical layer had us questioning, again, our “grandchild” logic penchant of referring to the layer containing these link references like …
… is the better and more precise way a “grandchild” can refer to a “grandparent” exclusively. Of course, in hindsight, on a project, these hierarchy possibilities would probably be mapped out for every eventuality, and the penchant for a programmer to willy-nilly use top.document everywhere, could be put under the microscope. But, please don’t declare war on all top.document reference thinking … for instance, to share data among many such layers of web application functionality, it can be effectively shared in …
top.document.title
… as just one example of effective top.document referencing. There is also the issue that parent.parent.document type references can make someone maintaining the code later suspect the codeline as a bug (and maybe a codeline comment could help).
The new Javascript function needed for this goes …
the timing of getting some mobile platform looping going is fortunate … and it means, with far less complication, we can organize …
the “red button” (mobile) or “link” (non-mobile) can serve as a fallback option when the user is in looping mode of YouTube Audio Stream Part of Video play and there is an interruption to that playing
… because there are a million and one reasons your YouTube video can get interrupted, such as …
window focus leaves the window of the playing YouTube video
seems like some mobile time limit is going on too
dormancy to sleep screen
focus regarding the textarea elements, we suspect
… etcetera etcetera etcetera … and there will could be good reasons the operating system behaves the way it does (as well as, as far as it goes here, we’ve been known to have “bad hair days”, even “very little hair days”).
But with a fallback option there, to re-click that originating “red button” (mobile) or “link” (non-mobile) is the chance to continue on with looping, so far not always back where you were, but who knows what the future brings?!
Also, organization wise, what has made all this easier, was to …
… start using the web browser’s session storage smarts as an overseeing data source we can better rely on. With this in place it was so much more robust to work out when to invoke our fallback thinking new Javascript function …
function retry() {
if (top.document.getElementById(location.hash.replace(/\#/g,''))) {
if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder).indexOf('0/0 ...') == 0) {
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf(' to continue looping') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' try click of red button to continue looping';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' try click of link to continue looping';
}
window.parent.focus();
parent.location.href=parent.document.URL.split('&random=')[0] + '&random=' + Math.floor(Math.random() * 1987865) + '&startagain=y' + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#$/g,'');
window.parent.scrollTo(0,0);
}
} else if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder).indexOf('P=pause/play') != -1) {
if (prevretry == '') {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
} else if (prevretry == top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder) {
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf(' to continue looping') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of red button to continue looping';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of link to continue looping';
}
}
} else {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
}
} else if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder).indexOf('P=play/pause') != -1) {
if (prevretry == '') {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
} else if (prevretry == top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder) {
if (top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder.indexOf(' to continue looping') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of red button to continue looping';
} else {
top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder+=' ... try click of link to continue looping';
}
}
} else {
prevretry=top.document.getElementById(location.hash.replace(/\#/g,'')).placeholder;
}
}
}
}
… list of suggested “controls” for our Play Audio Stream of Selected YouTube Video In Place functionality, am sure of most interest was the loop one. Well, it certainly was for us, anyway.
We weren’t sure whether we could get around the actual tap needed on mobile platforms to just apply …
player.seekTo(0);
player.playVideo();
… as we near the end of the video. Alas, no, we need the red button (ie. the transparent YouTube video) to be retapped to get anywhere … so sad.
Another plan we had to ask for menu operations via a window.prompt a lot of users will be relieved to hear, didn’t work either, and so we had to redesign, finally settling on HTML textarea elements whereby …
information and instructions are placed in its placeholder attribute … and …
like a hotkey (but not needing onkeydown or onkeyup or onkeypress event logic intervention) user audio control instructions are unique regarding first character, so way down at the grandchild level we have …
function playingvideo() {
psuf='';
if (startagain) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
psuf=' via button reclick ' + String.fromCodePoint(10004);
} else {
psuf=' ' + String.fromCodePoint(10004);
}
}
if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/\#/g,'') != '') {
if (eval('' + duration) == 0 && Math.round(player.getCurrentTime()) < 1) {
if (one == 1 || onepause != 1) {
if (1 == 4) { player.pauseVideo(); }
} else {
player.playVideo();
}
setTimeout(playingvideo, 1000);
} else {
if (top.document.getElementById(location.hash.replace(/\#/g,''))) {
if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
top.document.getElementById(location.hash.replace(/\#/g,'')).value= top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val');
top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-val','');
}
switch (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).value.toUpperCase() + ' ').substring(0,1)) {
case 'L':
startagain=true;
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=false;
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
case 'S':
startagain=false;
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=true;
player.stopVideo();
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
case 'P':
if (one == 1 || onepause != 1) {
player.pauseVideo();
} else {
player.playVideo();
}
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
case 'M':
player.mute();
mletter='M';
uletter='u';
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
case 'U':
player.unMute();
mletter='m';
uletter='U';
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
… list of suggested “controls” for our Play Audio Stream of Selected YouTube Video In Place functionality, am sure of most interest was the loop one. Well, it certainly was for us, anyway.
We weren’t sure whether we could get around the actual tap needed on mobile platforms to just apply …
player.seekTo(0);
player.playVideo();
… as we near the end of the video. Alas, no, we need the red button (ie. the transparent YouTube video) to be retapped to get anywhere … so sad.
Another plan we had to ask for menu operations via a window.prompt a lot of users will be relieved to hear, didn’t work either, and so we had to redesign, finally settling on HTML textarea elements whereby …
information and instructions are placed in its placeholder attribute … and …
like a hotkey (but not needing onkeydown or onkeyup or onkeypress event logic intervention) user audio control instructions are unique regarding first character, so way down at the grandchild level we have …
function playingvideo() {
psuf='';
if (startagain) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
psuf=' via button reclick ' + String.fromCodePoint(10004);
} else {
psuf=' ' + String.fromCodePoint(10004);
}
}
if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/\#/g,'') != '') {
if (eval('' + duration) == 0 && Math.round(player.getCurrentTime()) < 1) {
if (one == 1 || onepause != 1) {
if (1 == 4) { player.pauseVideo(); }
} else {
player.playVideo();
}
setTimeout(playingvideo, 1000);
} else {
if (top.document.getElementById(location.hash.replace(/\#/g,''))) {
if (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
top.document.getElementById(location.hash.replace(/\#/g,'')).value= top.document.getElementById(location.hash.replace(/\#/g,'')).getAttribute('data-val');
top.document.getElementById(location.hash.replace(/\#/g,'')).setAttribute('data-val','');
}
switch (('' + top.document.getElementById(location.hash.replace(/\#/g,'')).value.toUpperCase() + ' ').substring(0,1)) {
case 'L':
startagain=true;
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=false;
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
case 'S':
startagain=false;
psuf='';
if (startagain) {
psuf=' ' + String.fromCodePoint(10004);
}
dostumps=true;
player.stopVideo();
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
case 'P':
if (one == 1 || onepause != 1) {
player.pauseVideo();
} else {
player.playVideo();
}
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
case 'M':
player.mute();
mletter='M';
uletter='u';
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
case 'U':
player.unMute();
mletter='m';
uletter='U';
top.document.getElementById(location.hash.replace(/\#/g,'')).value='';
break;
External Javascript YouTube Audio of Video Mobile Helper Tutorial
After the start yesterday’s External Javascript YouTube Audio of Video Helper Tutorial gave us with our External Javascript YouTube Audio of Video Helper we’ve progressed making the mobile platform interfacing less flaky, but more testing is needed.
To delay, say by 13.5 seconds, even great swathes of code …
setTimeout(function(){
// Start of "great swathes of code"
// ...
// End of "great swathes of code"
}, 13500);
… is one of those ideas we’re still pinching ourselves about how effective it can be (let alone passing in arguments at the function() bit). We’re forever filling “great swathes of code” with global Javascript variables but today’s “great swathe” works okay with non global Javascript variables in there, and we’re thinking we have to be more trusting of the brilliant setTimeout (and setInterval) Javascript techniques of introducing a delay into the flow of your Javascript. Of course, we could also delay the work until the document.body onload event, but we wanted to get in early with what the code is trying to achieve here … we’ll see.
Perhaps a good adage here is …
Trust the process.
Trust the wonders of (in the case of iOS, Safari) Web Browser Web Inspector debugging to test ideas you start out being unsure of.
user linked script call …
<script type='text/javascript' src='//www.rjmprogramming.com.au/ytaudioonly.js'></script>
… helping out …
HTML “a” link with class=audioytplay and a mention of https://www.youtube.com/watch?v=[YouTubeID] … eg.
<p>Oops, <a class="audioytplay" target="_blank" title="?" href='https://www.youtube.com/watch?v=gBzJGckMYO4' rel="noopener"><strike>that's all</strike>sorry, folks</a></p>
to be, via onclick event, playing “in place” the audio part of that YouTube referenced [YouTubeID] video
Developing this is definitely more than a one day job (especially getting mobile platforms working), but today’s “first draft” ytaudioonly.js external Javascript, along with the help of …
Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial
As far as CSS styling goes with our web application work, personally speaking, it is one of …
Give it a bit of oompha!
… moments in coding we think we learn more from, than reading about CSS. That, and, usually StackOverflow, thanks, where examples of achieving some styling ambition teach us a lot too.
Yesterday, with Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial, we decided to “put a bit of oompha” into that “two bell emoji” ( ie. 🔔🔔 ) link “double buzzer” sound “production number”, and wanted to break down what we ended up with, for readers …
Our first try … okay for non-mobile … not as good for mobile …
Why can’t we just link to a YouTubevideo URL webpage off any old platform or web browser incarnation?
Well, you could! But we wanted a less obvious approach (and we were not sure about mobile platforms, trying this), only relevant for scenarios where you are only interested in the audio stream of a YouTube video (it should be noted), that is hiding from the reader “the mechanics” of what we are doing (to get a cheap giggle … there, are you happy now?!).
What does Javascript if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { } if test achieve?
If this test returns true we have detected a non-mobile platform/web browser scenario.
What does the HTML target attribute of an a HTML element do?
That target attribute determines the “navigational place” of the href attribute URL of that a link where …
_blank opens in a new window
_self clobbers current window
_top adds a new (tabbed) window (perhaps from the viewpoint of a child HTML iframe window)
other named target point to the name attribute of an HTML iframe element, presumably, in the current window
What does HTML code snippet onload=”if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (this.src.indexOf(‘About_Us.’) != -1) { document.getElementById(‘aja’).target=’myja’;
this.src=document.getElementById(‘aja’).href + ‘&rand=’ + Math.floor(Math.random() * 1989786); } } “ do as the onload event logic of the “second version” iframe incarnation?
it is arranged from the child iframe inhouse YouTube video interfacing player web application using “overlay” concepts …
position: absolute
opacity
z-index
top and left positioning
width and height dimensioning
🔔🔔 into some button content
… that what they are tapping is a YouTube video element
looking like 🔔🔔 at levels of a smaller z-index seen through opacity:0.0 higher z-index levels, the topmost transparent but high z-index one being the YouTube video element which is that webpage area’s “action item” … if you will
Huh?!
On mobile platforms, media cannot play, these days, unless it is as a direct result of a user tap (excluding programmatically produced taps). See all this in action, with thanks to FreeConvert, below …
And so, yes … was it worth it? Perhaps not to do with the job at hand, but for future reference, we’re happy to give this added oompha to this effort.
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.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
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));
}
changedswipe_media.htmlTabular 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
… 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 …
our “Brady Bunch” YouTube iframe arrangement peer to peer suite (eg. The Wrecking Crew)
… and this could be good having a reciprocal arrangement, and today we’ve started down that road (though, around here, it worries us a little that we keep going on roads heading down?!)
It’s the background-size:contain helping out, again, here, with some room down the bottom of the webpage screen to add 3×2 = 6 buttons for …
… 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 …
… 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 …
… 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 …
The recent goings on with the YouTube Style SubRip Subtitles Button Tutorial thread of blog postings, uncovering for us the wonders of the great DOMParser Web API, has inspired us to write, again, a new HTML validator web application, just on the clientside of the “webpage equation”.
If you are into the creation of HTML on a Content Management System such as WordPress, here, with this blog, there is some forgiveness regarding what you construct as your content HTML and allowing that through to webpage content. But perhaps you’d …
Like to write the HTML as the web browser sees it, and then renders it
It mattered, a lot, in that project above, because for that project’s “collaboration purposes”, in the code, we wanted to know that HTML content in the caption data relevant “shadowing” textarea or textbox user interfacing elements would match any HTML element “innerHTML” or “outerHTML” or “innerText” reference later accessed. Any missing double quote mattered in this scenario. But, of course, it would be good as general practice for a Content Management System produced set of HTML to get close to that ideal HTML the web browser syntax in it’s form and format.
