JavaScript - Onclick On Js

Hello...

Here is an example of a site I'm working on:

http://mrmatthewreese.com/surine/custominlays.php

notice the links for the alien cross bones, celtic knot etc...change colors once they are clicked on? Is it possible to have the top (alien crossbone) be set to black before it is clicked on then changed to the grey color once a different link is clicked?

Just curious if anyone can help.


Here is the javascript code:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
if (Lst) Lst.className='';
obj.className='boldlink';
Lst=obj;
}

/*]]>*/


</script>

<a href="#" onclick='changeimage();'><span onclick="CngClass(this);">Alien Crossbones</span></a><br />
<a href="#" onclick='changeimage2()'><span onclick="CngClass(this);">Celtic Knot</span></a><br />
<a href="#" onclick='changeimage3()'><span onclick="CngClass(this);">Compass Rose</span></a><br />
<a href="#" onclick='changeimage4()'><span onclick="CngClass(this);">Fleurdelis</span></a><br />
<a href="#" onclick='changeimage5()'><span onclick="CngClass(this);">Geometrix</span></a><br />
<a href="#" onclick='changeimage6()'><span onclick="CngClass(this);">Modern Vine</span></a><br />
<a href="#" onclick='changeimage7()'><span onclick="CngClass(this);">Nouveau</span></a><br />
<a href="#" onclick='changeimage8()'><span onclick="CngClass(this);">Scorpion</span></a><br />
<a href="#" onclick='changeimage9()'><span onclick="CngClass(this);">Traditional Block</span></a><br />
<a href="#" onclick='changeimage10()'><span onclick="CngClass(this);">TrebleBass Clef</span></a>

<a href="#" onClick="showClubs(<% Response.Write x_ID_Nanny %>);" >


Now this showclubs function shows a hidden div and at the end I have a return:false;

but when you click on the link - it still seems to reload to the page and take you to the top

how can I get it to just show the div without seeming to reload the page?

We have a function that validates a form and then does submit (and a bunch of other stuff)

We called it using:
Code:

<td class="MyButtonStyle">
<a href="#" OnClick="MyFunction();" title="Save changes and continue">SAVE</a>
</td>

This worked fine on the browsers we were using (IE6 in the main), but we now find doesn't work on IE5.01, Mac and some others.

OK, so having done some research I now realise I needed RETURN FALSE in OnClick.

So ... faced with having to change a lot of pages I'd like to have the best possible syntax (by which I suppose I rellay mean most-browser-compatible), and I've seen a number of options; advice on picking a good'un would be much appreciated.

Amongst the stuff I've seen is:
Code:

1. href="#" onclick="MyFunction();return false;"

2. href="#null" onclick="MyFunction();return false;"

3. href="NoJavaScriptAbility.htm" onclick="MyFunction();return false;"

4. href="#" onclick="return MyFunction();"

5. href="javascript:;" onclick="return MyFunction();"

6. href="javascript://" onclick="return MyFunction();"

7. href="javascript:void(0);" onclick="return MyFunction();"

8. href="javascript:MyFunction();"

What about what shows in the Status bar? Should I have an OnMouseOver event too to describe what MyFunction is going to do? Rather than displaying a meaningless link.

Anything else to note? (This function is part of a library being reused for major web site development over the next however many years, and not for single-project build-and-throw-away, so all possible functionality, including The Kitchen Sink!, is up for consideration).

Thanks

Kristen

Hello forum,
My name is juan and recently started html programming. I have a web page with a drop box with the name of states.
Code:

<option value="">Alabama</option>
<option value="">Alaska</option>

I can add a onclick="code here" to the tag so that when the drop box alabama is selected it triggers the onclick event.

Im using Ibox in order to have a image of the state open.

Code:

<a href="images/large/image_1b.jpg"  rel="ibox" title="alabama at 1024x450!"><img 
src="images/small/image_1.jpg" alt=""/></a>

the above is a <a> link tag correct? How do I go bout adding the above code into the onclick event?

Ok here is my form:
Code:

