JavaScript - Onscroll Div Show Help

Hello all, I have this code where you click on a state and it gives you haunted places for that state. Here's my HTML code:

Code:

<img src="media/us_map.gif" border="0" usemap="#map" style="border:1px solid #999999;padding:5px;background-color:white;"/>
<map name="map" id="map">
	<area onclick="me();" title="Maine"shape="poly" coords="532,77,522,52,525,51,527,47,526,38,525,29,528,18,532,20,536,15,541,18,546,34,560,45"Maine" />
	<area onclick="nh();" title="New Hampshire" shape="poly" coords="517,83,517,64,523,56,532,81,519,86"New_Hampshire" />
	<area onclick="vt();" title="Vermont" shape="poly" coords="502,58,505,78,508,84,511,92,519,88,516,66,520,55"Vermont" />
  	<area onclick="ma();" title="Massachusetts" shape="poly" coords="543,91,546,94,538,98,533,94,532,92,512,100,512,93,533,81,518,86,531,85,538,87"Massachusetts" />
  	<area onclick="ri();" title="Rhode Island" shape="poly" coords="528,95,531,104,536,98,531,94"Rhode_Island" />
  	<area onclick="ct();" title="Connecticut" shape="poly" coords="513,101,515,111,529,104,528,96,524,97"Connecticut" />
	<area onclick="ny();" title="New York" shape="poly" coords="529,110,519,118,510,119,494,104,453,114,449,109,455,104,453,97,458,94,471,92,479,85,472,78,480,75,481,67,498,61,490,62,501,61,504,78,511,92,510,100,514,110,514,114,511,112"New_York" />
 	<area onclick="nj();" title="New Jersey" shape="poly" coords="501,134,507,140,512,125,509,123,511,114,502,109,500,112,497,121,505,127,506,125,500,132"New_Jersey" />
 	<area onclick="de();" title="Delaware" shape="poly" coords="495,136,500,152,507,148,498,134"Delaware" />
  	<area onclick="md();" title="Maryland" shape="poly" coords="502,167,506,156,507,149,501,153,492,137,460,142,460,148,465,147,473,144,479,146,483,147"Maryland" />
  	<area onclick="pa();" title="Pennsylvania" shape="poly" coords="463,150,458,119,464,114,468,119,509,110,515,115,512,126,518,132,512,140"Pennsylvania" />
  	<area onclick="wv();" title="West Virginia" shape="poly" coords="436,176,429,167,432,159,447,145,458,145,447,149,459,145,461,150,470,147,464,160,457,162,452,178"West_Virginia" />
  	<area onclick="va();" title="Virginia" shape="poly" coords="427,190,437,178,450,180,458,163,465,162,471,146,485,150,495,163,502,176"Virginia" />
  	<area onclick="nc();" title="North Carolina" shape="poly" coords="418,216,431,214,439,207,450,206,455,208,468,209,484,221,487,217,497,205,501,204,511,193,505,176,446,185,441,198,432,197,420,212"North_Carolina" />
  	<area onclick="sc();" title="South Carolina" shape="poly" coords="430,215,436,220,445,230,457,238,459,250,485,221,470,210,449,205,438,208"South_Carolina" />
  	<area onclick="ga();" title="Georgia" shape="poly" coords="415,275,415,251,405,216,429,215,445,231,455,238,459,251,456,267,451,272,450,276,445,272"Georgia" />
  	<area onclick="fl();" title="Flordia" shape="poly" coords="387,275,386,283,398,282,409,284,416,290,429,282,439,289,445,292,445,311,456,326,462,335,470,341,463,351,471,349,479,339,481,325,476,310,470,298,462,284,458,270,452,275,445,272,418,277,413,271"Florida" />
  	<area onclick="al();" title="Alabama" shape="poly" coords="377,284,374,221,403,218,412,247,413,272,389,272,384,282"Alabama" />
  	<area onclick="ms();" title="Mississippi" shape="poly" coords="341,277,348,260,345,251,346,234,354,221,373,220,376,285,365,288,362,278"Mississippi" />
  	<area onclick="la();" title="Lousiana" shape="poly" coords="313,297,319,278,312,266,311,246,316,250,342,250,347,259,342,278,361,279,364,289,363,297,368,302,358,303,348,305,341,294,330,302"Louisiana" />
  	<area onclick="tn();" title="Tennasee" shape="poly" coords="356,220,361,200,372,199,445,187,442,198,432,196,419,216"Tennasee" />
 	<area onclick="ky();" title="Kentucky" shape="poly" coords="363,198,365,191,370,191,371,182,386,178,405,160,415,165,427,164,436,178,424,189"Kentucky" />
  	<area onclick="oh();" title="Ohio" shape="poly" coords="407,160,400,124,413,121,423,125,431,123,439,116,447,143,431,159,430,163,415,162,421,163"Ohio" />
  	<area onclick="mi();" title="Michigan" shape="poly" coords="381,124,387,112,381,101,381,89,395,68,400,73,405,76,410,86,405,95,406,103,414,91,419,101,420,111,412,122"Michigan" />
  	<area onclick="mi();" title="Michigan" shape="poly" coords="341,62,353,70,366,74,367,85,371,70,381,70,390,64,399,66,400,54,360,46"Michigan" />
  	<area onclick="ind();" title="Indiana" shape="poly" coords="375,180,375,129,384,125,400,124,408,160,388,177"Indiana" />
  	<area onclick="il();" title="Illinois" shape="poly" coords="364,192,356,184,348,177,350,170,344,169,334,154,338,150,339,138,347,127,344,124,340,120,368,116,373,130,375,180,368,180,369,189"Illinois" />
  	<area onclick="wi();" title="Wisconsin" shape="poly" coords="339,121,335,106,319,91,316,78,324,73,322,65,336,59,364,77,365,90,373,80,367,113,368,116"Wisconsin" />
  	<area onclick="mn();" title="Minnesota" shape="poly" coords="286,108,286,86,280,80,283,74,280,33,298,33,323,45,343,43,322,66,324,73,316,80,318,90,337,107"Minnesota" />
  	<area onclick="ia();" title="Iowa" shape="poly" coords="285,108,284,123,292,148,337,148,338,138,346,127,341,120,335,107"Iowa" />
  	<area onclick="mo();" title="Missouri" shape="poly" coords="293,150,301,157,299,163,309,171,305,198,354,200,352,207,360,206,365,194,347,177,349,171,344,169,334,154,339,148"Missouri" />
  	<area onclick="ar();" title="Arkansas" shape="poly" coords="309,243,307,199,352,203,348,208,358,207,356,220,346,234,344,247,314,248,341,248,318,251"Arkansas" />
  	<area onclick="nd();" title="North Dakota" shape="poly" coords="215,73,219,31,278,32,281,76"North_Dakota" />
  	<area onclick="sd();" title="South Dakota" shape="poly" coords="209,112,216,74,279,77,285,85,282,121,276,115,270,117,264,114"South_Dakota" />
  	<area onclick="ne();" title="Nebraska" shape="poly" coords="209,136,210,113,264,114,267,116,275,117,282,122,292,152,294,154,229,152,226,142,228,139"Nebraska" />
  	<area onclick="ks();" title="Kansas" shape="poly" coords="227,192,227,152,294,155,301,159,294,163,309,172,304,197"Kansas" />
  	<area onclick="ok();" title="Oklahoma" shape="poly" coords="213,199,214,192,306,199,309,244,291,241,271,243,256,235,246,233,247,202"Oklahoma" />
  	<area onclick="tx();" title="Texas" shape="poly" coords="168,258,170,270,184,280,188,296,201,303,212,294,224,294,242,318,253,338,274,348,273,324,312,299,317,278,310,268,311,245,290,242,276,245,255,237,245,233,246,203,213,200,209,259"Texas" />
  	<area onclick="mt();" title="Montana" shape="poly" coords="115,16,110,30,120,50,115,61,123,61,129,82,148,79,211,86,218,30"Montana" />
  	<area onclick="wy();" title="Wyoming" shape="poly" coords="137,127,145,79,213,87,209,105,209,138"Wyoming" />
  	<area onclick="co();" title="Colorado" shape="poly" coords="153,184,161,132,227,140,228,149,226,191"Colorado" />
  	<area onclick="nm();" title="New Mexico" shape="poly" coords="140,261,153,182,213,190,208,257,151,253,149,263"New_Mexico" />
  	<area onclick="idaho();" title="Idaho" shape="poly" coords="79,105,90,74,86,73,99,61,95,49,106,13,114,16,109,27,119,49,115,60,122,64,128,82,145,81,136,114"Idaho" />
  	<area onclick="ut();" title="Utah" shape="poly" coords="98,175,111,112,135,113,135,125,160,130,153,184"Utah" />
  	<area onclick="az();" title="Arizona" shape="poly" coords="80,236,117,255,135,263,152,186,99,174,92,192,89,191,89,214"Arizona" />
  	<area onclick="wa();" title="Washington" shape="poly" coords="34,34,41,37,44,47,95,51,105,12,60,1,57,14,51,20,49,11,38,6"Washington" />
  	<area onclick="or();" title="Oregon" shape="poly" coords="79,102,11,85,34,34,42,37,42,49,94,52,98,62,85,72,89,77"Oregon" />
  	<area onclick="nv();" title="Nevada" shape="poly" coords="53,98,42,134,87,199,89,190,93,191,97,174,110,112"Nevada" />
 	<area onclick="ca();" title="California" shape="poly" coords="78,234,51,233,41,209,30,198,21,197,21,185,13,166,14,158,7,150,6,108,12,88,53,97,42,135,87,200,85,216"California" />
  	<area onclick="ak();" title="Alaska" shape="poly" coords="0,370,133,345,101,312,84,315,69,256,26,252,6,252,0,252"Alaska" />
  	<area onclick="hi();" title="Hawaii" hape="poly" coords="139,322,159,355,193,364,221,362,197,331,158,320"Hawaii" />
  	<area onclick="dc();" title="Washington DC" shape="rect" coords="514,182,535,196"Washington DC" />
  	<area onclick="md();" title="Maryland" shape="rect" coords="517,160,540,174"Maryland" />
  	<area onclick="de();" title="Delaware" shape="rect" coords="531,141,550,156"Delaware" />
  	<area onclick="nj();" title="New Jersey" shape="rect" coords="519,125,538,138"New_Jersey" />
  	<area onclick="ct();" title="Connecticut" shape="rect" coords="532,113,549,125"Connecticut" />
  	<area onclick="ri();" title="Rhode Island" shape="rect" coords="558,94,571,108"Rhode_Island" />
  	<area onclick="ma();" title="Massachusetts" shape="rect" coords="549,72,568,86"Massachusetts" />
  	<area onclick="nh();" title="New Hampshire" shape="rect" coords="502,29,522,42"New_Hampshire" />
  	<area onclick="vt();" title="Vermont" shape="rect" coords="476,29,496,44"Vermont" />
