Archive for category jQuery

Setting Up a Windows Vista Development Environment

I recently purchased a new computer and was faced with the task of setting up a fresh installation of Windows Vista with all of the web development goodies I’ve come to know and love.

Here’s a walkthrough for what I did to get set up, starting from square one. This is literally everything I did and installed from when I was first able to access the desktop after a fresh install.

Read the rest of this entry »

  • Share/Bookmark

, ,

No Comments

jQuery normal text to seo urls in real time

This is a way to mindlessly type in text to receive it an url in seo-friendly format.

It is also a good lesson on how jQuery can instantly return text and the use of simple regex.

demo: Read the rest of this entry »

  • Share/Bookmark

No Comments

Calling Any JS Lightbox from Flash using jQuery


Thanks to Flash’s ExternalInferface’s API you can call JavaScript or receive a callback from JavaScript using Flash. In this example I will show you how to call any Lightbox that is in JavaScript from Flash.
Because almost all prebuilt lightboxes get all the info they need from the <a> anchor we will dynamically create an <a> tag with all the necessary information.
Flash:
import flash.external.ExternalInterface;
button.addEventListener(MouseEvent.CLICK, external, false, 0, true);
function external(evt:MouseEvent):void {
 ExternalInterface.call("external", "lightbox/photos/image1.jpg");
}
JavaScript:
function external(path) { // pass in the correct path to the function so we only need one  for infinite amount of calls from  flash
// if the lightbox does not exist we will make it
 if ($('a#lightbox').length == 0) {
  $("body").append("");
  $('a#lightbox').lightBox();
// if it already exists but the path is different we will set the new path
 } else if ($('a#lightbox').attr("href") != path) {
  $('a#lightbox').attr("href", path);
 }
// now we will simulate the click here.
 $('a#lightbox').trigger("click");
}
View demo Here
  • Share/Bookmark

1 Comment

Stripping out HTML Tags in jQuery

One of the useful features most JavaScript libraries offer is the ability to strip out HTML tags from strings, leaving only the text. This is useful because you may have user input that you need to &quot;sanitize&quot; by removing potentially malicious HTML.<br /><br />
Luckily this is quite easy to do in jQuery. According to the docs, you should be able to call the .text() method on any jQuery-wrapped string. Consider the following:
<pre name=”code”>
var html = “this string has &lt;i&gt;html&lt;/i&gt; code i want to &lt;b&gt;remove&lt;/b&gt;”;
$(html).text(); // should return “this string has html code i want to remove” but doesn’t
</pre>
In my experience, although it should theoretically be this simple, it isn’t. I noticed that this only works correctly (at least, for me, with jQuery 1.3) if the string starts with an HTML tag. So, it will work fine as long as there is a wrapping tag around the whole thing. Otherwise, I will end up with only a fragment of the HTML. In the above example, I’d end up with only the word “html” since it is the fragment inside the first HTML tag.
<br /><br />
Let’s try this instead:
<pre name=”code”>
var html = “this string has &lt;i&gt;html&lt;/i&gt; code i want to &lt;b&gt;remove&lt;/b&gt;”;
$(html).text(); // returns “html”
// This is the workaround to return the whole string, sans any markup
$(‘&lt;div&gt;’ + html ‘&lt;/div&gt;’).text(); // returns “this string has html code i want to remove”
</pre>
By wrapping the string in addition markup to ensure it has an outermost element wrapping the entirety of the text content, we reach the goal of having a relatively straightforward way to sanitize text.
<br /><br />
For a bonus, one could turn it into a helper function and add it to a utility file:
<pre name=”code”>
function stripHTML(html) {
return $(‘&lt;div&gt;’ + html ‘&lt;/div&gt;’).text();
}
var html = “this string has &lt;i&gt;html&lt;/i&gt; code i want to &lt;b&gt;remove&lt;/b&gt;”;
stripHtml(html); // returns “this string has html code i want to remove”
</pre>
If you really wanted to go the extra mile, you could turn it into a plugin. Perhaps that will be the topic of another article.

One of the useful features most JavaScript libraries offer is the ability to strip out HTML tags from strings, leaving only the text. This is useful because you may have user input that you need to &quot;sanitize&quot; by removing potentially malicious HTML. Read the rest of this entry »

  • Share/Bookmark

1 Comment

Stylize the last element in jQuery

Here is how to stylize the border of the last element using jQuery.

$(document).ready(function() {
    $("table.innercart tr:last").css("border", "none");
}); Read the rest of this entry »
  • Share/Bookmark

2 Comments

AJAX Google API to Minify Javascript using Ruby on Rails

How to optimizing JavaScript performance in Ruby on Rails. This will only focus on one aspect of JS performance optimization, namely, writing a build script to concatenate/minify the JS, and setting up Rails to easily toggle between the compressed and normal files. Also, if your site uses a JavaScript library, we’ll explore including it from Google’s AJAX Libraries API. Read the rest of this entry »

  • Share/Bookmark

5 Comments

jQuery drop down menu delay (setTimeout)

To create a navbar with a subnav (drop down menu for instance) with a delay before closing using jQuery (jQ) follow this code. An example can be found here. Read the rest of this entry »

  • Share/Bookmark

5 Comments

jQuery Plugin Validation with AJAX

The JQuery plugin Validation by bassistance.de is extension, powerful, and quick-to-deploy. I recommend this library for people already using the jQ framework to provide high-quality, usable client-side form validation. We are going to discuss basic properties of this framework as well as AJAX and scalability. Read the rest of this entry »

  • Share/Bookmark

3 Comments

How do I make tabs in Jquery? (Without jQ Tabs plugin)

Strategies and Technologies:

This is the beginning of a series where I build a tab presented component from scratch. Each series on the tab will increase in functionality and ux. For starters lets just build it. Read the rest of this entry »

  • Share/Bookmark

1 Comment

Managing Cross Browser issues with JS browser detects & Conditional Comments

Until all browsers completely comply with w3c specifications we have to find workarounds in order for our websites to be pixel perfect in various browsers. The browsers we need to be most concerned with include Internet Explorer, Safari, and Firefox. Read the rest of this entry »

  • Share/Bookmark

10 Comments