Multimonth, Multiselect, Weeknumbers,Weekends, Holidays,Custom CSS
http://www.lubber.de/extjs/datepickerplus/
Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts
Wednesday, October 15, 2008
Instructions for Setting Up Scrolling Div Code
This page provides documentation for dyn-web's Scrolling Div's Code. The best starting point when implementing the code is to choose an example document from the download file that most closely resembles your desired implementation. Follow the pattern set there and read below for details and clarification.
The download file contains numerous examples that are designed to make it as easy as possible for you to locate the code components required.
Instructions for Setting Up Scrolling Div Code
The following list outlines the steps for implementing the code. Details on each step are available below.
Include script tags pointing to the external JavaScript files.
Place nested div's in the document where you wish the scroll area(s) to appear.
Adjust style specifications for the div's.
Add scroll controls and/or scrollbar elements.
Initialize the code.
Script Tags
Place script tags for the external JavaScript files in the head of your document:
Not all implementations require all four files. If you are working from an example document in the download file just use the ones included there. ^
Scroll Area Div's
Scroll areas are set up using nested div tags: a container and content. Each needs to be assigned a unique ID.
[Content to scroll goes here]
If you would like to swap content in the scroll area, you can specify additional div's inside the container div, attaching a class of content which is used in the style sheet to set visibility hidden.
[Content to scroll goes here]
[Content in second hidden div goes here]
An example demonstrates this feature. See below for information on setting up multiple scroll areas. ^
Div Style Specifications
The container div (wn in this case) can be positioned absolute or relative. Width, height and overflow hidden are required specifications. Adjust width and height to suit.div#wn {
position:relative;
width:280px; height:200px;
overflow:hidden;
}
The scrolling content div is positioned absolute in the code, with left and top position set at 0, 0. ^
Scroll Controls and Scrollbar
You can set up scroll links for mouseover, mousedown, or onclick scrolling in addition to scrollbars. For example, linked images for mouseover scrolling could be set up as follows:
Event handling is set up by the code so that there is no need for event handler attributes in your HTML. As shown above, classes are attached to the scroll controls' linked images. Classes such as mouseover_down or click_down_by_100 instruct the code as to what event handlers should be attached to those links.
Notice that the scroll control links demonstrated above are contained in a div with an ID. The ID itself is not important but in order to set up the scroll controls they do need to be contained within an element with a unique ID. You can add an additional class to links to apply margins, or place the individual linked images in table cells or div's or any other elements that you like, applying classes and styles to suit your design, as long as a container element has an ID that you can pass to the code, as shown below. To initialize these scroll controls (apart from the scrollbar as demonstrated below) you would use the following: wndo.setUpScrollControls('scrollLinks');
The scrollbar itself consists of the following elements:
Generally, the dragBar consists of a div with a background color specified in the style sheet. Unless you specify otherwise when initializing the scrollbar (see below), the dragBar will be resized by the code according to the relative dimensions of the content and container. However if you would like it to be an image of fixed size you can include that in the dragBar element itself. This is generally advisable because of a problem for Internet Explorer in properly displaying an image in the background when a layer is dragged.
Often when including both scroll controls and scrollbar you will put them in one containing element and control their position in the style sheet:
(scroll link here)
(scroll link here)
Example style specifications for the above scrollbar elements: div#scrollbar {
position:relative;
width:11px; height:200px;
font-size:1px; /* for image vertical alignment issue */
}
div#track {
position:absolute; left:0; top:12px;
width:11px; height:176px;
background: #336;
}
div#dragBar {
position:absolute; left:1px; top:1px;
width:9px; height:20px;
background-color:#ceced6;
}
div#up { position:absolute; left:0; top:0; }
div#down { position:absolute; left:0; bottom:0; }
/* for safari, to prevent selection problem */
div#scrollbar, div#track, div#dragBar, div#up, div#down {
-moz-user-select: none;
-khtml-user-select: none;
}
/* so no gap or misplacement due to image vertical alignment [1]*/
div#scrollbar img {
display:block;
}
If you are using a table-based layout, the components could be placed in table cells, but the track and dragBar do need to be positioned. For example, the track could be a relative positioned div inside a table cell, the dragBar an absolute positioned div inside the track. Generally the height of the scrollbar and track would be adjusted to correspond to the height of your scroll area.
The scroll controls and scrollbar are not initially displayed (display: none in the style sheet) so that users with incapable browsers will not see them. At the beginning of page load, the code determines the browser's capabilities and appropriately handles display of controls and content. ^
Initializing the Code
The code checks whether the browser supports the necessary objects and then assigns a function to be called onload. A link element for the style sheet is dynamically generated[2] so that the contents will be fully visible for those without the necessary JavaScript support.if ( dw_scrollObj.isSupported() ) {
dw_writeStyleSheet('css/scroll.css');
dw_Event.add( window, 'load', init_dw_Scroll);
}
function init_dw_Scroll() {
// Initialize scroll area
// arguments: id of outer div, id of content div
var wndo = new dw_scrollObj('wn', 'lyr1');
// Initialize scrollbar
// id of dragbar, id of track,
// axis (v for vertical scrolling, 'h' for horizontal)
// horizontal offset of dragbar in track, vertical offset
// size dragBar according to amount of content? (boolean)
wndo.setUpScrollbar('dragBar', 'track', 'v', 1, 1, true);
// Initialize scroll links
// id of element within which to locate scroll controls
wndo.setUpScrollControls('scrollbar');
}
The function called onload instantiates the scroll and scrollbar objects and sets up event handling for the controls and scrollbar. This is generally included in a script segment in the head of example documents, but can be placed in an external file for use throughout your site if you prefer.
If you are setting up scroll areas in situations where scrolling may not always be required, it is possible to instruct the code to hide the controls when they are not needed as shown below. An example demonstrates. ^// arguments: controls container id,
// autohide controls (boolean), axis ('v' or 'h')
wndo.setUpScrollControls('scrollbar', true, 'v');
Setting up Multiple Scroll Areas
The code easily supports multiple scrolling content areas in a document. The horizontal scrolling and glide onclick scrolling examples both demonstrate, as does an example document in the download file.
Set up nested div's as described above for each scroll area, assigning a unique ID to each. Use these ID's for the style specifications for each scroll area. You may find it helpful to view the style sheet for the horizontal scrolling demo. The elements containing the scroll controls and/or scrollbars also need unique ID's and style specifications set up as described above.
Initializing the code for multiple scroll areas (copying from the horizontal scrolling example) is accomplished as follows: function init_dw_Scroll() {
var wndo1 = new dw_scrollObj('wn1', 'lyr1', 't1');
var wndo2 = new dw_scrollObj('wn2', 'lyr2', 't2');
var wndo3 = new dw_scrollObj('wn3', 'lyr3', 't3');
wndo1.setUpScrollControls('scrollLinks1');
wndo2.setUpScrollControls('scrollLinks2');
wndo3.setUpScrollControls('scrollbar');
wndo3.setUpScrollbar('dragBar', 'track', 'h', 1, 1);
}
Since only one of the scroll areas in that example uses a scrollbar, there is only one invocation of setUpScrollbar.
Accessibility Features of Scrolling Div's Code
The style sheet is dynamically written or generated once it is determined that the browser is capable of supporting the code so content will be available when JavaScript is disabled or the user's browser is otherwise incapable of supporting the code.
Device independent scrolling is provided by the code. You can include glide onclick scroll controls so that when a user focuses on a scroll link and hits enter scrolling occurs.
Known Issues
When users tab among elements, such as form elements or links inside the scroll area, this can cause the scrolling content div to jump which will throw off the scroll calculations. You can provide a link to jump to the top and reset the scroll mechanism. A similar related problem occurs when you attempt to point to named anchors inside the scrolling div's. The code provides a substitute: glide onclick scrolling to a specified ID. You can see both of these demonstrated.
If your scrolling content areas containing large images and if you don't include width and height attributes in those images, the initial calculations for the content div may not accurately reflect the size of the content. This may be due to some browsers calling onload before all images have completed loading or if you are using some version of DOM ready to initialize the code rather than onload. The easiest solution, although not always practical, is to specify width and height attributes for images to be included in the scrolling content areas.
Scrolling large images is not recommended. You will generally be disappointed with the performance when attempting to do so. Unfortunately, the motion tends to be less than smooth and images tend to break up during scrolling movement. The larger the images, the more pronounced the problem. The problem tends to be more pronounced with mouseover scrolling and can often be minimized with relatively fast glide onclick scrolling.
Understanding vertical-align, or "How (Not) To Vertically Center Content"
In your browser, the above example renders as:
Hey, this is vertically centered. Yay!
http://phrogz.net/CSS/vertical-align/index.html
Gavin Kistner,
Hey, this is vertically centered. Yay!
http://phrogz.net/CSS/vertical-align/index.html
Gavin Kistner,
Thursday, June 12, 2008
Starbox 1.1
Starbox has been updated to work with the latest Prototype. A lot of refactoring has been done to make Starbox faster. All mouse events are now available as custom events, allowing for a much cleaner way to submit a rating. The demonstrations show this custom event power by creating a Youtube style text underneath some of the stars when you mouseover.
Another feature that should make things a bit easier is the ability to post your Starboxes through a normal form instead of using Ajax. Hidden formfields are added in Starbox 1.1 to make this possible. The tutorials have been updated to give you all the details on this and other updates.
http://www.nickstakenburg.com/projects/starbox/
Another feature that should make things a bit easier is the ability to post your Starboxes through a normal form instead of using Ajax. Hidden formfields are added in Starbox 1.1 to make this possible. The tutorials have been updated to give you all the details on this and other updates.
http://www.nickstakenburg.com/projects/starbox/
Friday, February 8, 2008
Saturday, October 27, 2007
Autocomplete select dropdown
YUI Autocomplete AJAX Select Drowdown with ID
Posted in Pylons, Mako, JavaScript by thejimmyg on the October 19th, 2007
The YUI toolkit comes with a very flexible autocomplete control but a common requirement is for an autocomplete control that submits the ID associated with a text value rather than the text value itself, much like a select field submits the option value, not the contents the user selects from a drop down list.
Luckily this is fairly easy to achieve using a forceSelection option, a hidden field, and a custom itemSelectEvent handler.
First setup the imports as described on the YUI AutoComplete page:
Now let’s set up the data structure in a Pylons controller action which the YUI component will access to populate the find as you type select dropdown. You could write similar code for Rails or PHP, it doesn’t have to be Pylons. Notice that the @jsonify decorator converts the Python data structure we return to valid JSON:
@jsonify
def get_data(self):
return {
"ResultSet": {
"totalResultsAvailable":"100",
"totalResultsReturned":2,
"firstResultPosition":1,
"Result": [
{
"ID": "897",
"Title":"foo",
"Summary":"... When foo' is used in connection with bar' it has generally traced...",
"Url":"http:\/\/www.catb.org\/~esr\/jargon\/html\/F\/foo.html",
"ModificationDate":1072684800,
"MimeType":"text\/html"
},
{
"ID": "492",
"Title":"Foo Fighters",
"Summary":"Official site with news, tour dates, discography, store, community, and more.",
"Url":"http:\/\/www.foofighters.com\/",
"ModificationDate":1138521600,
"MimeType":"text\/html"
}
]
}
}
Now we need to write the code to generate the autocomplete control. YUI uses an existing text field as the autocomplete field and this will contain whatever text is looked up. Our application requires the corresponding ID so we need a hidden field to hold that value. The hidden field should have the name you want the ID to be submitted as, the text field can have any name because it doesn’t contain the data the application needs. YUI also needs a container
Posted in Pylons, Mako, JavaScript by thejimmyg on the October 19th, 2007
The YUI toolkit comes with a very flexible autocomplete control but a common requirement is for an autocomplete control that submits the ID associated with a text value rather than the text value itself, much like a select field submits the option value, not the contents the user selects from a drop down list.
Luckily this is fairly easy to achieve using a forceSelection option, a hidden field, and a custom itemSelectEvent handler.
First setup the imports as described on the YUI AutoComplete page:
Now let’s set up the data structure in a Pylons controller action which the YUI component will access to populate the find as you type select dropdown. You could write similar code for Rails or PHP, it doesn’t have to be Pylons. Notice that the @jsonify decorator converts the Python data structure we return to valid JSON:
@jsonify
def get_data(self):
return {
"ResultSet": {
"totalResultsAvailable":"100",
"totalResultsReturned":2,
"firstResultPosition":1,
"Result": [
{
"ID": "897",
"Title":"foo",
"Summary":"... When foo' is used in connection with bar' it has generally traced...",
"Url":"http:\/\/www.catb.org\/~esr\/jargon\/html\/F\/foo.html",
"ModificationDate":1072684800,
"MimeType":"text\/html"
},
{
"ID": "492",
"Title":"Foo Fighters",
"Summary":"Official site with news, tour dates, discography, store, community, and more.",
"Url":"http:\/\/www.foofighters.com\/",
"ModificationDate":1138521600,
"MimeType":"text\/html"
}
]
}
}
Now we need to write the code to generate the autocomplete control. YUI uses an existing text field as the autocomplete field and this will contain whatever text is looked up. Our application requires the corresponding ID so we need a hidden field to hold that value. The hidden field should have the name you want the ID to be submitted as, the text field can have any name because it doesn’t contain the data the application needs. YUI also needs a container
which it populates with the results. Ours is called myContainer.
Here’s some HTML to achive this:
Now let’s add some JavaScript. This can go after the HTML above:
The first line sets up a schema, the first item of which specifies where the actual results are in the data structrue returned (in this case they are in the Result list of the ResultSet dictionary), the subsequent entries specify values within each result which might be displayed in the control.
Test this example by entering foo into the field. It works as expected returning two options and allowing you to select one but the hidden myInput_id field doesn’t get populated.
To populate the hidden field we need to create a callback function and subscribe it to the autocomplete control’s itemSelectEvent. Add the following code at the end of the JavaScript above, just before the script tag:
function fnCallback(e, args) {
YAHOO.util.Dom.get("myInput_id").value = args[2][1];
}
myAutoComp.itemSelectEvent.subscribe(fnCallback);
Now, when an item is selected from the autocomplete control, fnCallback gets called with two arguments. The first is an event object e and the second is a list of arguments described here. These are:
oSelf
The AutoComplete instance.
elItem
The selected
element item.
oData
Here’s some HTML to achive this:
Now let’s add some JavaScript. This can go after the HTML above:
The first line sets up a schema, the first item of which specifies where the actual results are in the data structrue returned (in this case they are in the Result list of the ResultSet dictionary), the subsequent entries specify values within each result which might be displayed in the control.
Test this example by entering foo into the field. It works as expected returning two options and allowing you to select one but the hidden myInput_id field doesn’t get populated.
To populate the hidden field we need to create a callback function and subscribe it to the autocomplete control’s itemSelectEvent. Add the following code at the end of the JavaScript above, just before the script tag:
function fnCallback(e, args) {
YAHOO.util.Dom.get("myInput_id").value = args[2][1];
}
myAutoComp.itemSelectEvent.subscribe(fnCallback);
Now, when an item is selected from the autocomplete control, fnCallback gets called with two arguments. The first is an event object e and the second is a list of arguments described here. These are:
oSelf
elItem
oData
Reference: http://jimmyg.org/2007/10/19/yui-autocomplete-ajax-select-drowdown-with-id/
Record Mouse Movement
I just found some piece of code i created one or two years ago. The “movelogger” records the mouse movement a users does on a web site. Just before the user leaves the current page, the recorded data get posted back to the server using AJAX.
The cool thing is that you can “replay” these movements afterwards. The movelogger records clicks on links and other elements. In replay mode this events are fired in the exact same order as they have been recorded.
That way it would be possible to record a websesion (the click-flow) in a heavy AJAX based application. It would even be possible to record keyboard strokes and other type of events.
Check out the little demo of the movelogger here.
This technique may be usefull or not. But some use cases could be:
Instead of eye tracking, use mouse tracking.
Analyze the usage of ajax enabled websites.
Spionage and other Bad Things™ (not recommended).
The whole thing is coded in javascript using Prototype and script.aculo.us with some php code on the server side.
The data recorded on the demo website is stored only in the php session on the server and gets deleted automatically, soon after you close your browser. But theoreticaly it would be possible to store that data in some kind of database for further analysis.
Please let me know what you think about this. Do you have any ideas for other uses of this technique ?
The cool thing is that you can “replay” these movements afterwards. The movelogger records clicks on links and other elements. In replay mode this events are fired in the exact same order as they have been recorded.
That way it would be possible to record a websesion (the click-flow) in a heavy AJAX based application. It would even be possible to record keyboard strokes and other type of events.
Check out the little demo of the movelogger here.
This technique may be usefull or not. But some use cases could be:
Instead of eye tracking, use mouse tracking.
Analyze the usage of ajax enabled websites.
Spionage and other Bad Things™ (not recommended).
The whole thing is coded in javascript using Prototype and script.aculo.us with some php code on the server side.
The data recorded on the demo website is stored only in the php session on the server and gets deleted automatically, soon after you close your browser. But theoreticaly it would be possible to store that data in some kind of database for further analysis.
Please let me know what you think about this. Do you have any ideas for other uses of this technique ?
Javascript Image Magnification 2.4 (PopBox)
V2.4 - Still Easy. Still Simple. Just Better.
PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page. Javascript? Yes - I know it's nothing new and that you've been able to move and resize things in Javascript for years, but only now is there a prepackaged solution that makes it as easy as 3 lines of HTML without knowing a lick about positioning!
If your web site has a thumbnail image gallery then you need PopBox!
Main Features
Ridiculously simple to use.
Does not navigate away from the page or create separate windows.
Does not require any special browser plug-ins. 100% script and CSS solution.
Includes a multi-line caption capability that dynamically sizes to fit.
Allows for a different image to be used for the thumbnail and Popped images - on page load or on image click.
Can display a user-defined text message across the top of the image on page load on the thumbnail image.
Can display a user-defined text message across the top of the image after it has been popped.
Please see the Documentation Page for full instructions.
What can PopBox do?
It was originally created to magnify your images so you could display small ones on your web page that expanded to show the detail when the user clicked on it (thumbnails).
PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page. Javascript? Yes - I know it's nothing new and that you've been able to move and resize things in Javascript for years, but only now is there a prepackaged solution that makes it as easy as 3 lines of HTML without knowing a lick about positioning!
If your web site has a thumbnail image gallery then you need PopBox!
Main Features
Ridiculously simple to use.
Does not navigate away from the page or create separate windows.
Does not require any special browser plug-ins. 100% script and CSS solution.
Includes a multi-line caption capability that dynamically sizes to fit.
Allows for a different image to be used for the thumbnail and Popped images - on page load or on image click.
Can display a user-defined text message across the top of the image on page load on the thumbnail image.
Can display a user-defined text message across the top of the image after it has been popped.
Please see the Documentation Page for full instructions.
What can PopBox do?
It was originally created to magnify your images so you could display small ones on your web page that expanded to show the detail when the user clicked on it (thumbnails).
Wednesday, October 10, 2007
What is jsProgressBarHandler ?
jsProgressBarHandler is a rewrite of the (unfortunately wrongly named) AJAX Progress / Percentage Bar by Webappers. Improvements made were the change from a set of functions to a true Prototype.js Class, reduction in the number of functions, and making it unobtrusive (if javascript is disabled you'll still see the percentage), amongst some minor tweaks.
jsProgressBarHandler has been tested and verified working in IE6, IE7, FireFox 2 and Safari 3.0.3. Other browsers should work fine too (untested though).
Friday, October 5, 2007
Fleegix.js: Simple. Useful. JavaScript.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
Fleegix.js provides an extremely lightweight, cross-browser set of JavaScript tools for building dynamic Web-app UIs.
Fleegix.js includes the basics of what you need to build an Ajaxy Web app:
A concise but powerful events system
An industrial-strength XHR library
JSON and Web form serialization
CSS manipulation
Visual effects
To keep the toolkit small, more specialized features are broken off into optional plugins, including:
JavaScript Dates with Olson timezone support
a simple, no-muss-no-fuss XML parser
a sortable Hash
useful date utilities such as strftime, add, and diff
Some color conversion utilities
Most of the plugins can be used standalone with your JS toolkit of choice.
Fleegix.js does not attempt to coerce JavaScript into behaving like Python, Ruby, Java, or any other language -- the code is plain, ordinary, idiomatic JavaScript. Simple, but potent stuff.
It is well tested in the major-market-share browsers -- Firefox 1+, Internet Explorer 6+, and Safari 2.
Fleegix.js is licensed under the Apache License, Version 2.
jQuery Treetable
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
Take a plain html table, wrap the rows you want collapsing/expanding in a tbody with an id of treetable, map each row to it's parent row, set some options, and let jQTreeTable take it from there.
By wrapping it in a tbody, it means you can have other rows within the same table not part of the tree, and it also means that if javascript is disabled, users still get the plain table.
You can set which column takes the treeview effect, and you can also set which parents are collapsed initially. To do this, it must be done with an array, even if there is only one node you want collapsed.
A highlight option can be set so that rows change colour as they are hovered over. There is dynamic striping of the rows, and there is also a custom onselect event which fires on the table cells, that can be handled with a callback function (watch the status bar when you click on a cell). Links within the cells still work as expected.
I took the graphics files from J๖rn Zaefferer's site, and adapted them for my purposes. I hope he doesn't mind.
Sorry I've nowhere to put comments as yet, but I will be keeping a close eye on the jquery-en list, so any feedback/bug finds would be appreciated.
By the way, if you use the script off this page, make sure to remove the part of the script written for this page (just one line). Alternatively, you can download the zipped file here. It includes this php page with it's random treetable generator.
var options = {openImg: "tv-collapsable.gif", shutImg: "tv-expandable.gif", leafImg: "tv-item.gif", lastOpenImg: "tv-collapsable-last.gif", lastShutImg: "tv-expandable-last.gif", lastLeafImg: "tv-item-last.gif", vertLineImg: "vertline.gif", blankImg: "blank.gif", collapse: false, column: 1, striped: true, highlight: true, onselect: function(target){window.status = "You clicked "+target.html();}};
Map Array for the table below is :
[0, 0, 0, 0, 0, 5, 0, 0, 8, 9, 8, 8, 0, 0, 14, 14, 14, 0, 18, 0, 0, 21, 22, 22, 22, 0, 0, 27, 27, 27, 30, 31, 31, 0, 0, 0, 0, 37, 37, 0, 0, 41, 41, 41, 44, 41, 46, 41, 41, 41]
Sample : http://www.hanpau.com/jquery/unobtrusivetreetable.php
Wednesday, September 26, 2007
highlight: JavaScript text higlighting jQuery plugin
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
jQuery Plugin: Text Highlight
Text higlighting is part of DynaCloud – where tags/keywords are automatically highlighted once they’re clicked – so I took that code and made it a stand-alone JavaScript text highlighting jQuery plugin.
Demo
Each of the links will highlight the corresponding word.
highlight
javascript
Remove highlights.
Usage
Add highlight
Download jquery.highlight-1.js (2 KB) and add it to your page along with a jQuery version.
Style the highlight class
Create an entry in your style sheet for the highlight class..highlight { background-color: yellow }
Highlight terms
Call the $.highlight function with the start node and the text to highlight. Note that at this time the text must be upper-cased. To highlight all occurrances of “BLA” (case insensitive) in all li elements, use the following code:$('li').each(function() { $.highlight(this, 'BLA'); }));
Remove highlighting
The highlight can be removed from any element with the removeHighlight function. In this example, all highlights under the element with the ID highlight-plugin are removed.$('#highlight-plugin').removeHighlight();
Monday, September 17, 2007
Javascript image rollover
JavaScript image rollovers
JavaScript image rollovers have been one of the most used features for bringing interactivity to web pages. They refer to the change in the image when the mouse cursor is moved over and subsequently off the image.
Rollovers employ two JavaScript event handlers. onmouseover, that captures the action when the mouse cursor is brought over an image and onmouseout, that detects the action when the mouse cursor is moved off an image. These two even handlers are placed inside the anchor tag that surrounds the IMG tag.
We also use the src property of the JavaScript image object. This property refers to the file name of the image being displayed (image source). Finally, we employ the NAME attribute of the HTML IMG tag to explicitly refer to the image in question.
The logic is extremely simple. It's a matter of changing the image when the mouse cursor is placed over it and then changing it back to the original when the mouse cursor moves off the image.
Let's construct our image tag:
<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />
Note: We use the NAME attribute of the HTML IMG tag to give the name sub_but to our image. JavaScript event handlers will refer to the image with this name.You'll notice that the image source (file name) is moveup.gif, which is the image to be displayed when the mouse cursor is off the image.
Now, we place anchor tags around this image:
<a href="http://www.blogger.com/somewhere.html">
<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />
</a>
Lastly, we include the two JavaScript event handlers inside this anchor tag.
<a onmouseover="document.sub_but.src='movedown.gif'" onmouseout="document.sub_but.src='moveup.gif'" href="http://www.blogger.com/somewhere.html">
<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />
</a>
Thursday, September 13, 2007
ExtJS JavaScript Framework
April 30, 2007 at 10:29 pm · Filed under JavaScript, Ajax Resources
Ext JS, the JavaScript framework with Ajax and UI Components
Ext JS is a JavaScript Library/Framework which works in conjunction with Prototype, YahooUI and jQuery. It’s probably the most exciting toolkit available for building web 2.0 websites right now. It’s jam packed with features, and is designed to make life much easier for building great UI in JavaScript.
I’ll not dig to deep right now, I suggest you check out the example and demos first to see what you think.
Below is a the script used to grab XML data via Ajax and populate a grid (sortable table like object):
view plaincopy to clipboardprint?
Take a look at the JavaScript generated grid here.
Hopefully this short intro will wet your appetite, more to come soon.
Great work Jack (and the rest of the Ext JS team) for this superb library, can’t wait to see more!!
Wednesday, September 12, 2007
Fancy Sliding Tab Menu V2
Fancy Sliding Tab Menu V2
The Fancy Sliding Tab Menu is back and better than ever in Version 2 and this time I’ve included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.
The menu is developed in script.aculo.us and as I have mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu. I have some more ideas for the menu and once I have implemented those I will post on here again with full documentation. I have really put it up here for now to hear peoples comments.
The menu is developed in script.aculo.us and as I have mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu. I have some more ideas for the menu and once I have implemented those I will post on here again with full documentation. I have really put it up here for now to hear peoples comments.
demo
Have a look for yourself at the new
Fancy Sliding Tab Menu demo Have a look for yourself at the new
.
code
Reference http://www.andrewsellick.com
Tuesday, September 11, 2007
Free Gallery Code
Slightbox Extension for SmoothGallery (Demo)
Slightbox is a lightbox extension for SmoothGallery. It allows you to show images from SmoothGallery in a lightbox. It features a cooler, darker theme designed by Jonathan Schemoul.
Download Source code
Slightbox is a lightbox extension for SmoothGallery. It allows you to show images from SmoothGallery in a lightbox. It features a cooler, darker theme designed by Jonathan Schemoul.
Download Source code
Easy SlideShow
You can make the slideshow easily by using Highslide.
What is Highslide JS? (Click Here for example)
Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages:
No plugins like Flash or Java required.
Popup blockers are no problem. The images expand within the active browser window.
Single click. After expanding the image, the user can scroll further down or leave the page without restoring the image.
The approach uses two separate images. No heavy full-size image packed into thumbnail display size! The full-size image is loaded in the background either on page load or when the user clicks the thumb. You specify this option in the script's settings.
Compatibility and safe fallback. If the user has disabled JavaScript or the JavaScript fails in any way, the browser redirects directly to the image itself. This fallback is able to cope with most exceptions and incompatibilities.
Download Source code
What is Highslide JS? (Click Here for example)
Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages:
No plugins like Flash or Java required.
Popup blockers are no problem. The images expand within the active browser window.
Single click. After expanding the image, the user can scroll further down or leave the page without restoring the image.
The approach uses two separate images. No heavy full-size image packed into thumbnail display size! The full-size image is loaded in the background either on page load or when the user clicks the thumb. You specify this option in the script's settings.
Compatibility and safe fallback. If the user has disabled JavaScript or the JavaScript fails in any way, the browser redirects directly to the image itself. This fallback is able to cope with most exceptions and incompatibilities.
Download Source code
Subscribe to:
Posts (Atom)