</map>

</td>
<td valign="top">

<div style="text-align:left; width:412px; height:362px; border:1px solid #999999;padding:10px;background-color:white; overflow:auto;margin-left:5px;" id="states"><span>Click a state to the right to see where that state's haunted places are.</span></div></td>

So what happens is you click on a state and it will show what's under that states line inside this JS file:

http://www.pxlcreations.com/paraguide/map.js

That works fine but if I try and put lots of text inside it, it won't work. I have to put each state inside this and here's what alabama looks like:

http://www.pxlcreations.com/paraguide/alabama.html

So here's a quick recap. If I try and put the Albany data into the JS file, it won't show. I even tried this:

Code:

<!--#include virtual='alabama.html'-->

But that didn't work either. Thanks in advance!

I'm having some problems hiding a div block and displaying another one.

this is my first attempt and creating something with JavaScript with out using a tutorial or anything so i would really appreciate any help, so i can learn

what i want is to have a div block display initially so when a user goes to the page they see the registration form, but if they already have an account they can just click a link that says log in and the registration form hides and the login form shows.

However right now its only hiding both and not displaying anything when the link is clicked

Here's the javascript code i'm using

Code:

<script type="text/javascript">  
function toggleview(id) {  
	
	var login = document.getElementById(id);
	var regsiter = document.getElementById(id);
	
	if(id == 'login' )
		login.style.display == 'block';
		regsiter.style.display == 'none';
	
}  
</script>

