|
JavaScript - Golf Page Not Working...need Help
The golf ball is supposedly to come out and bounce across the screen and land in the word golf.
Code:
<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 4
Case Problem 1
The Golf Page
Author: Cheryl Ashworth
Date: July 12, 2010
Filename: golfpage.htm
Supporting files: ball.gif, clouds.jpg, golf.js, golfer.gif, styles.css
-->
<title>The Golf Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="golf.js" type="text/javascript"></script>
<script type="text/javascript">
var x = new Array(-395, -389, -383, -377, -371, -365, -359, -353, -346,
-340, -334, -328, -322, -316, -310, -304, -297, -291, -285, -279, -273,
-267, -261, -255, -248, -242, -236, -230, -224, -218, -212, -206, -199,
-193, -187, -181, -175, -169, -163, -157, -150, -144, -138, -132, -126,
-120, -114, -108, -101, -95, -93, -91, -88, -86, -83, -81, -78, -76, -73,
-71, -69, -66, -64, -61, -59, -56, -54, -51, -49, -47, -44, -42, -39, -37,
-34, -32, -29, -27, -24, -22, -20, -17, -15, -12, -10, -7, -5, -2, 0);
var y = new Array(-300, -300, -300, -299, -298, -297, -296, -294, -292,
-290, -288, -285, -282, -279, -276, -272, -268, -264, -260, -255, -250,
-245, -240, -234, -228, -222, -216, -209, -202, -195, -188, -180, -172,
-164, -156, -147, -138, -129, -120, -110, -100, -90, -80, -69, -58, -47,
-36, -24, -12, 0, -5, -10, -14, -18, -22, -25, -29, -32, -34, -37, -39,
-41, -43, -45, -46, -47, -48, -48, -48, -48, -48, -48, -47, -46, -45, -43,
-42, -40, -37, -35, -32, -29, -26, -23, -19, -15, -11, -6, 0);
var index=0;
function moveBall()
{
if (index<=x.length-1) <!-- length check -->
{
placeIt("Ball", x[index], y[index]);
index++;
setTimeout("moveBall()",5)
}
else
{
showIt("Slogan");
}
</script>
<!-- External Javascripts -->
<script src="Golf.js"></script>
</HEAD>
<!-- Body -->
<BODY onLoad="moveBall()">
<!-- Title -->
<DIV ID="Title"
STYLE="padding-left:395;padding-top:260;padding-bottom:0;
border-style:solid; border-width:1 3 3 1; border-color:blue;
background-color:rgb(0,255,0)">
THE G<SPAN ID="Ball"STYLE="position:relative;left:0;top:0"><IMG SRC="Ball.gif" BORDER=0></SPAN>LF PAGE
</DIV>
<!-- Slogans -->
<DIV ID="Slogan"
STYLE="color:black; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold; position:absolute; left:120; top:100; z-index:2;visibility:hidden">
Your Online Source of Golf Equipment
</DIV>
<DIV ID="Slogan2"
STYLE="color:white; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold; position:absolute; left:121; top:101; z-index:1;visibility:hidden">
Your Online Source of Golf Equipment
</DIV>
<!-- End -->
</BODY>
</HTML>
*/ JS Script Code: Function List:
placeIt(id, x, y)
Places the id object at the coordinates (x, y)
showIt(id)
Shows the id object by setting the object visibility to "visible"
getFontSize(id)
Retrieves the font size of the id object
setFontSize(id, fs)
Sets the font size of the id object to fs
changeFontSize(id, dfs)
Changes the font size of the id object by dfs
*/
function placeIt(id, x, y) {
// Places the id object at the coordinates (x,y)
object=document.getElementById(id);
object.style.left=x+"px";
object.style.top=y+"px";
}
function getFontSize(id) {
// Returns the font size of the object with the value id
object=document.getElementById(id);
size=parseInt(object.style.fontSize);
return(size);
}
function setFontSize(id, ptsize) {
// Sets the font size of the object with the value id
object=document.getElementById(id);
object.style.fontSize = ptsize + "pt";
}
function changeFontSize(id, dfs) {
// Returns the font size of the object with the value id
fs = getFontSize(id);
setFontSize(id, fs+dfs);
}CSS
*/ Code: This file contains styles used in the golfpage.htm file Code:
body {font-family:Arial, Helvetica, sans-serif; font-size: 18pt;
color:blue; background-image: url(clouds.jpg)}
#Title {position: absolute; left:395px; top:260px}
#Ball {position:relative; top:0px; left:0px}
#Ball img {border-width: 0px}
#box {width:600px; height: 250px;
border-style:solid; border-width:1 4 4 1; border-color:blue;
background-color:rgb(0,255,0); text-align: center}
#slogan {visibility: hidden; position: relative; top: 50px;
color:black; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold}
*/ Similar TutorialsHi, I'm very new to programming, and for practice I tried to build a program that calculates a golfer's handicap based on the course they played and their score on each hole. The program is designed to cap a golfer's score at 2 over par. For some reason, the program works when the hole scores are at least 2 over par, but not any other time. Would someone mind taking a look at the code below and letting me know where I went wrong? I appreciate the help! Code: //Program designed to calculate golf handicap
//based on couse and scores on every hole.
var course = prompt("What Course?");
if (course === "Seneca"){
var AB = prompt("Course A or B");
if (AB === "A" || AB === "a"){
var rating = 35.45;
var slope = 56.5;
var side = prompt("Front or Back");
if (side === "Front" || side === "front"){
var par1 = 4;
var par2 = 4;
var par3 = 5;
var par4 = 3;
var par5 = 4;
var par6 = 4;
var par7 = 4;
var par8 = 5;
var par9 = 3;}
else {
var par1 = 4;
var par2 = 4;
var par3 = 4;
var par4 = 3;
var par5 = 4;
var par6 = 4;
var par7 = 5;
var par8 = 3;
var par9 = 4;}
}
else {
var rating = 35.8;
var slope = 57;
var side = prompt("Front or Back");
if (side === "Front" || side === "front"){
var par1 = 4;
var par2 = 4;
var par3 = 5;
var par4 = 3;
var par5 = 4;
var par6 = 4;
var par7 = 4;
var par8 = 4;
var par9 = 4;}
else {
var par1 = 4;
var par2 = 3;
var par3 = 5;
var par4 = 4;
var par5 = 3;
var par6 = 4;
var par7 = 4;
var par8 = 4;
var par9 = 4;}
}
}
else {
alert("Check Spelling");}
//Asking for scores by hole.
var hole1 = prompt("Hole 1 score?");
var hole2 = prompt("Hole 2 score?");
var hole3 = prompt("Hole 3 score?");
var hole4 = prompt("Hole 4 score?");
var hole5 = prompt("Hole 5 score?");
var hole6 = prompt("Hole 6 score?");
var hole7 = prompt("Hole 7 score?");
var hole8 = prompt("Hole 8 score?");
var hole9 = prompt("Hole 9 score?");
//Capping hole scores at two over par.
if (hole1 >= par1 + 2){
var handiScore1 = par1 + 2;}
else {var handiScore1 = hole1;}
if (hole2 >= par2 + 2){
var handiScore2 = par2 + 2;}
else {var handiScore2 = hole2;}
if (hole3 >= par3 + 2){
var handiScore3 = par3 + 2;}
else {var handiScore3 = hole3;}
if (hole4 >= par4 + 2){
var handiScore4 = par4 + 2;}
else {var handiScore4 = hole4;}
if (hole5 >= par5 + 2){
var handiScore5 = par5 + 2;}
else {var handiScore5 = hole5;}
if (hole6 >= par6 + 2){
var handiScore6 = par6 + 2;}
else {var handiScore6 = hole6;}
if (hole7 >= par7 + 2){
var handiScore7 = par7 + 2;}
else {var handiScore7 = hole7;}
if (hole8 >= par8 + 2){
var handiScore8 = par8 + 2;}
else {var handiScore8 = hole8;}
if (hole9 >= par9 + 2){
var handiScore9 = par9 + 2;}
else {var handiScore9 = hole9;}
//Testing to make sure hole scores come through OK
console.log(hole1, hole2, hole3, hole4, hole5, hole6, hole7, hole8, hole9);
console.log(par1, par2, par3, par4, par5, par6, par7, par8, par9);
console.log(handiScore1, handiScore2, handiScore3, handiScore4, handiScore5, handiScore6, handiScore7, handiScore8, handiScore9);
//Calculating total score
var score = [handiScore1, handiScore2, handiScore3, handiScore4, handiScore5, handiScore6, handiScore7, handiScore8, handiScore9];
var total = 0;
for (var i=0; i < score.length; i++){
total += score[i];}
//Calculating handicap
var a = (total - rating);
var b = (a * 56.5);
var c = (b / slope);
console.log(c);
I almost got part of this one program to work. It is of a golf sign with a golf ball moving across and landing in the word Golf into the "o" When the ball lands in the o the sign of "your online source of golf equipment" appears after ball has landed and grows in size. right now the ball is what I have but I can not get my sign to appear. I use 2 external files I will post all the coding here here is my main file I worked on this is my golfpage.htm file Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 4
Case Problem 1
The Golf Page
Author:
Date: 05 December 2010
Filename: golfpage.htm
Supporting files: ball.gif, clouds.jpg, golf.js, golfer.gif, styles.css
-->
<title>The Golf Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="golf.js" type="text/javascript"></script>
<script type="text/javascript">
var x = new Array(-395, -389, -383, -377, -371, -365, -359, -353, -346,
-340, -334, -328, -322, -316, -310, -304, -297, -291, -285, -279, -273,
-267, -261, -255, -248, -242, -236, -230, -224, -218, -212, -206, -199,
-193, -187, -181, -175, -169, -163, -157, -150, -144, -138, -132, -126,
-120, -114, -108, -101, -95, -93, -91, -88, -86, -83, -81, -78, -76, -73,
-71, -69, -66, -64, -61, -59, -56, -54, -51, -49, -47, -44, -42, -39, -37,
-34, -32, -29, -27, -24, -22, -20, -17, -15, -12, -10, -7, -5, -2, 0);
var y = new Array(-300, -300, -300, -299, -298, -297, -296, -294, -292,
-290, -288, -285, -282, -279, -276, -272, -268, -264, -260, -255, -250,
-245, -240, -234, -228, -222, -216, -209, -202, -195, -188, -180, -172,
-164, -156, -147, -138, -129, -120, -110, -100, -90, -80, -69, -58, -47,
-36, -24, -12, 0, -5, -10, -14, -18, -22, -25, -29, -32, -34, -37, -39,
-41, -43, -45, -46, -47, -48, -48, -48, -48, -48, -48, -47, -46, -45, -43,
-42, -40, -37, -35, -32, -29, -26, -23, -19, -15, -11, -6, 0);
var index=0;
var lastindex=x.length-1;
// var fs=getFontSize("slogan");
function moveBall() {
if (index <= lastindex) {
placeIt("Ball", x[index], y[index]);
index++;
setTimeout("moveBall()", 5);
} else {
setFontSize("slogan", 25);
}
}
</script>
</head>
<body onload="moveBall()">
<div id="Golfer" ><img src="golfer.gif" width="40px" alt="" /></div>
<div id="Title">
THE G<div style="display: inline; position: relative; background-color: black;"
><img id="Ball" src="ball.gif" alt="O"
/></div>LF PAGE
</div>
<div id="box"
style="">
<span id="slogan">
Your Online Source of Golf Equipment
</span>
</div>
</body>
</html>
Here is one external file where I made some functions this is the golf.js file Code: New Perspectives on JavaScript
Tutorial 4
Case Problem 1
The Golf Page
Name:
Date: 05 december 2010
Function List:
placeIt(id, x, y)
Places the id object at the coordinates (x, y)
showIt(id)
Shows the id object by setting the object visibility to "visible"
getFontSize(id)
Retrieves the font size of the id object
setFontSize(id, fs)
Sets the font size of the id object to fs
changeFontSize(id, dfs)
Changes the font size of the id object by dfs
*/
function showIt(id) {
object=document.getElementById(id);
object.style.visibility="visible";
}
function placeIt(id, x, y) {
// Places the id object at the coordinates (x,y)
object = document.getElementById(id);
object.style.left = x + "px";
object.style.top = y + "px";
}
function getFontSize(id) {
// Returns the font size of the object with the value id
object = document.getElementById(id);
size = parseInt(object.style.fontSize);
return (size);
}
function setFontSize(id, ptsize) {
// Sets the font size of the object with the value id
object = document.getElementById(id);
object.style.fontSize = ptsize + "pt";
}
function changeFontSize(id, dfs) {
// Returns the font size of the object with the value id
fs = getFontSize(id);
setFontSize(id, fs + dfs);
}
Here is the styles.css page Code: /*
New Perspectives on JavaScript
Tutorial 4
Case Problem 1
Filename: styles.css
This file contains styles used in the golfpage.htm file
*/
body {font-family:Arial, Helvetica, sans-serif; font-size: 18pt;
color:blue; background-image: url(clouds.jpg)}
#Title {position: absolute; left:395px; top:260px}
#Ball {position:relative; top:0px; left:0px}
#Ball img {border-width: 0px}
#box {width:600px; height: 250px;
border-style:solid; border-width:1 4 4 1; border-color:blue;
background-color:rgb(0,255,0); text-align: center}
#slogan {visibility: hidden; position: relative; top: 50px;
color:black; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold}
What i am not able to get work i think is to call the changeFontSize() function to increase the size of the "sign" also an if statement to test value of fs variable is less then equal to 20 how do i get my sign to appear on the output? thanks I have this stableford point counter which works perfect, but... I also wants to make one for modyfied stableford... A little explanation is in order. Stableford is a point system for golfers depending on how good they are and how difficult a course is. So a par4 hole should if you are Tiger Woods be played in 4 strokes, and that would give him 2 points, but... A player can be awarded extra strokes to a hole depending on there handicap, so if a player has been awarded 1 extra hole, this players par would be 5 and that would give him 2 points. If he uses 1 stroke less (4) he would get 3 points and so on, and if uses 1 stroke more (6) he would get 1 point and 2+ strokes more (7) he would get 0 point. For this I have this script: Code: function stableford_calc(){
var holes_par = new Array(<? echo $p1.",".$p2.",".$p3.",".$p4.",".$p5.",".$p6.",".$p7.",".$p8.",".$p9.",".$p10.",".$p11.",".$p12.",".$p13.",".$p14.",".$p15.",".$p16.",".$p17.",".$p18; ?>); // Par //
var holes_si = new Array(<? echo $h1.",".$h2.",".$h3.",".$h4.",".$h5.",".$h6.",".$h7.",".$h8.",".$h9.",".$h10.",".$h11.",".$h12.",".$h13.",".$h14.",".$h15.",".$h16.",".$h17.",".$h18; ?>); // HCP Key //
var hcap = validNum(document.form2.strokecount.value); // Number of extra strokes //
for (i=0; i<=17; i++) {
var shots = validNum(document.form2["stroke"+i].value); // Actual strokes //
var par = holes_par[i];
var si = holes_si[i];
var maxallow = 0;
if (hcap < 0) {
var diff = hcap + 18;
maxallow = (diff >= si) ? 0 : -1;
} else if (hcap > 72) {
var diff = hcap - 72;
maxallow = (diff >= si) ? 5 : 4;
} else if (hcap > 54) {
var diff = hcap - 54;
maxallow = (diff >= si) ? 4 : 3;
} else if (hcap > 36) {
var diff = hcap - 36;
maxallow = (diff >= si) ? 3 : 2;
} else if (hcap > 18) {
var diff = hcap - 18;
maxallow = (diff >= si) ? 2 : 1;
} else {
maxallow = (hcap >= si) ? 1 : 0;
}
var score = shots - maxallow;
var points = (par - score) + 2;
if (points < 0) points = 0;
if ((document.form2["stroke"+i].value== "") || (document.form2["stroke"+i].value== 0)) {
document.form2["p"+i].value="0";
} else {
document.form2["p"+i].value = points;
}
/*if (document.form2["stroke"+i].value===''){
document.form2["p"+i].value="0"
} else {
document.form2["p"+i].value = points;
}*/
}
var i,a=[];
for (i=0; i<=17; i++){
a[i]=validNum(document.form2["p"+i].value);
}
var st_out = a[0] + a[1] + a[2] + a[3] + a[4] + a[5] + a[6] + a[7] + a[8];
var st_in = a[9] + a[10] + a[11] + a[12] + a[13]+ a[14] + a[15] + a[16] + a[17];
document.form2.p_out.value = st_out;
document.form2.p_in.value = st_in;
document.form2.p_total.value = st_out + st_in;
}
Now, in modyfied stableford its a bit different. If a player uses his awarded amount of strokes + the holes par he would get 0 point. If he uses a stroke less (birdie) he would get 2 point. 2 strokes less (eagle) 5 points and 3+ strokes less (albatros) 8 points. If he uses 1 stroke more (bogey) he would get -1 point and 2+ strokes more -3 point... I would think that I could reuse the most of the above script, but not sure how to get the points in the right place... Hope this makes some sense, and apreciates any kind of help... Hi, I have a page here http://95.131.66.39/~pestcont/autosearch/form_new.html As you will see in the product model number once you start typing the page looks up the info from the database. The problem was the page was very long so i have taken the javascript and placed it in a seperate file, however now the auto look up doesn't work and i can not work out why. The second page is he http://95.131.66.39/~pestcont/autosearch/new_form.html Any help would be appreciated. thanks When i click on an image, it just opens in a new tab, lightbox doesn't work?! PHP Code: $jq_add_div_strings = ''; $jq_div_classes_csv = ''; $counter = 0; //startarray $bikearray = array(); //$query = "SELECT * FROM wmb_members ORDER BY rsDatetaken DESC LIMIT $offset, $rowsPerPage"; //$query = "SELECT * FROM wmb_members LEFT JOIN wmb_pics ON wmb_pics.UserID=wmb_members.UserID ORDER BY rsDatetaken DESC LIMIT $offset, $rowsPerPage"; $query = "SELECT M.*, P.picid, P.filename " . " FROM ( SELECT * " . " FROM wmb_members " . " ORDER BY rsDateTaken DESC, UserID ASC " . " LIMIT " . $offset . "," . $rowsPerPage . " ) AS M " . " LEFT JOIN wmb_pics AS P " . " ON M.UserID = P.UserID " . " ORDER BY M.rsDateTaken DESC, M.userID ASC, P.picid ASC;"; //$query = "SELECT wmb_members.*, wmb_pics.* FROM wmb_members INNER JOIN wmb_members ON wmb_members.UserID=wmb_pics.UserID ORDER BY rsDatetaken DESC LIMIT $offset, $rowsPerPage"; $result = mysql_query($query); $num_rows = mysql_num_rows($result); //echo "DEBUG SQL: " . $query . "<HR>"; //echo "DEBUG: query returned " . $num_rows . " rows<hr>\n"; // remember the UserID of the prior row ... no prior row to start, so blank: $priorid = ""; while ($row = mysql_fetch_assoc($result)) { // get the UserID for the current row in the results $curid = $row['UserID']; // if not the same as the prior row, then create a new set of data in the bikearray: if ( $curid != $priorid ) { // I'm guessing that this stuff goes he $jq_add_div_strings .= "animatedcollapse.addDiv('jason$counter', 'hide=1', 'fade=1,height=180px')\n"; $jq_div_classes_csv .= "'jason$counter',"; // on firmer footing here...this should be right: // store main data array $bikearray[$curid]['UserID'] = $curid; $bikearray[$curid]['rsBikeman'] = $row['rsBikeman']; $bikearray[$curid]['rsBikemod'] = $row['rsBikemod']; $bikearray[$curid]['rsBikeyear'] = $row['rsBikeyear']; $bikearray[$curid]['rsBikecolor'] = $row['rsBikecolor']; $bikearray[$curid]['rsDatetaken'] = $row['rsDatetaken']; $bikearray[$curid]['rsLocation'] = $row['rsLocation']; $bikearray[$curid]['rsOtherinfo'] = $row['rsOtherinfo']; $bikearray[$curid]['rsLocpostcode'] = $row['rsLocpostcode']; $bikearray[$curid]['rsLocked'] = $row['rsLocked']; $bikearray[$curid]['lockType'] = $row['lockType']; $bikearray[$curid]['frontSus'] = $row['frontSus']; $bikearray[$curid]['rearSus'] = $row['rearSus']; $bikearray[$curid]['frontLight'] = $row['frontLight']; $bikearray[$curid]['rearLight'] = $row['rearLight']; $bikearray[$curid]['bikeBell'] = $row['bikeBell']; $bikearray[$curid]['bikeBasket'] = $row['bikeBasket']; $bikearray[$curid]['bikeBag'] = $row['bikeBag']; $bikearray[$curid]['rsUser'] = $row['rsUser']; $bikearray[$curid]['rsEmail'] = $row['rsEmail']; // How do you specify an empty array in PHP?? $bikearray[$curid]['pictures'] = array(); // This is how many pictures there are for current UserID: $piccount = 0; $counter++; // and change priorid for the match test at top of loop $priorid = $curid; } // then regardless if new userid or a repeated userid... // see if this record has a valid (non null, non blank) filename: $pic = $row['filename']; if(!empty($pic)) { // yes...a valid filename...so add it to the array $bikearray[$curid]['pictures'][$piccount] = $pic; // and count it ++$piccount; } } $jq_div_classes_csv = rtrim($jq_div_classes_csv,","); $bikearray_html = array(); $i = 0; foreach ($bikearray as $id=>$DETAILS) { @$bikearray_html[$i] .= "<div id=\"pubholder\" class=\"wrap\">"; $bikearray_html[$i] .= "<div class=\"entry_header\">"; $bikearray_html[$i] .= "<a href=\"javascript:animatedcollapse.show('jason$i')\" >show more details ></a> "; $bikearray_html[$i] .= "<a href=\"javascript:animatedcollapse.hide('jason$i')\" >hide ^</a>"; $bikearray_html[$i] .= "<div><b>".$DETAILS['rsUser']."'s ".$DETAILS['rsBikeman']." ".$DETAILS['rsBikemod']."</b> was taken from <b>".$DETAILS['rsLocation']."</b> on <b>".$DETAILS['rsDatetaken']."</b></div>"; $bikearray_html[$i] .= "<div id=\"jason$i\">\n"; $bikearray_html[$i] .= "</br></br>"; $bikearray_html[$i] .= "<b>Owners email:</b> <a href=\"mailto:".$DETAILS['rsEmail']."\"> ".$DETAILS['rsEmail']."</a></br>"; $bikearray_html[$i] .= "<b>Bike year:</b> ".$DETAILS['rsBikeyear']." </br>"; $bikearray_html[$i] .= "<b>Bike color:</b> ".$DETAILS['rsBikecolor']." </br>"; $bikearray_html[$i] .= "<b>Locked:</b> ".$DETAILS['rsLocked']." </br>"; $bikearray_html[$i] .= "<b>Lock type:</b> ".$DETAILS['lockType']." </br>"; $bikearray_html[$i] .= "<b>additional extras:</b></br> <i> Front suspension: ".$DETAILS['frontSus']."</br> Rear suspension: ".$DETAILS['rearSus']."</br> Front Light: ".$DETAILS['frontLight']."</br> Rear Light: ".$DETAILS['rearLight']."</br> Bell: ".$DETAILS['bikeBell']."</br> Basket: ".$DETAILS['bikeBasket']."</br> Bag: ".$DETAILS['bikeBag']."</i></br>"; $bikearray_html[$i] .= "<b>Other info:</b> ".$DETAILS['rsOtherinfo']." </br>"; if(!empty($DETAILS['pictures'])){ foreach($DETAILS['pictures'] as $piccount => $pic){ [B]$bikearray_html[$i] .= "<a href=\"upload/".$pic."\" rel=\"lightbox[bikes]\" border=\"0\"><img src=\"upload/".$pic."\" height=\"75\" width=\"100\" \></a>[/B] "; // do what you want here } }else{ // no picture for this user } $bikearray_html[$i] .= "</br>"; $bikearray_html[$i] .= "</div>\n"; $bikearray_html[$i] .= "</div>\n"; $bikearray_html[$i] .= "</div>\n"; $i++; } mysql_close($link); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title>Stolen Bikes, mountain bikes, bmx bikes, Other cycles and bicycles in the UK</title> <meta name="description" content="Website to help people get their stolen bikes back" /> <meta name="keywords" content="stolen, thief, mountain bike, bicycle, UK, nicked, MTB" /> <meta name="Content-Language" content="en-gb" /> <meta name="robots" content="FOLLOW,INDEX" /> <meta name="revisit-after" content="2 days" /> <meta name="copyright" content="www.wheresmybike.co.uk" /> <meta name="author" content="www.mutecms.com - Professional web site design in the south uk, worthing, brighton" /> <meta name="distribution" content="Global" /> <meta name="resource-type" content="document" /> <script type="text/javascript"> swfobject.registerObject("myId", "9.0.0", "expressInstall.swf"); </script> [B]<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />[/B] <link rel="stylesheet" type="text/css" href="css/reset-style.css" /> <link rel="stylesheet" type="text/css" href="css/sitestyle.css" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> [B]<script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript" src="js/external.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>[/B] <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/jva.js"></script> <script type="text/javascript" src="jquery-1.2.2.pack.js"></script> <script type="text/javascript" src="animatedcollapse.js"></script> <script type="text/javascript"> animatedcollapse.init() <?php echo $jq_add_div_strings; ?> </script> </head> <body> <div id="doc"> <div id="hd"> <h1>Where's my bike?</h1> <div class="manbike"></div> <div class="cctv"></div> <ul> <li><a href="default.php" title="Homepage and News">home</a></li> <li><a href="bike.html" title="Featured Bike">the bike</a></li> <li><a href="thieves.html" title="Featured Thief">the thief</a></li> <li><a href="cctv.html" title="CCTV Footage">the CCTV</a></li> <li><a href="signup.php" title="Sign Up">sign up</a></li> <li><a href="stolen-bikes.php" title="Stolen Bikes">stolen bikes</a></li> <li><a href="login.php" title="Login">login</a></li> <li><a href="yoursay.php" title="Have your say">your say</a></li> <li><a href="forum.html" title="Forum">forum</a></li> </ul> </div> <div id="bd"> <div class="yui-g"> <div class="topcontent"> </div> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> <a href="javascript:animatedcollapse.show([<?php echo $jq_div_classes_csv; ?>])">show all<img src="images/down.gif" border="0" /></a> <a href="javascript:animatedcollapse.hide([<?php echo $jq_div_classes_csv; ?>])"><img src="images/up.gif" border="0" />hide all</a> <?php foreach ($bikearray_html as $html) echo $html; ?> <?php echo $first.$prev; ?> Showing page <strong><?php echo $pageNum;?></strong> of <strong><?php echo $maxPage;?></strong> pages <?php echo $next.$last; ?> </div> </div> <div id="ft">Site created by: <a href="http://www.jbiddulph.com">jbiddulph.com</a></div> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-2434589-16"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html> http://www.wheresmybike.co.uk/stolen-bikes.php?page=2 I have a tab that scrolls through images in a frame through javascript. It works in one page, but not the other. I'm trying to get the page not working to work, obviously. I also have checked and temporarily fixed validation errors, and that doesn't help. Working page: www.happydogwebproductions.com Same images in different page: http://www.happydogwebproductions.co...--css-websites I've been trying the "BDirect lists" on both pages. Java: "new SimpleSlide". Just when I think I am close, I can't get it to work. Going mental. Thanks for any help Hey: I have two javascripts on my page but one isn't showing with both codes in page. [CODE]<script type="text/javascript" src="js/image-slideshow.js"></script>[ICODE] The above code is for the image slide. When this is in the html the other one doesn't work (a text changer). The wbesite is http://www.uwics.com/constitution.htm There is no text at the top of the page currently. If you check Home you'll see how it should be. Any help would be greatly appreciated. Thank you, Mitka Hi .. I should start off saying I dont know the first thing about java script programming. I have 3 scripts on one of my pages, the first script is for a slide animation, the second is a hover intent script and the third is a headline animation script. I know if I comment out the hover intent script, the first and third script work. So my question is how to get the hover intent script to work correctly and behave with the other 2 scripts on the page. I read your post on "on body load" or "runscripts" calls with 2 scripts but I could not find such calls in these 3 javascripts. The hover intent script does not do what I want it to do on any of the pages that I have installed it on. When you first load the page the menu items are sitting above the slideshow and when you hover your mouse over the navigation from left to right they sort of jump and its not until you get to the contact image at the end that the slideshow moves into the correct position and then if you go back and hover over the home image the slideshow jumps up and down. The three script page is http://www.kimberleywebdesign.com.au/test/reviews.html Thanks in advance for your valuable time. I am trying to use these two js codes in one page: http://acrisdesign.com/2010/03/jquer...on-hoverclick/ http://www.huddletogether.com/projects/lightbox2/ They both work perfectly fine except when both linked up at the same time. Only the last one will work. I've tried to find how the codes are working when the page loads in order to fix that problem but I cant figure it out for these two specific codes. Thanks. Hi All I have page peel on my site www.lightuplondon.com which works in firefox but not in internet explorer, but can't work out why? If any one can help me with this it would be much appreciated. Thanks Stewart I know this is a common problem, and each slide show script is a bit different and I can't get this to work exactly right: http://www.javascriptkit.com/script/...ifferent.shtml I've got two tables containing mouseover image "slide" shows - numbered sequentially but both are on the same index.html page. One image show comes up with the first navigation link, the second image show comes up with the second navigation link. The first image show works, the second doesn't - could you tell me what is causing that. there is a javascript glider that requires them both to be on the same page. link to the page here . . . http://www.sunupdesignbuild.com/NEW/index.html appreciate your help thank you T Hey guys, On my personal website, I just created a rollover image gallery using Javascript. Each time you roll over a thumbnail, the image above changes to the corresponding thumbnail image. http://www.thelittlelizzard.com/Bahamas.html After spending hours getting that to work properly, my footer is now showing as one huge blue link. I believe I'm forgetting to close a tag somewhere? Being new to Javascript, I don't have a clue what I am forgetting to close to cause my footer to become a huge blue link like that. Does anyone have any ideas? Here is a copy of the code of my body section where I believe the problem may be... Code: <p>Where we stayed: <a href="http://www.starwoodhotels.com/sheraton/property/overview/index.html?propertyID=3067" onclick="window.open(this.href);return false;">Radisson Cable Beach Resort</a> (Now called Sheraton Nassau Cable Beach): </p>
<p>Dates we travelled: March 2004, 2005 and 2006</p>
<p>Flight Time from New York: 2.5 hours</p>
<br /><br />
<div id="divcenter">
<p><img align="center" border="0" src="Bahamas/bahamas.jpg" style="border-right: 1 solid #006666" name="altimg" width="548" height="316" /> </p>
<p>
<a onmouseover="on('image1');" onmouseout="off('image1')">
<img src="Bahamas/bahamas.jpg" width="45" height="45"></a>
<a onmouseover="on('image2');" onmouseout="off('image2')">
<img src="Bahamas/bahamas-1.jpg" width="45" height="45"></a>
<a onmouseover="on('image3');" onmouseout="off('image3')">
<img src="Bahamas/bahamas-2.jpg" width="45" height="45"></a>
<a onmouseover="on('image4');" onmouseout="off('image4')">
<img src="Bahamas/bahamas-3.jpg" width="45" height="45"></a>
<a onmouseover="on('image5');" onmouseout="off('image5')">
<img src="Bahamas/bahamas-4.jpg" width="45" height="45"></a>
<a onmouseover="on('image6');" onmouseout="off('image6')">
<img src="Bahamas/bahamas-5.jpg" width="45" height="45"></a>
<a onmouseover="on('image7');" onmouseout="off('image7')">
<img src="Bahamas/bahamas-6.jpg" width="45" height="45"></a>
<a onmouseover="on('image8');" onmouseout="off('image8')">
<img src="Bahamas/bahamas-7.jpg" width="45" height="45"></a>
<a onmouseover="on('image9');" onmouseout="off('image9')">
<img src="Bahamas/bahamas-8.jpg" width="45" height="45"></a>
<a onmouseover="on('image10');" onmouseout="off('image10')">
<img src="Bahamas/bahamas-9.jpg" width="45" height="45"></a>
<a onmouseover="on('image11');" onmouseout="off('image11')">
<img src="Bahamas/bahamas-10.jpg" width="45" height="45"></a>
<a onmouseover="on('image12');" onmouseout="off('image12')">
<img src="Bahamas/bahamas-11.jpg" width="45" height="45"></a>
<a onmouseover="on('image13');" onmouseout="off('image13')">
<img src="Bahamas/bahamas-12.jpg" width="45" height="45"></a> <a onmouseover="on('image14');" onmouseout="off('image14')">
<img src="Bahamas/bahamas-13.jpg" width="45" height="45"></a> <a onmouseover="on('image15');" onmouseout="off('image15')">
<img src="Bahamas/bahamas-14.jpg" width="45" height="45"></a> <a onmouseover="on('image16');" onmouseout="off('image16')">
<img src="Bahamas/bahamas-15.jpg" width="45" height="45"></a> <a onmouseover="on('image17');" onmouseout="off('image17')">
<img src="Bahamas/bahamas-16.jpg" width="45" height="45"></a> <a onmouseover="on('image18');" onmouseout="off('image18')">
<img src="Bahamas/bahamas-17.jpg" width="45" height="45"></a> <a onmouseover="on('image19');" onmouseout="off('image19')">
<img src="Bahamas/bahamas-18.jpg" width="45" height="45"></a> <a onmouseover="on('image20');" onmouseout="off('image20')">
<img src="Bahamas/bahamas-19.jpg" width="45" height="45"></a> <a onmouseover="on('image21');" onmouseout="off('image21')">
</div>
</div>
<div id="footer">
<p>© 2009 TheLittleLizzard.com<br>
All images and content on this website are owned by The Little Lizzard.</br>
</p>
<p>All rights reserved. </p>
<p><a href="http://www.TheLittleLizzard.com">Home</a> <a href="http://www.ScreamingLizzardProductions.com" onclick="window.open(this.href);return false;">Site Design</a></p>
</div>
</div>
</body>
Thanks again for any help. This is one of the only places I get real answers that solve my problems! Hi all, I have a script that checks and unchecks all boxes depending on the current state of the box. I have used it on one page and it works perfectly fine... copied it over to a new page where I wanted to reuse and can't get it to work. Code: <script type="text/javascript">
function check_all(form, input_name, self){
if(!input_name){
return;
}
var input = form.getElementsByTagName('input');
for(var i = 0; i < input.length; i++){
if(input[i].name.indexOf(input_name)!=-1){
input[i].checked = self.checked;
}
}
}
</script>
Code: <input type="checkbox" name="notimportant" onclick="check_all(document.form1, 'check', this)" value="test" /><b>All</b> Code: <input type="checkbox" name="check_list[]" value="<?php echo $row2['email'];?>"> Code: <form name="form1" action="emailspecificcandidates.php" method="post"> As I say this script works perfectly on another page, and as far as i can see i have copied everything over correctly. Can anyone spot anything wrong? Many thanks, Greens85 EDIT: I think this may be broken because of the way I presenting it with php on my page... i copied a seperate entity of the script onto the page and it worked first time. hi, When I navigate to a page with Ajax on my iphone or ipad, it doesn't show up, page is just blank, I have checked for errors and there is no errors?! here is my Ajax code Code: function datecheckFunction(){
var datecheckRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
datecheckRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
datecheckRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
datecheckRequest.onreadystatechange = function(){
if(datecheckRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = datecheckRequest.responseText;
}
}
var datepicker = document.getElementById('datepicker').value;
var queryString = "?datepicker=" + datepicker;
//Add the following line
datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true);
datecheckRequest.send(null);
}
I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! Hi All, I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things. On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below. *working* link http://pics.boasbysatyra.com/access/spiders.php This one only works in FF, and the clip area is offset badly. Here is the template for the zc code: Code: <div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
And the JS for the page: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {
initMenu();
});
Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area! http://jb.boasbysatyra.com/forum-pic...cs/nature.html Code: div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
</div>
On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking... Here is the JS: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
//When page loads...
$(".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 href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
(function($) {
$(document).ready(function(){
$('.menu1').ptMenu();
$('.menu2').ptMenu({vertical:true});
});
})(jQuery);
I have taken a look at this for a few days and tried many things with no luck, any help is appreciated. Thanks! Ok, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me? Thanx in advance. hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help I just wrote an essay to discover it had logged me out and I lost everything. Grrrrrrr. Here goes again, simplified this time. I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over. The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic. My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it? I've tried all morning with no success so far! Thanks, Nick, I'm copy pasting this post this time round, I don't trust this website now |
|||||||