Tag Archives: collaboration

Song Lyric Karaoke Style SubRip Subtitles Automated Tutorial

Posted on by

Onto yesterday’s Song Lyric Karaoke Style SubRip Subtitles Sharing Tutorial‘s “automate” mention … YouTube 11 character video ID … and so far, in a rudimentary sense that we may automate better into the future … once there you can click a relevant “Create” link appearing to glean those start and end times (in seconds) our form asks for … today we went about it, and in so doing realized hierarchical window object reference syntax ideas like … top.window.opener.window.opener … or … parent.window.opener.window.opener … can happen (and be crucial to the state of play), and do happen within the logic of our hard working greatgreatgrandchild further embellished stop_start_youtube.html inhouse YouTube API interfacer to make this automation happen. We were a bit surprised these types of hierarchical arrangements help in the scenario where within the first window.open window we must navigate via location.href to a new URL within the same window … amazing really! Another new concept that came with all this was to allow for more than one Faux Pas (content set) per YouTube video. We chose an “inhouse logic” delimiter system based on …   ,   … ie. two spaces comma two spaces. This awkward delimitation (non-mobile users are “hover informed” about while mobile users can find out via a textbox double click) is to differentiate delimitation from your normal comma usage within text that might be a Song Lyric snippet. All this can be tried with the “third draft” song_lyric_faux_pas.html web application below. Previous relevant Song Lyric Karaoke Style SubRip Subtitles Sharing Tutorial is shown below. Yesterday’s Song Lyric Karaoke Style SubRip Subtitles Tutorial may have been a salutary awakening for some humans (and perhaps even some Martians) out there. Is there a confession around the corner?! Well, have we got news for you?! We have added email and SMS sharing capabilities into the mix of our Song Lyric Faux Pas web application, along with allowing more than one song to be of interest in any one session using the “second draft” song_lyric_faux_pas.html web application below. Also, we’re hoping helps is that if you tab out of the Song Name textbox having filled that in with your song name of interest, a new popup window appears over to the right, and you can scour it’s resultant dropdown for the required … YouTube 11 character video ID … and so far, in a rudimentary sense that we may automate better into

Posted in Not Categorised | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Song Lyric Karaoke Style SubRip Subtitles Sharing Tutorial

Posted on by

Yesterday’s Song Lyric Karaoke Style SubRip Subtitles Tutorial may have been a salutary awakening for some humans (and perhaps even some Martians) out there. Is there a confession around the corner?! Well, have we got news for you?! We have added email and SMS sharing capabilities into the mix of our Song Lyric Faux Pas web application, along with allowing more than one song to be of interest in any one session using the “second draft” song_lyric_faux_pas.html web application below. Also, we’re hoping helps is that if you tab out of the Song Name textbox having filled that in with your song name of interest, a new popup window appears over to the right, and you can scour it’s resultant dropdown for the required … YouTube 11 character video ID … and so far, in a rudimentary sense that we may automate better into the future … once there you can click a relevant “Create” link appearing to glean those start and end times (in seconds) our form asks for Previous relevant Song Lyric Karaoke Style SubRip Subtitles Tutorial is shown below. Further to yesterday’s YouTube API SubRip Subtitles Browsing Tutorial, do you remember at YouTube API SubRip Subtitles Primer Tutorial how all this latest blog posting thread was because of an idea we had? Well, today, the work we’ve been doing on SubRip subtitle integrations into our YouTube API interfacing video play has reached the point where it can help with that idea, it being the creation of a … Song Lyric Faux Pas … web application. Am sure a lot of people out there are like me, and find both amusing and excruciating, when discovering the error of our ways, in finding out that all those years ago, all those sessions in the shower later, you discover the actual words to a song lyric, and not the ones you’d been singing all that time?! In creating that “first draft”, though, as you might imagine, there were nuances to the underlying further changed stop_start_youtube.html inhouse YouTube API interfacer at the the grandchild level called by the parent level changed karaoke_youtube_api.htm inhouse YouTube Informational Organizer and improved Audio Recording Organizer web application you can try below. This new Song Lyric Faux Pas web application sits at a grandparent level in the scheme of things here, and just below, that makes this blog posting webpage be at a great-grandparent level …

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

CSS Web Application External Javascript Programmatical Updates Tutorial

Posted on by