And here is what my link looks like

Code:

<h4><a href="#" onclick="toggleview('login')">Allready Have an Account?</a></h4>

my javascript clock suddenly disappeared. I don't know what happened. It's an external file. I have<script language="javascript" src="main.js"></script>
in the head section of my html and the .js looks like this but it's not showing up. I haven't made any changes unless I'm just remembering wrong

function startTime()
{
var now = new Date();
var h=now.getHours();
var min=now.getMinutes();
var s=now.getSeconds();
var ampm=(now.getHours()>11)?"PM":"AM";
var d=now.getDay()
var y=now.getFullYear()
var mon=now.getMonth()
var dm=now.getDate()

if (h>12) h-=12;
if (h==0) h=12;
if (min<10) min="0"+m;
if (s<10) s="0"+s;
if (dm<10) dm="0"+dm;

if (d==0) d="Sun";
if (d==1) d="Mon";
if (d==2) d="Tues";
if (d==3) d="Wed";
if (d==4) d="Thurs";
if (d==5) d="Fri";
if (d==6) d="Sat";

mon+=1;

document.getElementById("time").innerHTML=h+":"+min+":"+s+""+ampm+" "+d+" "+mon+" "+dm+" "+y;

t=setTimeout('startTime()',1000);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}

I have two effects, one is a fadein effect and one is a smooth scrolling effect. I also have a simple image slider but that isn't the problem.

