Chris Pietschmann

husband, father, hacker, entrepreneur, futurist, innovator, autodidact


jQuery Basics: Is Element Hidden or Visible?

A very common code snippet that's used a lot in various applications is the ability to detect if a specific element in the page is hidden or visible. jQuery provides some very useful functionality that allows for this to be easily determined; as well as making it easy to toggle the visibility of HTML elements on the page. Detect if Element is Visible Using a bit of CSS and the jQuery ".is" method makes it very easy to determine if the HTML element in the jQuery selector is either hidden or visib... [More]

Tag Editor Field using jQuery similar to StackOverflow

The tag editor featured on the StackOverflow website (and all the StackExchange websites) is a real slick tag editor that makes it much nicer to enter tags than just a plain textbox. I searched a little and couldn’t find anything that works just like theirs, so I decided to build one. Download Full Source Code: Here’s some example usage of the tag editor: <div id='SelectBox' style='width: 350px'></div> <input id='btnClear' type='button' valu... [More]

HTML5 Day 6: New Range Input Type <input type=range />

Some times a Range slider is the appropriate UI tool to allow a user to select a number within a given range. HTML5 adds such an element with it’s new “range” input type. Display in Modern Browsers In the above screenshot shows an example of the <input type=range/> element as it is rendered in the Opera web browser. Here’s the code for the range input shown: <input type=range min=0 max=100 value=25 step=5 /> This code defines a range input tha... [More]

HTML5 Day 5: New Date Input Type <input type=date />

Date is one of the new, and much needed, input types added in HTML5. This has been added as a replacement of using a text box for the input of dates. Below is a screenshot of the custom UI that the Opera web browser automatically implements for this new input type. Display in Modern Browsers This is a screenshot of the Opera web browser’s UI for the date input field. The actual display of this field is handled by the web browser and will vary in each browser and device the page is being v... [More]

HTML5 Day 4: Add Drop Down Menu to ASP.NET MVC HTML5 Template using CSS and jQuery

Today I was playing around with using jQuery to create a drop down menu. I thought I’d share an example of adding a drop down menu to the new ASP.NET MVC HTML5 Template that I created on Day 2. Before we begin, you’ll need to create a new site using the code from Day 2. You can either copy/paste the code from the article, or download the full source code. You’ll find the download link at the bottom of the post for Day 2. Here’s a screenshot of the finished dropdown menu: ... [More]

jHtmlArea – Adding Custom Toolbar Buttons

I’ve gotten a couple questions lately about extending the jHtmlArea WYSIWYG editor, so I thought I’d post a little bit about how to add your own custom toolbar buttons to it. There is one example that is included with the component, but that doesn’t cover inserting some html into the editor, so I’m going to cover that here. You can download the jHtmlArea Editor here: This article was written with jHtmlArea v0.6.0 ... [More]

JavaScript: Easily "Extend" an Object/Element

If you use jQuery then you may be familiar with its "jQuery.extend" method. The "jQuery.extend" method allows you to easily extend one object with one or more others. This is something that can really come in handy, especially when dealing with passing in "options" to a method, and needing to have them "default" to certain values. For Example: [code:js] // "Default" to showing both Toolbar and Footervar defaultOptions = { showToolbar: true, showFooter: true }; function MyObject = function(op... [More]

jHtmlArea 0.6.0 Update with Improved Functionality

I just posted a pretty good update the the jHtmlArea project that includes quite a few more toolbar buttons and a new Color Picker Menu extension/plugin (jHtmlAreaColorPickerMenu) that adds a nice, simple color picker when using the "forecolor" toolbar button. jHtmlArea is a simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page. The minified script alone is ... [More]

jHtmlArea - The all NEW HTML WYSIWYG Editor for jQuery

The last couple days I spent time working on a new simple, lightweight, extensible HTML WYSIWYG editor that's built on top of jQuery. I know there are a ton of existing editors, but I couldn't seem to find any with a truely simple, lightweight design that allowed for really easy extensibility, and that's built on top of jQuery to take advantage of the cross-platform capabilities that jQuery has to offer. I feel that I've come up with a really nice HTML editor component that has some pretty usefu... [More]

Adding a DotNetKicks Image/Badge via jQuery

A while ago Jon Galloway posted a short article titled "Adding a DotNetKicks image via JavaScript" which contains the small amount of JavaScript code necessary to add a Image / Badge to your web pages. The DotNetKicks Badge is essentially a link that allows users to go to to vote for you web page, and the badge also displays the total number of "kicks" that your page has received. Since jQuery has become insanely popular since Jon originally posted his JavaScript ... [More]