JavaScript - Js Onclick Events - Please Advise

HTML TARGET:

Code:

<div id="login_link" style="margin-top:-142px;margin-left:245px;height:142px;">
		<img id="login_link" src="menu_button.png" /><a href="#"><img src="menu_button.png" /></a></div>
</div>

I'm trying to get menu_button.png to change to menu_button2.png on mouseover... I'd also like it to play a sound on click like "click.wav" I can't rename the div because it controls the slider

Heres my current project table:

http://bit.ly/dbwH23

I tried to put it in a span and have the span referance to the next tag but it didn't seem to work at least not in firefox. I'm going to keep lookin around but i'm not used to these types of code structure.

I was thinking of Embeding a flash file inside the div instead but that might be overkill. Anyone know of a solution that might work?

I am a Javascript newbie. I'm trying to code a page that has thumbnails of smaller images that when each image is clicked a larger image will load above the thumbnails, plus text within a div will change, plus more Javascript behind a shopping cart button will change. I'm not sure if this is even possible and have been searching and experimenting with the code without success.

To view the webpage I'm working on: http://toymakerpress.com/website/Fre.../TestPage.html

If you click on the dog image you can see where I'm headed (I also haven't had any luck loading the shopping cart button with it's unique Javascript code).

Here is my code so far:
The shopping cart button (I would like this code to swap out everytime I load a new image):
Code:

<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&amp;i=A0085&amp;cl=82487&amp;ejc=2" rel="nofollow" target="ej_ejc" class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this);"><img src="../images/addtocart1.gif" border="0" alt="Add to Cart"/></a>

The code I'm working on for each thumbnail image:
Code:

<td><div align="center">
                  <a href="javascript:changeImage('../images/FreePlans/littledog-4Lg.jpg') "javascript:="javascript:"" onClick="load_content('orderform','more content') "><img src="../images/FreePlans/littledog-4.jpg" width="140" height="140" border="0" /></a></div></td>

Thanks!

I'm pretty new to Javascript and just started with some OOP concepts, so this might be an obvious one and I apologize if the question is much longer than it should be...

Basically I am trying to create a reusable class object with several internal functions, that is completely abstracted, meaning the class object itself should never have to reference the global declarations or window object. This class should be aware of itself at any point in the execution of it's own functions, and that is what I'm having trouble with at the moment.

What I'm trying to do is create reusable javascript "Apps" for my HTML web application, where multiple instances can be instantiated and used independently from one another.

My main problem is "this" loses context in the Ajax callback and onclick handlers. I'm not sure how to persist the context of "this", or at least keep a reference to prototype instance itself.

Let's set up a simple class called "App" to demonstrate what I mean...

Code:

var myApp = new App("MyFirstApp");

function App(argName) {
    this.name = argName;
    this.GetDirectory("C:\Program Files");
}

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    Ajax.GetDirectory(argPath, this.GetDirectoryCallback, this.GetDirectoryTimeout, this.GetDirectoryError);
}

App.prototype.GetDirectoryCallback = function(argFilePaths) {
    // "this" equals the "window" object (bad!), meaning this.name should equal a null reference
    // argFilePaths contains a string of file paths (delimited using ;) returned by the server
    var mFilePaths = split(argFilePaths, ";");
    // for each file path, add a div to the document body containing that file path, with an onclick handler
    for (var i in mFilePaths) {
        var mFilePath = mFilePaths[i];
        var mFilePathDiv = document.createElement("div");
        mFilePathDiv.innerHTML = mFilePath;
        mFilePathDiv.setAttribute("onclick", "javascript:this.FilePathDivClickHandler();return false;");
        document.getElementById("body").appendChild(mFilePathDiv);
    }
}

App.prototype.FilePathDivClickHandler = function() {
    // I need a reference to the App object instance here, but I'm not sure where to grab it...
    // what I want to do is call GetDirectory again, referencing the div's innerHTML which contains another file path, like this:
    this.GetDirectory(event.target.innerHTML);
}

The onclick handler using "this" is obviously not going to work because "this" is a reference to the "window" object which does not have a function called FilePathDivClickHandler(). So what I can do is nest the GetDirectoryCallback() function inside the GetDirectory() function so that GetDirectoryCallback() can reference the variables in the outer function (GetDirectory).

