DHTML

Dynamic HTML

CSS3 - :not selector

CSS3 - :not selector Goal: Understand the different applications of the CSS3 :not selector Overview: Trying to find useful information about CSS3, and specifically the :not selector can be hard. So in order to try and alleviate that, here are some (hopefully) useful hints and tips. The Specification: The negation pseudo-class, :not(X), is a functional notation taking a simple selector […] as an argument. It represents an element that is not represented by the argument. Not so clear, is it?! What...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
Posted On Wednesday, August 17, 2011 7:33 AM | Feedback (0)

Knockout with ASP.Net MVC2 - HTML Extension Helpers for input controls

Goal: Defining Knockout-style input controls can be tedious and also may be something that you may find obtrusive, mixing your HTML with data bind syntax as well as binding your aspx, ascx files to Knockout. The goal is to make specifying Knockout specific HTML tags easy, seamless really, as well as being able to remove references to Knockout easily. Environment considerations: ASP.Net MVC2 or later Knockoutjs.js How to: public static class HtmlExtensions { public static string DataBoundCheckBox(this...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
Posted On Wednesday, June 29, 2011 5:42 PM | Feedback (0)

Knockoutjs - stringify to handling observables and custom events

Goal: Once you viewmodel has been built and populated with data, at some point it goal of it all is to persist the data to the database (or some other media). Regardless of where you want to save it, your client-side viewmodel needs to be converted to a JSON string and sent back to the server. Environment considerations: jQuery 1.4.3+ Knockoutjs version 1.1.2 How to: So let’s set the stage, you are using Knockoutjs and you have a viewmodel with some Knockout dependencies. You want to make sure it...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
Posted On Tuesday, June 28, 2011 8:34 AM | Feedback (1)

jQuery Templates, Data Link

I am sure you must have read Scott Guthrie’s blog post about jQuery support and officially supporting jQuery's templating, data linking and globalization, if not here it is: jQuery Templating Since we are an open source shop and use jQuery and jQuery plugins extensively to say the least, decided to look into the templating a bit and see what data linking is all about. For those not familiar with those terms here is the summary, plenty of material out there on what it is, but here is what i

  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
Posted On Friday, June 24, 2011 9:00 AM | Feedback (0)

Menu widget - no jQuery nor Javascript required - pure CSS

Goal: Create a menu widget that does not require any javascript, extremely lightweight, very fast, soley based on CSS, compatible with FireFox and Chrome. Issues: May have some rendering issues in some versions of IE, sorry :-) Instruments: css file html with specific menu format jQuery-ui library - optional if you want to use your own images/colors Implementation Details: HTML: <div id="header"> <div id="header_Menubar"> <ul class="linkList0 ui-tabs-nav ui-helper-reset ui-helper-clearfix...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
Posted On Thursday, February 17, 2011 9:19 AM | Feedback (0)

jqGrid - dynamically load different drop down values for different rows depending on another column value

Goal: As we all know the jqGrid examples in the demo and the Wiki always refer to static values for drop down boxes. This of course is a personal preference but in dynamic design these values should be populated from the database/xml file, etc, ideally JSON formatted. Can you do this in jqGrid, yes, but with some custom coding which we will briefly show below (refer to some of my other blog entries for a more detailed discussion on this topic). What you CANNOT do in jqGrid, referring here up and...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
Posted On Wednesday, February 09, 2011 5:24 PM | Feedback (2)

Combine and compress javascript and css files in ASP.Net MVC

Goal: When loading js or css files, combine all the js files into one and all css files into one file respectively when rendering to improve on performance. Also compress if need be on the fly. In this example we use many css files and even more js files to organize the ASP.Net Mvc web app into manageable pieces. The reason for the separation is mainly because it gives the team the ability to work on different part of the web app by working on the affected css or js files. It also helps to decide...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
Posted On Tuesday, November 30, 2010 1:00 PM | Feedback (0)

How to store arbitrary data in the DOM using jQuery

Goal: Storing arbitrary data inside the DOM Issue: Storing data : $('selector').attr('alt', 'my data'); Retrieving data: $('selector').attr('alt'); The ALT attribute is designed to be an alternative text description. For images the ALT text displays before the image is loaded. ALT is a required element for images and can only be used for image tags because its specific purpose is to describe images.So therefore, "alt" is an HTML attribute meant to give the tag meaning and not to store data. Also...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
Posted On Wednesday, November 24, 2010 9:27 AM | Feedback (0)

How to dynamically add Edit button to grid for editing row using the jqGrid formedit

Goal: Dynamically add an Edit button to an empty column that will NOT trigger an inline edit but rather a jqGrid formedit for the selected row using the modal dialog option. Problem: All examples in the Demo version include editing inline and adding buttons to a column that only does an inline edit and the Demo version's getRowdata does not perform as expected. I tried it an could not get it working and the getRowData did not work as specified. Solution: gridComplete: function() { var rows = $(item).jqGrid('getRowData');...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
Posted On Monday, June 28, 2010 5:28 PM | Feedback (0)

jQuery - how to check/uncheck a checkbox

$('#PrimaryContacts').unbin... { if ($('#PrimaryContacts option:selected').val() == 0) { $('#filterPrimaryContact').... } else { $('#filterPrimaryContact').... } }); Also, in the example above, triggering the checkbox does not change the checkbox value. As depicted above, based on a dropdown box changing and no contact being selected from the drop down box, automatically uncheck the checkbox and trigger it in invoke any event handlers...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
Posted On Friday, April 30, 2010 12:33 PM | Feedback (0)

Full DHTML Archive

Twitter