Responsive design and WordPress

Any time you see a WordPress web page that loads and navigates seamlessly (or as near to seamlessly as possible) across a range of different devices, know that all of that was made possible by good responsive web design. As more and more people utilize their mobile device(s) to access and surf the internet, having a website that is easy to navigate across operating systems and screen sizes will make or break your digital success.

If you want to make sure your WordPress site is accessible and user-friendly across devices, below are the dos and don’ts of responsive web design:

Wordpress design

javascript search box

Mark.js is a text highlighter written in JavaScript. It can be used to dynamically mark search terms or custom regular expressions and offers you built-in options like diacritics support, separate word search, custom synonyms, iframes support, custom filters, accuracy definition, custom element, custom class name and more.

https://markjs.io/     Examples

Here is a version that will allow you to jump to matching text   

IP address via javascript

Want to display different links on and off campus, using just Javascript, this uses webRTC:

function findIP(onNewIP) { //  onNewIp - your listener function for new IPs
  var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
  var pc = new myPeerConnection({iceServers: []}),
    noop = function() {},
    localIPs = {},
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;

  function ipIterate(ip) {
    if (!localIPs[ip]) onNewIP(ip);
    localIPs[ip] = true;
  }
  pc.createDataChannel(""); //create a bogus data channel
  pc.createOffer(function(sdp) {
    sdp.sdp.split('\n').forEach(function(line) {
      if (line.indexOf('candidate') < 0) return;
      line.match(ipRegex).forEach(ipIterate);
    });
    pc.setLocalDescription(sdp, noop, noop);
  }, noop); // create offer and set local description
  pc.onicecandidate = function(ice) { //listen for candidate events
    if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
    ice.candidate.candidate.match(ipRegex).forEach(ipIterate);
  };
}



var ul = document.createElement('ul');
ul.textContent = 'Your IPs are: '
document.body.appendChild(ul);

function addIP(ip) {
  console.log('got ip: ', ip);
  var li = document.createElement('li');
  li.textContent = ip;
  ul.appendChild(li);
}

findIP(addIP);

From http://stackoverflow.com/questions/391979/how-to-get-clients-ip-address-using-javascript-only/32841164#32841164

Using jQuery and external server

Parsing string for date using Javascript

Have a CMD command that returns the user expiration date, to get it into Javascript:

var stringToParse = "You have a doctor's appointment on 2012/03/13 16:00.  Please show up on time.";

var dateString    = stringToParse.match(/\d{4}\/\d{2}\/\d{2}\s+\d{2}:\d{2}/);

var dt            = new Date(dateString);

console.log(dt);        //prints "Tue March 13 16:00:00 EDT 2012"

http://www.htmlgoodies.com/html5/javascript/date-parsing-using-javascript-and-regular-expressions.htm

iFrame tag scaling

I want to display an iFrame with a scaled version of a web page, use CSS to do the scaling:

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

From stackoverflow   and collaboration133 

And can even scroll to a part of the web page: 

#my-div
{
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -100px;
    left     : -100px;
    width    : 1280px;
    height   : 1200px;
}

Here you have one DIV with dimensions 400x200px. Now by moving the IFRAME within it you can position it on the right place.

<div id="my-div"> <iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe> </div>

Using javascript to create Outlook email message

Want to use HTML to open Outlook with new message, use script below (only in IE):

<script type="text/javascript">
function OpenOutlookDoc(email_address,body_stuff)
{
try
{

var outlookApp = new ActiveXObject("Outlook.Application");
var nameSpace = outlookApp.getNameSpace("MAPI");
mailFolder = nameSpace.getDefaultFolder(6);
mailItem = mailFolder.Items.add('IPM.Note.FormA');
mailItem.Subject="a subject test";
mailItem.To = email_address;
mailItem.HTMLBody = body_stuff;
mailItem.display (0);
}
catch(e)
{
alert(e);
// act on any error that you get
}
}
</script>

<a href="javascript:OpenOutlookDoc('zzz@test.com','Body of message')">Click</a>


On first attempt, got error "Automation server can't create object."   Just need to do following to IE security settings: 

a) Go to Tools-->Internet Options
b) Select security tab
c) Click on Trusted Sites (or Local Intranet depending on whether your site is trusted or not)
d) Click on Custom Level
e) Ensure that "Initialize and script active x controls is not marked safe for scripting" is enabled - this comes under Activex controls and plug-ins section towards 1/4th of the scroll bar.
Click OK, OK.
Once this is completed, clear the browser cookies and cache. Close all your browser sessions. Reopen the IE to launch your site.
Try to disable the setting in step (e) to see if the problem comes back - that should give more insight to the problem.

Format date with javascript

Looking to format date in standard   mm/dd/yyyy

var d = new Date();