Code:

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    // "this" will still lose context inside the callback, so we can set up a variable called "instance" that the callback can reference
    var instance = this;
    Ajax.GetDirectory(argPath, GetDirectoryCallback, GetDirectoryTimeout, GetDirectoryError);
    function GetDirectoryCallback(argFilePaths) {
        // "this" equals the window object (bad!), meaning this.name should equal a null reference
        // "instance" equals the App object instance (good!), meaning instance.name should equal "MyFirstApp"
        // argFilePaths contains a string of file paths (delimited using ;) returned by the server
        var mFilePaths = split(argFilePaths, ";");
        // for each file path, add a div to the document body containing that file path, with an onclick handler
        for (var i in mFilePaths) {
            var mFilePath = mFilePaths[i];
            var mFilePathDiv = document.createElement("div");
            mFilePathDiv.innerHTML = mFilePath;
            mFilePathDiv.setAttribute("onclick", "javascript:instance.FilePathDivClickHandler();return false;");
            document.getElementById("body").appendChild(mFilePathDiv);
        }
    }
}

Even though we have persisted the App object instance through the use of the "instance" variable in the outer function, the onclick event handler still does not work; when it fires, "instance" is an unknown object.

Would placing the FilePathDivClickHandler() function inside the GetDirectory() function, much like what was done with the callback, allow me to use "instance" correctly for the onclick handler?

I am using a freebie script that changes css elements using onClick when you hit a button.

I have 12 choices I want to add, and don't want 12 buttons, but rather a dropdown list.

2 button examples (and js code) is:
<input onclick="changecss('li','background','url(images/list_02.jpg) no-repeat 10.2em .12em')" value="Change to BG 2" type="button" />
<input onclick="changecss('li','background','url(images/list_03.jpg) no-repeat 10.2em .12em')" value="Change to BG 3" type="button" />


How do I convert this to a SELECT list??

Thank you!

I have been given files for my site and would like to know what the following script does or could do ?

Code:

function parseScript(_source) {
  var source = _source;
  var scripts = new Array();
		
  // Strip out tags
  while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
    var s = source.indexOf("<script");
    var s_e = source.indexOf(">", s);
    var e = source.indexOf("</script", s);
    var e_e = source.indexOf(">", e);
	
    // Add to scripts array
    scripts.push(source.substring(s_e+1, e));
    // Strip from source
    source = source.substring(0, s) + source.substring(e_e+1);
  }
		
  // Loop through every script collected and eval it
  for(var i=0; i<scripts.length; i++) {
    try {
      eval(scripts[i]);
    } catch(ex) {
      window.execScript(scripts[i]);
    }
  }

return source;
}

this is one of the calls to this script I found in the other site files.

Code:

document.getElementById(element).innerHTML=parseScript(xmlhttp.responseText);

is there a possible security risk on this ?

any help on this is grately appreciated.

Hi all,
The following code is an assigment.I have it running with out any errors.It has to take the array (arrayToshuffle) and through running though the end of the (arrayToshuffle) the string has to be shuffled.We havent learnmt shuffle() yet.)
I think the problem is these lines.
arrayToShuffle[index]=arrayToShuffle[swapIndex]; arrayToShuffle[swapIndex]=arrayToShuffle[index];
But no matter what varibles I put in these lines and how much i fiddle I carnt seem to get it to run without repeating the same elements in the output.
I dont want anyone to fix it for me just advise on where I could look for problems.
Am i missing somthing here?
Heres the program if you run it you will see what I mean.


<html>
<head>
<script>
var arrayToShuffle = new Array('Ace','2','3','4','5','6','7','8','9','10','Jack','Queen','King');
var arraySize = arrayToShuffle.length;

document.write('<h1>Array shuffling</h1>');
document.write('<p>Before shuffle: '+arrayToShuffle+'</p>');

SWAPS_TO_MAKE = 30;


var index=0;
var self_swaps=0;
var counter = 0;

while(counter < SWAPS_TO_MAKE)
{
var swapIndex = Math.floor(Math.random()*arraySize+1);
arrayToShuffle[index]=arrayToShuffle[swapIndex];
arrayToShuffle[swapIndex]=arrayToShuffle[index];
if(index =swapIndex) {
self_swaps++;
}
counter++;
index = (index+1 % arraySize);
}

document.write('<p>After shuffle: '+arrayToShuffle+'</p>');
document.write('<ul>');
document.write('<li>Swaps made: '+SWAPS_TO_MAKE+'</li>');
document.write('<li>Self swaps: '+self_swaps+'</li>');
document.write('<li>Effective swaps: '+(SWAPS_TO_MAKE-self_swaps)+'</li>');
document.write('<li>Effective rate: '+((SWAPS_TO_MAKE-self_swaps)/SWAPS_TO_MAKE)+'</li>');
document.write('</ul>');

</script>
</head>
<body>

</body>
</html>

Thanks heaps
Shayne Darcy

Hi all,
I have just stated university a few weeks ago and have never programmed before.I am really stuck on this assigment .In the programm you have to enter you date of birth throught prompt (22).then your year of birth (yyyy),then your month (nov).
I am really stuck and have been for days in requards how to put the information gained through prompt function into a date object().So i can get the users day of birth .Heres the code i have written .the varibles num5+num9+num1 is the users input but i just dont know how to assign it to the date object I have tryed heaps of ways but carnt get any thing to work .Please Help.
head>
<script>

