JavaScript - Making A Comment Box Drop Down On Link Click

I want a URL parameter, like http://www.thatswhyimbroke.com/#tab-1 to be added when a link is clicked. So for example, when I click one of the menu tabs on http://www.thatswhyimbroke.com/, I want a #tab-1 to be added at the end of the URL.

If you look now, clicking a new tab adds nothing to the URL because it's pre-loaded.

Please let me know if you need more explanation, I'm not sure i'm explaining it correctly. Thanks for any help!

I have some code to pick a wire size and conduit size from 2 separate drop down list. Then inside the js it is evaluated to decide how many wires. My problem is I can't figure out how to make the drop down options go into the JS. I just put in an error alert to test if they were for now.

Here is my code:

Code:

function fillcap(){
		var wire = document.getElementById("wireSize");
		var conduit = document.getElementById("conduitSize");
		if (wire.option.length >= 10 && conduit.option.length == .5) {
			windows.alert("Wire Size exceeds conduit max fill!")
		}

And the html

Code:

		<h2>Fill Capacity</h2><br>
        <b>Wire Size</b><br>
		<select id ="wireSize">
		<option value="1">#14</option> 
		<option value="2">#12</option> 
		<option value="3">#10</option>
		<option value="4">#8</option> 
		<option value="5">#6</option> 
		<option value="6">#4</option>
		<option value="7">#3</option> 
		<option value="8">#2</option> 
		<option value="9">#1</option>
		<option value="10">1/0</option> 
		<option value="20">2/0</option> 
		<option value="30">3/0</option>
		<option value="40">4/0</option>
		<option value="250">250</option>
		<option value="300">300</option> 
		<option value="350">350</option> 
		<option value="400">400</option>
		<option value="500">500</option> 
		<option value="600">600</option> 
		<option value="700">700</option>
		<option value="750">750</option> 
		</select>  <br>
		<b>Conduit Size</b><br>
		<select id="conduitSize">
		<option value=".5">1/2</option> 
		<option value=".75">3/4</option> 
		<option value="1">1</option>
		<option value="1.25">1-1/4</option> 
		<option value="1.5">1-1/2</option> 
		<option value="2">2</option>
		<option value="2.5">2-1/2</option> 
		<option value="3">3</option> 
		<option value="3.5">3-1/2</option>
		<option value="4">4</option> 
		<option value="5">5</option> 
		<option value="6">6</option>
		</select><br>
		<input value="Wires allowed" onclick="fillcap()" type="button"> 
		<input type="text" name="myresultbox" id="resultbox10"> Wires<br>

Thank you for any advice.

Hi all,

Very new to this but I am trying to automate some webdownloads I need to do daily.

I have a link I am trying to click via applescript do javascript


I can return the frames html by doing


tell application "Safari"
do JavaScript
"document.getElementById('iframesearch').contentDocument.getElementById('frmAccountList').innerH TML"
in document 1
end tell


the html returned contains the link link I want to click/fire
<span id="SWGrdAccSearch_ctl06_lblAsterix">&nbsp;</span>

<a onclick="javascript:return getDefaultAccount('John
Doe','0890','0','0');" id="SWGrdAccSearch_ctl06_lnkAccount"
href="javascript:__doPostBack('SWGrdAccSearch
$ctl06$lnkAccount','')">123456</a>


how can I get his link to launch/fire?


Any and all help deeply appreciated.

Hello Again,

After much help and support i have decided that the best way to do what i want (if i can get it working is like the below).

The idea is to click a link and content will load into a div from another div on another page in the same webspace. I can make a test page as directed by the guidance i recieved but there are some features that wont work properly or are not what i am after. For example in the test case the link to load the div is inside the div i want to update. In my case i want to click on the algebra link in the blue horizontal menu and then the main menu updates. I wont lie i have not got the skills to adapt this script on my own.

here is the test page

http://www.bushcottages.co.uk/loaddata.htm

the main page i would like it to work on as its not working correctly is

http://www.bushcottages.co.uk/new.htm

test code is

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Click This Link To Load My Favor</title>

<script type="text/javascript" src="java/jquery-1.5.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
 {
  $("#loadData").click(function()
   {
    $(this).text("...One Moment Please...");
     $("#container").append('<div id="favoriteMovies"></div>')
                    .children("#favoriteMovies").hide()
                    .load("theOtherPage.htm ul#favoriteMovies", function()
                     {
                      $("#loadData").remove();
                      $("#favoriteMovies").slideDown("slow");
                     });
   return false;
   });
});

</script>

<style type="text/css">

