|
JavaScript - Option Constructor And Challenges
Hi All,
Why is the Option constructor converting my text as follows? text = ' 1:30 pm' Option tag that gets generated: <option value="10">&nbsp;&nbsp;1:30 pm</option> How do I suppress the conversion of the & to & by the constructor? I've tried escaping the & but that's a no go. Thanks in advance for any help on this. JD Similar TutorialsIs there a way to do this? Maybe something like this... Code: $("td:contains(' ')").css("display", "none");
Although for whatever reason, the code above isn't working... hi, i'm currently stumped by the following code. what's the point of using x.constructor.prototype? (highlighted in red) why not directly use x.prototype.classname to check whether 'classname' property is in this class? thx in advance Code: function getType(x) {
// If x is null, return "null"
if (x == null) return "null";
// Next try the typeof operator
var t = typeof x;
// If the result is not vague, return it
if (t != "object") return t;
// Otherwise, x is an object. Use the default toString( ) method to
// get the class value of the object.
var c = Object.prototype.toString.apply(x); // Returns "[object class]"
c = c.substring(8, c.length-1); // Strip off "[object" and "]"
// If the class is not a vague one, return it.
if (c != "Object") return c;
// If we get here, c is "Object". Check to see if
// the value x is really just a generic object.
if (x.constructor == Object) return c; // Okay the type really is "Object"
// For user-defined classes, look for a string-valued property named
// classname, that is inherited from the object's prototype
if ("classname" in x.constructor.prototype && // inherits classname
typeof x.constructor.prototype.classname == "string") // its a string
return x.constructor.prototype.classname;
// If we really can't figure it out, say so.
return "<unknown type>";
}
Hi - In am learning Javascript and trying to understand why, the following line : Code: arguments.callee.superclass cannot be replaced by : Code: this.constructor.superclass In the following code sample : ( the explanation given is that if someone creates a subclass of PositionedRectangle, then this.constructor will refer to the new subclass constructor, not to PositionedRectangle - but why? 'this' here to my knowledge represents the object 'PositionRectangle' and if not I can't understand why not. ) Code: // Here is a simple Rectangle class.
// It has a width and height and can compute its own area
function Rectangle(w, h) {
this.width = w;
this.height = h;
}
Rectangle.prototype.area = function( ) { return this.width * this.height; }
// Here is how we might subclass it
function PositionedRectangle(x, y, w, h) {
// First, invoke the superclass constructor on the new object
// so that it can initialize the width and height.
// We use the call method so that we invoke the constructor as a
// method of the object to be initialized.
// This is called constructor chaining.
PositionRectangle.superclass = Rectangle;
arguments.callee.superclass .call(this, w, h);
// Now store the position of the upper-left corner of the rectangle
this.x = x;
this.y = y;
}
// Create a prototype for the subclass that inherits from the prototype
// of the superclass.
function heir(p) {
function f(){}
f.prototype = p;
return new f();
}
PositionRectangle.prototype = heir(Rectangle.prototype);
PositionRectangle.prototype.constructor = PositionRectangle;
I had read from books that the constructor property of object is inherited from its prototype. And the prototype can be changed dynamically. New property can be added to or deleted from object even it was created before the prototype change. But I got confused on below codes. Code: function A()
{
this.title = "A";
}
function B()
{
this.title = "B";
}
document.write("<br>");
var b = new B();
document.write(b.constructor);
document.write("<br>");
document.write(B.prototype.constructor);
document.write("<br>");
B.prototype = new A();
document.write(b.constructor); // Suppose to output "function A() ..."
document.write("<br>");
document.write(B.prototype.constructor);
document.write("<br>");
B.prototype.constructor = B;
document.write(b.constructor);
document.write("<br>");
document.write(B.prototype.constructor);
document.write("<br>");
But the actual result (both IE and firefox) is Code: function B() { this.title = "B"; }
function B() { this.title = "B"; }
function B() { this.title = "B"; }
function A() { this.title = "A"; }
function B() { this.title = "B"; }
function B() { this.title = "B"; }
Please help me. thanks. How to extend the constructor for the date object of the javasccript so that whenever a call is made to the constructor, I want to perform a particular action? Basically how to define wrappers for default javascript methods or objects like Date() so that I can perform some action and then invoke the original method? So basically if I have something like var a = new Date(); I want it to (say) alert the value of the date everything Date() is called and then execute the default date constructor. TIA I have a dice simulator. Basically, a user enters how many sides they want on their die, and then I digitally roll 2 of them. And produce the output in a document.writeln. I think I'm having trouble with the this.sides in the constructor function (in the head section). Also, I'm getting a syntax error in Safari : 25TypeError: 'null' is not an object (evaluating 'element.value') Am I not suppose to put the variable in the constructor function? Any help would be appreciated. <head> var element = document.getElementById("number"); var sides = element.value; function Die( ) { this.sides = sides; this.roll = function( ) { return parseInt((Math.random( ) * 1000) % this.sides) + 1; } } </script> </head> <body> <h1>Adam's Dice Rolling Game!</h1><br/> <form action="" method="post"> <p> <input type="text" name="number" id="number"/> </p> <p> <input type="button" value="Roll the dice!" id="roll_me"/> </p> </form> <script type="text/javascript"> var d = new Die( ); d.sides = sides; var rolled_value = d.roll( ); var r1 = document.getElementById( "roll_me" ); r1.onclick = function Die () { document.writeln ( d.roll () ); } </script> I need to detect the "name" of the constructor of an object. For example, myArray.constructor === Array is true, but I want something where that === 'Array' is true. I've heard of Object.constructor.name, but it's not widely compatible. Any ideas (preferably without involving regular expressions)? Thanks in advnce, Julian I am trying to understand why I had an error, or why my solution worked. In my HTML I had: Code: <script language="JavaScript" type="text/javascript" src="Book.js"></script> <script language="JavaScript" type="text/javascript" src="Book_TEST.js"></script> Book.js said: Code: function Book(title, author)
{
this.title = title;
this.author = author;
}
Book.prototype.toString = function()
{ return '"' + this.title + '" by '+ this.author; };
var Book = new Book ("John", "Dough");
alert (Book); // displays "John Dough"
And, predictably, at this stage, the code worked. Book.js said: Code: var myBook = new Book ("JavaScript Tutorials", "Herong Yang");
However, at this point the JavaScript would crash and I'd get an error "Error: Book is not a constructor javascript." I drove myself nuts trying to figure out why the code wasn't working at this later point. Eventually, I copied another object: Code: /*
* Person class
*/
/**
* Person constructor
*
* @param {String} first
* The person's first name
* @param {String} last
* The person's last name
*/
function Person(first, last)
{
this.first = first;
this.last = last;
}
/**
* Create a string representation of this object
*
* @return {String} A string representation of this object
*/
Person.prototype.toString = function()
{
return this.first + " " + this.last;
};
/*
var person = new Person ("John", "Dough");
alert (person); // displays "John Dough"
*/
and then used find and replace to swap {Person, first, last} with {Book, title, author}, resulting in: Code: /*
* Book class
*/
/**
* Book constructor
*
* @param {String} title
* The Book's title
* @param {String} author
* The Book's author
*/
function Book(title, author)
{
this.title = title;
this.author = author;
}
/**
* Create a string representation of this object
*
* @return {String} A string representation of this object
*/
Book.prototype.toString = function()
{ return '"' + this.title + '" by '+ this.author; };
var Book = new Book ("John", "Dough");
alert (Book); // displays "John Dough"
Now, the code worked fine in both script. (i.e., no more error.) So far as I can tell, the only differences between the first and next version of Book.js are the comments and the whitespace. Am I missing something? Can the comments or whitespace somehow effect the logic with which this code has been executing? If I get an error like this again, is there an easier/better way to fix it than to essentially retype the code? Thanks in advance for helping me to understand this. Hello all, I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:- menu_status = new Array(); function showHide(theid){ if (document.getElementById) { var switch_id = document.getElementById(theid); if(menu_status[theid] != 'show') { switch_id.className = 'show'; menu_status[theid] = 'show'; }else{ switch_id.className = 'hide'; menu_status[theid] = 'hide'; } } } As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted. I need a solution to it urgently, your help is appreciated. Thanks ----------SOLUTION---------- ----------ORIGINAL PROBLEM---------- The second line of code. What does it do? It's confusing because it doesn't have a semicolon at the end and it doesn't end with (). Code: var centreicon = new GIcon(); centreicon.constructor centreicon.image = "http://maps.google.com/mapfiles/kml/pal3/icon31.png "; centreicon.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon31s.png "; centreicon.iconSize = new GSize(12, 20); centreicon.shadowSize = new GSize(22, 20); centreicon.iconAnchor = new GPoint(6, 20); centreicon.infoWindowAnchor = new GPoint(5, 1); I found this on stackoverflow while trying to find a way to make my own icons on a map. With that being said. I'm still confused about how to apply the new graphic to a map. I don't see how they apply that picture to a coordinate. Does anyone know how to do that? Can I do this? Code: var centreicon = new GIcon(); centreicon.constructor centreicon.image = "http://maps.google.com/mapfiles/kml/pal3/icon31.png "; centreicon.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon31s.png "; centreicon.iconSize = new GSize(12, 20); centreicon.shadowSize = new GSize(22, 20); centreicon.iconAnchor = new GPoint(6, 20); centreicon.infoWindowAnchor = new GPoint(5, 1); var marker = new GMarker( new GLatLng(-34.397, 150.644) , centreicon); map.addOverlay(marker); -------- A tad bit later -------- So this is the code I have on my testing site Even thought I'ved defined the the icon's image and location It does not show up on the map. What am I missing? Code: <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAWhjy3iZ8g6BZszj299c0yUY6ahKpSr1U&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var centreicon = new GIcon();
centreicon.constructor
centreicon.image = "http://maps.google.com/mapfiles/kml/pal3/icon31.png ";
centreicon.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon31s.png ";
centreicon.iconSize = new GSize(12, 20);
centreicon.shadowSize = new GSize(22, 20);
centreicon.iconAnchor = new GPoint(6, 20);
centreicon.infoWindowAnchor = new GPoint(5, 1);
var marker = new GMarker( new GLatLng(-34.397, 150.644) , centreicon);
map.addOverlay(marker);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Hi Guys, A bit stuck here and was wondering what you guys think. I have an HTML Select Option with a list of countries. A user saves that page and when he wants to return to the same page later at some point, i would like to populate the countries drop down list with what he entered initially. Is there an easy way to do this? Thanks. Hi!, I use this option transfer example for my php& mysql web... http://www.developergeekresources.co...to_listbox.php I wanted to know how can i get a value from this ? as a example i need to get first 3 values after transferred.... How can i do this ? Thanks Hey guys, I recently found a small code in internet which use option value in select tag to insert value in text box, so text box has the exact same value as selected option: Code: <form name="theform" onsubmit="CheckForm()"> <select name="myOptions" onchange="document.theform.showValue.value=this.value"> <option name="(some dynamic text)" id="(some dynamic text)" value="I am the first option">I am the first option</option> <option name="(some dynamic text)" id="(some dynamic text)" value="I am the second option">I am the second option</option> <option name="(some dynamic text)" id="(some dynamic text)" value="I am the third option">I am the third option</option> <option name="(some dynamic text)" id=""(some dynamic text)" value="I am the third option">I am the fourth third option</option> </select> <input type="text" name="showValue"><br> </form> Now what I want is simple and a little different from this one, I want the text box value to be as exact as selected option name or id (doesn't matter which one) which means if an option selected, text box value has to follow that option name or id. Thanks folks. Hello according to this http://www.w3schools.com/php/php_ajax_database.asp I prepared mine search which works fine. it displays which products are intel and which amd for example. I wonder how can i add a second similar search for sochet or something else,but not separate one for example if i have selected the intel as 1st option then choosing my 2nd one it display only intel products. Here is my current code: Code: <script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","kailoipa.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="products" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="intel">intel</option>
<option value="amd">amd</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
HI All, I am using triple ajax dropdwon in my php file.In my form i have species_scientifc_name & on select I am sending its id to a php file for retriving data for second dependent dropdown box, Here I need to get this id in form action file. How to get this value, Any idea? Thnaks in Advance!! Hello, I have some database widgets. I want the user to be able to mouseover the widget and see a popup window of a synopsis of the database. If the user would like to access the database, I would like them to have the onClick option. <head> [CODE] <script> function openPopUp(URL) { new_window = window.open(URL, 'window', 'toolbar=0,scrollbars=0,location=0, statusbar=0,menubar=0,resizable=0,width=650,height=300,left = 350,top = 280'); } function closePopUp() { new_window.close(); } </script> [CODE] <Body> [CODE] <a href="#" onMouseOver="openPopUp('http://jpl.coj.net/res/db/popups/abc-clio.html')" onMouseOut="closePopUp(''http://jpl.coj.net/res/db/popups/abc-clio.html')"><img src="http://jpl.coj.net/pics/logos/abc-clio.jpg" alt="ABC-CLIO Databases" width="164" height="42" border="0"/></a> <URL of database> http://databases.abc-clio.com/Multi/ Can this be done? Thank you for your help, Elbee Hi all,i'm wondering how to detect select option changes.For example i want the data in database changed when i click on update button and if there are changes on the select option side.If the values on the select option are not changed,i can't update the data..Is there a way to achieve it?Thanks a lot...
Hey, how do I make the following accessible if JS is disabled? Code: <select onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;">
<option value="www.domain.com">Your Domain</option> </select>
I am trying to make some option buttons that will change the background of the document.I have already styled the body with an image using document.body.style.background I am now trying to make some option buttons that will make the background repeat or be placed to the center. Here are the buttons: Code: <select> <option type="button" selected="selected" onclick="tile()">Tile</option> <option type = "button" onclick = "center()" >Center</option> </select> And the functions: Code: function tile() {
document.body.style.backgroundRepeat="repeat";
}
function center() {
document.body.style.backgroundRepeat="no-repeat";
document.body.style.backgroundPosition="center";
}
However it doenst work |
|||||||