Two jobs today, moving on from yesterday’s CSS Web Application External Javascript Peer to Peer Tutorial … allow any random backdrop background image, specified by the user, have it’s content be retained sharing with any email recipient shared with, just concerning the changed fifth draft CSS Backdrop Filter web application also shown below arrange it that the software updates itself without manual intervention adding to the array up the top of the external Javascript That second “peer to peer” ambition we’ve attempted in the past, and needed PHP, and for a hour today we deluded ourselves we could achieve “programmatical updates” just with … external Javascript css_webapps_peer.js changes … with … window.localStorage (like HTTP cookie) usage … but those two only did the full job we were after regarding the “first instigator”, not the rest of users ever calling that web application, because non-server ideas cannot “programmatically update” the array in the external Javascript code … whereas … introducing “self contained” changes in some PHP middle_interest.php within the same web server folder … … completed the job whereby uploaded new web applications to the RJM Programming domain should trigger “programmatical updates” to that topmost dropdown of “the peerage” of web applications. The understanding goes … “the peerage” new member is probably cloned off an older member … meaning … “the peerage” new member calls the same external Javascript (introduced yesterday into the mix) … meaning … anyone’s first call of “the peerage” new member (ie. in all likelihood, the programmer creating it) triggers two things … an updated window.localStorage member (which can contribute to anyone’s topmost dropdown should it be in the correct format) … and for this “first instigator” (only, because of what it does) … call of helper PHP with that “self contained” server code … <?php // http://www.rjmprogramming.com.au/HTMLCSS/middle_interest.php?htmlparity=&jsname=./css_webapps_peer.js&with=document.URL.split(‘?’)[0].split(‘#’)[0]&inthesenseof=mywasel if (isset($_GET[‘htmlparity’]) && isset($_GET[‘with’]) && isset($_GET[‘inthesenseof’]) && isset($_GET[‘jsname’])) { if (str_replace(‘+’,’ ‘,urldecode($_GET[‘inthesenseof’])) != ‘mywasel’ && strpos(str_replace(‘+’,’ ‘,urldecode($_GET[‘jsname’])), ‘/css_webapps_peer.js’) !== false) { exit; } else if (strpos(str_replace(‘+’,’ ‘,urldecode($_GET[‘jsname’])), ‘/css_webapps_peer.js’) === false) { exit; } $jscont=”; $withcont=file_get_contents(str_replace(‘https:’,’http:’,str_replace(‘+’,’ ‘,urldecode($_GET[‘jsname’])))); if ($withcont != ”) { $jscont=$withcont; $wcont=file_get_contents(‘./’ . basename(str_replace(‘https:’,’http:’,str_replace(‘+’,’ ‘,urldecode($_GET[‘with’]))))); if ($withcont != ”) { $wewanttwo=explode(‘./’ . basename(str_replace(‘+’,’ ‘,urldecode($_GET[‘with’]))), $withcont); if (sizeof($wewanttwo) == 1) { $wewantthree=explode(str_replace(‘+’,’ ‘,urldecode($_GET[‘inthesenseof’])), $wcont); if (sizeof($wewantthree) > 1) { $jscont=str_replace(‘”];’, ‘”,”‘ . ‘./’ . basename(str_replace(‘+’,’ ‘,urldecode($_GET[‘with’]))) . ‘”];’, $jscont); file_put_contents(‘./’ . basename(str_replace(‘+’,’ ‘,urldecode($_GET[‘jsname’]))), $jscont); } } } } exit; } ?> … which might add to the external Javascript

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

CSS Web Application External Javascript Peer to Peer Tutorial

Posted on by

