|
JavaScript - Javascript Class's / Subclass's
Hi I have been working at this for a while now but can't seem to figure out how to do it.
What I want to do is have a class which i have done and lets say the class is called ABC so eventhing inside that would need to have ABC.test(); but what I want is to have something like ABC.test.create() where test is the sub class and I want the create function only work if the sub function is test, if that makes sence, so if the code was ABC.create() the it wont work because the subclass 'test' hasnt been called. The codes I have done at the moment a Code: function ABC(){
this.test=function(){
this.create=function(){
// code \\
}
}
}
////////////////////////////////////////
function ABC(){
this.test=function(){
this.test.create=function(){
// code \\
}
}
}
////////////////////////////////////////
function ABC(){
var test;
this.test.create=function(){
// code \\
}
}
////////////////////////////////////////
function ABC(){
var test = this.test;
this.test.create=function(){
// code \\
}
}
But none of them have worked, if anyone knows how i can do this please help, thank you! Similar TutorialsHello! I have a superclass where I create a "div" element as a property and then proceed to try and set the element's "id" attribute in a subclass. Interestingly, if I create multiple instances of the subclass with different "id"s, they all end up having the last "id" I specify. I would like it if they retain the individual "id" I specify. Here is the code. Code: function Drag() {
this.ele = document.createElement("div"); }
function Icon(id) {
this.ele.id = id; }
Icon.prototype = new Drag();
var hello = new Icon("hello");
var goodbye = new Icon("goodbye");
I'm still a beginner in js core so please forgive if the question is too fundamental. In the following example PositionedRectangle is a subclass of Rectangle, all 3 methods of prototype inheritance seem to produce the same results, method 1 is from the authors book (Flanagan's Definitive Guide 5ed) example 9-3, and method 2 is from his website example 9-3, and method 3 is my own; Code:
// method 1 seems most complicated
function heir(p) {
function f(){};
f.prototype =p;
return new f();
}
PositionedRectangle.prototype = heir(Rectangle.prototype);
//method 2
PositionedRectangle.prototype = new Rectangle();
//method 3 seems most straight forward (I don't know if it's correct but works ok)
PositionedRectangle.prototype = Rectangle.prototype;
Thank you Gents, J. All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero I have a store that sells certain products. When you add a product to the cart and go to view your cart you can estimate shipping costs. It will list different shipping methods and the cost to ship them. However, there is one shipping method called "Request a Quote" that has a price value of 0.01. This can confuse customers because they sometimes think that the shipping is only $0.01 when it really isn't. So I want to just remove this value, but still list pricing for all the other shipping methods. I know I can just do this using CSS and setting the display to none. But am having trouble getting it to work. Here is the link to the shopping cart page: Folding Chairs and Tables.com - Shopping Cart If you add a product and run the 'estimate shipping and tax' you will see what I'm talking about. How can I remove this value? Any help would be really appreciated. Here is a picture of what the table looks like when you calculate the estimate shipping costs: Thank You I currently have a navigation bar with CSS. It sits by itself in a frame so it doesn't change with the other page turns. So I'm trying to figure out how to set each link class="active" since it always stays on the same page. I'm thinking javascript will be my friend. Is there an onclick function that can be defined? I'm not new to webpages but new to learning javascript, instead of borrow someone's code. I didn't know how to approach this code because I think I need it to say: If Onclick, then set to class="active", otherwise (then), set class="nothing" or anything to this regard. I was not sure how I could approach that code and how to fit into the UL/LI html code I currently have setup as well as the head code. Example code: (I have 3 frames called head, form, and body. Head is the nav bar where this code sits.) Code: <ul class="menu"> <li><a href="choose.htm" class="active"><span>Home</span></a></li> <li><a href="search.htm" target="form" onClick="top.body.location='http://www.google.com';"><Span> Google</span></a></li></ul> With my CSS code, the "menu" defines some colors/setup, as so does Span and class="active". As a bonus, if you could teach me instead of just help me, it would help me help others. No Jquery plz As you can see that I want to remove this advertisement area (denoted by 1) via some java code. Now one can observe that this advert is hosted in the 'main-content' id & wrapped in 'inner' class. One cannot remove/hide id but CAN remove/hide the class which also will remove/hide the advert area placed within this class. Okay. So here's what I'm trying to do. I have my landing page to my site and near the bottom I have 4 little 48x48 class divs (for social network link images if you were wondering ). Each Class div has a background style all to it's own. (so in this case 4 different divs with 4 different class names) . What I want to do with the javascript is to have a function(s) that when called on (depending on which div.class was/is clicked on) will open up a lightbox/new page containing the new page (pertaining to the appropriate social network, depending on which class has been clicked on). I don't want to put an <a></a> tag around the div.classes themselves seperately because the landing page itself has 8 different styles, plus the div.classes I would have to hunt down within the site itself. haha Basically in short I want the classes to have seperate links that when clicked upon it calls the function, opens the lightbox (or opens the new tab/page) and loads the appropriate page. Think yall can help me out here? I have a script that fades links on load and im trying to get this to work on everything but the menu link that has the "active" class Code: <div id="menu"> <ul><li id="Home"><a title="Home" href="/" style="opacity: 0.6;">Home</a></li> <li class="active" id="projects"><a title="projects" href="/projects/" style="opacity: 0.6;">projects</a></li> <li class="last" id="Contact"><a title="Contact" href="/contact" style="opacity: 0.6;">Contact</a></li> </ul> </div> and here is the javascript.. (JQuery) Code: $(document).ready(function(){
$("#menu a").fadeTo("slow", 0.6); // This sets the opacity of the menu to fade down to 60% when the page loads
$("#menu a").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 40% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 100% on mouseout
});
});
What do I add so any "<li>" that has the class "<li class="active"> isnt effected by the javascript so it just displays at 1.0 instead of 0.6? I've written a javascript class that displays a popup, but as soon as the code executes the popup vanishes. I've stepped through the code, line by line and there's nothing that "hides" the popup, the DIV that is created by the class, just reverts back to the default configuration generated by the following function: Code: function generateMarkup() { //build markup
var newNode = document.createElement( 'DIV' );
newNode.id = IDs.HelpPopup;
newNode.style.visibility = 'hidden';
newNode.innerHTML = [
'<div id="popup">',
'<div id="inside">',
'</div>',
'</div>'
].join( '' );
return newNode;
}
All the changes made to the DIVs via document.getElementById code is completely wiped out. For example: Code: document.getElementById("inside").innerHTML = sText;
If I stop processing just before the Class returns to the form, the generated code is exactly as I expect it to be with all the dynamic modifications. The class is triggered by an onClick event on a BUTTON. I've tried to put a "sleep" function in after executing the function that modifies the DIVs, but that seems to execute before the function, not after, so the popup just flickers into existence and then vanishes. Can anyone give me any hint(s) as to how to stop this happening. I wrote a log function that took note of various function calls. Thinking that functions are first class objects, and objects have properties, I made the name of each logged function a property of that function, e.g., brightenInnerPara.name = "brightenInnerPara"; Every browser I tried (Firefox, MSIE, Opera, Chrome, Safari) accepted the assignment, no problem. In Firefox and MSIE, the result was what I wanted: brightenInnerPara.name == "brightenInnerPara" But in the others, the result was: brightenInnerPara.name == null Question 1. Which Javascript is correct here? I favor Firefox and MSIE, not merely because they were willing to give me what I wanted, but also because it makes no sense to accept an assignment statement without throwing an error and then give it a null semantics, like Chrome, Opera, and Safari did. I found a workaround, using assignments like this: brightenInnerPara.prototype.name = "brightenInnerPara"; To my surprise, that worked in every browser. But I don't know why. It seems that such assignments are enough to cause each function to have its own distinct prototype. Question 2. Just how inefficient is my workaround, and why does it work? First of all, I must say that I am recently introduced to JavaScript and I am not fully aware of its complete functionality. So I have an HTML document which has defined within a its body a JavaScript function and I have also a JApplet class which is also loaded in the HTML and can call the JavaScript function. But I have also another Java class which is not an applet and I would like to find a way for this class to be able to call the JavaScript function (but it is essential for this class not to be an applet). I am aware that this would raise some security concerns but it is for local usage and I am interested to hear some ways if possible for this to be done. Thank You beforehand to all of you! If the value is negative it should be in red, otherwise it should be in green. It looks like JavaScript completely ignores the css class. Help please. Code: <html>
<head>
<title>Prva</title>
<style type="text/css">
span.Pozitivno
{
color:green;
font-weight:bold;
}
span.Negativno
{
color:red;
font-weight:bold;
}
</style>
<script type="text/javascript">
function vpisi_stevila()
{
var a;
var b;
//Vnos spremenljivk
a=prompt("Vnesi stevilo a:")
b=prompt("Vnesi stevilo b:")
a=a*1 //S tem spremenimo string v int
b=b*1
//Izpis stevil
if(a<0)
{
document.write("A:<span class='Negativno'> " + a + " </span> <br />");
}
else
{
document.write("A:<span class='Pozitivno'> " + a + " </span> <br />");
}
if(b<0)
{
document.write("A:<span class='Negativno'> " + a + " </span> <br />");
}
else
{
document.write("A:<span class='Pozitivno'> " + a + " </span> <br />");
}
document.write("Vsota:", a+b, "<br />");
document.write("Razlika:", a-b, "<br />");
document.write("Mnozenje:", a*b, "<br />");
document.write("Deljenje:", a/b, "<br />");
document.write("Ostanek:", a%b, "<br />");
if(a>b) //Ce je A vecje od B
{
document.writeln("A je <b>večje </b> od b")
}
if(a<b) //Ce je B vecje od A
{
document.writeln("A je <b>manjse </b> od b")
}
if(a==b) //Ce sta enaka
{
document.writeln("A je <b>enako </b> b")
}
}
</script>
</head>
<body onload="vpisi_stevila()">
</body>
</html>
Hello, I am new with Javascript and running into this problem that I don't understand. I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity): Code: function baseClass() {
this.elements = new Array;
}
function derivedClass() {
}
derivedClass.prototype = new baseClass;
Then I create two instances of the derived class, and add two elements in each: Code: a = new derivedClass();
a.elements.push("A");
a.elements.push("B");
b = new derivedClass();
b.elements.push("C");
b.elements.push("D");
When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays. Note that if instead I use the base class: Code: a = new baseClass();
a.elements.push("A");
a.elements.push("B");
b = new baseClass();
b.elements.push("C");
b.elements.push("D");
then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect. Could someone explain to me the problem with using the derived class? Thank you, Stephanos Hi all, I've messing around with CSS and I would like to change the <body> 'class' when the user selects a hyperlink. To do this I've employed the OnClick method within the hyperlink which calls the function updateBodyClass(). Within upDateBodyClass() I would like to add the string "extraMenu" to the body class. Before selecting the hyperlink the body is: <body id="twoColLayout" class="tools"> I want this to change to: <body id="twoColLayout" class="tools extraMenu"> This is the code I currently have but it doesn't work. Please can someone point me in the right direction. Thankyou in advance for your time. <html> <head> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script> function updateBodyClass() { document.getElementById("body").className="tools"; document.getElementById("body").className+=" extraMenu" return; } </script> </head> <body id="twoColLayout" class="tools"> <a href="index.php" onClick="updateBodyClass()">Search Bookmarks</a> </body> </html> Hi all, On my site each page is composed by header, contents and bottom. Each part, located respectively at header.php, content1.php, content2.php, ... and bottom.php, is included in page.php. I have a menu, that is the same for all pages, on header.php: Code: <ul class="site-nav"> <li><a href="home.php" class="" name="Home"></a></li> <li><a href="page2.php" class="" name="OK"></a></li> </ul> I'd like to set a class in order to have its corresponding menu with this class="act" for each content.php. I tried this but it doens't work: I add this in content1.php Code: <!-- act for site-nav -->
<script language="javascript" type="text/javascript">function changeClass() {
document.getElementByName("Home").setAttribute("class", act);
}
</script>
and this in top.php Code: <ul class="site-nav"> <li><a href="home.php" class="changeClass()" name="Home"></a></li> <li><a href="page2.php" class="changeClass()" name="OK"></a></li> </ul> Please help me, I don't understand anything of javascript . So, I have this javascript that works just fine... But... PHP Code: <script language="javascript"> function addBtn() { element = document.createElement("input"); element.setAttribute("type", 'button'); element.setAttribute("value", 'Track'); element.setAttribute("name", 'element'); element.onclick = function() { alert("Tracking"); }; var btn = document.getElementById("gs-track-btn"); btn.appendChild(element); } </script> <div id="gs-track-btn"></div> How would I target that div if the " gs-track-btn " id was a class? Alright I have never really created a class before and I have to for a project. This is what I have so far and I will try to explain the requirements I am looking for thoroughly and what problems I am having. Code:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="javascript" type="text/javascript">
function clock () { //Object Constructor
this.setT = function() { //Method Set Time
//Properties
this.currentTime = new Date ( );
this.currentHours = this.currentTime.getHours ( );
this.currentMinutes = this.currentTime.getMinutes ( );
this.currentSeconds = this.currentTime.getSeconds ( );
}
clock.prototype.displayTime = function () {
clock.setT
}
}
</script>
<body>
<form name="form1">
<p>
<input type="text" rows=7 cols=60 name="currentTime">
<br>
<input type="button" value="Set Time" onClick="clock.displayTime();">
<br>
<input type="button" value="Display Time" onClick="currentTime.value= completeTime;">
<br>
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
The clock class contains: Three Properties: Hours Minutes, Seconds Two Methods setTime (which uses date class to get current time) Must be defined in the constructor displayTime (returns a string displaying current time) Must be defined as a prototype property of constructor The below is a very rough outline, and probably not correct. I've been reading up on objects for the last few hours and can't be very sure of anything yet. Code: function clock() {
this.currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
this.setTime = function() {
}
}
clock.prototype.displayTime = function ( ) {
}
I guess my biggest problem now is the outline. Any help would be great hopefully once i get what goes where i can actually start writing the code. I already have the full code to write a basic clock just like this but it doesn't use classes or any of this. hey I want to get the href via attributes of this a tag & then this href to be set to a variable I'm a amateur and I've just coded this little script. What it does is quite simple, once you click on the 'theBox' div, it switches from one class to another. I can't help having the feeling that this could have been coded in a lot more simple way than the way I've coded. So I thought that maybe you guys could help me out. (Oh, and by the way, the script works fine in FireFox and IE). Code: <script>
function setDivClassName(string){
document.getElementById("divClassName").innerHTML = string;
}
function theBoxOnClick(){
var classes = new Array();
classes[0] = 'zero';
classes[1] = 'one';
classes[2] = 'two';
var currentClassName = document.getElementById('theBox').className;
var currentClassIndex;
var nowGoTo;
for(var i = 0;i <= classes.length-1;i++){
//alert(classes[i]);
if(classes[i] == currentClassName){
currentClassIndex = i;
nowGoTo = currentClassIndex + 1;
}
}
if(classes[nowGoTo] == undefined){
nowGoTo = 0;
}
document.getElementById('theBox').className = classes[nowGoTo];
setDivClassName(classes[nowGoTo]);
}
</script>
<style>
.zero{width:100;height:100;background-color:black;color:white;padding:10;border-style:solid;border-color:red;border-width:2}
.one{width:100;height:100;background-color:yellow;color:red;padding:10;border-style:solid;border-color:red;border-width:2}
.two{width:100;height:100;background-color:red;color:yellow;padding:10;border-style:solid;border-color:red;border-width:2}
</style>
<body onLoad="setDivClassName('zero')">
<div id="theBox" class="zero" onClick="theBoxOnClick()">
This DIV's Class is <div id="divClassName"></div>
</div>
Hello everybody. For the moment im locking for a JavaScript-document. That will be working like this... When we are push on a link, for example to username. So will it coming up a box "<div class="profile_class"></div> From to beeing visibility: hidden; display: none; To be visibility: visibile; display: block; .profile_class { float: left; width: 300px; height: 250px; margin-top: 2px; margin-left: 2px; position: absolute; visibility: hidden; display: block; background-color: #151515; } .profile_class_inactive { visibility: visible; display: none; } When we are push on the mouse outsite the "profile_class" will it beeing closing/invisbile. But when we have it active something like "profile_class" so will it show uz... <ul> <li>Send a message</li> <li>Add contact</li> <li>Block the contact</li> </ul> And on the right site, will it beeing showing uz a little avatar. Can you please help me with this one? |
|||||||