$sql = "SELECT storage.quantity, items.name, items.image, items.description, items.itemid
	FROM storage
	JOIN items USING(itemid)
	WHERE userid='".$_SESSION['userid']."'
	ORDER BY items.name
	LIMIT $offset, $rowsperpage";
	$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
	$imagecount = 0;
	$tableOutput = "";
	while ($row = mysqli_fetch_assoc($result)) //while there are still results
	{
		$imagecount++;
		$quantity = $row['quantity'];
		$name = $row['name'];
		$image = $row['image'];
		$description = $row['description'];
		$itemid = $row['itemid'];

		//Create TD
		$tableOutput .= "<tr>\n";
		$tableOutput .= "<td width=\"50\" style=\"text-align:center;\">\n";
		$tableOutput .= "<img src=\"http://www.elvonica.com/".$image."\"><br>";
		$tableOutput .= $name."</td>\n";
		$tableOutput .= "<td width=\"400\" style=\"text-align:center;\">".$description."</td>\n";
		$tableOutput .= "<td width=\"50\" style=\"text-align:center;\">".$quantity."</td>\n";
		$tableOutput .= "<td width=\"100\" style=\"text-align:center;\">\n";
		$tableOutput .= "<button type=\"button\" onclick=\"removeOne(".$itemid.")\">Remove 1</button><br />\n";
		$tableOutput .= "<button type=\"button\" onclick=\"removeAll(".$itemid.")\">Remove All</button>\n";
		$tableOutput .= "</td>\n";
		$tableOutput .= "</tr>\n";
	}
		echo "<form action=\"storageprocess.php\" method=\"get\">\n";
		echo "<table cellspacing=\"0\" class=\"news\" align=\"center\">\n";
		echo "<tr>\n";
		echo "<td width=\"50\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Item</b></td>\n";
		echo "<td width=\"400\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Description</b></td>\n";
		echo "<td width=\"50\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Quantity</b></td>\n";
		echo "<td width=\"100\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Remove</b></td>\n";
		echo "</tr>\n";
		echo $tableOutput;
		echo "</table><br />\n";
		echo "</form>\n";

Just ignore the PHP part of it. This is going through a while loop as you can see, but the function "removeOne()" and "removeAll()" has the itemid in the parantheses so the javascript can catch that value.
But the problem is, that it's not even catching the function.
One of the functions (removeOne) looks like this:

Code:

<script>
$(document).ready(function() {
	function removeOne(n)
	{
		alert("hi");
		
		$.ajax(
		{
			type: "GET",
			url: "storageprocess.php?itemid="+ n,
			data: "itemid="+ n,
			success: function()
			{
				alert("Item has been moved to inventory.");
			}
		});
	}
});
</script>

Just ignore the AJAX part. I put the alert("hi"); in the beginning to see if it's even catching the onclick and it's not. So I don't understand why the onclick isn't preparing the function..
Can anyone help me here?

At first : Peace of code i have now:
Code:

<a onclick="doRate('-1', '{$id}'); return false;"><img src="{THEME}/dleimages/down.gif" title="Blogai(-)" alt="Blogai(-)" class="r2-unit" width="16" height="16" align="absmiddle" /></a>

So i thinking that if user has JavaScript in his browser disabled it won't work.
So gonna change it to this : like i saw in other webs:
Code:

<a onclick="doRate('-1', '{$id}'); return false;" href="llink.html"><img src="{THEME}/dleimages/down.gif" title="Blogai(-)" alt="Blogai(-)" class="r2-unit" width="16" height="16" align="absmiddle" /></a>

But i'm afraid that if user WILL have JS support enabled, href tag will be executed anyways. Any ideas?

Hi all,
I'm a js newbie and am filling in for someone on a job. He is dispalying banners on some pages and they want only one of the banners to click thru to a URL ("92002" is the banner id which needs to become a link)

existing code is below:
----------------

function showBanner(id) {
var arrBanners = new Array("72002", "12003", "63019", "72003", "53052", "83032", "62009", "52006", "73003", "73001", "92002");
for(var i in arrBanners) {
if (id == arrBanners[i]) {
var output = '<div><img height="130" width="693" border="0" src="/images/banners/banner' + id + '.jpg"/></div>';
document.write(output);
return false;
}
}
}
-----------------

How do i do this?
Many thanks

I want the text in a textbox to change to red when I click the box and back to blue when I click it again. I would prefer an inline solution like:
<input type="text" value="CHANGE COLOR" onclick="this.style.color='red';"/>

Hi, I'm working on a small bit of code that passes a logged in users email address and name to a live chat form (Zompim & WHMCS)
http://api.zopim.com/#setName

By striping the code from the above page, I've managed to get it to work when the link is clicked, but I needed to have the variables passed upon page load.

If anyone can point me in the right direction that would be great, me and Javascript don't work too well together!
Here is what I have so far

http://myautodj.com/zomp_test.php
(your request a chat, and click on the run script link - that passes the demo email and name)

Here is the code

Code:

<pre><script>
$zopim.livechat.set({
language: 'en',
name: 'Visitor',
email: 'visitor@site.com',
onStatus: function(s) { alert(s) }
});
</script></pre>
<script> 
(function() {
var pres = document.getElementsByTagName('pre'), i;
for (i=0; i<pres.length; i++) {

buildLiveExample(pres[i]);
}

function buildLiveExample(p) {
var code = p.innerHTML.replace(/&gt;/g, '>').replace(/&lt;/g, '<');
var div = document.createElement('div');


if (code.search('<script>') == 0) {
var a = document.createElement('a');
a.innerHTML = 'run script';
a.href = '#';
a.onclick = function() {
eval(code.replace(/<\/?script>/g, ''));
return false;
};
div.appendChild(a);
}
else {
div.innerHTML = code.replace(/<script>[\s\S]*?<\/script>/g, '')

var code_blocks = code.match(/<script>[\s\S]*?<\/script>/g);
if (code_blocks) {
for (var i=0; i<code_blocks.length; i++)
eval(code_blocks[i].replace(/<\/?script>/g, ''));
}
}

p.parentNode.insertBefore(div, p);
}
})()
</script> 