We tackle a few more issues onto yesterday’s CSS Web Application Highlighted Text Tutorial with … peer to peer linking of these 3 (so far) CSS referencing web applications via a new header element dropdown element some better email functionality when the web application is hosted such as it is with the “shown below” links in this blog posting allow a change of background image to use for the Backdrop Filter web application The first two used for their work the code of a new css_webapps_peer.js external Javascript interfacing with … highlighted textarea text using fourth draft CSS Backdrop Filter web application also shown below highlighted textarea text using fourth draft CSS Apply a Mask web application also shown below highlighted textarea text using fourth draft CSS Background Position web application also shown below Previous relevant CSS Web Application Highlighted Text Tutorial is shown below. You may have been around reading this blog to recall Sentence Text Word Underlining Primer Tutorial‘s discussions regarding the text data talents of HTML element type textarea up against div and the resultant table reflecting our views on this … Text Talents of HTML Elements Textarea … versus … Div And CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial set out how we see the pros and cons as … Text Functionality Issue HTML Element Type Strength Weakness (where a “Yes” is like … “Oh No!”) Display Monocolour Text Textarea Yes Div Yes Display Editable Text Textarea Yes Div Yes Display Multicolour Text Textarea Yes Div Yes … and it’s assertion that regarding Display Multicolour Text the use of textarea elements were not suitable. Well, today, we do not resile from that view, when you consider a textarea element on it’s own, but what if it gets “overlay” type of help from div nesting span elements (and we have “reverse corollaries” here with SVG tspan element usage in SVG Tspan Element Primer Tutorial) with background colour and transparent text, leading to capabilities where textarea text of relevance can be highlighted. Sounds good?! Yes, but it must be said we could have just replaced the textarea elements (within our CSS Themed suit of web applications of recent times, talked about with yesterday’s CSS Backdrop Filter Recursive Iframe Tutorial) with div ones where contenteditable=true could still allow for interactivity, but for the reasons … we wanted to see if highlighting text within a textarea could be

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

CSS Web Application Highlighted Text Tutorial

Posted on by

You may have been around reading this blog to recall Sentence Text Word Underlining Primer Tutorial‘s discussions regarding the text data talents of HTML element type textarea up against div and the resultant table reflecting our views on this … Text Talents of HTML Elements Textarea … versus … Div And CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial set out how we see the pros and cons as … Text Functionality Issue HTML Element Type Strength Weakness (where a “Yes” is like … “Oh No!”) Display Monocolour Text Textarea Yes Div Yes Display Editable Text Textarea Yes Div Yes Display Multicolour Text Textarea Yes Div Yes … and it’s assertion that regarding Display Multicolour Text the use of textarea elements were not suitable. Well, today, we do not resile from that view, when you consider a textarea element on it’s own, but what if it gets “overlay” type of help from div nesting span elements (and we have “reverse corollaries” here with SVG tspan element usage in SVG Tspan Element Primer Tutorial) with background colour and transparent text, leading to capabilities where textarea text of relevance can be highlighted. Sounds good?! Yes, but it must be said we could have just replaced the textarea elements (within our CSS Themed suit of web applications of recent times, talked about with yesterday’s CSS Backdrop Filter Recursive Iframe Tutorial) with div ones where contenteditable=true could still allow for interactivity, but for the reasons … we wanted to see if highlighting text within a textarea could be achieved … Spoiler Alert: yes, it’s possible … as well as textarea elements have a great resizing “native” functionality textarea elements feel far more “the go” when asking for user interactive entry data that can contain linefeeds over time we find more and more use for the textarea attributes value and innerHTML as separately useful dual ways of populating the element, especially in the scenario with text data where the latter is useful to initiate with text data containing < and > which gets mapped to &lt; and &gt; respectively once the code looks at that textarea‘s value attribute … Cute, huh?! In fairness, though div contenteditable=true also have interesting interplay with innerHTML and innerText attributes going on in this respect too. … we’re carrying on with textarea element interactive entry usage with this current suite of CSS based web applications. Here’s the new Javascript

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

CSS Backdrop Filter Recursive Iframe Tutorial

Posted on by

Today’s blog posting calls on the previous … Image Filter Display Tutorial … and asking the question we had making this tutorial … Can the CSS filter property applications to HTML img elements also be applied to any form of “background” anything? … with an answer … Sort of … if by “background” we can say “backdrop” to a nested, say, HTML div element, with some wording, in turn hosted by a, say, HTML div element that has a “background” image going on. … via CSS properties like … backdrop-filter: sepia(100%); … usage Today’s work clones off a clone (using the work of yesterday’s CSS Mask HTML Element Recursive Iframe Tutorial) with a new “how we got there” initial cloned draft web application also shown below. Previous relevant CSS Mask HTML Element Recursive Iframe Tutorial is shown below. Often concept ideas you have for web applications have so much in common with something you’ve been working on, you’d be pretty foolish to not heed the adage … Don’t let the perfect be the enemy of the good. … and one way we find to help here is … “cloning” web applications on the understanding that what they have in common so far outweighs what the differences are that you push ahead, and wait and see what the issues are, after that initial “cloning” (usually) huge saving of development time With that in mind, today, we’re adding off yesterday’s CSS Background Position Revisit Recursive Iframe Tutorial efforts, a … Mask an HTML Element via CSS … clone of it with those “midstream” SMS and email recursive iframe smarts (built in) to create a new “how we got there” initial cloned draft web application also shown below. Previous relevant CSS Background Position Revisit Recursive Iframe Tutorial is shown below. Onto yesterday’s CSS Background Position Revisit Tutorial, today we’re offering … SMS … or … email … means of sharing your CSS work, as an interactive user, but on this occasion, we have a big gulf regarding what these two options can achieve, due to data length limits. SMS … just the last styling change is transferred to the recipient as what they see … whereas … email … records all user changes to the blockquote element and presents them to the recipient with the most recent topmost down to the original down the bottom of a stack of HTML iframe elements called

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

