|
JavaScript - Why Won't This Show Up?
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! Similar TutorialsHow do I show the default icon for pdf, doc, etc... else show the image? Code: Show the default icon for pdf, doc, etc... else show image. Default icon: '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' + The image: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' + Attempted javascript onError but only certain browsers support that or it's my code. Code: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' + Any ideas? 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'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>
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! 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 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.. 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();
}
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 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? 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. 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 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>
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! this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html using this code: http://www.linkstraffic.net/programm...nd/movediv.php heres my code. can someone fix it? html: [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>Chris MacDonald - Javascript Assignment 2</title> <link href="styles/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java.js"></script> <div id="header"> <div id="logo"><img src="images/beat.png" /></div> </div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li> <li><a href="#">About Us</a></li> </ul> </head> <body> <div id="content"> <a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a> <div id="coverlogin"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br/> <p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p> </div> </div> </div> <div id="footer"> <div id="footertext">Beat Threads - 2010</div> </div> </body> </html> [CODE] javascript: // JavaScript Document var hh=0; var interv; //we show the box by setting the visibility of the element and incrementing the height smoothly function ShowBox() { //Depending on the amount of text, set the maximum height here in pixels if(hh==40) { clearInterval(interv); return; } obj = document.getElementById("coverlogin"); obj.style.visibility = 'visible'; hh+=2; obj.style.height = hh + 'px'; } function HideBox() { obj = document.getElementById("coverlogin"); if(hh==2) { obj.style.visibility = 'hidden'; obj.style.height = '0.1em'; clearInterval(interv); return; } hh-=2; obj.style.height = hh + 'px'; } [CODE] Can someone fix this for me? 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> Hi, I'm in need of a little help if possible please.... I would like to know if its possible to 'show' a div with the onscroll function with a javascript code? Basically, I scroll to the body position of 800 and it displays the div object. Hope ive explained correctly. Any help is hugely appreciated. Kind regards, paffley Hello Friends, I would like to get a div to show when a button has been clicked. I would like the div to be hidden when the page loads, and only to show when the button has been clicked. The button works - it hides and shows the div when clicked - but the div shows when the page loads when I want it to be hidden. This is the code I have: Code: <script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Cancel'){
document.getElementById('bt1').value = 'Change Currency';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Cancel';
document.getElementById(id).style.display = 'inline';
}
}
</script>
Body: Code: <div id="currency"><input type=button name=type id='bt1' value='Change Currrency' onclick="setVisibility('sub3');";>
</div>
I am still learning Javascript, any advice would be greatly appreciated. Thank you. ok trying to get a Div tag to show if something is True and hide if something is False JS Code: unction eToggle(anctag,darg)
{
var ele = document.getElementById('Module1');
var ele = document.getElementById('Module2');
var ele = document.getElementById('Module3');
var ele = document.getElementById('Module4');
if("module1" + "module2" + "module3" + "module4" <40)
{
div.id.Failed = "block";
div.Failed = "Failed";
}
else
{
div.style.Passed = "block";
div.Passed = "show";
}
}
HTML Code: <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b> <br /> </div> <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div> Hello, Does anyone know how to list all declared variables in JavaScript ? tnx css: Code: #nav{
width: 960px;
margin: 0 auto;
}
ul li{
float: left;
margin-right:50px;
list-style: none;
}
.sub-menu{
display: none;
}
jquery code: Code: $(function(){
("#nav ul li").hover(function() {
(".sub-menu").css("display","block");
});
html code: Code: <div id="nav">
<div class="left"></div>
<div class="right"></div>
<ul>
<li><a href="/" class="current">Home</a></li>
<li><a href="/cpanel.html" class="">cPanel</a>
<div class="sub-menu">
<h2>test</h2>
<p>
<a href="#">test</a> <a href="#">test</a> <a href="#">test<</a>
</p>
<p>
<a href="#">test</a> <a href="#">test</a> <a href="#">test<</a>
</p>
</div>
i am sorry, i am new of jquery.i want to show the sub nav part when the mouse hover on the `li` part. but my code doesn't work.how to correct it. thank you |
|||||||