var tit1=('<title> Get your Stats </title>');
var tit2=('<h1> IT\'s about time...</h1><br /> ')
var num1 =('');
num1=prompt('Enter The Year You Were Born','19XX');
var currentTime = new Date()
var year = currentTime.getFullYear()
var ansVar = year-num1; //User input year calculation
var ageEx = (ansVar/62.7)*100; // Life% calculation


var num2=ansVar
var num3= ansVar*365.2424; // Days calcuation

var month =('janfebmaraprmayjunjulaugsepoctnovdec');
var num5 =('');
num5=prompt('Enter The Month You Where Born','jan');
num5=(num5.substring(0,3));
var lowCas=(num5.toLowerCase());//users input conmverted to lower case/
var num9=prompt ('Enter you date of birth','29');




var d = new Date (num5+num9+num1)//<<<<this random date entered here will give the day.
alert (d);
//STUCK HERE HOW DO I CONVERT num5+num9+num1 to a day????????::





document.write(tit1); //output
document.write(tit2);
document.write(('You have lived ')+ageEx.toFixed(0)+('% of your life.<br />'));
document.write(('You are ')+ansVar+(' years old.<br />'));
document.write (('You are ')+num3.toFixed(0)+(' days old.'));


</script>
</head>
</html>

Any advise would be appreciated thanks
Shayne darcy.

Hello,

Iam currently experimenting with Java Scripting and have hit a wall about the use of Functions.

I am trying to create a difference function which would work out the difference between two numbers.

e.g. 14 and 18

I am able to create a function and if statement to find the larger number of a argument but am having trouble writing one to find the difference between two numbers.

Iam also confused (i know probably a silly question) but is the operator used the same for this function.

Hope people can make sense of that.

Thanks,

Hi guys,
Just a simple question,

Since we can't delete object created with document.createElement(),
and just let javascript internal garbage collection do the work.

I would much appreciate if anybody would advise me,
whether we should nullify the object first,
for complete deletion by this collector?

Thanks for reading, and advising...
Hendra.

I have a page that takes nodes from drupal and pulls the athletes information and renders it into a roster page via a PHP array. initially the page did not have a logical sort and basically was rendered in the order of the node creation. I added sorttable.js to the file and you could then sort based on the header. However, our head coach wanted it to be sorted onLoad by player number (first column) so I added datatable and set aasorting to 0, asc and it actually sorts the second column (name) instead of column 1. No matter which column I set it to it only sorts the name column. If I could get some advice about how to fix this I would appreciate it.

Code:

<style type="text/css">table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" }
</style>

<script src="/jscript/sorttable.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
	$('#roster').dataTable( {
		"aaSorting": [[ 0, "asc" ]]
	} );
} );</script>
       




<table width="100%" cellpadding="2" cellspacing="2" border="1" class="sortable" id="roster" style="border-bottom:1">
	<thead>
		<tr>
			<?php if( ! empty($vars['sport']->field_sport_show_number) && 1 == $vars['sport']->field_sport_show_number['und'][0]['value'] ): ?>
				<th class="style4, sortBy" style="width: 14px;"  data-sortType="numeric" id="number"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">#</span></th>
			<?php endif; ?>

			<th class="style4" style="width: 14px;" ><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Name</span></th>

			<?php if( ! empty($vars['sport']->field_show_class) && 1 == $vars['sport']->field_show_class['und'][0]['value'] ): ?>
				<th class="style4" style="width: 14px;"><span style="font-family: Arial, Helvetic

Hi there

I've just completed a lovely slideshow script on my homepage. It works great in Firefox, but doesn't display at all in IE.

It's on a live test page he
http://www.modern-wedding-ideas.co.uk/index2.html

I'm sure I'm just missing something really simple. Any help would be greatly appreciated.

Also, this is a copy and paste job: I'm a newbie to javascript! So please be gentle.

Many thanks
Nicola

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

i have a link that references: <a href="My_Video.asx">video</a>. when you click, video will open in the "windows media player" and the parent window goes blank.

how can i prevent the parent window from going blank?

thank you for help
julio

This is what I have:
http://page-test.co.uk/js-test.html

..and it works exactly how I want it to, but I need it to work by doing these two things:

(a) If you see in the change_button function, I have hard coded the 'name_can_vary' name element. I need to do it so this isn't hard coded (so it can work on any page/form).

(b) I don't want to change any of the HTML, and I only want to change the code used in the change_button function (otherwise I will need to change many pages).

Thanks in advance.

I sometimes see that some people use this expression:
event = event || window.event
Why people need to do this? What does it mean?