It doesn't seem like the fadein is the problem either because when I had non-scrolling (positioned absolute) content "fadein", it wouldn't fadein in IE but at least it showed up, whereas the main content is blocked in IE with a dialogue about not running scripts or activex.

Is there a way to overwrite this? I tried running the basic example of smooth scrolling in IE9 and it worked fine without being blocked. My code seems the same!

I would be ok with the content just not fading in when using IE9, but if a user doesn't know to enable activex scripts from the dialogue box (assuming they even get a dialogue box), they won't be able to read any of the content which is an issue.

Here's the JavaScript in the head section:

Code:

<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');}
</script>

<link href="template.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="slider.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true
			});
		});	
	</script>
	
<link href="slider2.css" rel="stylesheet" type="text/css" media="screen" />

<script>
function fadein(){var fade=0,fadein=document.getElementById("fadein").style,ms=(fadein.opacity==0)?0:1,pace=setInterval(Fade,40);function Fade(){if(fade<100){fade+=2;if(ms)fadein.filter="alpha(opacity="+fade+")";else fadein.opacity=(fade/100)}else clearInterval(pace)}};
window.onload=fadein;
</script>

</head>

Code:

<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>

</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>

can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs

Hello,

I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management".

Does anyone know how I resolve ?.

The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link.




------------


Have placed code in attachment as too long for this section

Good Day:
I am very interested in a slide show as seen on this website (www.linksyssolutions.com). Can anyone direct me as to where I could find a script for this slideshow to use on my site.
Thanks very much in advance.

Hi,
I need to show the results in a proper manner. now I'm testing these results as a alert. But I need to show them in a table and I have to sort them according to the ascending order. Do you have any suggestions?

So i have this code and i know its a lot but my question is when you create a mine or a sawmill it does not add to the number of them it only work with farms. But when you create any of them it still works it just does not show how many you have.