#container
{
	width: 300px;
	height: 200px;
	font-family: georgia;
	font-weight: bold;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
}

</style>

</head>

<body>
<div id="container">
<li><a href="#" id="loadData">Click This Link To Load My Favorite Movies</a></li>
</div>
</body>

</html>

code for main page is

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mathematics Learning Zone</title>
<meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C.">
	<meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C">
	<meta name="author" content="Peter Devlin">

<script type="text/javascript" src="java/jquery-1.5.min.js"></script>

<script type="text/javascript" src="http://www.bushcottages.co.uk/java/jquery.newsTicker-1.2.2.js"></script>
			<script type="text/javascript">
			<!--
			$(document).ready(function() {
				if (document.getElementById('news')) {
					var options = {
						newsList: "#news",
						tickerRate: 20,
						loopDelay: 6000,
						startDelay: 10,
						placeHolder1: "_"
					}
					$().newsTicker(options);
				}
			});
			-->
			</script>
			
<script type="text/javascript">

$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});
</script>

<script type="text/javascript">
var newwindow;
function poptastic(url)
{
	newwindow=window.open(url,'brainteasersolution.htm','height=400,width=400,left=40%,top=20%');
	if (window.focus) {newwindow.focus()}
}
</script>

<script type="text/javascript">
$(document).ready(function()
 {
  $("#number").click(function()
   {
    $(this).text("...One Moment Please...");
     $("#container").append('<div id="Algebra"></div>')
                    .children("#Algebra").hide()
                    .load("Algebra.htm ul#algebra", function()
                     {
                      $("#number").remove();
                      $("#Algebra").slideDown("slow");
                     });
   return false;
   });
});

</script>

<style type="text/css">

*
{
border: 0;
margin: 0;
padding-top:0;
}
#topmargin
{
width:900px;
height:5px;
margin:auto;
}

#banner
{
	width: 900px;
	height: 70px;
	background-image: url('banner.png');
	margin: auto;
	margin-bottom: 5px;
	background-color: #000066;
}

#horizontalmenu
{
	width: 900px;
	height: 25px;
	margin: auto;
	margin-bottom: 5px;
	background-color: #000066;
}

#horizontalmenu ul
{
list-style-type: none;
margin: 0px;
padding: 2px 0px 0px 0px;
}

	#horizontalmenu ul li
	{
	float: left;
	display: block;
	text-align: center;
	width: 300px;
	}

		#horizontalmenu ul li a 
		{
		text-decoration: none;
		font-family: georgia;
		font-size: 1em;
		color: #fafafa;
		}

		#horizontalmenu ul li a:hover
		{
		font-family: georgia;
		font-size: 1em;
		padding: 5px 40px 5px;
		color: #000000;
		background-color: #ffffff;
		}

#mainpage
{
	width: 900px;
	margin: auto;
}

#one
{
	float: left;
	width: 150px;
	margin-right: 5px;
}

#two
{
	float: left;
	width: 590px;
	margin-right: 5px;
}

#three
{
	float: left;
	width: 150px
}

