Please send any feedback on admin@ajaxline.com.
If you want to share your experience and post article on Ajaxline just e-mail it to us and we publish it.
Rob Glazebrook post an article in which he tells about generating automatic website footnotes with jQuery. He writes:
«I spent a lot of time (7 long years) in academia, writing about technical communication and new media. During that time, I created many academic documents for the web. A lot of those documents had footnotes. Generating footnotes for HTML documents in the past was always a slow, painful task — and every time I did it, I wondered why there wasn’t a better, easier way.
Muhammad Mose post an article in which he tells about creating simple ToolTip widget with jQuery UI. He writes:
«I've seen different type of tooltips around. And actually jQuery tooltip plugin was one of the best I ever seen. And then I thought to build some tooltip similar to those tooltips available on asp.net learning items. Just simple one to be displayed on left or right of the tooltiped item (element). And I decide to build that using jQuery.ui widgets.
Very simple and straight forward, all I needed is the following:
A tooltip fully UI customizable to be displayed to the right or left of the desired element. And it should detect if the desired element is closer to right or left on the screen; so the tooltip to be displayed correctly to the right or left of the element.
Ability to control when the tooltip to be displayed, on hover or focus on the element or manually using tooltip widget methods such show and hide.
Callback upon on show and hide of the tooltip.
Optional fancy show/hide animations.»
Source:Moses Blog.
Brian Dillard post the next chapter of his article in which he show how to modernize existing web sites with jQuery an Ajax forms. He writes:
«This article walks you through the steps of retrofitting a Web 1.0 shopping site with Ajax techniques. You can download the before and after source code for an example application and see both versions in action on the author's Web server. In addition to Ajax techniques and best practices, you learn how Ajax can improve your user experience through the principle of progressive enhancement.
This article assumes you have a solid grasp of HTML and CSS and at least a basic understanding of JavaScript and Ajax programming techniques. The example application is built using only client-side code; the techniques demonstrated can be adapted to any server-side application framework. As with all Ajax applications, you must run the example code from a Web server rather than from files on your desktop. Alternatively, you can just follow along in the source code and see the example site in action on the author's Web server.»
Source: IBM developerWorks.
There is an intresting script for settings equal heigts with jQuery posted on the Fillament Group site. Here is an excerpt for annotation to this script:
«Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. When developing complex web applications or site designs we've found that it often makes the most sense from a usability and performance standpoint to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element's minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable. »
Source: Fillament Group.
Amit Raz post an article in which he shows how to enhance Visual Studio with jQuery intellisense. Here's small excerpt from this article:
«Here is something nice I have found while wandering around the Internet. We all know jQuery, jQuery is a Framework written in JavaScript which makes client side and DOM work much easier and faster. If you don’t know it yet, be sure to check it out, it makes Web Developers life easy on the web. Shahar wrote a great article about Calling ASP.NET WebMethod with jQuery so check it out.»
Source: Dev102.
There is an intresting article about creating garage doors style menu using jQuery library. Here's small excerpt from this article:
«Right out of the box, jQuery provides the animate function, which allows us to morph some CSS attributes over time. Things like opacity, font-size, width, length, and position are all supported. There are a couple of notable limitations to this function though, and one of those is “background-position”.
Thankfully, there is a plugin to help with this, the Background-Position Animation Plugin by Alexander Farkas»
Source: CSSTricks.
There is an intresting jQuery animarion tutorial posted on the WebDevLounge site. Here's the short excerpt from beginning of this article:
«Apparently, people liked the jQuery AJAX tutorial I wrote a week or two ago; so maybe a follow up into animation would be nice.
Animation is crap.
You may be wondering why I would use the word “crap” when writing a tutorial about a subject. It’s because I will start this tutorial off with one piece of knowledge, and even if it is the only thing you learn from this tutorial, I will still feel content. Ready?
Don’t use animation unless you need it.
Frankly, animation is among the most annoying things on websites anywhere. Ever since people started using DHTML (dynamic HTML, the usage of javascript, HTML and CSS in conjunction to create effects) the world has been plagued by moving boxes, flashing buttons and shaking pages. »
Source: WebDevLounge.
Torkel Oegaard tells about cleaning up HTML code with jQuery JavaScript library. He writes:
«It seems like some design bureaus are just hellbent on making it difficult for developers to realise their designs via html/css. I am currently trying to convert some design images into usable html/css, and in one case I had to make a box with rounded corners, all borders had a shaded shadow, the inner content had a gradient background and the box was required to handle dynamic width. The only thing that makes this tricky is that the borders and corners needs a shaded shadow and the fact that the box is required to support dynamic width. »
Source:Coding Instinct.
jQuery UI 1.5.2 released. As the developers tells there is a more than 30 bugs fixed in this release . You can read gull information about this release in jQuery blog and download the source code from official site.
Dragging and dropping rows within a table can’t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects.
This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.
Source: Isocra Consultiting.
Janko Jovanovic post an article in which showd how to justify elements using jQuery and CSS. He writes:
«When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing width of labels. Tables stretch its cells according to width of largest element in a column. That way you can have aligned form. Fixing label width will also also allow you to have a hard-coded but aligned form.
But what if you don't want to use tables? Or what if you don't know how long labels could be because you are developing an application that has many localized strings? And you still want to align input elements according to the width of the longest label?»
You can read the full version of this article on Janko At Warp Speed site.
jQuery UI 1.5.1 released. This is a Bugfix release and it conntains lots of various fixes reported from1.5 release. Here's excerpt from official release info:
«Soon after the release of jQuery UI 1.5, we were getting many useful feedback and issues entered in our bugtracker. Today, we’re happy to release another version of jQuery UI which takes care of many minor regressions and a lot of unsolved issues.
1.5.1 doesn’t add any new features or API changes, but fixes more than 50 found issues. A full changelog is available, if you want to know the specifics. Updating to this version is highly recommended and likely not to break anything in your written code.
Additionally, issues within ThemeRoller and the demos on our homepage also have been reported and fixed. We are now continuing to finish all unit tests and functional demos, so expect to see another release of both UI and its website soon again.»
Source:jQuery.
Matt Berseth has creates his first plugin for jQuery. He writes about this plugin in his blog:
«So I figure what better way to learn more about jQuery than to dig right in and create a plugin or two? At first I thought this sounded pretty intimidating, but after browsing through some of the existing jQuery plugins I figured it might be easy enough to try and 'rearrange' one of the Toolkit controls that I created. So that is what I did with my GlowButtonExtender control I created a few months back (and I plan on doing it with the ProgressBar one as well very soon). I kind of liked this because I thought creating the same UI widget using both the Toolkit and jQuery might give a little more insight into what the relative advantages are between the two frameworks.
In case you didn't see my original post on creating the GlowButtonExtender control, here is how it works: When you mouse over the button, it glows as it comes into focus and of course when the mouse leaves the glow slowly fades away. These are just screen shots so you will have to check out the demo page to see it in action. »
Source: Matt Berseth blog.
Jose Noheda post an article in which he shows how to create div lightbox with jQuery. Here's small excerpt from beginning of this article:
«I know there are next to thousands of lightbox versions, including several built over jQuery. But you know, none of them seem to fit your needs ever. This time around I was looking for one that could enhance parts of the page and not specifically images. Thickbox can present inline content (divs or iFrames) but it's not as pretty as others and it has some nasty CSS side effects. In addition it wasn't correctly working in IE6 for some corner cases and the syntax was (somehow) weird.
After a little search I found this plug-in from Leandro Vieira. It resembled the original lightbox plugin but, unfortunately, it was designed to view just images (alone or as a gallery). After realizing I was not going to get what I was looking for without some effort I decided to stick with it and modify it to suit my needs which basically where:
Visually attractive
HTML, Flash, other jQuery plugins as content
Working in FF, IE6+, Safari
Working inside a frameset
Simple to use (nothing beyond $("#id").lightbox())»
Source: Internna.
One more article about grids from Matt Berseth. This time he shows how to create master-detail with the gridview, detailsview and jQuery's ThickBox. He writes:
«And so I continue on messing around with jQuery and looking into ways I can use it in my WebForms applications. Something I sheepishly admitted to in my last post was that I don't want to use 3 client side libraries {ASP.NET AJAX, AjaxControlToolkit, jQuery}, yet I never really took the time to see what the size of the core jQuery library is. And for that matter I haven't really looked at what scripts some of my favorite AjaxControlToolkit controls are pulling down either. I also assumed there is a bunch of overlap between jQuery and ASP.NET AJAX, but I haven't looked into that either.
So I thought I would check some of this out and along the way rebuild my Master-Detail with the GridView, DetailView and ModalPopup Controls and replace the ModalPopup with jQuery's ThickBox. I found it pretty interesting - read on to see how it went.»
Source: Matt Berseth.