<script type="text/javascript">
document.write(unescape("%3Cscript src='" + document.location.protocol + "//zopim.com/?4vXfkefMFbxeWAVPjvRvWnBodfrGzctq' charset='utf-8' type='text/javascript'%3E%3C/script%3E"));
</script>

Hi,

I use mostly PHP with my office's website as it usually requires some interaction with the server. However, i would like to do something that does not, and figured JS should be able to take care of it. I just can't get my head around it and would like to ask for some guidance...not the answer per say, just helping me get on the right path would be great!

What i would like to do seems rather simple:

I have a calendar. I would it to do one of two things:
1. Using onclick, when the user clicks on a date, i would like it to print something underneath the calendar. Similar to an error message that shows up on a login form if you type something wrong in a field using PHP (if(isset($whatever))).

2. Or using onMouseover, if the user hovers over a date that i have something special scheduled, i want a message to either pop up (alert()) or similar to #1, show up below the calendar.

While fiddling with it this afternoon i figured i was close, but i am missing something...

Code:

<td><a href="#" onclick="document.getElementById("27").innerHTML='President's Day'; return false;">27</a></td>

But this seems to be pulling information from an element whose id = 27...which is not what i'd like..

Thanks in advance,

Tsiqueira

Hey guys,

I'm trying to obtain the object of the element on the page that is clicked, but my code is unable to set the target. Here's what I have.

The JavaScript
Code:

   function show_info(e){
                        //get the targeted element.
                        var targ;
                        if (!e) var e = window.event;

                        if (e.target) targ = e.target;
                        else if (e.srcElement) targ = e.srcElement;
                        
                        if (targ.nodeType == 3) targ = targ.parentNode;

                        alert (targ); //FAIL!
                        

                    }

The Form
Code:

<form action="#" method="post">

<input type="hidden" name\"id" value="" />
<input type="submit" name="submit" value="Info" onclick="show_info()"/>
 </form>

What I want to do is get the target element(the submit button) so that I can get its sibling(it contains a unique ID). But it's not working.

Ok so I have two images class1 & class2 which both have opacity:0.3; and filter:alpha(opacity=30); added with css. I am trying to get it so when I click on class1 it will either fade in (ideally) or display as 100% opacity. I do not want both class's to be able to be 100% so if one is clicked the other would be 30%.

I also have multiple instances of class1 and class2.

If anyone can help me I will praise you on the highest mountain!

Thanks,

B

i am creating a check box and asigning i an onclick event with the following code.
Code:

var box=document.createElement('input');
box.onClick="alert('test')"
cell.appendChild(box);

when i click the checkbox, the check appears in it, but no alert message, and there is no sign of an onClick attribute in the DOM. However, when i type box.onClick in the console it returns"alert('test')" any ideas why it doesn't regonize the onclick event?

Hello, I'm trying to make a small profile for my website, the website has a number of buttons on the left hand side allowing you to click the buttons and show the data or what they've clicked. For example when a player clicks on their statistics page, the statistics div will show up, and all the other div's will be hidden. If a player clicked on their friends list, the friends list div would be shown and all of the other div's would be hidden.

I was able to show and hide the div's separately but I was unsure of how to make all the div's hidden apart from the one which they've clicked on. Thanks if you're able to help me.

Link to user profile buttons - http://thepilotslife.com/usernew.php?user=Haydz

I'm a complete Noob to Java. Just retired and starting a new venture.

I need to add a sound effect to my image. I read the Onmouseover tutorial using HTML5 and its exactly what I need but as hard as I try I cannot make sense of it.

My source code:

Code:

<html><head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>You Could Win BIG!</title>
<script type="text/javascript">
//preload images first
img1=new Image()
img1.src="/images/themagicbutton.png"
img2=new Image()
img2.src="/images/themagicbutton5.png"
</script>
  
</head><body bgcolor="C4C996">

<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<center><a href="http://bit.ly/tZ7iUv" onMousedown="document.images['example'].src=img2.src" onMouseup="document.images['example'].src=img1.src">
<img src="/images/themagicbutton.png" name="example" border=0></a>
</body></html>

I want to ad the following sound to my image above: magic-chime-03.mp3, magic-chime-03.wav, magic-chime-03.ogg as an OnClick.

I need your expertise in setting this scipt up and where to place it in my source code.

Any help I would be eternally grateful.