RSS
 

Archive for the ‘JavaScript’ Category

AngularJS Scroll to Top for New Pages on Single-Page-App

20 Oct

As promised in my last post, I’m going to try to keep updating with things I learn on my trek down the long road to Angular-ville. As far as I could tell, there isn’t much info about the issue I was facing online, so either I’m doing something wrong (and if I am, for heaven’s sake, don’t just sit there; please tell me!) or there aren’t as many people concerned with what I felt was a noticeable UX flaw in single page apps (SPA). To try to make clear my explanation of the issue, I’ll just walk through some steps that an end-user might experience with an SPA and how the page responds by default:

  1. User loads the home page. Angular fetches the template and inserts it into the ng-view.
  2. User scrolls down the page a bit, say 600px.
  3. User clicks a link to another page. Angular fetches the requested page’s template and inserts it into the ng-view, but the browser stays scrolled 600px, so the user doesn’t actually see the content they loaded.
  4. User clicks the browser’s back button and sees again the content they were at before clicking the link.

Read the rest of this entry »

 

AngularJS Auto-Focus Input After Router Template is Loaded in SPA

14 Oct

It’s been just a little while (oh, only about 3.5 years) since I last published any new posts here. Too busy.

At the moment I’ve been delving head-first into some modern frameworks like AngularJS and Bootstrap, so I plan to document things I learn along the way that I think will help other developers also new to these technologies who might come up against some of the same issues or who might just find interesting the things I’m discovering.

Without further ado, this is my first of such posts, which is a little more advanced than just starting to learn everything from scratch, but I do plan to back-track and cover more in future posts the basics of using AngularJS.

Read the rest of this entry »

 

Fixing the IE7 <Button> Submit Value

12 Mar

If you’ve ever used <BUTTON> tags in your HTML forms, you’ve probably noticed that there are a couple of problems with them in IE7 and older.

For starters, clicking a BUTTON does not cause its form to be submitted. This means that a user will never be able to submit the form by clicking it. Furthermore, if you are using JavaScript including jQuery to trigger a callback upon form submit, that callback will never be fired.

Read the rest of this entry »

 
 

jQuery Placeholder Fallback

01 Aug

One of the handy new features for <input> elements in HTML5 is the “placeholder” attribute. If you’re unfamiliar with this attribute, it allows you to pre-populate a text input with instructions which disappear when the element receives focus or there is any entry in the element.

For example, if you had a field prompting a user to enter their username, the placeholder text might be “Enter your username here.” With the introduction and support of the “placeholder” attribute, all that would be required is the use of an input tag like <input type=”text” placeholder=”Enter your username here.”/> and the browser will automatically display your text whenever there is no entry in the field and it does not have the keyboard focus.

The only problem is that older web browsers (and even those that are not-so-old, such as IE8) lack support for placeholders, so a standalone solution is required. After contemplating a couple of different fallback implementations, I decided that for my requirements, an extremely simple implementation would be best.

Read the rest of this entry »

 

Fancy Opts jQuery Plugin – Custom Radio and Checkbox Inputs

16 Mar

I was in need of a quality jQuery plugin that would allow me to customize radio buttons and checkboxes. After a bit of googling, I was only able to find offerings that weren’t fully featured. Specifically, they lacked graceful degradation, required custom HTML, and/or just functioned far too much unlike a native input.

As is usually the case, I couldn’t find what I needed so I decided to create it myself, and so the Fancy Opts plugin was born. It allows you to simply create flexible and completely unique radio button and checkbox inputs. Read the rest of this entry »

 

TH Float jQuery Plugin – Fixed THEAD and TFOOT

03 Mar

I recently found myself in need of an elegant, simple solution allowing users to know which column in a table contained which value once the table header has scrolled out of view.

A quick google lead me to believe that no such plugin for jQuery currently exists. I did find a few table-centric plugins that (maybe) include the kind of functionality that I wanted, but nothing looked to provide just what I had in mind. So, I started working on the plugin myself.

I call the plugin TH Float, but it could also aptly be named Sticky Table TH or Fixed THEAD / TFOOT. What it does is make the <thead> or <tfoot> of a table remain floating in view at the top or bottom, respectively, of the scrollable container until the table is completely out of view. Read the rest of this entry »

 

Solution for Facebook Error “FB.login() called before calling FB.init().”

01 Feb

Just thought I’d share this in case anyone comes googling, as I could not find a satisfactory search result, but was fortunate that it was obvious enough that I realized the issue.

I had a page that has had a FB “like” button forever with this code:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> 
<fb:like layout="button_count" show_faces="true" width="80" font="verdana"></fb:like>

I just finished using a bit of the new Facebook API to add some Facebook Connect functionality Read the rest of this entry »

 
 

Dynamic Drop-Down Navigation Menu Like Wired.com’s

24 Apr

A friend recently asked me for a tip on how to create a dynamic pop-up menu like the one used on the main navigation bar of Wired.com. It’s a pretty typical implementation of a menu that pops open when the user hovers over a navigation tab, but I thought I’d share the solution I came up with.

This is a screenshot of what the menu currently looks like at Wired.com:

Read the rest of this entry »

 
 

Dynamic Facebook and Tweetmeme Widgets

09 Apr

We just made a change on YouTube videos so that at the end of playback a Facebook “share” button and a Tweetmeme “retweet” button appear as part of an effort to encourage users to spread videos in their personal social networks.


Read the rest of this entry »

 

JavaScript Video Embed Widget

06 Apr

Overview | Inserting the Widget | Name Collision | Dynamic <script> Loading
Cross-Domain Scripting and XMLHttpRequest | In Conclusion

Overview

At VideoSift we have always made available the embed code for every video on the site. Until now, the provided code has just been the raw <object> and <embed> tags as you would acquire directly from the video host, but we wanted to provide a much more attractive embed.

We opted to achieve such a thing by providing users with a <script> tag that builds the fancy new widget into the DOM of the host page. Initially, the plan was to just generate a pretty simple DOM structure wrapped around a video, but it evolved from there to include:

  • the ability to optionally start out as a thumbnail image that when clicked will expand into the full widget
  • a functional vote button that would remotely cast an up-vote for logged in members
  • a brief, scrollable listing of comments on the video

There were a few interesting issues that needed to be resolved along the way:

  • Where on the host page should the widget be inserted?
  • What happens if the host page contains multiple widget <script> tags?
  • How should we dynamically load the widget in comments on VideoSift?
  • How should we cast votes on remote host pages that need to be posted to VideoSift?

Read the rest of this entry »