var month = d.getMonth()+1;
var day = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();

var output = d.getFullYear() + '-' +
    ((''+month).length<2 ? '0' : '') + month + '-' +
    ((''+day).length<2 ? '0' : '') + day + ' ' +
    ((''+hour).length<2 ? '0' :'') + hour + ':' +
    ((''+minute).length<2 ? '0' :'') + minute + ':' +
    ((''+second).length<2 ? '0' :'') + second;

See this jsfiddle for a proof: http://jsfiddle.net/nCE9u/3/
You can also enclose it within function (demo is here: http://jsfiddle.net/nCE9u/4/):

function getISODateTime(d){
    // padding function
    var s = function(a,b){return(1e15+a+"").slice(-b)};

    // default date parameter
    if (typeof d === 'undefined'){
        d = new Date();
    };

    // return ISO datetime
    return d.getFullYear() + '-' +
        s(d.getMonth()+1,2) + '-' +
        s(d.getDate(),2) + ' ' +
        s(d.getHours(),2) + ':' +
        s(d.getMinutes(),2) + ':' +
        s(d.getSeconds(),2);
}

and use it like that:

getISODateTime(new Date());

or:

getISODateTime(some_other_date);

This question is a duplicate (see: How to get current date in jquery?).



http://stackoverflow.com/questions/9050763/format-date-in-jquery

Generating URLs from a list of files in a directory

This code will take file names from a directory (eg all mp3 files) and create a URL in an output file.txt

REM dir /B  > AAoutputURLs.txt
REM for /d %%A in (*.mp3) do echo ^<root^>^<dir^>%%~A^</dir^>^</root^> >> AAoutput1.txt

REM "cmd /c  echo   Unless you have opted out, the Law Library posts URL links to the “Class Recordings” list located at http://columbo.law.cua.edu/search/r?SEARCH=class.  Access to the URL links is restricted to current CUA law students only.   >> AAoutput1.txt"

REM "cmd /c  echo If you wish to post your specific URL link(s) onto your TWEN webpage, please include the alert message for Mac users.  Thank you.  >> AAoutput1.txt"


forfiles /M *.mp3  /C "cmd /c  echo http://136.242.14.49/law.cua.edu/academicexcellence/2014Spring/@file>> AAoutput1.txt"
REM forfiles /M *.mp4  /C "cmd /c  echo http://136.242.14.49/law.cua.edu/academicexcellence/2014Spring/@file>> AAoutput1.txt"
forfiles /M *.wmv  /C "cmd /c  echo http://136.242.14.49/law.cua.edu/academicexcellence/2014Spring/@file>> AAoutput1.txt"

REM  next line puts in date
echo %date:~4,10% >> AAoutput1.txt
echo( >> AAoutput1.txtpause

javascript to highlight text, and to remove highlight

I had script to highlight text (using a div tag), but want to be able to quickly remove it, when I do another search, and want to highlight new phrase.




http://www.elated.com/articles/jquery-removing-replacing-moving-elements/

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$( init );

function init() {

  // Remove the #myDiv element but leave its contents
  $('#myPara').unwrap();
}

</script>

</head>
<body>

  <div id="myDiv">
    <p id="myPara">A paragraph of text</p>
    <p>Another paragraph of text</p>
  </div>

http://www.the-art-of-web.com/javascript/search-highlight/  


Whole tag:
http://stackoverflow.com/questions/4232961/jquery-remove-a-tag-but-keep-innerhtml 






http://csdirect.iii.com/sierrahelp/Default.htm#sgcir_recent_circ_hist.html?Highlight=viewing%20the%20recent


http://csdirect.iii.com/sierrahelp/Content/Resources/Scripts/autoSearchComplete.js


function quickSearch(searchTerm) {
    if (searchTerm == "") {
        $("#autoCompleteContainer").html("");
        $("#autoCompleteContainer").append("<div id='search_suggestions_box'>Begin typing to begin your Quick Search</div>")
   
        return false;
    }
    var quickSearchArray = new Array();
    var quickSearchCount = 0;
    if (window.populatingURLS) {
        $("#search_suggestions_box").html("<span class='section_title'>Loading Data...</span>");
        return false;
    }
   

    $("#search_suggestions_box").html("<span class='section_title'>Full-Text Search</span><p id='search_text'> Continue searching for <span style='color:#B75F11'>\""+searchTerm+"\"</span> by clicking on the search icon</p><div id='suggestions_section' class='section'><span class='section_title' id='suggestions'>Documents with <span style='color:#B75F11'>\""+searchTerm+"\"</span> in the title<hr><div id='suggestions_list'><ul id='suggestions_list_ul'></ul></div></div>");
   
    myUrls = getLocalData("localStorageUrls")
    if (myUrls != undefined && (window.urls == undefined || window.urls == "" || window.urls.length <= 0)) {
        window.urls = JSON.parse(myUrls);
    }
    //Read in all of the url data
    for (x in window.urls) {
        urlData = window.urls[x];

        //IE refuses to let the below code continue. :(( Try catch is my solution for now
        try {
            t = urlData.Title;
            tLower = t.toLowerCase();
        }
        //If we fail here then just let the code fall through to return no change
        catch (e) {
            continue;
        }

        s = urlData.Source;
        //aLower = a.toLowerCase();
        searchTermLower = searchTerm.toLowerCase();
       
        searchPatt = new RegExp("("+searchTerm+")", "gi");
        if (tLower.match(searchTermLower) || s.toLowerCase().match(searchTermLower)) {
            t = t.replace(searchPatt, "<span class='mc-highlightSearch1'>$1</span>")
            //a = a.replace(searchPatt, "<span class='highlight' style='background:#ffc000'>$1</span>")
            s = s.replace(/\.\.\/Content\//g, "")+"?Highlight="+searchTerm.replace(/[^A-z0-9\.\s]/g, " ");
       
            if (window.modulesActive["highlight"]) {
                $("#suggestions_list_ul").append("<li ><A href='#"+s+"' onclick=\"$('#autoCompleteContainer').slideUp();highlightButtons('on')\">"+t+"</a></li>");
            }
            else {
            $("#suggestions_list_ul").append("<li ><A href='#"+s+"' onclick=\"$('#autoCompleteContainer').slideUp()\">"+t+"</a></li>");
            }
            quickSearchCount +=1;
            if (quickSearchCount > 20) {
                return false;
            }
        }
    }
}

Using jQuery to dynamically control HTML

Have a web page with separate Windows and Apple instructions, want to only show Apple links on Apple laptop, etc.

First have link to jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

Then you can use jQuery hide & show functions, remember to put these functions AFTER the target class or id, otherwise it will not have any effect.

<script>
$(".1class_name").hide();
$("#1id_name").show();
</script>

 You could do all P tags  ("p"), one class  (".this-class") , or one id  ("#one_id")



From w3schools.com

Detect mobile device via Javascript, switch to mobile page

Our CMS is looks poor on mobile drives, looked at javascript to switch to a different page on detecting mobile device:

<script type="text/javascript">
var mobile = (/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|iphone|ipod|iris|kindle|lge|maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent.toLowerCase()));
if (mobile){ document.writeln("<h2>
<a href='http://your.server.com/m.asp?insert_room=1'>Tap here for MOBILE version...</a></h2>
");
 
    }

</script>

I replaced the document switch:
document.location = 'http://your.server.com/m/'

with just adding a link to a different page:
document.writeln("<h2>
<a href='http://your.server.com/m.asp?insert_room=1'>Tap here for MOBILE version...</a></h2>

HTML Tutorials

Here are top HTML tutorials for beginners, clean, nice layouts, minimum of advertisements:


http://www.w3schools.com/html/html_intro.asp

http://htmldog.com/guides/htmlbeginner/

http://www.stepbystephtml.com/


Still looking for lists of other peoples picks.

Start parameter for YouTube videos

To start Youtube video in the middle:

#t=3m1s


example:
http://www.youtube.com/watch?v=44wDwMQVqCc#t=3m1s


Found this here

Javascript Message Script by Day of Week, or Date

To display message on give date/time

<script type = "text/javascript">

var GMToffset = -5;  // Your current GMT offset, whether Standard or Daylight   style="font-size: large;"   
var now = new Date();
var dy = now.getDay(); // day of week 0-6

var themonth=now.getMonth()+1;
var thetoday=now.getDate();
var thedow = now.getDay();
var hh = now.getHours();
var theminutes = now.getMinutes();

 function GetDay(intDay){
    var DayArray = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
    return DayArray[intDay];
    }

now.setHours( now.getHours() );  // GMToffset +    + now.getTimezoneOffset() / 60

var show = "No Lab Assistant on duty<br><br> " + GetDay(thedow) + "&nbsp;" + themonth + "/" + thetoday  + "&nbsp;" + hh +":"+ theminutes ;


// The GMT offset ensures that every visitor, regardless of their timezone, will see the schedule
// that is appropriate for the site owner's local time.

// Tip - for testing purposes you can put here
//dy = 3;
//hh = 7;
// or whatever to check that the right show appears at that day/time.
// days in Javascript are 0 Sunday - 6 Saturday


if (dy == 1 ) { 
if (hh >=6 && hh <9) {show = "test<br>(856) 123-4567<br>email@cua.edu   "; }
}

if (dy == 2 ) { // 2 Tuesday
if (hh >=6 && hh <9) {show = "test<br>(856) 123-4567<br>email@cua.edu      "; }
}

if (dy == 3 || dy == 4 ) { // 2 Tuesday
if (hh >=6 && hh <9) {show = "<p>test<br>123-4567<br>email@cua.edu   </p>   "; }
}




if (dy == 6) { // Saturday Note the two = signs to mean equals
if (hh >=13 && hh <18) {show = "<p>test<br>123-4567<br>email@cua.edu   </p>    "; }
} //End of Saturday Shows

if (dy == 0) { //Sunday Shows
if (hh >=13 && hh <18) {show = "<p>test<br>123-4567<br>email@cua.edu   </p> "; }
}  // End of Sunday Shows

var a = "<em>" + show + " \u00A0 \u00A0 \u00A0 \u00A0 <em> "  ;  // spaces must be separted by Unicode spaces to prevent collapse  + hh + "&nbsp;" + dy
//document.getElementById("dj").innerHTML = a;
document.write(a);
</script>

Smart Phone Emulators

All the online, browser based emulators that I looked at, never rendered web pages like a real mobile phone.  So best choice was so set up a stand alone emulator:

Android

Android Virtual Device - Easy to install, can select different versions, and set initial RAM.  Saves bookmarks between sessions, can use keyboard to enter text

Windows Phone 7

Be careful of requirements for graphics card.   Does not save info between sessions, cant use keyboard, must use virtual keyboard.

Apple

Have not tested yet, need to run this on Apple machine.

List of Emulators


----------------------------------

Michael Johnson (Shawnee Univ) suggested these online emulators:

http://iphonetester.com/

Safari as an emulator:  http://www.mydigitallife.info/how-to-emulate-iphone-change-user-agent-in-safari-and-firefox-web-browser/

I tried both, and neither produced output like a regular iPhone. They may convince a webserver that they are  an iPhone, but then they don’t render the HTML/CSS as an iPhone does.
For example, they ignore this tag
<meta name="viewport" content="initial-scale=0.5, maximum-scale=1.5" /> 

Below:
LEFT: Safari with user Agent set to iPhone.  
Right:  Android emulator (matches what I see on iPhone) 

IE warning message

Using Javascript to show warning only in Internet Explorer Browser:

<script language="javascript">
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}
function checkVersion()
{
  var msg = "<p>Internet Explorer Users:<br> You will get a popup warning message (view content that was delivered securely).  You can <a href='http://blogs.msdn.com/b/askie/archive/2009/05/14/mixed-content-and-internet-explorer-8-0.aspx' target='_blank'>change IE settings</a> to avoid this warning, or use Firefox or Chrome instead.</p><p>&nbsp;</p>";
  var ver = getInternetExplorerVersion();

  if ( ver > -1 )
  {
    if ( ver >= 8.0 )
     
  document.write( msg );
  }

}

checkVersion();       


function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function checkVersion()
{
var msg = "
Internet Explorer Users: You will get a popup warning message (view content that was delivered securely).  You can change IE settings to avoid this warning, or use Firefox or Chrome instead.

";
var ver = getInternetExplorerVersion();

if ( ver > -1 )
{
if ( ver >= 8.0 )

document.write( msg );
}

}

checkVersion();       

</script>

How to embed Javascript on TWEN pages?

We recently subscribed to OCLC's QuestionPoint, and the service comes with a Qwidget feature (a chat widget) they we wanted to place on web pages & all the course TWEN pages in Westlaw.

Qwidget requires JavaScript, and at first glance, TWEN would not allow it, it just stripped it away.

But then I tried an IFRAME pointing to a page that just had the Qwidget, and TWEN was fine with it:

<iframe scrolling="auto" height="300" frameborder="0" width="200" src="http://lib.law.cua.edu/home/pages/qwidget1.html">

Make the frame a bit larger, so no scroll bars on horizonal or vertical.

Code box is from Tutzone 
TWEN is course management system from Westlaw

Form box to paste HTML Code

Want to make tool to help create code box: <div class="code"> </div>

Code box is from Tutzone.Wanted tool to easily add code box to blog entries.

How to embed Blog posts into web pages?

Using  gfeedfetcher.js  from dynamic drive.  This takes RSS feed from a blog, and allows you to embed the content into a web page.

<script src="http://www.google.com/jsapi?key=Your-API-key" type="text/javascript">
</script>
<script src="http://your-server.com/gfeedfetcher.js" type="text/javascript">
</script>

<script type="text/javascript">
var cssfeed=new gfeedfetcher("example2", "test2class", "")
cssfeed.addFeed("CSS Drive", "URL of your ") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("description") //show the specified additional fields
cssfeed.setentrycontainer("p") //Display each entry as a list (li element)
cssfeed.filterfeed(5, "date") //Show 10 entries, sort by date
cssfeed.init() //Always call this last
</script>