HTML
Code:

<body onload="sstart(); clock(); ">
Time:<input type="text" id="timeee" value="15" size="1" style="background-color:transparent;border:0px solid white;" READONLY />
Rounds:<input type="text" id="rounds" value="0" size="1" style="background-color:transparent;border:0px solid white;" READONLY />
Popularity:<input type="text" id="popularity" value="0" size="1" style="background-color:transparent;border:0px solid white;" READONLY />
Population: <input type="text" id="pop" value="0" size="1" style="background-color:transparent;border:0px solid white;" READONLY />/
<input type="text" id="pop2" value="0" size="1"style="background-color:transparent;border:0px solid white;" READONLY />
Coin:<input type="text" id="coin" value="0" size="1" style="background-color:transparent;border:0px solid white;" READONLY />
Lumber:<input type="text" id="lumber" value="0" size="1" style="background-color:transparent;border:0px solid white;" READONLY />
Iron:<input type="text" id="iron" value="0" size="1" style="background-color:transparent;border:0px solid white;" READONLY />
Food:<input type="text" id="food" value="0" size="1" style="background-color:transparent;border:0px solid white;" READONLY />
<br/>
<hr/>
<br/>
<input type="button" onclick="showfood()" id="food" value="     Food     " />
<input type="button" onclick="showsw()" id="SM" value="   Saw Mill   " />
<input type="button" onclick="showmine()" id="SM" value="   Mines   " />
<input type="button" onclick="showtax()" id="tax" value="      Tax      " />
<input type="button" onclick="" id="housing" value="    People    " />
<input type="button" onclick="" id="army" value="     Army     " />
<input type="button" onclick="" id="trade" value="    World    " />	<br/>
<Br/>
<span id="main"></span>

Script
Code:

//////////time time 
function time(){
	res [3] [1] += res [7] [1];
	res [2] [1] += res [9] [1];
	res [1] [1] += res [11] [1];
	res [3] [1] -= res [5] [2] ;
	//res [3] [1] -= res [5] [1] ;

}

function sstart(){
		var b=setTimeout("start();",1);
		var b=setTimeout("clocka();",15000);
		var b=setTimeout("time();",15000);
		var b=setTimeout("sstart();",15000);
	
}
function clock(){
document.getElementById("timeee").value --;
var b=setTimeout("clock();",1000);
}
function clocka(){
document.getElementById("timeee").value = 15;
document.getElementById("rounds").value ++;
}
///////////////////////time

var res = new Array
res [0] = ["Coin: ",50,0];
res [1] = ["Lumber: ",100,0];
res [2] = ["Iron: ",25,0];
res [3] = ["Food: ",100,0];
res [4] = ["Popularity: ",0,0];
res [5] = ["POP: ",0,10];
res [6] = ["farms: ",0,0];
res [7] = ["CIfarms: ",0,0];
res [8] = ["mine: ",0,0];
res [9] = ["CImine: ",0,0];
res [10] = ["SW: ",0,0];
res [11] = ["CISW: ",0,0];
res [12] = ["FoodI: ",10,0];
res [13] = ["IronI: ",3,0];
res [14] = ["LumberI: ",10,0];
res [15] = ["TAX: ",0,0];
res [16] = ["CItax: ",0,0];
function start(){
	document.getElementById("coin").value = res [0] [1]; document.getElementById("lumber").value = res [1] [1];
	document.getElementById("iron").value = res [2] [1]; document.getElementById("food").value = res [3] [1]; document.getElementById("popularity").value = res [4] [1];
document.getElementById("pop").value = res [5] [1]; document.getElementById("pop2").value = res [5] [2];
document.getElementById("farms").innerHTML = res [6] [1];
document.getElementById("CIfarms").innerHTML = res [7] [1];
document.getElementById("mine").innerHTML = res [8] [1];
document.getElementById("CImine").innerHTML = res [9] [1];
document.getElementById("saw mills").innerHTML = res [10] [1];
document.getElementById("CISW").innerHTML = res [11] [1];
document.getElementById("tpp").innerHTML = res [15] [1];
}