CSS Mask HTML Element Recursive Iframe Tutorial

Posted on by

Often concept ideas you have for web applications have so much in common with something you’ve been working on, you’d be pretty foolish to not heed the adage … Don’t let the perfect be the enemy of the good. … and one way we find to help here is … “cloning” web applications on the understanding that what they have in common so far outweighs what the differences are that you push ahead, and wait and see what the issues are, after that initial “cloning” (usually) huge saving of development time With that in mind, today, we’re adding off yesterday’s CSS Background Position Revisit Recursive Iframe Tutorial efforts, a … Mask an HTML Element via CSS … clone of it with those “midstream” SMS and email recursive iframe smarts (built in) to create a new “how we got there” initial cloned draft web application also shown below. Previous relevant CSS Background Position Revisit Recursive Iframe Tutorial is shown below. Onto yesterday’s CSS Background Position Revisit Tutorial, today we’re offering … SMS … or … email … means of sharing your CSS work, as an interactive user, but on this occasion, we have a big gulf regarding what these two options can achieve, due to data length limits. SMS … just the last styling change is transferred to the recipient as what they see … whereas … email … records all user changes to the blockquote element and presents them to the recipient with the most recent topmost down to the original down the bottom of a stack of HTML iframe elements called recursively So, what do we mean by “called recursively“? Well, like a linked list, our web application always contains an HTML iframe initially … <iframe frameborder=0 src=’/About_Us.html’ id=ifbot style=display:none;width:100%;height:6000px;></iframe> … down the bottom of it’s body element. The document.body onload event Javascript logic call as per onl(”); now includes … var inta=”, startstyle=”; var intas=[]; if (document.URL.indexOf(‘Cjxi’) != -1) { intas=document.URL.split(‘Cjxi’); for (var inm=1; inm<intas.length; inm++) { intas[eval(-1 + inm)]=decodeURIComponent(decodeURIComponent(escape(atob(‘Cjxi’ + intas[inm])))); } } inta=(location.search + (” + location.hash).replace(/^undefined/g,”).replace(/^null/g,”)).split(‘taidea’ + eqis)[1] ? ourdecodeURIComponent((location.search + (” + location.hash).replace(/^undefined/g,”).replace(/^null/g,”)).split(‘taidea’ + eqis)[1].split(‘&’)[0]).replace(/\+/g,plus) : ”; if (inta.indexOf(‘background’) == 0) { startstyle=inta; inta=”; } var preint=”; preint=inta.split(‘blockquote’)[0]; if (eval(” + intas.length) == 0) { intas=(inta + ‘ ‘).substring(preint.length).split(‘<blockquote’); } var nextinta=”; function onl(altta) { var outta=inta; if (altta == ” && eval(” + intas.length) > 1) { nextinta=inta.replace(preint + intas[0], ”); document.getElementById(‘hrbot’).style.display=’block’; if

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

CSS Background Position Revisit Recursive Iframe Tutorial

Posted on by

Onto yesterday’s CSS Background Position Revisit Tutorial, today we’re offering … SMS … or … email … means of sharing your CSS work, as an interactive user, but on this occasion, we have a big gulf regarding what these two options can achieve, due to data length limits. SMS … just the last styling change is transferred to the recipient as what they see … whereas … email … records all user changes to the blockquote element and presents them to the recipient with the most recent topmost down to the original down the bottom of a stack of HTML iframe elements called recursively So, what do we mean by “called recursively“? Well, like a linked list, our web application always contains an HTML iframe initially … <iframe frameborder=0 src=’/About_Us.html’ id=ifbot style=display:none;width:100%;height:6000px;></iframe> … down the bottom of it’s body element. The document.body onload event Javascript logic call as per onl(”); now includes … var inta=”, startstyle=”; var intas=[]; if (document.URL.indexOf(‘Cjxi’) != -1) { intas=document.URL.split(‘Cjxi’); for (var inm=1; inm<intas.length; inm++) { intas[eval(-1 + inm)]=decodeURIComponent(decodeURIComponent(escape(atob(‘Cjxi’ + intas[inm])))); } } inta=(location.search + (” + location.hash).replace(/^undefined/g,”).replace(/^null/g,”)).split(‘taidea’ + eqis)[1] ? ourdecodeURIComponent((location.search + (” + location.hash).replace(/^undefined/g,”).replace(/^null/g,”)).split(‘taidea’ + eqis)[1].split(‘&’)[0]).replace(/\+/g,plus) : ”; if (inta.indexOf(‘background’) == 0) { startstyle=inta; inta=”; } var preint=”; preint=inta.split(‘blockquote’)[0]; if (eval(” + intas.length) == 0) { intas=(inta + ‘ ‘).substring(preint.length).split(‘<blockquote’); } var nextinta=”; function onl(altta) { var outta=inta; if (altta == ” && eval(” + intas.length) > 1) { nextinta=inta.replace(preint + intas[0], ”); document.getElementById(‘hrbot’).style.display=’block’; if (is64) { document.getElementById(‘ifbot’).src=document.URL.split(‘?’)[0].split(‘#’)[0] + ‘?#taidea=’ + ourencodeURIComponent(nextinta); } else { document.getElementById(‘ifbot’).src=document.URL.split(‘?’)[0].split(‘#’)[0] + ‘?#taidea=’ + encodeURIComponent(nextinta); } document.getElementById(‘ifbot’).style.display=’block’; inta=preint + intas[0]; outta=inta; intas=[]; } if (altta == ” && inta != ”) { if (eval(” + inta.split(‘repeat;’).length) > 1) { origdefopt=(inta.split(‘repeat;’)[1].split(‘;’)[0].split(‘”‘)[0] + ‘;’).replace(/^\;/g,”); document.getElementById(‘defopt’).innerHTML=’Styling idea [‘ + origdefopt + ‘]’; defoptit=origdefopt; } } if (altta != ”) { outta=altta; } if (outta == ”) { outta=document.getElementById(‘divhost’).innerHTML; } else { document.getElementById(‘divhost’).innerHTML=outta; document.getElementById(‘taidea’).value=document.getElementById(‘divhost’).innerHTML; if (altta != ”) { if (eval(” + altta.split(‘repeat;’).length) > 1) { defoptit=(altta.split(‘repeat;’)[1].split(‘;’)[0].split(‘”‘)[0] + ‘;’).replace(/^\;/g,”); document.getElementById(‘defopt’).innerHTML=’Styling idea [‘ + defoptit + ‘]’; } } } if (document.getElementById(‘taidea’).value.indexOf(‘ data-yourown=””‘) == -1 && document.getElementById(‘taidea’).value.indexOf(‘ data-yourown=”‘) != -1) { var newuns=document.getElementById(‘taidea’).value.split(‘ data-yourown=”‘)[1].split(‘”‘)[0].split(‘;,’); for (var inew=0; inew<newuns.length; inew++) { if (document.getElementById(‘mysel’).innerHTML.indexOf(newuns[inew].replace(/\;$/g,”) + ‘;’) == -1) { document.getElementById(‘mysel’).innerHTML+='<option value=”‘ + newuns[inew].replace(/\;$/g,”) + ‘;”>’ + newuns[inew].replace(/\;$/g,”) + ‘;</option>’; } } } if (altta == ”) { if (startstyle != ”) { document.getElementById(‘divhost’).innerHTML=document.getElementById(‘divhost’).innerHTML.replace(document.getElementById(‘divhost’).innerHTML.split(‘ style=”‘)[1].split(‘”‘)[0], startstyle); document.getElementById(‘taidea’).value=document.getElementById(‘divhost’).innerHTML; } sofares=document.getElementById(‘divhost’).innerHTML; setInterval(keeplooking, 5000); } //else if (sofares.indexOf(document.getElementById(‘divhost’).innerHTML) == -1)

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