How To Create A Virtual Library
Jun 7, 2011
I started studying javascript when I decided that I wanted to create a dynamic webpage after viewing some books that were made to pageflip with Javascript and after viewing a ton of animations. So I figured since everyone keeps saying Javascript is simple that if all I wanted to do was to make a book extend outwards on mouseover and then open up on click and flip pages which they already have a code for that it wouldn't be so difficult. I've read everything I could practiced a little bit, I'm not fluent but I do have a goal and a time. The problem for me comes up with figuring out what I need to do in order to make it appear as if the book is coming out of a book shelf. There is a lot of information on animations where flat objects rise above clouds.
I am thinking that I would have to use some sort of sprite of a row of books both sorta sideways where you can see the side of the book as well as the edge, and both a row of books on a shelf, or perhaps a row of books with some of the books being pulled out and then on mouse over animate the scene so that it looks like the book is being pulled out. Would that work? Or is there a simpler way? Another way or I don't know. Is there a code that can make it look like a book is extending outwards without an animation or would I need to create an animation for that?
View 3 Replies
ADVERTISEMENT
Jun 7, 2011
I have a background that is a shelf full of books, I wanted to figure out what I would need to do in order to make a random number of books pop out on mouse over (individually), and upon click have the book pulled out and be flipped through and read like a book. Would I have to recreate the library picture completely to make the random books moveable? And would I have to create the books that I want to move from the bookshelf?
how to pull the book out from the book shelf so that it looks like it's coming towards me and then to make it look like it has been pulled out. Would I need to use animation for this? What would be the parts to the animation required?
A little background on my knowledge of javascript: I understand the concepts of it and can understand it when I read it or its explained to me. I am looking to create something as simple as I can, I thought having a background and something basic like a few books be able to pop out. When I realized css couldn't do this and css3 wasn't supported by most browsers I turned to javascript and have been trying to figure out the steps I would need to do to do this specifically.
View 2 Replies
View Related
Dec 5, 2010
First off I'm incredibly new to JavaScript and its likely I am going about this completely the wrong way. But gotta start somewhere. Also my apologise if I am posting in the wrong area.
Here's my problem. I have setup a site in CSS3/XHTML that I will use to display some of my photography (im a keen photographer) The way my Gallery will work will be using Submenu's then there will be a table of Thumbnails which I have setup.
The part I am stuck on is that I want people to be able to click the thumbnails and then the corresponding picture held in the next folder to be displayed in a CSS defined container in the center of the page.
So clicking _Images/Thumbnails/1.gif will bring up _/Images/1.gif in the CSS container For the life of me I cannot work out how to do it though. Here is my code so far.
[Code]...
View 3 Replies
View Related
Apr 8, 2010
I am using GreaseMonkey to load jQuery 1.3.2 (there is a bug with the latest version of jquery and GM) and jQuery UI 1.8.0.I am using jQuery via GM to manipulate the GUI of a content management system. This CMS uses its own JS library to dynamically add stuff to the dom.
Question:How can I target a dom element that was added to the dom via this other JS lib?In other words, the CMS will add a div to the dom, and I am not sure how to tell jquery to wait for these elements to "be there" before applying the jquery goodness. Specifically, I would like to do this:
$(function() {
$('#zen1227').resizable();
});
But "#zen1227" does not "appear" until later via this other JS library.
View 4 Replies
View Related
Feb 10, 2006
I have an interesting problem. I have created an html based interface that
links to an external .js file with only functions in it. The functions set
an arrays values depending on which function is called by the interface....
The external .js file looks like this below:
function myFunction1(){
arryEntry[0] = "some value1";
arryEntry[1] = "some value2";
arryEntry[2] = "some value3";
arryEntry[3] = "some value4";
}
function myFunction2(){
arryEntry[0] = "other value1";
arryEntry[1] = "other value2";
arryEntry[2] = "other value3";
arryEntry[3] = "other value4";
}
etc...
In the html interface I am calling the function(s) depending on a list
selection. This functions one arg (functionNumber) depends on a list
selection.
function getArryEntries(functionNumber){
eval("myFunction"+parseInt(functionNumber)+"()");
var value0 = arryEntry[0];
var value1 = arryEntry[1];
var value2 = arryEntry[2];
var value3 = arryEntry[3];
}
This all works well so far and the array entries are changed successfully
depending on the getArryEntries(functionNumber) selection.
However, at some time in the session I am adding (actually writing)
additional functions to the external .js file. Appending to the file. The
problem is that the interface will not pick up the newly written functions
on runtime. If the interface is closed and opened again, then it can see the
new functions.
I thought of initiating an array of the existing functions when the
interface loads and append to the array when the new functions are created.
It would then write to the file, but use the array at runtime. No success so
far.
View 1 Replies
View Related
Jun 21, 2007
This function will produce a URL that appears to be a file.
There are two versions:
1. a 500-pound gorilla version that accepts almost anything as input.
2. a lightweight version that turns strings into virtual HTML files.
First I'll mention the one major drawback: IE doesn't recognize data urls (http://en.wikipedia.org/wiki/Data:_URI_scheme) yet.
For a Live Demo, paste this into your addressbar and click go. (press back to return).
data:text/html;charset=utf-8;base64,PGI+aGVsbG8gd29ybGQ8L2I+
//output of: dataUrl("<b>hello world</b>", "text/html")
With that out of the way, here's the code:
function dataUrl(data, mimeType){ // turns a string into a url that appears as a file. (to ff/op/saf)
encType= (!!btoa) ? ";base64" : "";
var esc = (!!encType) ? function(d){return btoa(d);} : function(d){return escape(d);};
if(!mimeType){mimeType= (data.nodeName) ? "text/html" :"text/plain";};
b="data:"+mimeType+";charset="+document.characterSet+"+encType+",";
if ("string number date boolean function".indexOf(typeof data) > -1){ b+=esc(data.toString()); return b; };
if ( data.constructor==Array){b+= esc( data.join("") );return b; };
if(typeof data=="xml"){b+=esc(data.toSource()); return b;} //FF2 xml frag/doc
//for more complicated data, attempt to determine the format.
if(typeof data=="object"){
if(!!data.value && !!data.value.length){b+=esc(data.value); return b;}; //input tags w/content
if(!!data.innerHTML){b+=esc(data.innerHTML); return b;} //HTML tag
if(!!data.length){ //weird stuff like nodelists
var G=function(ob){r=[]; i=0;
for(i;i<ob.length;i++){
if(dataUrl(ob)) r=dataUrl(ob[i]);} return r.join("
");};//end g
return(b+G(data));}//end if object w/length
if(!! eval(data.toSource()) ){b+=esc(data.toSource()); return b;}; //JSON
}//end if object
return;
} //end function dataUrl
function dataUrlStr(data){ return ("data:text/html,"+escape(data));}
Usage: dataUrl(data, mimeType)
data- The desired contents of the file
mimeType- The type of content you want the browser to see.
output: An encoded string representation of the file; an href.
The output 'file' could be any text-based file format, depending upon what you set mimeType to be:
-HTML document (yawn) (text/html)
-Rss feed (text/xml)
-M3U playlist (audio/mpegurl)
-Excel spreadsheet, CSV (application/vnd.ms-excel)
-JavaScript (text/javascript)
-StyleSheet (text/css)
- You get the idea...
Input Details:
-Can accept [I]almost any javascript type: strings, numbers, arrays (which it will flatten), nodes, node lists, xml objects in FF2, functions (for which it outputs the source code), complex JSON objects, and dates. (whew, I think that's all of 'em...)
-if you want to output an element as html, or anything else as text, you can skip the mimeType argument.
Notes:
-You will most likely want to assign the output to a link href or the .scr of a script, stylesheet, or iframe, or to window.location.href.
-If you assign it to an iframe or object, it will load immediately.
-assigning it to a (<a>) tag will let you 'right-click, SaveAs' the file.
-clicking the link will open the 'file' in the browser just like a regular file.
-output an html document that has scripts, and they execute immediately.
-the cool thing about this is that the script will have a clean context. (no global variables from the parent).
-if used in an iframe- it can push to main page via window.top .
-if used in with an <object>, it will be completely private.
Caveats:
-doesn't work with IE yet.
-'saving As' doesn't offer a default file extention.
-there is 2kb limit for safari and opera URLs.
-search engines cannot see the links.
-XmlHTTP Requests from within usually don't work.
Examples:
To save my fingers, I will utilize the follow shortcut functions in these examples:
function el(tid) {return document.getElementById(tid)};
function tags(tid) {return document.getElementsByTagName(tid)};
//test
tags("a")[0].href=dataUrlStr("<b>Hello World!</b>")
//make a 2D array into an Excel SpreadSheet - (works with 1D lists also)
var grades= [["Subject" , "Grade"],
["Math", "A" ],
["English", "B+" ],
["Gym","C" ],
["Art","A-" ],
["Science","A+" ] ]
var exl=grades.join("
").toString().replace(/,/g , " ")
window.location.href=dataUrl(exl, "application/vnd.ms-excel")
//note: if data contains commas: loop through main, .join(' ') each index.
//execute script in a fresh enviroment:
window.testme="123456789"; //make a new global
var testJs="<script>alert('hidden window.testme='+ window.testme )</script>";
var fr= document.createElement("iframe");
fr.id="hiddenframe";
fr.style.display='none'
document.body.appendChild(fr); //add a hidden frame
alert("main window.testme="+window.testme);
el("hiddenframe").src=dataUrlStr(testJs);
//re-using the above example, pass existing functions to the hidden frame, and return the result.
var tJs="<script>";
tJs+=[tags, el].join("
"); //bundle a couple functions
tJs+="
alert('hidden window has '+tags('*').length)"
tJs+="</script>";
el("hiddenframe").src=dataUrlStr(tJs)
//open a playlist
var plTxt="#EXTM3U
#EXTINF:202,Minuet in G
http://www.mfiles.org.uk/downloads/beethoven-minuet-in-G.mp3"
el("hiddenframe").src=dataUrl(plTxt, "audio/mpegurl"
//open all the 'code' on this page as a plain text document.
function ob2Array(ob){var r=[]; for(var z=0; z<ob.length;z++){r[z]=ob[z]};return r};
function group( List, f) //applies a function (f) to an array and returns result...
{var z=0; Ray=[]; len=List.length;for (z;z<len;z++){Ray[Ray.length]=f(List[z]); }
return Ray;};
var codes=group(ob2Array(tags("pre")), function(x){if(x.className=="alt2")return x.textContent});
window.location.href=dataUrl(codes)
//make this thread into an rss feed
function tag(nd, tx){ return ["<",nd,">",tx,"</",nd,">"].join("")}
function dp (s) {var d = new Date();d.setTime(Date.parse(s)); return d.toUTCString()}
var X=PHP.htmlspecialchars
var chan=[]; var y = new Date();
chan[0]=tag("title", "CodingForums.com");
chan[1]=tag("link", window.location.href);
y.setTime(ajax_last_post+"000")
chan[2]=tag("pubDate", y.toUTCString())
chan[3]=tag("link", "http://www.codingforums.com/")
var codes=Group(ob2Array(tags("table")), function(x){
var i=[];d=""; p=d; t=d; l=d;j=d;a=0;
if(x.id.substr(0,4)=="post"){
p=tag("pubDate", dp(x.rows[0].cells[0].textContent.replace(/-/g, "/")));
t=tag("title", document.title)
l=tag("link", "http://www.codingforums.com/showpost.php?p="+tags("table")[5].id.substr(4))
ta=x.rows[1].cells[0].getElementsByTagName('a')[0]
a="<author>"+ta.href+" ("+ta.textContent+") </author>";
d=X(x.rows[1].cells[1].textContent.toString())
j=[d,t,p,l,a].join("
");
return tag('item', j)
}//end if
});
tags("a")[2].href=dataUrl(tag("channel", chan.join("
") + codes), "text/xml")
So, i think that should be enough examples to get going.
[I]"The only limitation is your imagination"
View 4 Replies
View Related
Jul 9, 2004
Here is a virtual train set I've made. To place a piece, select it from the drop-down and click 'Go!'. The train will always start on the top-right hand square, then go right.
When you open the page, enter how many rows and columns there should be in the grid: the default is 16 X 16.
View 11 Replies
View Related
Jun 8, 2007
How is it possible to define a constant in a virtual class?
E.g. I wrote the following code
tml = {
sayHello : function()
{
alert('hello');
}}
now if I want to add a constant into tml virtual class, what I need to
do?
I tried something like
tml = {
const1 : Integer = 0,
sayHello : function()
or
tml = {
const1 : function(){return 0;},
sayHello : function()
in both case, trying to get - inside tml object - the value of
const1 ... it results in a Object value and not the Integer value I
need.
View 4 Replies
View Related
Feb 11, 2010
I am doing a virtual point of sales page. Once the user has paid, he should be readdressed to the original web page. But this doesn't happen. I have realized the payment bank code is window.opener.location='[URL]'. I have copied their code and changed that by window.open ("[URL]") and it perfectly works. I have replicated the situation in these links...
The one that doesn't work [URL]
And the one I have modified and works [URL]
They insist their code is ok. Obviously I cannot modify their code located in their server.
View 2 Replies
View Related
Aug 2, 2010
How can I implement a simple virtual keyboard for a website... the only things I need is a number pad(0 -9)...
is a way to implement it as simple as possible using the Javascript...
View 6 Replies
View Related
Aug 31, 2011
I am so stuck on making a virtual keyboard using jquery. I found a great tutorial on nettuts however it requires you to click the letters on the virtual keyboard instead of using your actual keyboard and typing it. Does anybody know any tutorials that offer that or any suggestions? I know i have to use the keydown method but I really don't understand it. Here is an example of what it is suppose to be.
View 2 Replies
View Related
Oct 21, 2010
I'm trying to create a type of virtual pagination that's simple, semantic, and SEO friendly. The concept is like this website: [URL] In the bottom right hand corner, if you select a city, different contact information appears. My theory is to assign a class name to the hyperlink, then have a DIV with a matching ID.
[Code]....
Nothing works yet, and I don't know where to continue. The DIVs aren't even hidden upon loading.
View 6 Replies
View Related
May 15, 2011
I would like to take current page (which has virtualpaginate numbers below the images to advance through them) and instead of having numbers, to have thumbnails which will be across the bottom of the page (in the footer div)... I will have about 35-40 thumbnails and I'd like it so that the thumbnails correspond to the image that is displayed. I also would like to have the thumbnails be a "slider" type of script which allows the user to browse through the thumbnails by moving their mouse left-and-right. The image in the center DIV (and its accompanying information) should be replaced OnClick, not on hover over the thumbnails.
Here is my current code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]]"> <html xmlns="[URL]"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Viviana Santamarina</title>
<style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; } .....
How I can have the thumbnails in the footer DIV change the picture in the "portfolio" div just like my virtualpaginate numbers currently do.
View 5 Replies
View Related
Aug 3, 2010
Did anyone implement or can direct me to an implementation of virtual mode (render only visible rows, but still have the scroll work right) or something similar in the AJAX Sys.Preview.UI.Data.ListView?
I need to display a very large table (`1000 rows) and it simply isn't feasible to render everything.
View 1 Replies
View Related
Feb 7, 2011
My Page allows the following functionality...(ASP.NET)
1.When a userscrolls the gridview downwards fresh data is retrieved from a web service and appended to the grid.
2.Clicking the checkbox of a row selects the current row and creates a clone rowand appends it toa bottom grid.
The Problem:
The problem is that clicking the selected checkbox does not append it to the grid at the bottom. Now the funny part is that the data which is displayed in the initial load is appended to the bottom grid when checked but the fresh Data which is loaded is not appended to the bottom grid when checked.
View 3 Replies
View Related
Jun 14, 2006
I would like to know if there exists a javascript library (at least for
IE and Firefox) that let me get css properties in a more structured way.
I would like to have a css value that seperates the size/length value
from the type. For example:
width: 2.5em
size=2.5
type=em
And most importantly I would like a way to convert each such value into
pixels.
Does it exist? I am aware of the CSSStyleDeclaration and related methods
in Firefox.
If not, is it possible to convert such a value as 2.5em into pixels in
javascript? Sometimes the standard available methods that return pixels
cannot calculate the value I need. For example calculating the border size.
View 2 Replies
View Related
Jul 20, 2005
I want to have one statement in my web page that includes a single file (for
example "Mylib.inc" that contains a list of ".js" files to include. Is that possible? And if so can some one show me the basic format to use?
This would allow me to add and remove scripts from my pages without having to edit each page, only w3ouyld need to make a change in the MyLib.inc file I'm envisioning MyLib.inc to look something like this:
<script src="scriptname1.js"></script>
<script src="scriptname2.js"></script>
<script src="scriptname3.js"></script>
<script src="scriptname4.js"></script>
Another thought: Can .css files also be put in there? (probably not huh.) so
i could include everything with one include in my web page?
View 8 Replies
View Related
Nov 20, 2010
How to use reg-ex library in java script
View 2 Replies
View Related
Jan 11, 2007
I know nothing about javascript at the moment, but I've been hitting php very aggressively the past few months.
I've came across a challenge and I'm not sure how to go about fixing it.
Basically, I need to be able to drag an image into a box on my webpage, crop it, and then upload it. I've done basic image uploading and resizing with php. That's no big deal.
The problem is I may want to crop in different spots. The idea is to have some sort of box tool that is set at a given aspect ratio (like Photoshop does). Then, I could select the part of the image I wanted to keep, hit one button that would then crop, resize, and upload the image (storing the pathway to the MySQL database).
So does anyone know of any either standalone GUI's that work well for this sort of image manipulation or possibly a javascript that will allow me to select part of the image and spit out some co-ordinates that I could use with php's GD Library.
View 3 Replies
View Related
Nov 23, 2005
I would like to know if there is somewhere a JS library for managing
media content depends on the client's default media player. The player
can be QT, WMP, or any other players.
the idea is to code something like this :
var m = new MediaPlayer('my_media_file.ext');
m.display(); // generate a running code to display the media
and the object can be control by a set of method :
m.play();
m.pause();
m.stop();
View 1 Replies
View Related
Aug 16, 2006
I am new to javascript and intend to build a custom library. After
saving independent files which contain separate functions, how does one
build the library?
View 2 Replies
View Related
Jul 23, 2005
Is there a small graphics library that I can use? All I need to do is
draw a line of a nominated thickness and colour between two specified
points and to, at some later time, "delete" the line?
I've found a few offerings but either they weren't multi-browser
compatible or they were too big for me to consider (20K instead of 2 or 3K).
View 8 Replies
View Related
Mar 25, 2006
I've been asking questions about library design over the last week and
would like to get feedback on my overall idea for a JavaScript GUI
library. I need a nice GUI library so there is a good chance I will
write this as I need new widgets. I haven't found anything like this
and I'm surprised/disapointed this doesn't already exist. My library
prototype works nicely. I think parts of these ideas are not commonly
used for JavaScript library development and before I dive in too deeply
any experienced advice might make my efforts a lot better.
While trying to develop a rich GUI for a web app backend I started
needing a large set of GUI widgets that behaved and were coded
similarly. Things like flyout menus, drop down menubars, tree menus,
adjustable table widths, spinners...all the things that are in Java
Swing or other GUI widget libraries. Yes I know all of these things
exist individually as JavaScripts but I would like to build a library
that uses a class hierarchy structure and inheritance to take advantage
of all the nice OOP ideas of encapsulation etc. Certainly this library
will be different than a desktop app GUI library since HTML, CSS and
the browser already provide a lot of what is needed (<ul>'s for menus,
<table> for tables, all sorts of font display stuff, some form
elements). In JavaScript we are adding functionality on top of what the
browser already gives us.
This could end up being a big library but if each class is in it's own
file and the class hierarchy is known then people could string together
only the pieces they need. I would like a develop a way to automate
this step. Something like compiling one JavaScript file with all you
need for your page from the big library.....
View 21 Replies
View Related
Apr 20, 2007
Is there a free js library for doing unit conversions? I am putting
together an app that needs to convert volume and weight, among
others. You'd think that one exists, but I have yet to find it.
View 2 Replies
View Related
Jan 11, 2006
After a good deal of internal development, I've decided this library will do more good in the wild. It works in IE6, Safari 2, Opera 9, Firefox 1.5, and IE5.5/Mac (sort of buggy behavior with text selection in IE5.5/Mac though). It should also work in virtually any version of Gecko, Opera 6+, Safari 1, and IE5+ (anybody who wants to test those, feel free). The scripting is highly efficient, and only exposes two functions globally, Draggable and Droppable. The below code is licensed under the LGPL, though it is available under other licenses per request.
Let me know if you have any issues with it - this is something I'm interested in maintaining. Also, compared to other scripts, such as script.tac.ulo.us, this is much less code (lots of whitespace/comments could be taken out), and more widely supported across browsers.
Other than below, it can be found here: http://www.jasonkarldavis.com/scripts/dragdropable/dragdropable.html
// dragdropable.js (1.0.1)
//Copyright (C) 2006 Jason Davis, www.jasonkarldavis.com
//This code is licensed under the LGPL:
//http://www.gnu.org/licenses/lgpl.html
//
// Documentation:
//This script exposes two global variables, Draggable and Droppable. To make an
//element draggable, simply call `Draggable(element)`. This sets the necessary
//CSS properties and event handlers. It also overrides the addEventListener and
//and attachEvent methods (if present) to include the following events:
//onstart(When the element begins dragging)
//ondrag(When the element is being dragged)
//onstop(When the element has stopped dragging)
//You may also assign element.onstart, element.ondrag, and element.onstart to
//add event listeners.
//Lastly, if you need to physically prevent an element from dragging, you may
//call event.preventDefault() from within the onstart handler.
//
//To make an element droppable (have things dragged onto it), call
//`Droppable(element)`. This sets the necessary event handlers and coordinate
//searches. Once again, it overrides addEventListener and attachEvent to
//include the following events:
//onhover(When another element has been dragged over the element)
//ondrop(When another element has been dropped onto the element)
//onunhover(When another element has been dragged off the element)
//As before, you may also set element.onhover, element.ondrop, and
//element.onunhover directly.
//To remove all drop points from the current session, call `Droppable.reset()`.
//
//The event object is also extended with the following properties:
//dragTarget(The element being dragged)
//dropTarget(The element being dropped onto)
//
// Known bugs:
//* removeEventListener and detachEvent do not work with the custom events.
//Workaround: Use direct assignment (element.onevent) instead.
//* There is no way to remove a single drop point.
//Workaround: Call Droppable.reset(), then reinitialize the other drop points.
//* There is no way to remove dragging from an element.
//Workaround: element.onstart = function(event) { event.preventDefault() }
//* Changing position of droppable elements after initialization breaks drop
//Workaround: Static droppables are much faster than moving ones. Either call
//Droppable.reset() and reinitialize often, or ask the author to modify the
//script to account for this (and accept the resulting slowdown)
function Draggable(element) {
// initialize drag variable
var x = 0, y = 0, oldMouseMove, oldMouseUp;
// get style properties of element
var computedStyle;
if (typeof document.defaultView != "undefined" && typeof document.defaultView.getComputedStyle != "undefined")
computedStyle = document.defaultView.getComputedStyle(element, "");
else if (typeof element.currentStyle != "undefined")
computedStyle = element.currentStyle;
else
computedStyle = element.style;
// prep element for dragging
if (computedStyle.position == "static" || computedStyle.position == "")
element.style.position = "relative";
if (computedStyle.zIndex == "auto" || computedStyle.zIndex == "")
element.style.zIndex = 1;
element.style.left = isNaN(parseInt(computedStyle.left)) ? "0" : computedStyle.left;
element.style.top = isNaN(parseInt(computedStyle.top )) ? "0" : computedStyle.top;
// default event listeners
function onstart(event) {
event.dragTarget = element;
x = event.clientX;
y = event.clientY;
// Override preventDefault
event.preventDefault = (function(original) {
return function() {
element.ownerDocument.onmousemove = oldMouseMove;
element.ownerDocument.onmouseup = oldMouseUp;
original.call(event);
}
})(event.preventDefault || function() {});
if (element.onstart) element.onstart(event);
}
function ondrag(event) {
event.dragTarget = element;
element.style.left = parseInt(element.style.left) + event.clientX - x + "px";
element.style.top = parseInt(element.style.top) + event.clientY - y + "px";
x = event.clientX;
y = event.clientY;
Droppable.query(event);
if (element.ondrag) element.ondrag(event);
}
function onstop(event) {
event.dragTarget = element;
Droppable.query(event);
if (element.onstop) element.onstop(event);
}
// make listeners active
element.onmousedown = (function(oldMouseDown) {
return function() {
// Call old listener
if (oldMouseDown) oldMouseDown.apply(this, arguments);
// Store old event handlers
oldMouseMove = this.ownerDocument.onmousemove;
oldMouseUp = this.ownerDocument.onmouseup;
// Setup events
this.ownerDocument.onmousemove = function() {
// Call old listener
if (oldMouseMove) oldMouseMove.apply(this, arguments);
// Call ondrag
ondrag.call(element, arguments[0] || event);
return false;
}
this.ownerDocument.onmouseup = function() {
// Call old listener
if (oldMouseUp) oldMouseUp.apply(this, arguments);
// Call onstop
onstop.call(element, arguments[0] || event);
// Restore old event listeners
this.onmousemove = oldMouseMove;
this.onmouseup = oldMouseUp;
return false;
}
// Call onstart
onstart.call(this, arguments[0] || event);
return false;
}
})(element.onmousedown);
// override event attachers
if (element.addEventListener)
element.addEventListener = (function(original) {
return function(event, listener, useCapture) {
switch (event) {
case "start":
onstart = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onstart);
break;
case "drag":
ondrag = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(ondrag);
break;
case "stop":
onstop = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onstop);
break;
default:
original.call(element, event, listener, useCapture);
}
}
})(element.addEventListener);
if (element.attachEvent)
element.attachEvent = (function(original) {
return function(event, listener) {
switch (event) {
case "onstart":
onstart = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onstart);
break;
case "ondrag":
ondrag = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(ondrag);
break;
case "onstop":
onstop = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onstop);
break;
default:
original.call(element, event, listener);
}
}
})(element.attachEvent);
if (window.attachEvent)
window.attachEvent("onbeforeunload", function() {
onstart = ondrag = onstop = element.onmousedown = element.addEventListener = element.attachEvent = null;
element = null;
});
}
// initialize Droppable in the global scope
var Droppable;
(function() {
if (document.getBoxObjectFor) {
function getOffset(element) {
var box = document.getBoxObjectFor(element);
return { x: box.x, y: box.y };
}
}
else if (document.all && navigator.appName == "Microsoft Internet Explorer" && !window.opera) {
function getOffset(element) {
var range = document.body.createTextRange();
range.moveToElementText(element);
var rect = range.getBoundingClientRect();
return { x: rect.left, y: rect.top };
}
}
else {
function getOffset(element) {
var accumulator = arguments[1] || { x: 0, y: 0 };
if (element && element != document.body) {
accumulator.x += element.offsetLeft;
accumulator.y += element.offsetTop;
return getOffset(element.offsetParent, accumulator);
}
else {
return accumulator;
}
}
}
// initialize private pointers to current target information
var cTarget = null, cHover = null, cUnhover = null, cDrop = null;
function hotSpots(x,y) {
cTarget = cHover = cUnhover = cDrop = null;
}
// declare Droppable within the private scope
Droppable = function(element) {
// Calculate offset
var offset = getOffset(element);
// Calculate other edge offset
var edge = { x: offset.x + element.offsetWidth, y: offset.y + element.offsetHeight };
// Assign a finder function
hotSpots = (function(old) {
return function(x,y) {
if (offset.x <= x && x <= edge.x && offset.y <= y && y <= edge.y) {
cTarget = element;
cHover = onhover;
cUnhover = onunhover;
cDrop = ondrop;
}
else {
old(x,y);
}
}
})(hotSpots);
// default event listeners
function onhover(event) {
event.dropTarget = element;
if (element.onhover) element.onhover(event);
}
function onunhover(event) {
event.dropTarget = element;
if (element.onunhover) element.onunhover(event);
}
function ondrop(event) {
event.dropTarget = element;
if (element.ondrop) element.ondrop(event);
}
// override event attachers
if (element.addEventListener)
element.addEventListener = (function(original) {
return function(event, listener, useCapture) {
switch (event) {
case "hover":
onhover = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onhover);
break;
case "unhover":
onunhover = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onunhover);
break;
case "drop":
ondrop = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(ondrop);
break;
default:
original.call(element, event, listener, useCapture);
}
}
})(element.addEventListener);
if (element.attachEvent)
element.attachEvent = (function(original) {
return function(event, listener) {
switch (event) {
case "onhover":
onhover = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onhover);
break;
case "onunhover":
onunhover = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(onunhover);
break;
case "ondrop":
ondrop = (function(old) {
return function(event) { old.call(element,event); listener.call(element,event); }
})(ondrop);
break;
default:
original.call(element, event, listener);
}
}
})(element.attachEvent);
if (window.attachEvent)
window.attachEvent("onbeforeunload", function() {
hotSpots = onhover = onunhover = ondrop = element.addEventListener = element.attachEvent = cTarget = cHover = cUnhover = cDrop = null;
element = null;
});
}
// Setup a query method
Droppable.query = function(event) {
var oTarget = cTarget,
oHover = cHover,
oUnhover = cUnhover,
oDrop = cDrop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
hotSpots(event.clientX + scrollLeft, event.clientY + scrollTop);
switch (event.type) {
case "mousemove": // onhover & onunhover
if (oTarget != null && oTarget != cTarget)
oUnhover.call(oTarget, event);
if (oTarget == null && cTarget != null)
cHover.call(cTarget, event);
break;
case "mouseup": // ondrop
if (cTarget != null) {
cUnhover.call(cTarget, event);
cDrop.call(cTarget, event);
}
break;
}
}
Droppable.reset = function() {
hotSpots = function(x,y) {
cTarget = cHover = cUnhover = cDrop = null;
}
hotSpots();
}
})();
// Fix the function prototype for IE5/Mac
if (typeof Function.prototype.apply == "undefined")
Function.prototype.apply = function(scope, args) {
if (!args) args = [];
var index = 0, result;
do { -- index } while (typeof scope[index] != "undefined");
scope[index] = this;
switch (args.length) {
case 0:
result = scope[index]();
break;
case 1:
result = scope[index](args[0]);
break;
case 2:
result = scope[index](args[0], args[1]);
break;
case 3:
result = scope[index](args[0], args[1], args[2]);
break;
case 4:
result = scope[index](args[0], args[1], args[2], args[3]);
break;
default:
result = scope[index](args[0], args[1], args[2], args[3], args[4]);
break;
}
delete scope[index];
return result;
}
if (typeof Function.prototype.call == "undefined")
Function.prototype.call = function(scope) {
var args = new Array(Math.max(arguments.length-1, 0));
for (var i = 1; i < arguments.length; i++)
args[i-1] = arguments[i];
return this.apply(scope, args);
}
View 7 Replies
View Related
Feb 3, 2010
I downloaded the tablekit javascript library and put it in the js directory which is in the jsp directory. i.e. the directory is
C:workspacecom.mycomp.data.warWEB-INFjspjs
The jsp page is as follows and display correctly with FF and chrome on Windows Vista.However, the column of the page is not sorted by clicking on the column. i.e. the tablekit javascript library sorting function does not work on the web page generated by jsp.
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table border="1" class="sortable resizable"
[code]...
View 2 Replies
View Related