//FARMS FARMS FARMS FARMS FARMS FARMS 

var showfood = function() {
	var T1  = document.getElementById('main');
	var T2 = '<input type="button" value="Build Farm" onclick="buildfarm()" /><br/> Farms:<span id="farms"></span><br/>Current Food Income:<span id="CIfarms"></span> ';
	T1.innerHTML = T2;
	start();
}

function buildfarm(){
res [6] [1]  +=1;
res [1] [1]  -=20;
res [5] [1]  +=10;
res [0] [1]  -=25;
res [7] [1] += res [12] [1];
res [2] [1]  -=3;
start();
}
</script>
<script>
/////////////////////////////mine
var showmine = function() {
	var T3  = document.getElementById('main');
	var T4 = '<input type="button" value="Find Mine" onclick="buildmine()" /><br/> Mines:<span id="mine"></span><br/>Current Iron Income:<span id="CImine"></span> ';
	T3.innerHTML = T4;
	start();
}

function buildmine(){
res [8] [1]  +=1;
res [5] [1]  +=15;
res [0] [1]  -=50;
res [9] [1]  += res [13] [1];
res [2] [1]  -=7;
res [1] [1]  -=15;
start();
}
</script>
<script>
///////////////////////////////SAWMILL
var showsw = function() {
	var T5  = document.getElementById('main');
	var T6 = '<input type="button" value="Build Saw Mill" onclick="buildsw()" /><br/> Saw Mills:<span id="saw mills"></span><br/>Current lumber Income:<span id="CISW"></span> ';
	T5.innerHTML = T6;
	start();
}

function buildsw(){
res [2] [1]  -=5;
res [1] [1]  -=20;
res [5] [1]  +=5;
res [0] [1]  -=25;
res [10] [1]  +=1;
res [11] [1]  += res [14] [1];
start();
}


</script>
<script>
function taxplus(){
res [15] [1] +=1;
}
var showtax = function() {
	var T7  = document.getElementById('main');
	var T8 = '<input type="button" value="Increase Tax Per Person" onclick="taxplus()" /> Tax Per Person:<span id="tpp"></span>';
	T7.innerHTML = T8;
	start();
}

Hey guys, I already saw this post but I wasn't sure if it took care of the question I'm asking.

I have the following javascript ad code right before the </body> tag:

Code:

<script type="text/javascript" src="http://ads.affbuzzads.com/smart_ad/display?ad_unit=18&ref=xxxxx"></script>

This is a slider ad that shows every time the person comes to the page I have it on.

I'd like to show this ad only once per 24 hours per visitor.

Can someone please help me out with code to do this? I'm kinda newbish at this.

Thanks so much!

hi,

I am sooo close to getting my project done,

I can now output a town name, using Jquery to output mySQL as JSON

the only problem I have now... In my code I have [16] which = 'Andover'

Is there a way to output my whole array? can I use .each()? if so, where?

thanks

here is my code
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {

	$.getJSON('json.php', function(data){
	
		$("#content").html(data[16].Town);
	
	});

});
</script>
</head>
<body>

<div id="content"></div>
</body>
</html>

http://www.mypubspace.com/dashtest/newjson.html

Hello,

I'm really new to this site and have only a 9-week knowledge of Javascript. I'm working on a project - a mock website involving a rudimentary shopping cart and one problem that has perpetually irked me and which I can't seem to solve no matter where I plunk my toFixed(2) or parseFloat is that I can't seem to get two decimals to show on the unit cost (price) if the hundreds digit is a zero.

My current bit of code is:
Code:

<script language="JavaScript1.1">
	var numitems = opener.numitems;
	var totcost = 0;
	for (i=1; i<=numitems; i++) {
	   document.write('<tr><td>' + opener.items[i].quantity + '</td>');
	   document.write('<td>' + opener.items[i].desc + '</td>');
	   document.write('<td>' + opener.items[i].price + '</td>');
	   cost = (opener.items[i].price * opener.items[i].quantity).toFixed(2);
	   cost = Math.floor(cost * 100) /100;
	   totcost += cost;
	   document.write("<td>" + cost.toFixed(2));
	   document.write("<INPUT TYPE=HIDDEN NAME='qty" + i + "'");
	   document.write(" VALUE='" + opener.items[i].quantity + "'>");
	   document.write("<INPUT TYPE=HIDDEN NAME='desc" + i + "'");
	   document.write(" VALUE='" + opener.items[i].desc + "'>"  + "</td></tr>");
	}
	document.write('<tr><td colspan="3"><div class="strong">Total Cost:</div></td>');
	document.write('<td><div class="strong">' + totcost.toFixed(2) + '</div></td></tr>');
	</script>

My current website is at http://kschmitt.aiwsites.com/imd215/. If you go to All Perennials > Full Sun > and add an 'Aster' (3rd flower at the top). Then if you click "Complete Order," my problem is that the 4.40 in the unit cost only shows up as 4.4 and I don't get it. The total cost works fine and I just don't know where to put my toFixed(2).

Thanks for any help in advance!
Fel

I don't know a lot about Javascript... still learning..
I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code:
Code:

<script type="text/javascript" >

function showSample() {
	
  if (document.getElementById('input').value='SW001') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW002') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='block';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW003') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='block';
    document.getElementById('SW004').style.display='none';

  }
    else if (document.getElementById('input').value='SW004') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  
    else if (document.getElementById('input').value='SW005') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='block';

  }

}

</script>


<style type="text/css">
<!--
#main {
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	height: 125px;
}
#imageArea {
	float: right;
	width: 200px;
}
#formArea {
	float: left;
	width: 200px;
	height: 125px;
}
.image {
	height: 125px;
	width: 125px;
	margin-right: auto;
	margin-left: auto;
	display: none;
}
#SW001 {
	background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
	background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
	background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
	background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
	background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>

<body>
<div id="main">
  <div id="imageArea">
    <div class="image" id="SW001"></div>
    <div class="image" id="SW002"></div>
    <div class="image" id="SW003"></div>
    <div class="image" id="SW004"></div>
    <div class="image" id="SW005"></div>
  </div>
  
  <div id="formArea">
    <form action="" method="get">
      
      
      <input  type='text' name="input" id='input' />
      <input name="" type="button" onclick="showSample(this.selectedIndex)"/>
      
      
    </form>
  </div>
</div>
</body>
</html>

Any help would be greatly appreciated!

I need a sort of slide show feature for my page (specifics below). I've spent a lot of time researching this and have not found what I'm looking for. I'm new to jquery and not sure how big of a chore this will be, but here goes:

1. There will be a title bar placed within a right and left arrow on either side.
2. The right and left arrows should cycle through a list of titles (when the right/left arrow is clicked, the title bar will change to the next/previous title in the list).
3. When each title bar is moused over, a new image will fade in above, and then fade out on mouse out.

I hope this all makes sense. I'm not looking for some fancy predesigned slideshow, I'll be using my own layout and images. I just need the basic code to perform these actions. Any help would be most appreciated..

Help. How do I show the below JavaScript code to each unique visitor only once per day or any amount of days I want to set?

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
</head>

<body>

<!-- this goes anywhere in the root of the -->
<div id="slideIn" style="position:absolute; width: 720px; height: 320px; left: 0; top: -600px; z-index: 100; border: 1px solid gray; padding: 20px; font-family: 14px Verdana, sans-serif, Tahoma, Arial; font-color: black;"
    <div style="text-align:right"><input type="button" value="CLOSE" onclick="f_slideOut()" style="background: black; color: white; border: 2px solid #dcdcdc;"></div>
This is where the content goes blah blah
Blah Blah
Blah Blah

