RSS
 

Posts Tagged ‘script’

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 »

 

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 »