|
JavaScript - Prototyping Within My Library
Hello. I have a few String prototypes such as
Code: String.prototype.EscapeReg = function () { return this.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); };
// Escapes characters for use with a regular expression
I also have my own class/ library which is used like this Code: var adg = new AndyG_ns.ADG_Utils();
adg.StartClock('AndyClock','dd mmm yy hh:nn'); // etc.
What I would like to do is to only add the prototype to my library (not to the global namespace). The end result I'm looking for is to use code such as: Code: var adg = new AndyG_ns.ADG_Utils(); var myString = new adg.AString(); var parsed = myString.EscapeReg(); In addition, I want to be able to also use/create my special string sub-class within my library. I suppose I'm saying that I would like to extend or super-class the native String object. Any guidance would be appreciated Similar TutorialsHi All I thought it was about time to actually learn Javascript rather than pretend I know it, so I'm new to Javascript. I've been reading Javascript 'The Good Parts' and have watched a few google videos on Youtube. So I came across prototyping which seems to be quite fundamental to JS but is quite awkward to use. I am trying to avoid the use of the 'new' keyword and limit my application to one Global variable, as this can improve the JS scripts performance, reliability and security. In essence I'm just trying to make a simple MsgBox object that has a method called 'alertMe', which in turn simply shows an alert box with 'Hello' If this is not very clear then say so as trying to explain something you don't fully understand is quite hard. Here's my code, doesn't alert when I called the object. Have a look Code: var MyLib = {};
MyLib.MsgBox = function(){
//Object methods
MyLib.MsgBox.prototype.alertMe = function(){
alert('Hello');
};
};
MyLib.MsgBox.alertMe();
Any help and pointers will be very appreciated. Regards, Magnetica Hello there folks, First time poster, so please be gentle I am ok with using objects creating classes if someone else defines, but when it comes to defining my own, I hit a nasty brick wall... I am using an XML/XSLT wrapper called Sarissa to help with programming a utility to transform XML into HTML in different views. For this to happen, I have created a Loader class which loads in XML required. I am aware of prototyping for binding methods to objects (as opposed to replicating the same method every time an instance is created)... The aim being I want to create a progress bar for the essential files that need to be loaded in. Presently I have them load in Synchronous mode just to get the utility working, which I know is poor, so would like to address it. So can someone answer me this: I understand why this works: Code: var SWMU = new Object();
SWMU.stylesheets = new Object;
SWMU.joblot = null;
SWMU.cache = new Object;
SWMU.filtering = new Object;
SWMU.locns = null;
function Loader(sXml, sTitle) {
this.doc = Sarissa.getDomDocument();
this.doc.load(sXml);
this.doc.summary = sTitle;
this.doc.onreadystatechange = function() {if(this.readyState)
{alert(this.summary + " state change to..." + this.readyState);} else
{alert(this.summary + " state change to..." + this.doc.readyState);}
}
}
function async() {
SWMU.stylesheets[0] = new Loader("swmu_test/swmu_berthing.xsl", "Main SWMU Stylesheet");
SWMU.stylesheets[1] = new Loader("assets/xsl/controls.xsl", "Drop down boxes");
}
function _init() {
async();
}
as it recreates the "this.doc.onreadystatechange" anonymous function everytime an instance is created (which is yuck). However, when I do this (using prototype)... Code: var SWMU = new Object();
SWMU.stylesheets = new Array;
SWMU.joblot = null;
SWMU.cache = new Object;
SWMU.filtering = new Object;
// Now define the Loader object
// Create the loader method for dealing with items loaded
function Loader(sXml, sTitle) {
this.doc = Sarissa.getDomDocument();
this.doc.load(sXml);
this.doc.summary = sTitle;
}
function rHandler() {alert(this.summary + " State changed to... "+this.readyState);}
// Create the request handler
Loader.prototype.doc = {};
Loader.prototype.doc.onreadystatechange = rHandler;
function async() {
SWMU.stylesheets[0] = new Loader("swmu_test/swmu_berthing.xsl", "Main SWMU Stylesheet");
SWMU.stylesheets[1] = new Loader("assets/xsl/controls.xsl", "Drop down boxes");
}
function _init() {
async();
}
Nothing happens and no errors are thrown, though there should be an alert box everytime there is state change to the progress of a file loading. Can someone help me with this? Apologies if this is on the basic side, but it has been causing me a headache all week, and I can not find any answers on this. Shaun I'm apparently misunderstanding what I'm reading on prototyping. My main task is to squeeze some performance out of an app that's a bit slow on IE, and it looks like large Arrays and their overhead may be part of the problem. I'm trying to replace those with my own array type based on Object and extend it with helper functions like .length. Here's a munged sample of what I've tried: Code: /*
// Test 1
var obj = {};
obj['data1'] = {};
obj['data2'] = {};
obj['data3'] = {};
*/
/*
// Test 2
var obj = {
data1 : {},
data2 : {},
data3 : {}
};
*/
// Test 3
function obj() {}
function data1() {}
function data2() {}
function data3() {}
var obj = new obj();
obj.data1 = new data1();
obj.data2 = new data2();
obj.data3 = new data3();
As I understand it, those three are equivalent definition. Please correct me if I'm wrong. The problem comes in when I try to extend. For example: Code: obj.data1.prototype.mylength = function()
{
var count = 0;
for (var i in this)
{
count++;
}
return count;
}
That gives me a "obj.data1.prototype is undefined" error. Can someone point out the step I'm missing in the middle of those to make it work? hello .. can I use som function from c++ library in my java script file ? thanks .. Hey guys! Was wondering if anyone knew a simpel javascript library? With things like alert ,displayDate() and other basic things. Im pretty new to JS so I think that a lib like jquery would be to hard for me right now. Thx // Kiwo Hi im in the middle of creating my own javascript library but got stuck I can do everything for this library I just got stuck on how to make it flow through a list of strings like jQuery does. For example jQuery allows you to write a string like this: $('li').add('p').css('background-color', 'red'); Which they can select all li tags add a p tag inside then change the background color of that tag, What im asking is how can I go about doing this where I can create a similar system which allows me to flow through my class functions. Right now its a very small code because I started again to allow better overview of where things are but this is it so far. This allows the use of both SDK and $ at the start of the function for example. $.Display({'file':'index.php','id':'divid'}); And SDK.Display({'file':'index.php','id':'divid'}); Code: (function(window)
{
var $ = {
Display: function(info)
{
this.call(info.file,info.id,'file='+info.file);
},
call: function(file,id,parameters)
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",file,true)
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlhttp.send(parameters)
},
Flash: function(params)
{
if(params.file){alert(params.file);}
if(params.id){alert(params.id);}
}
};
// Expose SDK to the global object
window.SDK = window.$ = $;
})(window);
Hello, UPJS is an open source JavaScript Library that caters needs and requirements of web developers. It is currently under development, we encourage you to use this Library. For any bug, we will be glad to help you. Please follow upjs on facebook, http://www.facebook.com/pages/upjs/239536299419136 http://www.upjs.org Have a nice day! Greetings, I am using the javascript scriptaculous library. On my Green Products webpage, if the user clicks "Subcategory", "Maximum Price", "Business Name", or "Search For", a green dialogue box should appear giving the user a tooltip. This works great for browsers other than IE. I am getting the following error: Quote: Message: Object doesn't support this property or method Line: 543 Char: 3 Code: 0 URI: http://www.green-watch.org/scriptaculous/src/effects.js Message: Object doesn't support this property or method Line: 529 Char: 3 Code: 0 URI: http://www.green-watch.org/scriptaculous/src/effects.js This is a fairly common library. What is the solution to this problem? Always seems to be problems with IE... Thanks in advance for any solutions or suggestions. Sincerely, Travis Walters [delete]
Hi all, can anyone recommend me nice tooltip script which is javascript library independent, meaning no help/code from any of libraries such as (jquery, prototype,scriptalicious, mootools,extjs etc.). Here is the one I particularly like but it uses protoype and that is not option for me now, because I'm just integrating something else into already existing huge script and I don't wanna mess up old functionality or bring some additional unnecessary overhead. Or even better if you can give me some guidelines / pointers , how to make one from scratch that would be acceptable for me also. The most important thing is that it points from above downwards, because I found like dozen of good ones but pointing from below. Here is an example what I mean when I say from pointing from above. Thank you 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. HTML -> <td> <a onclick="newImage" href="nogoto"> <img src="_images/Thumbnails/1.png" align="left" width="47px" height="33px" alt="1" id="1"/> </a> </td> CSS -> #mainpage { color:#FFF; text-align:right; font-size:.7em; height:365px; width:529px; position:relative; top:25px; left:35px; } JavaScript -> window.onload = newImage(); function newImage() { document.getElementById(mainpage).innerHTML = "<script>background-image:_images/1.png;</script>" } Obviously I want to expand on this once it works but for now I would just like to get the images to appear correctly when clicked. Thank you so much in Advance if anyone can help. I read the posting guidelines but I still have questions that I would love to be answered by anyone willing to tolerate me. 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? Thank you. I encountered an error when my table had only one or zero records when using the filtertable library from javascriptkit.com Here is the solution to fixing it for anyone else who encountered it. Perhaps the library could be updated with the fix? The error is in the function getChildElms() when the variable 'n' is undefined. Working backwards, I found that there was a problem with some logic in the setFilterGrid() function where the value of 'ref_row' is changed if undefined to a value of '2'. In fact, that value is needed in the line to set the value of tbl.tf_ref_row, but accidentally caused a problem in the call to getCellsNb() where at some point it tries to get at row 2 (offset 3) which doesn't exist in my case. I fixed it by creating a new variable and leaving it as 'undefined' unless ref_row contained a number (passed into the function). This is a section of the function with the fix: Code: var _row;
if(ref_row == undefined){
ref_row=2;
} else {
ref_row=(ref_row+2);
_row = ref_row;
}
var ncells = getCellsNb(id,_row);
tbl.tf_ncells = ncells;
if(tbl.tf_ref_row==undefined) tbl.tf_ref_row = ref_row;
tbl.tf_Obj = fObj;
if( !hasGrid(id) ) AddGrid(id);
However, if you have zero rows, you still get an error since there are no tr elements. I fixed this by having the code use the th elements instead when zero tr elements are found. This code is in the function 'getCellsNb()' below: Code: {
var t = grabEBI(id);
var tr;
if(nrow == undefined){
tr = grabTag(t,"tr")[0];
}
else {
tr = grabTag(t,"tr")[nrow];
}
var n = getChildElms(tr);
if (!n){
n = getChildElms(th); // Check for 'th' elements instead.
return n.childNodes.length;
}
return n.childNodes.length;
}
If you have no data rows and no header row, then you're on your own :) I am trying to use a javascript plugin for jQuery library that transforms a regular select html element into a dropdown checkbox list (Dropdown Check List, see http://code.google.com/p/dropdown-check-list/), however I believe that the prototype library that I am loading immediately after the jquery library is still conflicting with it somehow even though I modified my code to reflect the following changes (which is supposed to allow the use of prototype with jquery): http://docs.jquery.com/Using_jQuery_...ther_Libraries (Including jQuery before Other Libraries) My code (in a cold fusion environment, which should be irrelevant) looks like this: Code:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="js/jQuery/jquery.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="js/prototype.js" TYPE="text/javascript"></SCRIPT>
<script language="javascript" type="text/javascript" src="js/jQuery/ui.core.js"></script>
<script language="javascript" type="text/javascript" src="js/jQuery/ui.dropdownchecklist.js"></script>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 });
});
</script>
</head>
<body>
<select id="cbo_status" name="cbo_status" multiple="multiple">
<option value="-1">All</option>
<option value="1" SELECTED>Assigned</option>
<option value="2" SELECTED>In Progress</option>
<option value="3" SELECTED>Complete</option>
<option value="4" SELECTED>Verified Resolved</option>
<option value="5" SELECTED>Will not be addressed</option>
<option value="6" SELECTED>Wishlist</option>
</select>
</body>
</html>
When I run the debugger, here's the error I'm still receiving: Error: Object doesn't support this property or method (pointing to the line below, character 3) jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 }); Does anyone have any idea why this might still be failing? Qatrix is a new kind of JavaScript library for easily building up high performance web application with less code. And now is released today. The features of Qatrix a Hardware Accelerated Animation Qatrix will use the native CSS3 transition to process the animation as possible. And this kind of native basic process operation will enable hardware acceleration by browser. The animation of Qatrix will be more faster and more smoother. High performance code Qatrix is using more native code and special design to increase the performance. Web application will run much more faster and more efficient. Easy-to-learn The name of functions on Qatrix is familiar with the most popular JavaScript jQuery. It will be much more easy to use without re-learn other new concept and knowledge. Cache system Qatrix included a simple cache system to storage and fetch data with high speed. Incredible size Only 6KB compressed and gzipped file size with 60+ functions. Load script instantly without expectation. Read more and download: http://qatrix.com Hi, I Have been working on a archive/library for our animators here, with images of old and useful models/3d work. to help them out and save them some time, I wanted to add the ability to click on a jpeg and open the folder where the files are stored for the desired character/set. Being a animator myself, and working for a small company (who have no javascript programmers) we have little to no knowledge of the code and would appreciate any help possible. this is what i have come up with so far Code:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function DriveList()
{
var folder=document.Drive.Name.options[document.Drive.Name.selectedIndex].value;
document.frames['MyComputer'].location.href = folder;
}
function FolderChoose()
{
var location=document.UserLocation.FolderLocation.value;
document.frames['MyComputer'].location.href = location;
}
</script>
</HEAD>
<BODY>
<FORM NAME="UserLocation">
<P><font size="2">Type in a Folder Location: </font>
<INPUT TYPE="text" name="FolderLocation" length="25" size="20">
<INPUT TYPE="button" value="Open Folder" onClick="FolderChoose();"></P>
</FORM>
<IFRAME NAME="MyComputer" SRC="about:blank" WIDTH="50%" HEIGHT="20%"></IFRAME>
</CENTER>
however this only allows the user to manually search for the files. Is it possible and what would be the best approach to achieving this. I have been using DreamWeaver to create the library if that is of any help. Thanks in advance! Matt |
|||||||