News Ticker
Your Background Image
-
Recent Posts
- Virtual Private Networks on macOS Primer Tutorial
- Simon Says Game Primer Tutorial
- PHP Form Validation via Filter Regular Expression Tutorial
- Javascript and PHP Base64 Media Tutorial
- PHP Form Validation via Filter Extension Tutorial
- WordPress Highlight Lookups Plugin Cookies Tutorial
- Australian Indigenous Language SVG Overlay Tutorial
- Javascript and PHP Base64 Primer Tutorial
Recent Comments
Archives
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
Meta
Some tags
animation array blog canvas command line CSS database desktop div DOM email emoji ESL event form game games geographicals Google Google chart HTML HTML5 IFRAME image iOS iPad Javascript Linux Mac Mac OS X MAMP map mobile onclick overlay PHP post programming table tutorial url video web server Windows WordpressCalendar
Numbers Guessing Game
Your Numbers Game
Get clue
Your answer
Score
Clue? Score is 0/0
OnTopList
Walking Trip …
Posted in Photography, Trips
Tagged coding, desktop, mobile, one image website, photography, programming, software, trip, tutorial, web
335 Comments
Another Desktop Job and its GUI Event Analysis
When there is a big job to do I really really like Event Driven programming. All around programming work are events, whether that be for web work or desktop work. It has probably increased over time, because of the increased interactivity of the way work is done with computers and how it has to interface with people using it.
What interests me the most are:
- the design of the relationship between data (ie. database needs) and software (ie. programs) and linkages (ie. networking) and environment (ie. platform) and people involved (ie. implementation) … usually the Stakeholders and Development Group and its Software Lead
- software product analysis (ie. software platforms, database platforms) … usually the Software Lead and/or Analyst/Programmer
- data design (ie. database structure) … usually the Software Lead and/or Analyst/Programmer
- the design of the GUI (graphical user interface) as far as components of the interface is concerned … usually the Software Lead and/or Analyst/Programmer
- what events are needed to make these components above useful … usually the Analyst/Programmer
- redesigning as technical problems make different solutions a better fit … usually the Analyst/Programmer and often the Software Lead
The example here is Colour Matching Paint Colours. Pretty clearly the database design is crucial. The interface of the user to this data is also critical, and so a GUI design will be part of the process.
How do you approach this?
Well, nobody can really lay down the law here, because there will be requirements and opinions from many sources, but supposing you can arrive at a GUI component list from these discussions, then, how do you proceed forward?
Sometimes it is easy to forget the events, but the events equate to processes, and, it seems to me, this is what is interesting, and can be a good approach to take. If you are working in an OOP environment it would be useful to have objects in mind as you evaluate a proposed process (or event).
Below is an analysis of the events used for the GUI of the Colour Matching desktop program (Visual Studio 2010 VB.Net interfacing to MS-SQL and/or Advantage) of this presentation. Think it makes for interesting reading (zzzzzzzzzzz) … there’s always one, isn’t there?!
Event Usage Analysis for Colour Matching Program |
---|
Activated |
BackColorChanged |
CheckedChanged |
Click |
DoWork |
DocumentCompleted |
DoubleClick |
DragDrop |
DragEnter |
DragLeave |
DragOver |
DropDownClosed |
FormClosed |
FormClosing |
KeyDown |
KeyPress |
Leave |
Load |
MouseClick |
MouseDown |
MouseHover |
MouseLeave |
Navigated |
Resize |
SelectedIndexChanged |
Shown |
SizeChanged |
TextChanged |
VisibleChanged |
If this was interesting you may be interested in this too.
Virtual Private Networks on macOS Primer Tutorial
There’s a good chance you’ve heard of the term “Virtual Private Network”? If not, how about VPN? Let’s hear what Wikipedia has to say about this networking topic …
A virtual private network (VPN) extends a private network across a public network, and enables users to send and receive data across shared or public networks as if their computing devices were directly connected to the private network. Applications running across a VPN may therefore benefit from the functionality, security, and management of the private network.[1]
VPN technology was developed to allow remote users and branch offices to access corporate applications and resources. To ensure security, the private network connection is established using an encrypted layered tunneling protocol and VPN users use authentication methods, including passwords or certificates, to gain access to the VPN. In other applications, Internet users may secure their transactions with a VPN, to circumvent geo-restrictions and censorship, or to connect to proxy servers to protect personal identity and location to stay anonymous on the Internet. However, some Internet sites block access to known VPN technology to prevent the circumvention of their geo-restrictions, and many VPN providers have been developing strategies to get around these roadblocks.
In a past role, I can remember frequent use of these VPNs, and/or GoToMeeting (that we talked about with at GoTo Meeting Primer Tutorial), as two examples of means by which we could troubleshoot issues remotely for a client’s software, and had a need the other day to revisit how this is done at the mac OS (with a MacBook Pro laptop for example). We’ll detail some of the company specific requirements on another posting, but you may be wondering where all this happens on a macOS such as our macOS Mojave version 10.14 on our MacBook Pro.
- Click the Apple logo at the top left
- Click System Preferences…, and, as necessary “left arrow” back to the main screen of System Preferences (if you were doing something else there, that is)
- Click Network icon to arrive at a Network screen with existant Network connection possibilities listed at the left column … perhaps you already have the VPN of interest listed there, and if so, that is what you click to establish the relevant VPN connection, else to start a VPN connection configuration …
- Click the “+” button at bottom left to configure a new Network connection, and a window opens up offering “Interface” and “Service Name”
- For “Service Name” pick a name for the VPN connection that will ring bells for you about what VPN connection you will be attempting
- For “Interface” choose “VPN” from the dropdown list, and a window opens up offering “Interface” and “VPN Type” and “Service Name” (filled in okay because of last step)
- The company you are connecting with will supply the “VPN Type” out of …
- L2TP over IPSec
- Click Create button to a “Configuration” (as distinct from the “Default” one) and “Service Name” and “Account Name” and “Authentication Settings” (made up of “User Authentication” via Password/RFSA SecurID/Certificate/Kerberos/CrypotoCard and “Machine Authentication” via SharedSecretCertificate and optional “Group Name”)
- Click “Connect” button to establish a VPN connection, as required (now)
- Cisco IPSec
- Click Create button to a “Server Address” and “Account Name” and “Password” and “Authentication Settings” (made up of “Machine Authentication” via SharedSecretCertificate and optional “Group Name”)
- Click “Connect” button to establish a VPN connection, as required (now)
- IKEv2
- Click Create button to a “Server Address” and “Remote ID” and “Local ID” and “Authentication Settings” (made up of “Username” (Username and Password) or Certificate (that is a file you browse for (as for mentions above too)) or “None”)
- Click “Connect” button to establish a VPN connection, as required (now)
- L2TP over IPSec
That VPN connection becomes like a layer on top (so the local broadband or other connection speed needs to be up to it, which “SpeedTest” into a search engine can measure for you, and/or see it discussed at LAN Speed Testing Primer Tutorial, and should yield a “Download Speed” of 15Mbps (megabits per second) or faster), so don’t be surprised if some public URLs that used to work stop working while your VPN connection is active. If so, they are resurrected once any temporary VPN connection is later “Disconnected”.
Enough for now. We think so, but later we might follow up on this, and tell you some specifics of a real case, to be able to “Remote Desktop” on a MacBook Pro via a VPN connection enabling the logging on and working with a Windows Desktop PC (left on at an office). That Windows Desktop PC in turn has access to the relevant company’s File Servers and Intranet, so that work can be achieved remotely, the VPN offering similar company security arrangements as would be the case in the office.
You can also see this play out at WordPress 4.1.1′s Virtual Private Networks on macOS Primer Tutorial.
Did you know?
VPN and VNC or (Virtual Network Computing) that we discussed with Windows Remote Desktop Primer Tutorial are two different networking concepts. We used a VNC within our local networking environment of the house here (ie. not a “remote connection” as such) to share screens between a MacBook Pro (Mac OS X=macOS) and a Windows Desktop PC. What is common to all these networking activities is the word “connection”, as a general term to describe the means by which two computers or devices (or concepts like databases) can “communicate” (or be “linked”).
If this was interesting you may be interested in this too.
Posted in Networking, Tutorials, eLearning
Tagged address, authentication, certificate, Cisco, company, configuration, connection, Did you know, encryption, GoToMeeting, ipsec, Mac OS X, Macbook Pro, macOS, macOS Mojave, network, networking, passowrd, server, speedtest, tutorial, username, virtual private network, vpn
Leave a comment
Simon Says Game Primer Tutorial
One of the great things about the “net” is learning things off other people. Here at this blog we’ve mentioned the stupendous HTML5 File API link we’ve used a lot for “shape to upload” local disk file browsing purposes in so many web applications we’ve talked about. So, thanks for that, but that File API brilliance is not all we learnt by putting that logic into play. We’ve not up until now, formalized it into a “proof of concept” web application, but we’ve now adapted its …
At HTML5 File API … |
---|
document.querySelector(‘.readBytesButtons’).addEventListener(‘click’, function(evt) { |
Adapted for a Simon Says Game |
document.querySelector(‘.classy’).addEventListener(‘click’, function(evt) { if (evt.target.tagName.toLowerCase() == ‘button’) { eval(evt.target.title); } }, false); |
Let’s learn a bit more about the crucial document.querySelector method …
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
For me, and I grant you it might just be me, but it breaks the nexus in my mind that I should always be thinking …
- HTML element ID attribute is associated with Javascript DOM (action) work … eg. clicking a button and looking after other event logics
- HTML element class attribute is associated with CSS (styling) work
… and not quite “never the twain shall meet” because ID CSS is commonly used by us, but generally the above principles hold for us.
The use of the document.querySelector method above turns this on its head though, to the extent that with the underlying Simon Says game HTML and Javascript and CSS doc_qs.html code …
- no HTML elements needed any ID attributes … and yet …
- HTML button elements with a class are controlled by onclick logic instigated by that right hand Javascript code above … but it had to be (a little awkwardly, we grant you) arranged that …
- only one HTML button class=’classy’ exists at any given time to allow that document.querySelector methodology to serve its purpose in the Simon Says game (which is just a bit of fun trying to succeed with what Simon Says to turn its underlying table all green)
We hope this is of interest to you too, and thanks to this useful link for some CSS ideas for button styling, and 30 Funniest Simon Says Ideas for Simon Says ideas.
You can also see this play out at WordPress 4.1.1′s Simon Says Game Primer Tutorial.
If this was interesting you may be interested in this too.
Posted in Event-Driven Programming, Tutorials, eLearning
Tagged attribute, class, CSS, document, DOM, event, game, games, HTML, is, Javascript, onclick, programming, querySelector, tutorial
Leave a comment
Javascript and PHP Base64 Media Tutorial
It’s likely that if you use Base64 a lot with your web applications whether that involves Javascript client ….
… or some serverside language functions like PHP’s …
… you will have used it when accessing, or displaying or uploading media, via HTML clientside …
- image via HTML img element or as a background image to other HTML elements, as we deploy functionality for today
- audio via HTML audio element
- video via HTML video element
… and along with Base64 you may have used data URI data to define this media content. With this media data we are lucky having written this web application in PHP where we can involve its file_get_contents function to be able to handle the user entering …
- an absolute media URL … where we match up extensions to mime types as the mechanism to tell the HTML what type of data to expect with audio or video data … versus …
- a browse button can have the user pick out a local disk media file to use, which involved “shape to upload” logic featuring the great HTML5 File API ideas
To see what we mean here, feel free to try the changed btoa_atob_base64.php‘s live run link.
You can also see this play out at WordPress 4.1.1′s Javascript and PHP Base64 Media Tutorial.
Previous relevant Javascript and PHP Base64 Primer Tutorial is shown below.
We’ve long been interested in all of the PHP functions…
- urldecode
- urlencode … and sometimes, especially if data URI data is involved …
- base64_decode
- base64_encode
… to facilitate the transfer of sizeable amounts of data within PHP or from HTML to PHP via a form (sometimes method=POST) element.
If there is no form involved and/or if there is a small amount of data (in a form method=GET) you could get by just with HTML to HTML and using Javascript …
… but just recently we had an occasion (and then another) to start getting interested in Javascript Base64 conversion usages, using …
… when we presented …
- Venn Diagrams Onclick Tutorial (and before that creating Flowcharts)
- HTML Square Horizontal Rule Plot Polynomial Tutorial
… and if memory serves me correctly, we first started using btoa and atob to help with …
- creating a background image for an HTML element via a Animated GIF via PHP Writing PHP Data URI Tutorial animated GIF creator “PHP Writes PHP” web application that now has the option for data URI (and think perhaps the reason to “go data URI” is that data URIs are great in emails where if an email attachment is downloaded a data URI (as distinct from an absolute or relative URL) is self contained and transportable) … but recently we’ve started looking at btoa and atob even more because …
- to send base64 (converted ascii or graphic data) in an HTML form to a PHP destination avoids the need that we seem to often face (but please research enctype for other thoughts here) where we need to go (in PHP, something like) …
$phpvar = str_replace('+', ' ', urldecode($_POST['fieldposted']));
… a really kludgy and annoying thing for us because what if that $_POST['fieldposted'] has legitimate text like …1 + 1 = 2
… not …
1 + 1 = 11… to use syntax above is wrong … and so in today’s proof of concept (btoa_atob_base64.php‘s) live run we deliberately entered …
The rain +
in Spain +
falls mainly +
on the plain.
… to show you that, indeed, the use of Javascript btoa at the form’s onsubmit (form) event can help accurately be interpreted by any destination PHP (here’s looking at you, kid) via …<?php
// …
echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";
// …
?>
… type of PHP code, and never interpret the data incorrectly
Clearly, if you are not asleep, you’re interested, and we hope this helps, or clarifies, a little!
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
Posted in Event-Driven Programming, Tutorials, eLearning
Tagged atob, audio, base64, browse, btoa, data uri, decodeURIComponent, encodeURIComponent, enctype, extension, file, file API, form, get, HTML, image, Javascript, media, method, mimetype, onsubmit, PHP, post, programming, tutorial, url, urldecode, urlencode, video
Leave a comment
PHP Form Validation via Filter Extension Tutorial
Our recent Javascript and PHP Base64 Primer Tutorial with its Base64 thoughts, the …
echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";
… of which we adopt for today’s PHP code, set our minds towards HTML form thoughts and HTML form validation thoughts. The most immediate validation thought on an HTML form is probably …
- onsubmit event Javascript client logic … but today we go exploring …
- callback PHP serverside logic via the PHP Filter extension functionalities in the pattern …
$var=filter_var($prevar,
);
You will see on examination of our proof of concept PHP filter_ideas.php code how these PHP Filter Extensions can be used for validation purposes (with a more extensive list here), and you could try it out for yourself at this live run link.
If form validation interests you, perhaps a read of HTML5 Form API Validation Primer Tutorial below is in order.
You can also see this play out at WordPress 4.1.1′s PHP Form Validation via Filter Extension Tutorial.
Previous relevant HTML5 Form API Validation Primer Tutorial is shown below.
HTML5 is more than just the “5″ tagged on. Take a look at this list of API related parts to the HTML5 specification.
As you may have gleaned from our recent HTML Input Element Types Randomized History Tutorial a lot of new HTML input elements were added with the view to improving the capabilities of HTML form elements for collecting information from users interactively. Along with that, as you might expect, validation methodologies were improved, as any programmer would tell you, can be one of the most challenging “practical element” of web design to do well to not involve user error, or “user giving up”.
The HTML5 form API has great “Constraint Validation”, not all new to HTML, but vastly improved and extended, as you can read a lot about at this really great webpage, thanks.
The HTML input attribute we find of great practical benefit with all this is the pattern attribute to define a constraint, in the same sort of vein as a RegEx expressions helps you perform pattern-matching and “search and replace” functions on text. This would be great use for organizations that work with “codes” or “Part Numbers” or SKU (stock keeping units) that follow a consistent pattern.
You can try some simple Constraint Validation at today’s live run link with its underlying serverside PHP code you could call html5_form_constraint_validation.html as you wish.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
Posted in Event-Driven Programming, Tutorials, eLearning
Tagged atob, base64, btoa, data uri, decodeURIComponent, encodeURIComponent, enctype, extension, filter, form, get, HTML, Javascript, method, onsubmit, PHP, post, programming, tutorial, urldecode, urlencode, validation
Leave a comment
WordPress Highlight Lookups Plugin Cookies Tutorial
The recent WordPress Highlight Lookups Plugin Tutorial presented a static 8 option list of absolute URLs to navigate to, nuanced by the highlighted text of the user on a webpage of this blog. Our aim today is to loosen that “static” restrictiveness, and allow both …
- within a session in a web browser … and between, that is for an …
- intersession scenario with the same web browser
… remember and recall any user defined absolute URL arrangement. Being as this URL#Title represents a pretty small amount of data, we are going to use HTTP Cookies, and Javascript (client) HTTP Cookie …
- creation of
- recall of
- removal of
… functionalities to allow the user to click a + button to add a new absolute URL of their choosing, or a - button to remove all such user defined absolute URLs (controlled by HTTP Cookies).
The changed PHP rjmprogramming-multi-lookup.php plugin code becomes …
<?php
/**
* @package Rjmprogramming_Multi_Lookup
* @version 1.6
*/
/*
Plugin Name: Rjmprogramming Multi Lookup
Description: Float various lookup button links to Wikipedia, Google, Free Dictionary for highlighted text of a blog webpage.
Author: Robert James Metcalfe
Version: 1.6
Author URI: //www.rjmprogramming.com.au/
*/
// We need some Javascript to respond to highlights
function rjmprogramming_multi_js() {
echo "<div id='phfloater'></div>
<script type='text/javascript'>
var phight=' ';
var cbackc='';
var cookcnt=0;
var cookblank=' ';
var zoharr=[];
function plfhlater() {
var aswq=document.getElementsByTagName(\"a\");
for (var iaswq=0; iaswq<aswq.length; iaswq++) {
if (aswq[iaswq].innerHTML == 'Long hover help available.') {
aswq[iaswq].innerHTML='Highlighting and long hover help.';
aswq[iaswq].title+=' ... also note that Highlighting Webpage Contents allows for Wikipedia, Google Translate, Free Dictionary and Google Search functionalities to appear';
}
}
}
function cookiePutHVal(indv) {
var expireDate = new Date();
var opis='';
expireDate.setMonth(expireDate.getMonth()+6);
expireDate.setDate(expireDate.getDate()-1);
if (indv == '') {
cookcnt=0;
cbackc='';
document.cookie = 'linktoothers' + '=' + cbackc + ';expires=' + expireDate.toGMTString();
} else {
var pvalis=prompt('Enter absolute URL prefix#Title ... where two blank Title prefix replaces value blanks for - and one blank Title prefix replaces value blanks for +', '');
if (pvalis == null) { pvalis=''; }
if (pvalis.indexOf('//') != -1) {
var otit='Other Link';
if (pvalis.indexOf('#') != -1) {
otit=pvalis.split('#')[1].trim();
}
if (pvalis.split('#')[1].indexOf(' ') == 0) {
opis=phight.replace(/\ /g,' + \"'-'\" + ');
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + pvalis.split('#')[0].trim() + '\" title=\"' + pvalis.split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hopis(String.fromCharCode(45));\" ontouchstart=\"this.href=this.title + hopis(String.fromCharCode(45));\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
} else if (pvalis.split('#')[1].indexOf(' ') == 0) {
opis=phight.replace(/\ /g,' + \"'+'\" + ');
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + pvalis.split('#')[0].trim() + '\" title=\"' + pvalis.split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hopis(String.fromCharCode(43));\" ontouchstart=\"this.href=this.title + hopis(String.fromCharCode(43));\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
} else {
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + pvalis.split('#')[0].trim() + '\" title=\"' + pvalis.split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
}
if (cbackc != '') {
document.cookie = 'linktoothers' + '=' + cbackc + '|' + encodeURIComponent(pvalis) + ';expires=' + expireDate.toGMTString();
} else {
cbackc=encodeURIComponent(pvalis);
document.cookie = 'linktoothers' + '=' + encodeURIComponent(pvalis) + ';expires=' + expireDate.toGMTString();
}
cookcnt++;
}
}
}
function cookieHVal(cName) {
if (document.cookie != '') {
var tCookie=document.cookie.split('; ');
for (var j=0; j<tCookie.length; j++) {
if (cName == tCookie[j].split('=')[0]) {
return decodeURIComponent(tCookie[j].split('=')[1]);
}
}
}
return '';
}
function hopis(inop) {
return hight.replace(/\ /g, inop);
}
function plookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', fourhundred=300, isfx='0';
if (phight == ' ') {
setTimeout(plfhlater, 5000);
phight='';
cbackc=cookieHVal('linktoothers');
if (cbackc != '') {
zoharr=cbackc.split('|');
}
}
setTimeout(plookforhighlight, usualdelay);
var xsel=window.getSelection().toString();
if (xsel.length == 0) {
try {
xsel=document.selection.createRange().htmlText;
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
} catch(ertw) {
xsel='';
}
} else {
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
if (xsel != phight && xsel != '') {
oRange = window.getSelection().getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();
s_top = ('' + oRect.top).replace('px','') + 'px';
s_left = ('' + oRect.left).replace('px','') + 'px';
if (s_top != '0px') {
fourhundred=eval('' + s_top.replace('px',''));
s_top='0px';
var dse='', dde='';
if (document.scrollingElement) {
if (document.scrollingElement.scrollTop) {
dse=('' + document.scrollingElement.scrollTop);
}
}
if (document.documentElement) {
if (document.documentElement.scrollTop) {
dde=('' + document.documentElement.scrollTop);
}
}
if (dse != '') {
fourhundred+=eval('' + dse.replace('px',''));
isfx='0';
} else if (dde != '') {
fourhundred+=eval('' + dde.replace('px',''));
isfx='0';
} else if (('' + window.scrollY) != '') {
fourhundred+=eval('' + ('' + window.scrollY).replace('px',''));
isfx='0';
} else if (('' + window.pageYOffset) != '') {
fourhundred+=eval('' + ('' + window.pageYOffset).replace('px',''));
isfx='0';
} else {
isfx=('' + document.body.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + document.scrollingElement.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.scrollY).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.pageYOffset).replace('px','');
}
}
}
}
fourhundred+=120;
}
}
}
if (xsel != phight && xsel != '') {
phight=xsel;
if (s_top == '0px') { s_top = ('' + eval(fourhundred + eval('' + isfx))) + 'px'; }
if (document.getElementById('phfloater')) {
if (document.getElementById('phfloater').innerHTML == '') {
document.getElementById('phfloater').style.position='absolute';
document.getElementById('phfloater').style.top=s_top;
document.getElementById('phfloater').style.left=s_left;
document.getElementById('phfloater').style.zIndex='85';
document.getElementById('phfloater').style.backgroundColor='rgba(0,255,165,0.9)';
document.getElementById('phfloater').style.border='1px solid purple';
document.getElementById('phfloater').style.padding='2px 2px 2px 2px';
document.getElementById('phfloater').style.display='block';
document.getElementById('phfloater').innerHTML='<b>Wikipedia <a style=\"inline-block;\" href=\"//wikipedia.org/wiki/Main_Page\" title=\"//wikipedia.org/wiki/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'_'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'_'\" + ');\" id=b_phfloater_wikipedia>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Google Translate <a style=\"inline-block;\" href=\"//translate.google.com\" title=\"//translate.google.com/#view=home&op=translate&sl=auto&tl=en&text=\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_google_translate>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Free Dictionary <a style=\"inline-block;\" href=\"//www.thefreedictionary.com/\" title=\"//www.thefreedictionary.com/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" id=b_phfloater_free_dictionary>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Google Search <a style=\"inline-block;\" href=\"//www.google.com/\" title=\"//www.google.com/search?q=\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" id=b_phfloater_google_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Tag Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/tag/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" id=b_phfloater_tag_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Category Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/category/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" id=b_phfloater_category_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Tag First Word Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/tag/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ').replace(' + \"'-','/?wopenall='\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ').replace(' + \"'-','/?wopenall='\" + ');\" id=b_phfloater_tag_first_word_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Posting Title Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/itblog/match/mapper.php\" title=\"//www.rjmprogramming.com.au/itblog/match/mapper.php?pm=\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_posting_title_search>' + phight + '</a></b><br>';
if (zoharr.length >= 1) {
for (var ioharr=0; ioharr<zoharr.length; ioharr++) {
otit='Other Link ' + eval(1 + ioharr);
if (zoharr[ioharr].indexOf('#') != -1) {
otit=zoharr[ioharr].split('#')[1].trim();
}
if (zoharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=phight.replace(/\ /g,' + \"'-'\" + ');
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + zoharr[ioharr].split('#')[0].trim() + '\" title=\"' + zoharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hopis(String.fromCharCode(45));\" ontouchstart=\"this.href=this.title + hopis(String.fromCharCode(45));\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
} else if (zoharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=phight.replace(/\ /g,' + \"'+'\" + ');
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + zoharr[ioharr].split('#')[0].trim() + '\" title=\"' + zoharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hopis(String.fromCharCode(43));\" ontouchstart=\"this.href=this.title + hopis(String.fromCharCode(45));\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
} else {
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + zoharr[ioharr].split('#')[0].trim() + '\" title=\"' + zoharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
}
cookcnt++;
}
}
document.getElementById('phfloater').innerHTML+='<b><input title=\"Add your own into HTTP Cookies\" type=button onclick=cookiePutHVal(cookblank); value=+></input> <input title=\"Remove all HTTP Cookie URLs\" type=button onclick=cookiePutHVal(cookblank.trim()); value=-></input></b><br>';
} else {
document.getElementById('b_phfloater_wikipedia').innerHTML=phight;
document.getElementById('b_phfloater_google_translate').innerHTML=phight;
document.getElementById('b_phfloater_free_dictionary').innerHTML=phight;
document.getElementById('b_phfloater_google_search').innerHTML=phight;
document.getElementById('b_phfloater_tag_search').innerHTML=phight;
document.getElementById('b_phfloater_category_search').innerHTML=phight;
document.getElementById('b_phfloater_tag_first_word_search').innerHTML=phight;
document.getElementById('b_phfloater_posting_title_search').innerHTML=phight;
if (cookcnt > 0) {
for (var icook=0; icook<cookcnt; icook++) {
document.getElementById('b_phfloater_' + icook).innerHTML=phight;
}
}
document.getElementById('phfloater').style.top=s_top;
document.getElementById('phfloater').style.left=s_left;
document.getElementById('phfloater').style.display='block';
}
}
} else if (xsel == '') {
if (document.getElementById('phfloater')) {
document.getElementById('phfloater').style.display='none';
}
phight='';
}
}
plookforhighlight();
</script>
";
}
add_action( 'wp_footer', 'rjmprogramming_multi_js' );
?>
You can also see this play out at WordPress 4.1.1′s WordPress Highlight Lookups Plugin Cookies Tutorial.
Previous relevant WordPress Highlight Lookups Plugin Tutorial is shown below.
Yesterday’s WordPress Highlight Lookups Tutorial showed us …
- functionality to link highlighted text to Wikipedia, Google, Free Dictionary and other inhouse links via the TwentyTen theme’s wp-contents/themes/twentyten/header.php … and today, the lesson is that any functionality you do that way can also be attended to via …
- functionality to link highlighted text to Wikipedia, Google, Free Dictionary and other inhouse links via an inhouse plugin called “Rjmprogramming Multi Lookup” (NB: it is good to “manufacture” a unique plugin name here)
… the significant issue being to pick a suitable Hook and associated unique PHP function name to use. What Hook works for us, here, with this functionality? Well, it is optional, and independent, so why not load it in to work at the wp_footer Hook as explained below …
do_action( ‘wp_footer’ )
Prints scripts or data before the closing body tag on the front end.
… just before the </body> where we can HTML and Javascript let it (within PHP rjmprogramming-multi-lookup.php) …
<?php
/**
* @package Rjmprogramming_Multi_Lookup
* @version 1.6
*/
/*
Plugin Name: Rjmprogramming Multi Lookup
Description: Float various lookup button links to Wikipedia, Google, Free Dictionary for highlighted text of a blog webpage.
Author: Robert James Metcalfe
Version: 1.6
Author URI: //www.rjmprogramming.com.au/
*/
// We need some Javascript to respond to highlights
function rjmprogramming_multi_js() {
echo "<div id='phfloater'></div>
<script type='text/javascript'>
var phight=' ';
function plfhlater() {
var aswq=document.getElementsByTagName(\"a\");
for (var iaswq=0; iaswq<aswq.length; iaswq++) {
if (aswq[iaswq].innerHTML == 'Long hover help available.') {
aswq[iaswq].innerHTML='Highlighting and long hover help.';
aswq[iaswq].title+=' ... also note that Highlighting Webpage Contents allows for Wikipedia, Google Translate, Free Dictionary and Google Search functionalities to appear';
}
}
}
function plookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', fourhundred=300, isfx='0';
if (phight == ' ') {
setTimeout(plfhlater, 5000);
phight='';
}
setTimeout(plookforhighlight, usualdelay);
var xsel=window.getSelection().toString();
if (xsel.length == 0) {
try {
xsel=document.selection.createRange().htmlText;
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
} catch(ertw) {
xsel='';
}
} else {
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
if (xsel != phight && xsel != '') {
oRange = window.getSelection().getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();
s_top = ('' + oRect.top).replace('px','') + 'px';
s_left = ('' + oRect.left).replace('px','') + 'px';
if (s_top != '0px') {
fourhundred=eval('' + s_top.replace('px',''));
s_top='0px';
var dse='', dde='';
if (document.scrollingElement) {
if (document.scrollingElement.scrollTop) {
dse=('' + document.scrollingElement.scrollTop);
}
}
if (document.documentElement) {
if (document.documentElement.scrollTop) {
dde=('' + document.documentElement.scrollTop);
}
}
if (dse != '') {
fourhundred+=eval('' + dse.replace('px',''));
isfx='0';
} else if (dde != '') {
fourhundred+=eval('' + dde.replace('px',''));
isfx='0';
} else if (('' + window.scrollY) != '') {
fourhundred+=eval('' + ('' + window.scrollY).replace('px',''));
isfx='0';
} else if (('' + window.pageYOffset) != '') {
fourhundred+=eval('' + ('' + window.pageYOffset).replace('px',''));
isfx='0';
} else {
isfx=('' + document.body.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + document.scrollingElement.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.scrollY).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.pageYOffset).replace('px','');
}
}
}
}
fourhundred+=120;
}
}
}
if (xsel != phight && xsel != '') {
phight=xsel;
if (s_top == '0px') { s_top = ('' + eval(fourhundred + eval('' + isfx))) + 'px'; }
if (document.getElementById('phfloater')) {
if (document.getElementById('phfloater').innerHTML == '') {
document.getElementById('phfloater').style.position='absolute';
document.getElementById('phfloater').style.top=s_top;
document.getElementById('phfloater').style.left=s_left;
document.getElementById('phfloater').style.zIndex='85';
document.getElementById('phfloater').style.backgroundColor='rgba(0,255,165,0.9)';
document.getElementById('phfloater').style.border='1px solid purple';
document.getElementById('phfloater').style.padding='2px 2px 2px 2px';
document.getElementById('phfloater').style.display='block';
document.getElementById('phfloater').innerHTML='<b>Wikipedia <a style=\"inline-block;\" href=\"//wikipedia.org/wiki/Main_Page\" title=\"//wikipedia.org/wiki/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'_'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'_'\" + ');\" id=b_phfloater_wikipedia>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Google Translate <a style=\"inline-block;\" href=\"//translate.google.com\" title=\"//translate.google.com/#view=home&op=translate&sl=auto&tl=en&text=\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_google_translate>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Free Dictionary <a style=\"inline-block;\" href=\"//www.thefreedictionary.com/\" title=\"//www.thefreedictionary.com/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" id=b_phfloater_free_dictionary>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Google Search <a style=\"inline-block;\" href=\"//www.google.com/\" title=\"//www.google.com/search?q=\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" id=b_phfloater_google_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Tag Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/tag/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" id=b_phfloater_tag_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Category Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/category/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" id=b_phfloater_category_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Tag First Word Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/tag/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ').replace(' + \"'-','/?wopenall='\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ').replace(' + \"'-','/?wopenall='\" + ');\" id=b_phfloater_tag_first_word_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Posting Title Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/itblog/match/mapper.php\" title=\"//www.rjmprogramming.com.au/itblog/match/mapper.php?pm=\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_posting_title_search>' + phight + '</a></b><br>';
} else {
document.getElementById('b_phfloater_wikipedia').innerHTML=phight;
document.getElementById('b_phfloater_google_translate').innerHTML=phight;
document.getElementById('b_phfloater_free_dictionary').innerHTML=phight;
document.getElementById('b_phfloater_google_search').innerHTML=phight;
document.getElementById('b_phfloater_tag_search').innerHTML=phight;
document.getElementById('b_phfloater_category_search').innerHTML=phight;
document.getElementById('b_phfloater_tag_first_word_search').innerHTML=phight;
document.getElementById('b_phfloater_posting_title_search').innerHTML=phight;
document.getElementById('phfloater').style.top=s_top;
document.getElementById('phfloater').style.left=s_left;
document.getElementById('phfloater').style.display='block';
}
}
} else if (xsel == '') {
if (document.getElementById('phfloater')) {
document.getElementById('phfloater').style.display='none';
}
phight='';
}
}
plookforhighlight();
</script>
";
}
add_action( 'wp_footer', 'rjmprogramming_multi_js' );
?>
… and be placed into the wp-contents/plugins folder for our blog.
It’s green! What happened to the orange of yesterday? Well, we don’t want both methods to run, but along the way proved they could. So what we did with that header.php code was to change …
function lookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', fourhundred=300, isfx='0';
if (hight == ' ') {
setTimeout(lfhlater, 5000);
hight='';
}
setTimeout(lookforhighlight, usualdelay);
// ... blah blah
}
}
… to …
function lookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', fourhundred=300, isfx='0';
if (hight == ' ') {
setTimeout(lfhlater, 5000);
hight='';
}
if (!document.getElementById('phfloater')) {
setTimeout(lookforhighlight, usualdelay);
// ... blah blah
}
}
}
Previous relevant WordPress Highlight Lookups Tutorial is shown below.
We’re back at WordPress TwentyTen theme header.php change methodologies to implement some new WordPress functionality like yesterday’s WordPress Plugin Primer Tutorial in that highlighted text of a webpage is used (except that we’ve now opened it up to the non-admin WordPress blog webpages), but this time presenting an overlayed floating set of hyperlink options linking to …
- Wikipedia
- Google Translate
- Free Dictionary
- Google Search
- Tag Search
- Category Search
- Tag First Word Search
- Posting Title Search
As far as header.php code goes we add this Javascript …
<script type=’text/javascript’>
var hight=' ';
function lfhlater() {
var aswq=document.getElementsByTagName("a");
for (var iaswq=0; iaswq<aswq.length; iaswq++) {
if (aswq[iaswq].innerHTML == 'Long hover help available.') {
aswq[iaswq].innerHTML='Highlighting and long hover help.';
aswq[iaswq].title+=' ... also note that Highlighting Webpage Contents allows for Wikipedia, Google Translate, Free Dictionary and Google Search functionalities to appear';
}
}
}
function lookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', fourhundred=300, isfx='0';
if (hight == ' ') {
setTimeout(lfhlater, 5000);
hight='';
}
setTimeout(lookforhighlight, usualdelay);
var xsel=window.getSelection().toString();
if (xsel.length == 0) {
try {
xsel=document.selection.createRange().htmlText;
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
} catch(ertw) {
xsel='';
}
} else {
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
if (xsel != hight && xsel != '') {
oRange = window.getSelection().getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();
s_top = ('' + oRect.top).replace('px','') + 'px';
s_left = ('' + oRect.left).replace('px','') + 'px';
if (s_top != '0px') {
fourhundred=eval('' + s_top.replace('px',''));
s_top='0px';
var dse='', dde='';
if (document.scrollingElement) {
if (document.scrollingElement.scrollTop) {
dse=('' + document.scrollingElement.scrollTop);
}
}
if (document.documentElement) {
if (document.documentElement.scrollTop) {
dde=('' + document.documentElement.scrollTop);
}
}
if (dse != '') {
fourhundred+=eval('' + dse.replace('px',''));
isfx='0';
} else if (dde != '') {
fourhundred+=eval('' + dde.replace('px',''));
isfx='0';
} else if (('' + window.scrollY) != '') {
fourhundred+=eval('' + ('' + window.scrollY).replace('px',''));
isfx='0';
} else if (('' + window.pageYOffset) != '') {
fourhundred+=eval('' + ('' + window.pageYOffset).replace('px',''));
isfx='0';
} else {
isfx=('' + document.body.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + document.scrollingElement.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.scrollY).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.pageYOffset).replace('px','');
}
}
}
}
fourhundred+=100;
}
}
}
if (xsel != hight && xsel != '') {
hight=xsel;
if (s_top == '0px') { s_top = ('' + eval(fourhundred + eval('' + isfx))) + 'px'; }
if (document.getElementById('hfloater')) {
if (document.getElementById('hfloater').innerHTML == '') {
document.getElementById('hfloater').style.position='absolute';
document.getElementById('hfloater').style.top=s_top;
document.getElementById('hfloater').style.left=s_left;
document.getElementById('hfloater').style.zIndex='87';
document.getElementById('hfloater').style.backgroundColor='rgba(255,165,0,0.9)';
document.getElementById('hfloater').style.border='1px solid purple';
document.getElementById('hfloater').style.padding='2px 2px 2px 2px';
document.getElementById('hfloater').style.display='block';
document.getElementById('hfloater').innerHTML='<b>Wikipedia <a style="inline-block;" href="//wikipedia.org/wiki/Main_Page" title="//wikipedia.org/wiki/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'_'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'_'" + ');" id=b_hfloater_wikipedia>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Google Translate <a style="inline-block;" href="//translate.google.com" title="//translate.google.com/#view=home&op=translate&sl=auto&tl=en&text=" target=_blank onmouseover="this.href=this.title + encodeURIComponent(hight);" ontouchstart="this.href=this.title + encodeURIComponent(hight);" id=b_hfloater_google_translate>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Free Dictionary <a style="inline-block;" href="//www.thefreedictionary.com/" title="//www.thefreedictionary.com/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" id=b_hfloater_free_dictionary>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Google Search <a style="inline-block;" href="//www.google.com/" title="//www.google.com/search?q=" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" id=b_hfloater_google_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Tag Search <a style="inline-block;" href="//www.rjmprogramming.com.au/ITblog/" title="//www.rjmprogramming.com.au/ITblog/tag/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" id=b_hfloater_tag_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Category Search <a style="inline-block;" href="//www.rjmprogramming.com.au/ITblog/" title="//www.rjmprogramming.com.au/ITblog/category/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" id=b_hfloater_category_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Tag First Word Search <a style="inline-block;" href="//www.rjmprogramming.com.au/ITblog/" title="//www.rjmprogramming.com.au/ITblog/tag/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ').replace(' + "'-','/?wopenall='" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ').replace(' + "'-','/?wopenall='" + ');" id=b_hfloater_tag_first_word_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Posting Title Search <a style="inline-block;" href="//www.rjmprogramming.com.au/itblog/match/mapper.php" title="//www.rjmprogramming.com.au/itblog/match/mapper.php?pm=" target=_blank onmouseover="this.href=this.title + encodeURIComponent(hight);" ontouchstart="this.href=this.title + encodeURIComponent(hight);" id=b_hfloater_posting_title_search>' + hight + '</a></b><br>';
} else {
document.getElementById('b_hfloater_wikipedia').innerHTML=hight;
document.getElementById('b_hfloater_google_translate').innerHTML=hight;
document.getElementById('b_hfloater_free_dictionary').innerHTML=hight;
document.getElementById('b_hfloater_google_search').innerHTML=hight;
document.getElementById('b_hfloater_tag_search').innerHTML=hight;
document.getElementById('b_hfloater_category_search').innerHTML=hight;
document.getElementById('b_hfloater_tag_first_word_search').innerHTML=hight;
document.getElementById('b_hfloater_posting_title_search').innerHTML=hight;
document.getElementById('hfloater').style.top=s_top;
document.getElementById('hfloater').style.left=s_left;
document.getElementById('hfloater').style.display='block';
}
}
} else if (xsel == '') {
if (document.getElementById('hfloater')) {
document.getElementById('hfloater').style.display='none';
}
hight='';
}
}
</script>
… called by the changed HTML snippet as below …
<body onload='lookforhighlight(); postcalendar(); changeasfordownload(); if (cafd == cafd) { cafd=0; } else { cafd=true; } checkonl(); setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); cookie_fonts(); is_mentioned_by(); calendar_pass(); prejustshow(); details_summary(0); '>
<div id="hfloater"></div>
Previous relevant WordPress Plugin Primer Tutorial is shown below.
Normally we make changes to this TwentyTen themed WordPress blog by changing that theme’s wp-content/themes/twentyten/header.php file. But today we show you how to write the PHP code needed to write a WordPress.org admin login plugin to create a hyperlink to a Wikipedia page regarding any text you have highlighted on your WordPress admin area webpage.
We thank …
… and we think you should read …
For us, with our very simple rjmprogramming-wikipedia-lookup.php plugin, we only needed the one piece of PHP to sit in the current WordPress wp-content/plugins directory, and then immediately be accessible to the WordPress blog admin area’s Plugins -> Activate option …
<?php
/**
* @package Rjmprogramming_Wikipedia_Lookup
* @version 1.6
*/
/*
Plugin Name: Rjmprogramming Wikipedia Lookup
Description: Float a Wikipedia lookup link for highlighted text of an admin webpage.
Author: Robert James Metcalfe
Version: 1.6
Author URI: //www.rjmprogramming.com.au/
*/
// This creates the Wikipedia lookup hyperlink
function rjmprogramming_wikipedia_lookup() {
$wikipedia_page = "Wikipedia Main Page";
echo '<a target="_blank" title="Wikipedia lookup of ..." onmouseover="var xsel=' .
"''" . '; xsel=window.getSelection().toString(); if (xsel.length == 0) {' .
' xsel=document.selection.createRange().htmlText;' .
' } if (xsel.length != 0) { this.innerHTML=xsel; this.href=' . "'" . '//wikipedia.org/wiki/' .
"'" . ' + xsel.replace(/\ /g,' . "'" . '_' . "'" . '); } " ontouchstart="var xsel=' .
'; xsel=window.getSelection().toString(); if (xsel.length == 0) {' .
' xsel=document.selection.createRange().htmlText; }' .
' if (xsel.length != 0) { this.innerHTML=xsel; this.href=' . "'" . '//wikipedia.org/wiki/' . "'" .
' + xsel.replace(/\ /g,' . "'" . '_' . "'" . '); } " id="rjmprogramming_wikipedia_lookup"' .
' href="//wikipedia.org/wiki/Main_Page">' . $wikipedia_page . '</a>';
}
// Now we set that function up to execute when the admin_notices action is called
add_action( 'admin_notices', 'rjmprogramming_wikipedia_lookup' );
// We need some CSS to position the hyperlink
function rjmprogramming_wikipedia_css() {
// This makes sure that the positioning is also good for right-to-left languages
$x = is_rtl() ? 'left' : 'right';
echo "
<style type='text/css'>
#rjmprogramming_wikipedia_lookup {
float: $x;
padding-$x: 15px;
padding-top: 5px;
margin: 0;
font-size: 11px;
}
</style>
";
}
add_action( 'admin_footer', 'rjmprogramming_wikipedia_css' );
?>
We hope this is of interest to you.
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.
Posted in Event-Driven Programming, Tutorials, eLearning
Tagged blog, button, cookie, cookies, highlight, HTTP Cookie, intersession, PHP, plugin, programming, session, text, tutorial, TwentyTen, TwentyTen theme, Wordpress
Leave a comment
Javascript and PHP Base64 Primer Tutorial
We’ve long been interested in all of the PHP functions…
- urldecode
- urlencode … and sometimes, especially if data URI data is involved …
- base64_decode
- base64_encode
… to facilitate the transfer of sizeable amounts of data within PHP or from HTML to PHP via a form (sometimes method=POST) element.
If there is no form involved and/or if there is a small amount of data (in a form method=GET) you could get by just with HTML to HTML and using Javascript …
… but just recently we had an occasion (and then another) to start getting interested in Javascript Base64 conversion usages, using …
… when we presented …
- Venn Diagrams Onclick Tutorial (and before that creating Flowcharts)
- HTML Square Horizontal Rule Plot Polynomial Tutorial
… and if memory serves me correctly, we first started using btoa and atob to help with …
- creating a background image for an HTML element via a Animated GIF via PHP Writing PHP Data URI Tutorial animated GIF creator “PHP Writes PHP” web application that now has the option for data URI (and think perhaps the reason to “go data URI” is that data URIs are great in emails where if an email attachment is downloaded a data URI (as distinct from an absolute or relative URL) is self contained and transportable) … but recently we’ve started looking at btoa and atob even more because …
- to send base64 (converted ascii or graphic data) in an HTML form to a PHP destination avoids the need that we seem to often face (but please research enctype for other thoughts here) where we need to go (in PHP, something like) …
$phpvar = str_replace('+', ' ', urldecode($_POST['fieldposted']));
… a really kludgy and annoying thing for us because what if that $_POST['fieldposted'] has legitimate text like …1 + 1 = 2
… not …
1 + 1 = 11… to use syntax above is wrong … and so in today’s proof of concept (btoa_atob_base64.php‘s) live run we deliberately entered …
The rain +
in Spain +
falls mainly +
on the plain.
… to show you that, indeed, the use of Javascript btoa at the form’s onsubmit (form) event can help accurately be interpreted by any destination PHP (here’s looking at you, kid) via …<?php
// …
echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";
// …
?>
… type of PHP code, and never interpret the data incorrectly
Clearly, if you are not asleep, you’re interested, and we hope this helps, or clarifies, a little!
You can also see this play out at WordPress 4.1.1′s Javascript and PHP Base64 Primer Tutorial.
If this was interesting you may be interested in this too.
Posted in Event-Driven Programming, Tutorials, eLearning
Tagged atob, base64, btoa, data uri, decodeURIComponent, encodeURIComponent, enctype, form, get, HTML, Javascript, method, onsubmit, PHP, post, programming, tutorial, urldecode, urlencode
Leave a comment