IE/Edge Does not return a parsable string with .toLocaleTimeString()

Recently, I was trying to parse the time portion of a date. I used split() to chop time string into hours, minutes, seconds, etc. and attempted to parseInt() the hour portion of the split array like so:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Click me to parse the current time</button>
<p id="demo"></p>

function myFunction() {
var str = new Date().toLocaleTimeString();
var parts= str.split(":");
var hour= parseInt(parts[0]);
document.getElementById("demo").innerHTML = parts+"
----
"+parts[0]+"
----
"+hour;}
//output:
//4,00,39,PM
//----
//4
//----
//NaN

</body>
</html>

The code above works in every other browser except Internet Explorer (11+) and Edge (all as of v 38.14393.0.0).

So what’s the problem? It turns out, that IE/Edge also includes some hidden formatting characters (in this case, one indicating left-to-right). Simply clearing that formatting string does the trick like so:


<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Click me to parse the current time</button>
<p id="demo"></p>

function myFunction() {
var str = new Date().toLocaleTimeString().replace(/\u200E/g, '');
var parts= str.split(":");
var hour= parseInt(parts[0]);
document.getElementById("demo").innerHTML = parts+"
----
"+parts[0]+"
----
"+hour;}
//output:
//4,00,39,PM
//----
//4
//----
//4

</body>
</html>

Using HTML5’s ‘Placeholder’ Attribute

Do you have a large form and not enough space? Is your input box too small because of the description on the side? The solution to your problems may be the placeholders! Look at the space difference in the forms below, both with and without a placeholder. You might be asking, what is a placeholder? It is simply a text filler, or a hint that describes the input field.

 

WITHOUT                                                                                    WITH

Form1                         placeholder_ex

This short hint disappears as soon as the user enters input into the field. And it is actually really easy to incorporate the placeholder into your code, as simple as:

<input type="text" placeholder="Name">
Continue reading

How to create Section Breaks in Word

You want to create a document such as an Annual Report in Word with multiple sections so you’ve gone ahead and set everything up. Now it’s time to add the section heading to  page header of all pages belonging to each section, so you double click the page header, enter your section name and move on to the next. You enter the second section’s name and to your suprise, it overwrote the previous section’s section heading that you had just put in the page header!

If that happens, you’re most likely missing what are called  “Section Breaks”.  Once you have your sections defined, it’s just a matter of setting up the page headers (which can be cumbersome).

For this tutorial, we will be using the following example. In the example screenshot below, you can see we have a four (4) page document with two (2) sections. The first section (highlighted in green) contains the first two pages, and the second section contains the last two pages.

Section-break-start

Continue reading

UIElement Visibility vs. UIElement Element Opacity: When To Use Each And Why

When building apps for Windows Phone, there are two properties you can use to hide and/or reveal UI elements:

  • UIElement.Visibility
  • UIElement.Opacity

It is important to note the performance implications of each, and when and why to use one over the other.

Continue reading

Windows Phone XAML-Based Graphics & Animation Threading Model

Prior to the release of Windows Phone 7.5 (WP7.5), Windows Phone app developers had only a single thread, known as the UI thread, to use for graphics and animation. Alone, the UI thread was not responsive enough to provide the desired responsiveness that Microsoft wanted to become standard with Windows Phone. So, with the release of Windows Phone 7.5, Microsoft introduced the Composition thread which assists in rendering visuals by handling some of the load traditionally done by the UI thread.

Continue reading

How To: Achieve Vertical Alignment with CSS

The Problem

Have you ever tried vertically centering some content within an element such as a <div> or <span>? Using vertical-align:middle doesn’t work as you would expect it should. By default, these types of elements don’t respect vertical alignment (among other height-related settings). To get around this, many web developers resort to using <tables>.

Observe the following example:

//CSS
.BlueSquare{
    width:450px; height:200px; background-color:Blue;
    text-align:center;
    vertical-align:middle;
}
.RedSquare{ width:100px; height:100px; background-color:Red; }
//HTML
<div class="BlueSquare">
    <div class="RedSquare"></div>
</div>

Example_VerticalAlign1

Let’s take a look at how to get the Red Box to respect the vertical alignment.

Continue reading

Using Twitter API 1.1 with Twitterizer for C#

So, yesterday (June 11, 2013) we published an minor aesthetic update to our website. Shortly after publishing the update, we noticed the twitter feed on our homepage wasn’t working. We initially thought it was caused by the update, but it turns out that Twitter’s API 1.0 was ‘retired’ and version 1.1 of the API was introduced.

The new API requires that all requests be authorized (via OAuth) and served over HTTPS. This is similar to, but still more restrictive than, Facebook’s API because not even basic requests for public information can be done without authentication.

Continue reading