DHTML

Dynamic HTML

Twitter Bootstrap styling conflicts with plug-ins like jqGrid and other third part libraries

Issues:The concern with Twitter Bootstrap framework is that some of their css selectors are simply too generic and have incompatibility issues and conflicts with most third party plug-ins and css libraries, like jQuery-UI and jqGrid.My most pressing concern is only with the generic selector for the styling of "INPUT" controls.Some concerns:So basically anyone using BS (Bootstrap) will have to override styling 100% of the time on all input controls on all their web pages for all the plug-ins they ......

Prevent copying images from web page - read-only images

Problem:You have images on your web site that you want to protect from being copied and used. In essence you want to make them "read-only" so to speak.Solution:Add the HTML code by wrapping your image with it.<span oncontextmenu="return false" ondragstart="return false"><img id="your image"/></span>This is not 100% fool proof, am not going to explain why as that would make this post useless :-) ......

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 ......

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 ......

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 ......

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

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 ......

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 ......

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 ......

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 ......

Full DHTML Archive

Twitter