Tallan's Blog

Tallan’s Experts Share Their Knowledge on Technology, Trends and Solutions to Business Challenges

Posts Tagged "jQuery"

Kendo UI Window IE8 Error

While working on my most recent project using the Kendo UI Library I came across the following error when trying to inject html from a partial view into a Kendo UI Window.
SCRIPT5007: Unable to get property ‘top’ of undefined or null reference kendo.all.min.js, line 26 character 30328
This error would only occur in IE8 and not IE10, Chrome, or Mozilla.

Implementing jQuery in SharePoint 2010 Solutions using Delegate Controls

Delegate Controls are generic controls found in all of the out-of-the-box master pages in SharePoint, a Delegate Control provides the ability to dynamically render ASP.net controls (candidates) in master pages extending the functionality of SharePoint without the need to directly modify any of those master pages.
So Basically, a Delegate Control provides a “plug-in” framework making its child candidates (ASP.NET user Controls) pluggable and replaceable.
Some of the available delegate controls in the master pages are:


In this post we will take a look at using the AdditionalPageHead Delegate control to quickly add a jQuery reference in SharePoint master pages.

Visibility: hidden vs. Display: none

During a recent project I kept coming up against strange issues with layout. It was in a windows 8 store app, and therefore using some advanced CSS3 techniques, so I assumed I was just having issues with those. The DOM explorer is quite different from the web developer tools I am used to.  I came to realize though that during the course of development, some of our error messages were getting set with Javascript to visibility: hidden instead of display:none like I was expecting. This led to a conversation which revealed that there is some confusion about the two. Here I’ll point out the differences, just so we’re all on the same page. This concept is particularly confusing to developers who know jQuery, because jQuery uses .hide as a function to set things to display:none. When we’re writing in plain…

MVC4 Makes it Easier to Create Desktop and Mobile Web Applications

Last year I wrote an article that expressed the importance of developing not only desktop solutions but mobile ones as well.  Since then it has become increasingly important to present not only to a desktop market, but to a mobile one as well.
That said, this article isn’t about convincing you to move to a desktop-mobile solution.  The metrics in my previous article speak for themselves and have only gotten stronger in favor of mobile solutions as time has gone on.  This article is going to center on how you can easily achieve a mobile solution by leveraging your existing MVC 4 website and making a few configuration changes  to automatically render mobile views when a mobile device is detected.

JavascriptHelper–Managing JS files for ASP.NET MVC

After working several years with the Castle Monorail MVC framework, I decided to try ASP.NET MVC to see if it had caught up to Monorail. The transition seemed to go rather smoothly, but one area where I was surprised to find how clumsily it was handled, was the management of JavaScript files. Basically, if some part of a page, say a helper or partial page, needed a particular JS file, you had one of two choices.
The first option is to have the part itself would write the script tag. This allows the part to operate as a “black box” – just drop it in and it works – But it means that there will be script tags loading file scattered throughout the page, and that the part needs to know your folder structure where you keep your JavaScript files. And…

Calling an ASP.Net web service using jQuery and JSON.

Let’s say you have a webpage where you need to call a service but cannot perform a post back.  Recently I was on a client engagement where we needed to improve page performance by dynamically loading a navigation tree with a potential for several thousand links.  We implemented a solution that would load each branch as the user clicked on the expanding icon by calling a web service via ajax and passing the required links back to the page and render them client side.  This saved immensely on the load time for the page and improved the user experience
This kind of solution can be applied to several situations such as complex data processing, dynamic loading, or combining them all into a seamless form submission process that would clear the form on post backs.
We can accomplish this process simply by grabbing…

Mobile Site Development becoming as important as Desktop.

In recent years, the boom in mobile devices has caused more and more users to abandon their desktop internet browsers and opt for the ones sitting in their pocket. As a result, nearly 10% of 2011’s internet traffic was attributed to mobile device browsers. As more people are browsing the internet in this manner, it is important that currently standing websites, as well as newly developed ones, also include mobile friendly pages in their site.
Many companies have followed models put forth by sites such as www.amazon.com, with their widely known desktop interface for purchasing products. When the mobile markets started to pick up they developed a mobile site that operates in much the same way, but offers a friendlier user experience for those viewing it on a smartphone screen. This move to a mobile intuitive platform can generate an increase…

Overriding jQuery Functions

In my last post I showed how to create a localized instance of jQuery that performed custom selection by handling ID selectors in a specific way. There are other parts of jQuery though that can have IDs passed in for arguments, such as the find and children functions. These functions can also be customized to override the default behavior as well. In this example, if the find and children functions are left unchanged, they will fail find any elements by ID if we don’t include the end part of the ID that we append in the $$ function. So let’s look at overriding / extending the find function.
In the above code we are using a self-executing function to replace jQuery’s find function (specifically for the $$ instance, not the default instance). In this example we do not want to completely…

Customizing the Default jQuery Selector Behavior

jQuery on its own is a great JavaScript library that makes a lot of tasks simpler and easier.  Although as easy as it is you may find yourself needing to work within a restricted scope and not constantly wanting to have to include the context for every selector.  This exact case happened on our project.  We had the need to change from supporting just a single instance of a rather complex user control with a large amount of JavaScript, to having several instances of this control on the same page.  The JavaScript for this control utilized jQuery selectors all over the code, making it fairly tedious to accomplish without some help.   To make things easier we needed to restrict jQuery to the specific container that holds the instance of the control that we are interested in.  Now one way to…

Text input length limit with jQuery


jQuery (tested on 1.6.2)

Limiting the character length on a text input is one of the most commonly used patterns in web applications. In this post I’ll go over an easily re-usable implementation that is compatible with Internet Explorer, Firefox and Chrome using jQuery
Setting a character length limit on text input is fairly simple to implement. For example the following snippet of code can achieve this:
One flaw with this simple implementation is that the text length limiting logic only fires when a key is pressed. If someone were to copy and paste text into this text input the character count limit would not be applied. Another problem to consider is that when we truncate the text the cursor position is set to the end of the text box. This becomes an issue when a user highlights a portion of text in…