IE Doesn't Like Prototyping
Feb 2, 2007I'm having a problem with IE 7 (other versions didn't work either) when it comes to prototyping.
This is the code:
I'm having a problem with IE 7 (other versions didn't work either) when it comes to prototyping.
This is the code:
Curious about how prototyping works and if there is a workaround for my problem. Say I create a new function for Objects called 'keyExists':
JavaScript Code:
Object.prototype.keyExists=function(key)
{
for(var tempKey in this)
if(tempKey==key)
return true;
return false;
};
When I use this function, one of the keys in the iteration will be the new function that I have created.
The following example would alert the following: "key1", "key2", "keyExists". The last one is my concern. Obviously their are other browser-defined functions available for Objects that don't show up when iterating through the object. I thought Object.prototype.functionname was the methodology for that but apparently not. Is there a way to achieve the effect I am looking for? Code:
We all know (and love!) the fact that Mozilla exposes element constructors (HTMLParagraphElement, for example) for prototyping. Turns out Opera 8 allows you do to the same thing.
So this leaves Safari, which has actually allowed you to do this since 1.0, *but* doesn't publicly expose the constructors. The below code exports constructors into public variables matching those in Mozilla and Opera 8:
/*
HTMLElement Prototyping in KHTML and WebCore
Copyright (C) 2005 Jason Davis, www.jasonkarldavis.com
Additional thanks to Brothercake, www.brothercake.com
This code is licensed under the LGPL:
http://www.gnu.org/licenses/lgpl.html
*/
if (navigator.vendor == "Apple Computer, Inc." || navigator.vendor == "KDE") { // WebCore/KHTML
function(HTMLConstructors) {
for (var i in HTMLConstructors) {
window["HTML" + i + "Element"] = document.createElement(HTMLConstructors[i]).constructor;
}
}({
Html: "html", Head: "head", Link: "link", Title: "title", Meta: "meta",
Base: "base", IsIndex: "isindex", Style: "style", Body: "body", Form: "form",
Select: "select", OptGroup: "optgroup", Option: "option", Input: "input",
TextArea: "textarea", Button: "button", Label: "label", FieldSet: "fieldset",
Legend: "legend", UList: "ul", OList: "ol", DList: "dl", Directory: "dir",
Menu: "menu", LI: "li", Div: "div", Paragraph: "p", Heading: "h1", Quote: "q",
Pre: "pre", BR: "br", BaseFont: "basefont", Font: "font", HR: "hr", Mod: "ins",
Anchor: "a", Image: "img", Object: "object", Param: "param", Applet: "applet",
Map: "map", Area: "area", Script: "script", Table: "table", TableCaption: "caption",
TableCol: "col", TableSection: "tbody", TableRow: "tr", TableCell: "td",
FrameSet: "frameset", Frame: "frame", IFrame: "iframe"
});
function HTMLElement() {}
HTMLElement.prototype = HTMLHtmlElement.__proto__.__proto__;
var HTMLDocument = document.constructor;
var HTMLCollection = document.links.constructor;
var HTMLOptionsCollection = document.createElement("select").options.constructor;
var Text = document.createTextNode("").constructor;
var Node = Text;
}
In Opera < 8, all elements inherit directly from Object(), so you can still prototype Object() if you need to do element prototyping. Internet Explorer's elements *don't* inherit from Object, oddly enough, so who knows with that browser. In any case, there you go. It also happens to work in Konqueror (AFAIK).
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.
[Code]...
I've been pretty infatuated with JSON for some time now since
"discovering" it a while back. (It's been there all along in
JavaScript, but it was just never "noticed" or used by most until
recently -- or maybe I should just speak for myself.)
The fact that JSON is more elegant goes without saying, yet I can't
seem to find a way to use JSON the way I *really* want to use it: to
create objects that can be instantated into multiple instances without
prototyping. I've seen (and used) JSON for singleton object instances
-- this not a problem and this is how it works right out of the gate.
But given the following custom object written the past "normal" way, I
would like to write it in JSON format, and then be able to create new
instances from the one definition. Here's an example using the "old
way" most who have been writing JavaScript for years have seen:
function Two( x, y ) {
this.x = x;
this.y = y;
}
Two.prototype.sum = function () { return this.x + this.y }
Two.prototype.max = function () { return this.x this.y ? this.x :
this.y }
Two.prototype.min = function () { return this.x this.y ? this.y :
this.x }
Two.prototype.pow = function () { return Math.pow( this.x, this.y ) }
Now, I know I can get all "fancy" with the above and do either this:
Two.prototype = {
sum : function { return this.x + this.y },
max : function () { return this.x this.y ? this.x : this.y },
min : function () { return this.x this.y ? this.y : this.x },
pow : function () { return Math.pow( this.x, this.y ) }
};
Or this:
function Two( x, y ) {
// Properties.
this.x = x;
this.y = y;
// Methods.
this.sum = function () { return this.x + this.y }
this.max = function () { return this.x this.y ? this.x : this.y }
this.min = function () { return this.x this.y ? this.y : this.x }
this.pow = function () { return Math.pow( this.x, this.y ) }
}
(The later seems to work without prototyping...!)
But neither are really as close to pure JSON as I would like, so that
I can instantate those:
var hisPair = new Two( 11, 22 );
var herPair = new Two( 33, 44 );
What I'd like is a way in PURE JSON to be able to create the Two class
(as an example) using pure JSON. I've not seen anything yet on the
web that addresses this directly aside from some pages which require
you to include another JS to allow "deep embedding" of classes using
other helper "classes" (that are created the "old way" it seems), etc.
The best I've found so far on using pure JSON to create a class that
allows *multiple* instances is something like this:
function Two( x, y ) {
var class = {
x : x,
y : y,
sum : function { return this.x + this.y }
max : function () { return this.x this.y ? this.x : this.y }
min : function () { return this.x this.y ? this.y : this.x }
pow : function () { return Math.pow( this.x, this.y ) }
};
for (var element in class) this[element] = class[element];
}
Now *THAT* works, but it's still not as "pure" I would like. But it's
acceptable for now, I guess, since I *am* creating the entire "class"
as a JSON object, and I consider the outside function "wrapper" as the
necessary "constructor." But I keep wondering... There HAS to be a
better way.
I'm just wondering if anyone knows of a place that discusses JSON used
in situations like the above. Again, I've seen an ABUNDANCE of pages
and sites that discuss JSON in Singleton usage, but nothing that
discusses it as I am wanting here.
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]...
I have a few String prototypes such as String.prototype.EscapeReg = function () { return this.replace(/[-[]{}()*+?.,\^$|#s]/g, "\$&"); }; // Escapes characters for use with a regular expressionI also have my own class/ library which is used like this 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:
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.
I'm trying to create a Youtube video inserter script for my site. Long story short, I need to be able to prototype an HTML element and add a string into the element's innerHTML, like this:
myObj.insertVid(5sw2OvIgoO8);
I'm using jQuery to getElementsByClass("sip").
[Code]..
I am working on a rapid html prototyping framework. This would allow me (as an interaction designer) to create html prototypes fast.I have been looking in templating plugins to help with building the templates or filling them with content. For example {{ lorem_ipsum }} would be replaced with a few paragraphs of random text. This is easy to do with several plugins.
However it would be great to be able to add a bit more flexibility by using functions like {{ loremWords(100) }} which would add 100 random words which are different for each replaced item. Or something similar to add a menu or other snippets.It is probably not too difficult but so far I have not gotten it working yet. And the pluginsI have found are either too complex, requires script tags or can't handle functions.
ive got a problem with some of my code. mozilla likes it, but IE gives an error and doesnt do anything with the code what im trying to do is show two fields only if a checkbox is checked. the javascript function is as follows:
function change_permission(){
if(document.category.permission.checked){
document.getElementById('login').innerHTML='<td colspan="2"></td>'
document.getElementById('password').innerHTML='<td colspan="2"></td>'
}else{
document.getElementById('login').innerHTML='<td><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Login: </font></div></td><td><input type="text" name="login" value="{$login}"></td>'
document.getElementById('password').innerHTML='<td><div align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Password: </font></div></td><td><input type="password" name="password" value=""></td>'
}}
the fields in the form, with default value:
<tr id="login"><td colspan="2"></td></tr>
<tr id="password"><td colspan="2"></td></tr>
I use a basic pop-up window code that i have used for many years.I probably need to update it, but i was wondering why it will work for every browser but IE8.
function popUp(URL) {
day = new Date();
id = day.getTime();[code].........
I have this code, and it works fine in windows but not in mac, does anybody know why?
[Code]...
I have some Javascript that takes the input from some textboxes and then puts them all into a sentance automatically. It works perfectly in IE but not with FireFox... does anyone know how to make it work with both browsers?
HTML Code:
<script type="text/javascript">
function Text_Change() {
var TxtFName = document.getElementById("TxtFName");
var TxtSName = document.getElementById("TxtSName");
var TxtAge = document.getElementById("TxtAge");
var TxtLoc = document.getElementById("TxtLoc");
var SpnDisp = document.getElementById("SpnDisp");
var FName = TxtFName.value == "" ? "?" : TxtFName.value;
var SName = TxtSName.value == "" ? "?" : TxtSName.value;
var Age = TxtAge.value == "" ? "?" : TxtAge.value;
var Loc = TxtLoc.value == "" ? "?" : TxtLoc.value;
SpnDisp.innerHTML =
"Hello " + FName + " " + SName + ", " +
"you are " + Age + " years old and " +
"at the moment you live in " + Loc;
}
</script>
<body
<div><input type="text" id="TxtFName" /></div>
<div><input type="text" id="TxtSName" /></div>
<div><input type="text" id="TxtAge" /></div>
<div><input type="text" id="TxtLoc" /></div>
<div><span id="SpnDisp"></span></div>
im working on my online portfolio and I have an external javascript file that has functions to add a piece to the collection...here is the link to my pageillustratorthe javascript file is herehttp://www.freewebs.com/harrisonengl...ngleweb/add.jsas you see some of the pieces will show up, and some wont. they are all going off the same function, and all work when i run the html off my computer harddrive rather than the freewebs server.Also, i understand that formatting of the site will get all messed up when it is ran in different browsers... for instance it works in firefox and safari now, but not IE and Chrome
View 5 Replies View RelatedI have this simple validation function for my form
<script language="javascript" type="text/javascript">
function validateyesvalue(document){
if(!document.getElementsByName('RadioGroup2_0')[0].checked && !document.getElementsByName('RadioGroup2_0')[1].checked && !document.getElementsByName('RadioGroup2_0')[2].checked &&
[Code]...
It's only validating in IE not in Google Chrome and not in Firefox, any idea how to fix this ?
Are there any compatibilty issues associated with teh following command?
<div onclick="open('http://www.mysite.com.htm','','')">Main page </div
It worked on a PC butnot on a MAC (bith with IE).
I have this code in actionscript that calls javascript:
actionscript:
zoom_in = function () {
var tw1:Tween = new Tween(mc_1, "_width", Regular.easeOut,
mc_1._width, 0, 1, false); //OK
var tw2:Tween = new Tween(mc_1, "_height", Regular.easeOut,
mc_1._height, 0, 1, false); //OK
ExternalInterface.call("zoom");
}
javascript:
function zoom()
{
top.resizeTo(1024, 768);
self.moveTo(0,0);
}
Everything works perfectly on Firefox 1.5 but not on IE 6+
in IE the "zoom" function doesn't work, but if I add an alert it DOES work:
function zoom()
{
alert('this works');
top.resizeTo(1024, 768);
self.moveTo(0,0);
}
I have this code :
But for some reason this doesnt change the value.
(I have 2 off these and when i switch between radio butotons its activated)
relevant JS:
relevant html:
This script is supposed to tally the score of the questions. It shows up fine but it does not tally the score :confused:
<p>You are on a business journey beyond traditional small business style <input type="checkbox" value="1" name="Q1">yes <input type="checkbox" value="0" name="Q1">no</p>
<p>You don t want to be the glue holding everyday operations together <input
[code]....
function formsubmit(){
Now im trying to change the image next to the username textbox, the code im using now works within reason.
It changes the image, but it always changes the image to correct.GIF even when it shouldnt. Also the alert box doesnt appear.
Using Firefox 3, trying to use a confirm box where it says ok or cancel. The box shows up to confirm ok or cancel but if I click cancel it doesnt seem to return false, it just goes to the link of the url set in href. Im including the js file in the page:
Code:
<script src="js/forms.js" type="text/javascript"></script>
I then call it in the link:
[code]....
sort of made a thread about this earlier but I dont feel I explained the problem very well, if you go to http://love2-create.com and click on the orange "view profile" link about halfway down the left hand column a tab opens showing a profile with a small picture gallery at the bottom, this gallery works fine in firefox and google chrome, however in safari it works sometimes but not always and in IE it usually works on the first time the page is loaded but then when the page is refreshed and the profile link is clicked I get an Error: 'document.getElementById(...)' is null or not an object on line 60,the lines in question look like this:
HTML Code:
buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
[code]....
I have no idea why my image link doesnt work
myimages[{$i1}]=["banners/{$object->image}", "{$object->link}", "_new"] ;
I grab Jquery scroll bar demo from htmldrive.com and try to work it out for myself. But when I modify the coding, some text color doesn't change as it suppose to be. I am not sure where is the problem. The function is as the following
The original sample is here: [url]
I wanna create a functionality where on clicking a (minus) button a div show slide up and and the image should change to (plus). Again on clicking the plus button. the content div should slide back out
[Code]...
i have a set of select fields, which when selected, send a value via ajax, to return a sub-selection for further choice. I have 3 levels of sub-categories like this. For some reason it works in FF only - not IE. [URl]..
View 12 Replies View Related