Please help :(
</div>
<div id="slideInShade" style="position:absolute;z-index:99;visibility:hidden;"></div>
<script>
var s_userAgent = navigator.userAgent.toLowerCase(),
    s_location = String(window.location).toLowerCase(); // copyright protection

var b_mac = s_userAgent.indexOf('mac') != -1,
    b_ie5    = s_userAgent.indexOf('msie 5') != -1,
    b_ie6    = s_userAgent.indexOf('msie 6') != -1 && s_userAgent.indexOf('opera') == -1,
    b_ieMac  = b_mac && b_ie5,
    b_safari = b_mac && s_userAgent.indexOf('safari') != -1,
    b_opera6 = s_userAgent.indexOf('opera 6') != -1;

var e_slideIn = document.getElementById('slideIn');
var e_slideInShade = document.getElementById('slideInShade');

function f_slideIn() {
    if (!window.e_slideIn) return;
    var n_width  = e_slideIn.offsetWidth;
    var n_height = e_slideIn.offsetHeight;
    var n_left   = (f_clientWidth() - n_width) / 2;
    var n_top    = parseInt(e_slideIn.style.top);
    var n_moveTo = (f_clientHeight() - n_height) / 2;

    e_slideIn.style.left = n_left + 'px';
    e_slideIn.style.visibility = 'visible';
    f_customShade(n_width, n_height, n_left, n_top);
    e_slideInShade.style.visibility = 'visible';

    n_slideMove (n_top, n_moveTo);
}

function n_slideMove (n_top, n_moveTo) {
    n_inc = Math.round((n_moveTo - n_top) / 20);
    if (!n_inc) return;
    n_top += n_inc;
    f_customShade(null, null, null, n_top);
    e_slideIn.style.top  = n_top + 'px';
    setTimeout('n_slideMove(' + n_top + ',' + n_moveTo + ')', 10);
}

function f_slideOut() {
    if (!window.e_slideIn) return;
    e_slideIn.style.visibility = 'hidden';
    e_slideInShade.style.visibility = 'hidden';
}

function f_clientWidth() {
    if (typeof(window.innerWidth) == 'number')
        return window.innerWidth;
    if (document.documentElement && document.documentElement.clientWidth)
        return document.documentElement.clientWidth;
    if (document.body && document.body.clientWidth)
        return document.body.clientWidth;
    return null;
}
function f_clientHeight() {
    if (typeof(window.innerHeight) == 'number')
        return window.innerHeight;
    if (document.documentElement && document.documentElement.clientHeight)
        return document.documentElement.clientHeight;
    if (document.body && document.body.clientHeight)
        return document.body.clientHeight;
    return null;
}
function f_customShade (n_width, n_height, n_left, n_top) {
    if (!e_slideInShade) return;
    if (n_width != null) e_slideInShade.style.width = (n_width + 8) + 'px';
    if (n_left != null) e_slideInShade.style.left = (n_left - 1) + 'px';
    e_slideInShade.style.top = (n_top - 1) + 'px';
    if (!e_slideInShade.innerHTML) {
        if (b_ie5 || b_ie6)
            e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" colspan="2" width="6"><img src="images/pixel.gif"></td><td width="7" height="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_tr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td height="' + (n_height - 7) + '" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_mr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td width="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bl.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bm.png\', sizingMethod=\'scale\');" height="7" align="left"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_br.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr></table>';
        else
            e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" width="6"><img src="images/pixel.gif"></td><td rowspan="2"><img src="images/pixel.gif"></td><td width="7" height="7"><img src="images/shade_tr.png"></td></tr><tr><td background="images/shade_mr.png" height="' + (n_height - 7) + '"><img src="images/pixel.gif"></td></tr><tr><td><img src="images/shade_bl.png"></td><td background="images/shade_bm.png" height="7" align="left"><img src="images/pixel.gif"></td><td><img src="images/shade_br.png"></td></tr></table>';
    }
}
f_slideIn();
</script>

</body>
</html>