#verticalmenu
{
	float: left;
	width: 150px;
}

	#verticaltopmenu
	{
	float: left;
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#verticalmainmenu
	{
	float: left;
	width: 146px;
	height: 372px;
	text-decoration: none;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	padding-top: 2px;
	padding-bottom: 2px;
	}

		#verticalmainmenu ul
		{
		text-decoration: none;
		list-style: none;
		padding: 0px;
		margin: 0px;
		color: black;
		}

			#verticalmainmenu ul li 
			{
			list-style: none;
			text-decoration: none;
			display: block;
			padding: 0px;
			text-align: left;
			font-family: georgia;
			font-size: .8em;
			color: black;
			}

				#verticalmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

				#verticalmainmenu a:hover 
				{
				background-color: white;
				color: #000066;
				}

#tickercontainer
{
	float: left;
	width: 586px;
	height: 21px;
	margin-bottom: 5px;
	border-color: #000066;
	border-style: solid;
	border-width: 2px;
}

	#tickersidetitle
	{
	float: left;
	width: 125px;
	height: 21px;
	background-color: #000066;
	}

	#tickercontent
	{
	float: left;
	width: 461px;
	height: 21px;
	padding: 0px;
	}

		ul#news
		{
		margin: 0px;
		height: 21px;
		padding: 0px 0px 0px 0px;
		}
	
			ul#news li
			{
			list-style: none;
			font-family: georgia;
			font-size: 14px;
			font-weight: bold;
			color: #004400;
			margin: 0px;
			padding: 0px 0px 0px 10px;
			}
 
				ul#news li a:link, ul#news li a:hover
				{
				color: #004400; 
				text-decoration: none; 
				}

#contentwindow
{
float: left;
width: 590px;
}

	ul.tabs
	{
	width: 590px;						/*--Set width of container--*/
	height: 23px;						/*--Set height of tabs--*/
	margin: 0px;
	padding: 0px;
	float: left;
	list-style: none;
	border-bottom: 2px solid #000066;	/*--Set line at bottom of ul--*/
	}

		ul.tabs li
		{
		float: left;
		margin-right: 1px; 				/*adjusts gap between tabs*/
		height: 23px;					/*--Subtract 1px from the height of the unordered list--*/
		line-height: 23px; 				/*--Vertically aligns the text within the tab--*/
		margin-bottom: -2px;
		background: #000066;
		border-color: #000066;
		border-style: solid;
		border: 2px;
		}
		
			ul.tabs li a
			{
			text-decoration: none;
			color: #FFFFFF;	
			font-family: georgia;
			font-size: 14px;
			display: block;
			padding: 0 20px;
			}
			
			ul.tabs li.active a
			{
			color:#000000;
			border-color: #000066;
			border-style: solid;
			border: 2px;
			}
			
			ul.tabs li a:hover
			{
			background-color: #330099;
			border: 0px;
			}
						
			ul.tabs li.active, ul.tabs li.active a:hover		/*--Makes sure that the active tab does not listen to the hover properties--*/
			{ 
			color: #000000;
			background: #FFFFFF;
			border-color: #000066;
			border-style: solid;
			border: 2px 2px 2px 0px;
			border-bottom: 2px solid #FFFFFF; /*--Makes the active tab look like it's connected with its content--*/
			}

.tab_container {
	border: 2px solid #000066;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; 
	width: 586px;
	height: 346px;
	background: #FFFFFF;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}

#testsmenu
{
	float: left;
	width: 150px;
	margin-bottom: 5px;
}

	#teststopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#testsmainmenu
	{
	float: left;
	width: 146px;
	height: 70px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}
		#testsmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#testsmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('test.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#testsmainmenu ul li a 
				{
				padding: 0px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

				#testsmainmenu ul li a:hover 
				{
				background-color: white;
				color: #000066;
				}
#downloadsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}

	#downloadstopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#downloadsmainmenu
	{
	float: left;
	width: 146px;
	height: 70px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}

		#downloadsmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#downloadsmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('download.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#downloadsmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

					#downloadsmainmenu ul li a:hover 
					{
					background-color: white;
					color: #000066;
					}
#worksheetsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}

	#worksheetstopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#worksheetsmainmenu
	{
	float: left;
	width: 146px;
	height: 70px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}

		#worksheetsmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#worksheetsmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('worksheet.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#worksheetsmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

					#worksheetsmainmenu ul li a:hover 
					{
					background-color: white;
					color: #000066;
					}

#weblinksmenu
{
	float: left;
	width: 150px;
	margin-bottom: 5px;
}

	#weblinkstopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#weblinksmainmenu
	{
	float: left;
	width: 146px;
	height: 70px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}

		#weblinksmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#weblinksmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('links.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#weblinksmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

					#weblinksmainmenu ul li a:hover 
					{
					background-color: white;
					color: #000066;
					}

p
{
	text-align: center;
	font-family: georgia;
	font-size: 1em;
	color: #FFFFFF;
	padding-top: 2px;
}

p.a
{
	text-align: center;
	font-family: georgia;
	font-size: 1em;
	color: #FFFFFF;
	padding-top: 0px;
}

p.b
{
	text-align: center;
	font-family: georgia;
	font-size: 1em;
	color: #000000;
	padding-top: 0px;
}

p.c
{
	text-align: center;
	font-family: georgia;
	font-size: 8px;
	color: #000000;
	padding-top: 0px;
}

</style>

</head>


<body>

<div id="topmargin"></div>
<div id="banner"></div>

<div id="horizontalmenu">
	<ul>
		<li> <a href="#" id="number">Number and Algebra</a></li>
		<li><a href="url">Geometry and Measures</a></li>
		<li><a href="url">Statistics - Data Handling</a></li>
	</ul>
</div>

<div id="mainpage">

	<div id="one">
		<div id="verticalmenu">
			<div id="verticaltopmenu"><p>Main Menu</p></div>
			<div id="verticalmainmenu">
				<ul>
					<li><a href="url">Angles</a></li>
					<li><a href="url">Properties of Shapes</a></li>
					<li><a href="url">Circle Theorems</a></li>
					<li><a href="url">Geometry of Cuboids</a></li>
					<li><a href="url">2d and 3d Shapes</a></li>
					<li><a href="url">Area</a></li>
					<li><a href="url">Perimeter</a></li>
					<li><a href="url">Prisms</a></li>
					<li><a href="url">Surface Area</a></li>
					<li><a href="url">Using Pi</a></li>
					<li><a href="url">Volumes</a></li>
					<li><a href="url">Transformations</a></li>
					<li><a href="url">Scale</a></li>
					<li><a href="url">Coordinates</a></li>
					<li><a href="url">Vectors</a></li>
					<li><a href="url">Bearings</a></li>
				</ul>
			</div>
		</div>
	</div>

<div id="two">
	<div id="tickercontainer">
		<div id="tickersidetitle"><p class="a">Brainteasers</p></div>
		<div id="tickercontent">
			<ul id="news">
				<li>How many Degrees in a Triangle?</li>
				<li><a href="javascript:poptastic('brainteasersolution.htm');">Algebra - What is 4x = 20 - X? Click for answer</a></li>
				<li><a href="http://www.bushcottages.co.uk/1.htm">What is the most common class Called?</a></li>
			</ul>
		</div>
	</div>
	<div id="contentwindow">
		<ul class="tabs">
   			<li><a href="#tab1">Acute</a></li>
    		<li><a href="#tab2">Obtuse</a></li>
    		<li><a href="#tab1">Reflex</a></li>
    		<li><a href="#tab2">Vertex</a></li>
		</ul>

		<div class="tab_container">
 		<div id="tab1" class="tab_content">
        <p class="b">hello</p>
        <p class="c">Page Created by P.Devlin</p>
   		</div>
   		<div id="tab2" class="tab_content">
    	<p class="b">well done</p>
    	<p class="c">Page Created by P.Devlin</p>
    </div>
</div></div>
</div>
	

	<div id="three">
		<div id="testsmenu">
			<div id="teststopmenu"><p>Online Tests</p></div>
			<div id="testsmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Averages</a></li>
					<li><a href="url">Algebra</a></li>
				</ul>
			</div>
		</div>
	
		<div id="downloadsmenu">
			<div id="downloadstopmenu"><p>Downloads</p></div>
			<div id="downloadsmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Algebra</a></li>
					<li><a href="url">Tests</a></li>
				</ul>
			</div>
		</div>
	
		<div id="worksheetsmenu">
			<div id="worksheetstopmenu"><p>Worksheets</p></div>
			<div id="worksheetsmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Algebra</a></li>
					<li><a href="url">Tests</a></li>
				</ul>
			</div>
		</div>
	
		<div id="weblinksmenu">
			<div id="weblinkstopmenu"><p>Web Links</p></div>
			<div id="weblinksmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Algebra</a></li>
					<li><a href="url">Tests</a></li>
				</ul>
			</div>
		</div>
	</div>

</div>


</body>

</html>

Many thank to you all for your help so far.
Peter

Hi, Im looking for help, I have been looking for a script like the following.

Code:

http://tools.th3-0utl4ws.com/admin-finder/

Where a visitor must click each link before accessing the website.

Can any one help me please.

Thanks in advance.

I really don't know what I am doing, but I need to know how to alter this script to load this website without having to click "Weathersentry online". I would like to double click on the icon the code is attached to and it sign in automatically. Can anyone help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sample Signin link WeatherSentry Online</title>
</head>

<body>

<form id="DTNSigninForm" action="http://weather.dtn.com/dtnweather/common/signin.do" style="margin: 0,0,0,0;" >
<a onclick='document.getElementById("DTNSigninForm").submit();return false;' href="javascript:void(0);">WeatherSentry Online</a>
<input type="hidden" name="username" value="username" />
<input type="hidden" name="password" value="password" />
<input type="hidden" name="autoLogin" value="true" />
</form>

</body>
</html>

When the user visits a page, an iframe will be displayed. What is the best way to force the user to click something in this iframe?

I suppose I could do that thing where the mouse always has a part of a div "glued" to it, so wherever they click, the certain area is clicked. But, then they could just hit the back button. If you think this is the best way, could you please provide some code if you have some, or give me the name of this (I forget what this specific method is called)?

If you don't think that's the best way, what's your idea?

Thanks.

Hi guys. I have a quick question. What's the code for having a link with the id "autoid" clicked when the body of my html code loads?

Thanks,
Alex

I wrote a function, to change a input value to show a key, which PHP later recognizes and makes addition changes too. However I can't seem to get this simple function to work, can you see anything wrong with it?

Code:

				function quote(id) {
					var shout = document.getElementById('shout');
					var currentShout = '; '.shout.value;
					var prefix = '@'.id;
					shout.value = prefix.currentShout;
				}

I call it by
Code:

<a href="#" onclick="javascript: quote('2');">Comment</a>

the input that changes is written as
Code:

						<input id="shout" name="shout" type="text" onKeyPress="return submitenter(this,event);">

Hi guys

I'm trying to simulate links clicking on web pages, don't know how to deal with javascript links. The link I'm trying to click contains a tag like this:

<a href="javascript:function(1243423)">text</a>

Would somebody help me out please?

Thanks a lot

Hello all,


Essentially what I am trying to get without much success on the issue is this:

I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window.

This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason.

I am obliged for any help on this.

*edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though.

Hi,
here is what I am trying to do, mind if I sound simple this is my first major javascript attempt.

You click the checkbox and it changes a link. You click the checkbox again and it changes it back.

So you have a page with a link :

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN" id="pay"><img src="go.gif"></a>

and a checkbox :

<a nohref style="cursorointer;color:blue;text-decoration:underline" onclick="changeTarget()"><input type="checkbox" OnClick="changeTarget()" checked="yes" name="opt-in" id="opt-in" align="center" /></a> </p>

Clicking the checkbox runs the javascript function ChangeTarget().

Here is what I want the javascript to do:
Code:

1. Write current pay value to variable
2. Compare variable to paypal link 
  -3. change to clickbank link
  -else change to paypal link.

Here is the code I have tried that doesnt work:

Code:

<script type="text/javascript">
var link = document.getElementById('pay');
function changeTarget()

if(link == "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN")
	document.getElementById('pay').href="http://1.60years.pay.clickbank.net";	 
else
	document.getElementById('pay').href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN"; 
</script>

Any help would be very much appreciated, I don't know why it isnt working. It just doesnt do anything when you click it.

I know the following DOES work, but it only changes the link to the value chosen... no way of changing it back when you click the checkbox a second time.

Code:

//WORKING CODE
<script type="text/javascript">
function changeTarget()
{
document.getElementById('pay').href="http://1.60years.pay.clickbank.net";
}
</script>

I have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't.

I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working.

Code:

<img src="images/map.png" alt="" usemap="#map"/>
			
<map id="map" name="map">
<area shape="rect" coords="211,84,225,97" href="#" alt=""/>
<area shape="rect" coords="226,78,240,92" href="#" alt=""/>
<area shape="rect" coords="353,66,376,89" href="#" alt=""/>
</map>

<div id="hidden">
	<div class="location" style="left:25px; top:-290px;">
		<img src="images/location01.jpg" alt=""/>
	</div>
				
	<div class="location" style="left:25px; top:-275px;">				
		<img src="images/location02.jpg" alt=""/>
	</div>

	<div class="location" style="left:275px; top:-285px;">
		<img src="images/location03.jpg" alt=""/>
	</div>
</div> <!-- #hidden -->

Code:

function show(which) {
	var area = document.getElementById("map").getElementsByTagName("area");
	var locations = document.getElementById("hidden").getElementsByTagName("div");

	for (var a=0; a < area.length; ++a) {
		if(area[a] == which) locations[a].style.display="block";
		}
	}
					
function hide() {
	var locations = document.getElementById("hidden").getElementsByTagName("div");

	for (var d=0; d < locations.length; ++d) {
		locations[d].style.display="none";
		}
	}
					
function init() {
	var area = document.getElementById("map").getElementsByTagName("area");

	for (var a=0; a < area.length; ++a) {
		area[a].onmouseover = function() { show(this); }
		area[a].onmouseout = hide;
		}
	}

window.onload = init;

I have the code below and currently the user selects an option and clicks the go button and this links to the webpage in a new window, however I am wanting this to open in the same window instead, any help?

Code:

<html>
<body><script>

function goToNewPage(dropdownlist) { var url = dropdownlist.options(dropdownlist.selectedIndex).value; if (url != "") { window.open(url); } }

    </script>

    <p>Test</p>
    <form name="dropdown"><select accesskey="E" name="list"> <option selected="selected">Please select....</option> <option value="http://www.google.com/">Google</option> <option value="http://www.search.com/">Search.com</option> <option value="http://www.dogpile.com/">Dogpile</option></select> <input onclick="goToNewPage(document.dropdown.list)" type="button" value="Go" /></form>
  </body></html>