JavaScript - Private Javascript Classes

Hey all,

I am having issues with below script. Firebug returns:
form[0] is undefined
[Break on this error] $(form[0].elements).each(function() {

I have this under my form:
<script>
var thisForm = $('#validateForm');
thisForm.validation();
</script>



Code:

(function($) {
    /*
    Validation Singleton
    */
    var Validation = function() {
        
        var rules = {
            
            email : {
               check: function(value) {
                   
                   if(value)
                       return testPattern(value,".+@.+\..+");
                   return true;
               },
               msg : "Enter a valid e-mail address."
            },
            url : {

               check : function(value) {

                   if(value)
                       return testPattern(value,"https?://(.+\.)+.{2,4}(/.*)?");
                   return true;
               },
               msg : "Enter a valid URL."
            },
            required : {
                
               check: function(value) {

                   if(value)
                       return true;
                   else
                       return false;
               },
               msg : "This field is required."
            }
        }
        var testPattern = function(value, pattern) {

            var regExp = new RegExp("^"+pattern+"$","");
            return regExp.test(value);
        }
        return {
            
            addRule : function(name, rule) {

                rules[name] = rule;
            },
            getRule : function(name) {

                return rules[name];
            }
        }
    }
    
    /* 
    Form factory 
    */
    var Form = function(form) {
        
        var fields = [];
    
        $(form[0].elements).each(function() {
            var field = $(this);
            if(field.attr('validation') !== undefined) {
                fields.push(new Field(field));
            }
        });
        this.fields = fields;
    }
    Form.prototype = {
        validate : function() {

            for(field in this.fields) {
                
                this.fields[field].validate();
            }
        },
        isValid : function() {
            
            for(field in this.fields) {
                
                if(!this.fields[field].valid) {
            
                    this.fields[field].field.focus();
                    return false;
                }
            }
            return true;
        }
    }
    
    /* 
    Field factory 
    */
    var Field = function(field) {

        this.field = field;
        this.valid = false;
        this.attach("change");
    }
    Field.prototype = {
        
        attach : function(event) {
        
            var obj = this;
            if(event == "change") {
                obj.field.bind("change",function() {
                    return obj.validate();
                });
            }
            if(event == "keyup") {
                obj.field.bind("keyup",function(e) {
                    return obj.validate();
                });
            }
        },
        validate : function() {
            
            var obj = this,
                field = obj.field,
                errorClass = "errorlist",
                errorlist = $(document.createElement("ul")).addClass(errorClass),
                types = field.attr("validation").split(" "),
                container = field.parent(),
                errors = []; 
            
            field.next(".errorlist").remove();
            for (var type in types) {

                var rule = $.Validation.getRule(types[type]);
                if(!rule.check(field.val())) {

                    container.addClass("error");
                    errors.push(rule.msg);
                }
            }
            if(errors.length) {

                obj.field.unbind("keyup")
                obj.attach("keyup");
                field.after(errorlist.empty());
                for(error in errors) {
                
                    errorlist.append("<li>"+ errors[error] +"</li>");        
                }
                obj.valid = false;
            } 
            else {
                errorlist.remove();
                container.removeClass("error");
                obj.valid = true;
            }
        }
    }
    
    /*
    Validation extends jQuery prototype
    */
    $.extend($.fn, {
        
        validation : function() {
            
            var validator = new Form($(this));
            $.data($(this)[0], 'validator', validator);
            
            $(this).bind("submit", function(e) {
                validator.validate();
                if(!validator.isValid()) {
                    e.preventDefault();
                }
            });
        },
        validate : function() {
            
            var validator = $.data($(this)[0], 'validator');
            validator.validate();
            return validator.isValid();
            
        }
    });
    $.Validation = new Validation();
})(jQuery);

Hello all,

I want to sell online private lessons using Skype.
I'd like to display on my front page a schedule with my available time-slots so that the customer may click a time-slot and be sent to the product/lesson detail view to complete the purchase.

1. Would it be possible for a JQuery calendar/schedule plugin to know that the customer has completed the purchase and therefore make it impossible for another user to purchase the same time-slot (by changing it's appearance and making it unclickable for example)?
2. Can a JQuery plugin be adapted to that use?
3. Would it be very complex to do for a developer?

Thanks for your advice

Could someone please explain the difference in these two methods of creating objects:

//anonymous self invoking function providing private methods
var a_module = (function() {
var private_variable = "some value";

function private_function() {
//some code
}

return {
public_property: "something"
//etc
}
}()
);
//Can use a_module.public_property with this

Is there any difference between the above and this:

var A_module - new Object();
A_module(property1, property2) = {
this.property1 = property1;
this.property2 = property2;
this.methodName = function(){//code}
}

A_module.prototype.property = "//property"
A_module.newMethod = function() {//code}




Are they both just different ways of creating objects with methods and properties?

I'm quite new to javascript and don't often understand what I'm reading, so the search results I found didn't seem to help me much. Being such, if this question has been addressed elsewhere, my apologies.

On my site, I have a navigation pane with 4 links. Two of these links show collapsable submenus. When one clicks a link, I want the CSS class of that link to change. For the two "real" links, I've just changed the class on the page itself. For the two collapsible menus, I'm trying to employ javascript.

Ultimately for these two links, I want the class to change when clicked, and change back when clicked again.

Here's the code for the page:
Code:

<div id="navigation">
	<ul>
		<li><h3><a href="javascript:;" onclick="changeclass(this);" onmousedown="toggleSlide('slidemenu');" class="colmain">COLLAPSIBLE MENU 1</a></h3></li>
			<div id="slidemenu" style="display:none; overflow:hidden; height:100px;">
			
				<li><h4><a href="#" class="sub">SUBMENU LINK 1</a></h4></li>
				<li><h4><a href="#" class="sub">SUBMENU LNK 2</a></h4></li>

			
			</div>
		<li><h3><a href="#" class="main">LINK 1</a></h3></li>
		<li><h3><a href="javascript:;" onclick="changeclass(this);" onmousedown="toggleSlide('slidemenu2');" class ="colmain">COLLAPSIBLE MENU 2</a></h3></li>
			<div id="slidemenu2" style ="display:none; overflow:hidden; height:100px;">
			
				<li><h4><a href="#" class="sub">SUBMENU LINK 1</a></h4></li> 
				<li><h4><a href="#" class="sub">SUBMENU LINK 2</a></h4></li>
			
			</div>
		<li><h3><a href="#" class="main" >LINK 2</a></h3></li>
	</ul>
</div>

Here's the javascript I'm working with, which I adopted from http://www.webdeveloper.com/forum/sh...d.php?t=167660 :

Code:

/*<![CDATA[*/
var colstatus;

function changeclass(obj)
	{
	
		if (colstatus) colstatus.className='colmain'; 
		{
		obj.className='colmainshow';
		colstatus=obj;
		}
		
		else
		{
		obj.className='colmain';
		colstatus=obj; 
		}
		
	}


/*]]>*/

I have three questions about this.

1. Seeing as I've been working with javascript for a grand total of six days so far, could you explain the best way to make my code work? What's the significance of colstatus=obj?

2. The javascript works if I leave out the else statement. It will change the class after being clicked, but, of course, doesn't change it back. However, if I click the other collapsible menu, it will change as expected, but the first will revert back to the original class. Why is this happening?

3. Seeing as the code is adopted, I have no idea what /*<![CDATA[*/ and /*]]>*/ mean. Would you explain?

Thanks in advance for your patience and answers!

Hi,

I have a question about an oop/class style form of javascript programming.

I have stripped the code down to the basic minimum. The problem is I have created two instances of the same class and have entered data into those classes. But as you will see the two separate instances of the class appear to share the same data.

How do I get my class structure working so separate instances will retain their separate data?

Here is the code:

Index.html
Code:

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
debugger;

// Do this because a page resart seems to keep old data
function SetGlobals()
{
	var ui;
	var el;
	
	// Arr00
	ui = document.getElementById("Arr00");
	el = arr0.arrayGet(0);
	ui.innerHTML = el.m_String;
	
	// Arr01
	ui = document.getElementById("Arr01");
	el = arr0.arrayGet(1);
	ui.innerHTML = el.m_String;
	
	// Arr10
	ui = document.getElementById("Arr10");
	el = arr1.arrayGet(0);
	ui.innerHTML = el.m_String;
	
	// Arr11
	ui = document.getElementById("Arr11");
	el = arr1.arrayGet(1);
	ui.innerHTML = el.m_String;
}

function MyOnLoad()
{
	SetGlobals();
}
</script>
</head>
<body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#000000">

<div id="divScreen" style="display: block; width:100%; height="100%">
	<div id="divMenu" style='float: left; background:#00FF00; border-color: #000000; border-width: 1px;'>
		<table>
			<tr>
				<td>
					Array 0/String 0: <label id="Arr00"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 0/String 1: <label id="Arr01"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 1/String 0: <label id="Arr10"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 1/String 1: <label id="Arr11"></label>
				</td>
			</tr>
		</table>
	</div>
	<div id="divMain" style='height: 100%; background:#0000FF; margin-left: 250px; border-color: #000000; border-width: 1px;'>
	</div>
</div>
</body>
</html>

Test.js
Code:

var BaseARR = function()
{
	_arr = []; // new Array();
		
	// Public functions that can access private members
	this.Add = function(arg)
	{
        var i, addAt;
 
		if(arg==null || (addAt = FindEnterPos(arg))<0)
		    return false;
				
		// since adding and not deleting anything, nothing of value will be returned
		_arr.splice(addAt, 0, arg);

        return true;
	};
	// This finds the entry position for in
    FindEnterPos = function(arg)
    {
		return (_arr.length + 1);
    };
	this.arrayGet = function(i)
	{
		return ((_arr != null && i >= 0 && i < _arr.length) ? _arr[i] : null);
	};
};

var stringId = function(id, str)
{
	// public has a this. , privates have just var
	this.m_Id = id; // int
	this.m_String = str; // string
};

// This so allow statics
var stringIdARR = function()
{
	BaseARR.call(this);
};

Hi, could someone please help. I have this code, and it currently outputs:"name-category" but I need it to output "category-name". Sorry if this is easy, I just keep getting errors!

Code:

highlightWork : function(workType) {
			// remove all active classes 
			$(".work").removeClass("active");
			
			for (var x=0;x<workTypes.length;x++) {
				if (workType.toLowerCase()==workTypes[x][0].toLowerCase()) {
					$("."+workTypes[x][0]+"-category").addClass("active");
					// set current highlight
					$("."+workTypes[x][0]).addClass("highlight");
				} else {
					// remove current highlights
					$("."+workTypes[x]).removeClass("highlight");
					if (workType.length!=0) {
						$("."+workTypes[x][0].split(" ")[0]+"-category").addClass("inactive");
					}
				}
			}
		},

Hello,

I'm taking Computer Logic in college. I only am truly familiar with HTML and CSS and minimal web hosting stuff. I REALLY want to learn how to program, however. Anyway, we are doing classes/objects and functions. I am trying to figure out how to do this exercise. She starts with having us make this page that has a form that lets you select one of three radio buttons that will change the background color of the web page, along with that there is two text boxes to put a first name and last name. Then there is a button to click which puts your full name concatenated in another box below. All of this, is done, and I pretty much THINK I understand what is going on. Here is the code that we did to get this to happen:

Code:

<html>
<head>
<title>Computer Logic in class</title>
<script type="text/javascript">
var nextColor = "";
var BR = "<br />";

function setColor(newColor)
{
	nextColor = newColor;
}

function changeColor()
{
	document.body.bgColor = nextColor;
}

function displayName()
{
	var firstName = document.ColorAndText.firstName.value;
	var lastName = document.ColorAndText.lastName.value;
	document.ColorAndText.fullName.value = firstName + " " + lastName;
}

</script>
</head>
<body bgcolor="red">
<form name="ColorAndText" action = "">

<input type="radio" name="colors" value="Blue" onclick="setColor(this.value)"/> Blue <br />
<input type="radio" name="colors" value="LightYellow" onclick="setColor(this.value)"/> Light Yellow <br />
<input type="radio" name="colors" value="Yellow" onclick="setColor(this.value)"/> Yellow <br />

<input type="button" name="changeButton" value="changeColor" onclick="changeColor()" /> <br />

<input type="text" name="firstName" value="First Name" size="40" /><br />
<input type="text" name="lastName" value="Last Name" size="40" /><br />
<input type="text" name="fullName" readonly="true" size="40" /><br />

<input type="button" name="displayButton" value="Display name" onclick="displayName()" /> <br />
</form>
</body>
</html>

Okay, now, I have and can do that. Seems to make sense. Now, then, the actual program I need to make is from the following exercises:

Activity 3-4 The owner of a flower shop wants you to develop a form for use on the shop's web site. The form should have a single text box for the user to enter his or her name. Under the text box should be a group of radio buttons for three different kinds of flowers: Roses, Carnations, and Daisies. Below the radio buttons should be a button labeled Request Info, with a read-only text box under it for thanking the user for requesting information. This program doesn't need any functions or onclick attributes for the graphical elements.

Okay, here is the code that does that, very simple HTML.

Code:

<html>
<head>
<title>Computer Logic in class</title>
<script type="text/javascript">
var nextFlower = "";
var BR = "<br />";

function setFlower(newFlower)
{
	nextFlower = newFlower;
}

function displayMessage()
{
	var firstName = document.Flowers.nameBox.value;
	document.Flowers.fullName.value = firstName + "," + nextFlower;
}

</script>
</head>
<body bgcolor="white">
<form name="Flowers" action = "">

<input type="text" name="nameBox" value="Namebox" size="60"><br />

<input type="radio" name="flowers" value="Roses" onclick="setFlower(this.value)"/> Roses <br />
<input type="radio" name="flowers" value="Carnations" onclick="setFlower(this.value)"/> Carnations <br />
<input type="radio" name="flowers" value="Daisies" onclick="setFlower(this.value)"/> Daisies <br />


<input type="button" name="displayButton" value="Request Info" onclick="displayMessage(this.value)" /> <br /><br />
<input type="text" name="thankyou" readonly="true" size="100" value="Thanks for using this program" /> 
</form>
</body>
</html>

Okay, now is where I'm stuck. The following exercise is as follows:

The flower shop owner in the previous activity wants to see where you can make the form interactive and asks you to have the form display a message in the bottom text box that includes the user's name, a comma, and the words "thank you for your inquiry about" followed by the flower name the user selected. Write a function named displayMessage() that accesses the user's name from the first text box and displays the message in the read-only text box. You also need to make the Request Info button call the displayMessage() function when it's clicked. Using Javascript, make this form active by including event triggers and functions.

My teacher has said that I should be able to do this by just referencing these two previous pages of code that I have already pasted. I feel like I am missing something, that I need to be doing something and it's just not working for me. I'm actually really really stuck on this. I haven't even gotten to the second half of the exercise (where I have to have it display about what flower you select) because I cant get this function to work. What am I missing? Also, the exercise we did before these two had us make a very basic account class and object. We don't have to do that at all in this anywhere, but I do know how to do it, in case I need to make a class or something.

ANY AND ALL HELP GREATLY APPRECIATED!!! I just don't know what I'm supposed to do, I can't get it to work.

hi all,

im on a really tight deadline with this and have been strugglign all day.
(i know nothing about JS!)

here's my code:

Code:

<script language="Javascript">
var allHTMLTags = new Array();
function fadeIn(SRC) {
var allHTMLTags=document.getElementsByTagName("*");
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className.indexOf(",") !== -1) 
{
allHTMLTags[i].style.opacity='1';
}
}
}

function fadeOut(SRC) {
var allHTMLTags=document.getElementsByTagName("*");
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className.indexOf(",") !== -1) 
{
allHTMLTags[i].style.opacity='0.5';
}
}
}
</script>


<li onMouseover="fadeIn(foo)" onmouseout="fadeOut(foo)">

<div class="foo" style="opacity: 0.5;">
test 1
</div>

<div class="foo bar" style="opacity: 0.5;">
test 2
</div>

The idea of the above, is that when you hover over the <li> all of the divs with a class CONTAINING "foo" are given an opacity of 1.
the problem is, the above script only seems to work with numbers?!
E.G - class="1 2" works fine.
problem is i need to use words not numbers for the classes.

clearly my code is rubbish, i've bodged it together from bits and pieces of different forums.

PLEASE can somebody help?
the end result needs to go through and find all divs with a class CONTAINING the term specified in the <li>
then give them an opacity of 1, then on mouseOut return the opacity to 0.5

im sure this is newb stuff, but thanks in advance for any help you can give!

I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free.

I have Googled, but there are so many that I am almost dizzy with the choices.

Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic.

Frank

Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once.

Does anyone know how to do this please?

Thanks so much for your help.

Does anyone know how to make URL links that use Javascript still work when
users have Javascript disabled on their browser?

The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version.

I tried the <script><noscript> tags, but I'm not sure if I'm using it
correctly, as my URL completely disappears.

Below is my HTML/Javascript code:

<p class="download">
<script type="text/javascript">document.write("<span
style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\"
onclick=\"window.open(
'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+
Math.floor( Math.random()*11 ) );\" >The Child Magazines Media
Kit</a></span> (PDF 1 MB) ");</script>
<noscript><span style="text-decoration: underline;"><a
href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf"
>The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript>
</p>


Thanks for any help,
Michael

Hi Guys,
I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled!
I create the following code but it did not work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script language="JavaScript" type="">
function changeColor(){
document.bgColor = "Gray";
}
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var person = "";
person = prompt('What is Your Name:');
if (person == "Foo") {
document.write("<h1 />Welcome " + person);
document.bgColor = "Yellow";
}
else {
document.write("<h1 />Access Denied!!!!");
document.bgColor = "Red";
document.getElementById("gree").disabled = true;
}
</script>

<div>
<p/><input id="gree" type="button" value="Gray " onClick="changeColor();">
</div>
</body>
</html>

as you can see I used the:
document.getElementById("gree").disabled = true;
but it did not work , could you please give an idea how I can solve this problem?
Thanks

Hi,

I have the following code snippet:
test.html
======
<script language="javascript" type="text/javascript">
var testVariable = "test";
</script>
<script language="javascript" type="text/javascript" src="test.js">
</script>

test.js
=====
var testVariable = window.top.testVariable;

In firefox, I'm able to access testvariable defined within test.html in test.js.

But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html.

Can any one please let me know how i can make it work in chrome?. Am i missing something here?.

I got an index.php
Code:

<html>

<form action="bacakomik.php" method='post'>
<select name="kodekomik">
<option value='../komik1/|23'>Judul Komik1</option>
<option value="../komik2/|20">Judul Komik2</option>
<option value="../komik3/|10">Juduk Komik3</option>
<option value="../komik4/|20">Judul Komik4</option>
</select>
<input type="submit" />
</form>
<?php
echo ('<select>');
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
echo ('</select>');
?>
</html>

As you can see, each of the option brings specific value "../komik1/|23"
komik1 is a directory
| is a delimiter
23 is the pages in one chapter and can be considered also as how many images are there on a specific directory

This is my bacakomik.php
Code:

<?php
$dirkomik = $_POST['kodekomik'];
$exploded = explode("|", $dirkomik);
echo ($exploded[0]); //picture directory
echo ("<br>");
echo ($exploded[1]); //total page in the comic
$pagecount = (int)$exploded[1];
//Take last posted value, process it right away
echo ('<FORM name="guideform"> ');
echo ('<select name="guidelinks">');
$i=1;
do  {
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
$i= $i+1;
}while($i <= $pagecount); //Printing option and select
echo ("</select>");
?>
<input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM>
<img src="img0.jpg" id="im">

With the current code on bacakomik.php, I only can change the img src of id "im" in the same directory only. What I want is that the Javascript could "add" the "$exploded[0]" variable so that the picture can be loaded from different directory. Anyone can do this?
I believe that the fix should be somewhere on input tag inside OnClick, or do you know where?

Anyway, I found this on the net
http://p2p.wrox.com/php-faqs/11606-q...avascript.html
Please help me to those who can...

I want to insert this js snippet
Code:

function addText(smiley) {
    document.getElementById('message').value += " " + smiley + " ";
    document.getElementById('message').focus();
    return false;
}

to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like:

Code:

 $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>');

....
Code:

parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none'

but how do I insert js in the head of loaded iframe?