|
JavaScript - Newb Needs Help Please - 2 Scripts On Same Page
I know this has probably been asked many times, but as a total newb I am struggling to find the answer.
This page : www.imovecornwall.org/index.htm has two scripts on it, a peicemaker lightbox animation (which works perfectly fine) and a Fancybox script that launches modal windows onclick. The problem is when you launch the fancybox script the screen displays both the Fancybox script and the Peicemaker script. the code is Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox_multiple/fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox_multiple/fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox_multiple/fancybox/fancybox/jquery.fancybox-1.3.4.css" />
<link rel="stylesheet" href="fancybox_multiple/fancybox/style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("a.pop").fancybox({
'overlayColor' : '#000',
'overlayOpacity' : 0.8
});
$("a.pop2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-10061181-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
function FP_changePropRestore() {//v1.0
var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe[i];
if(x.v=="") x.v=""; eval("x."+x.n+"=x.v"); } d.$cpe=null; }
}
function FP_changeProp() {//v1.0
var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o";
ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) {
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
</script>
</head>
<body background="images/bg.gif" onload="FP_preloadImgs(/*url*/'images/redbadge.png')">
<div style="position: absolute; width: 1001px; height: 606px; z-index: 2; left: 92px; top: 190px" id="layer2">
<div style="position: absolute; width: 566px; height: 44px; z-index: 1; left: 414px; top: 676px" id="layer9" align="right">
<font face="Trebuchet MS" size="1">Copyright 2011 . imove cornwall . not
for profit estate agents in cornwall . a community lead social
enterprise</font><p><font face="Trebuchet MS" size="1">
imove estate agents cornwall, cornwall estate agents, imove cornwall,
imove, i move, not for profit estate agents, estate agents in cornwall,
houses for sale in cornwall, sell privately, private house sales
cornwall, i move cornwall, i move estate agents</font></div>
<img border="0" src="images/c-head.png" width="980" height="40"><div style="position: absolute; width: 420px; height: 415px; z-index: 2; left: 0px; top: 40px; border-left: 1px solid #DEDBD2; border-right: 1px solid #DEDBD2" id="layer10" align="left">
<div style="position: absolute; width: 1001px; height: 100px; z-index: 1; left: -2px; top: 495px" id="layer11">
<a title="click here for information about imove estate agents" href="about/index.htm">
<img border="0" src="images/_front-small_2.png" width="327" height="135" alt="imove estate agents cornwall"></a><a href="search.htm"><img border="0" src="images/_front-small2_blank3.png" width="324" height="135"></a><a href="sell.htm"><img border="0" src="images/_front-smallr_blank.png" width="330" height="135"></a></div>
<p align="center">
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="978" height="495">
<param name="movie" value="piecemaker.swf">
<param name="quality" value="High">
<embed src="piecemaker.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="978" height="495"></object>
</div>
<address>
<a href="sell.htm">
<img border="0" src="resized_png_images/head_new_template.png" width="980" height="416"></a></address>
<address>
</address>
<address>
</address>
</div>
<div style="position: absolute; width: 191px; height: 227px; z-index: 1; left: 93px; top: 11px" id="layer1">
<p align="center">
</p>
<address align="left">
<img border="0" src="images/logo_2_72dpi_small.png" width="177" height="176"></address>
<address align="center">
</address>
<p align="left">
</p>
<p align="center"> </div>
<div style="position: absolute; width: 116px; height: 121px; z-index: 4; left: 1020px; top: 34px" id="layer36">
<a title="Click here to sell with imove" href="sell.htm">
<img border="0" src="images/bluebadge.png" width="133" height="133" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/redbadge.png')"></a></div>
<p align="center"> </p>
<div style="position: absolute; width: 171px; height: 58px; z-index: 3; left: 327px; top: 61px" id="layer33">
<a class="pop" href="resized_png_images/modal1.png" rel="group1">
<img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a><address>
<span style="font-style: normal"><font face="Myriad Pro" size="1"> </font></span></address>
<address>
<span style="font-style: normal"><font face="Myriad Pro">Not for
profit</font></span></address>
</div>
<div style="position: absolute; width: 225px; height: 58px; z-index: 3; left: 522px; top: 61px" id="layer34">
<address>
<span style="font-style: normal">
<a class="pop" href="resized_png_images/modal2.png" rel="group1">
<img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a></span></address>
<address>
<font size="1"><span style="font-style: normal"> </span></font></address>
<address>
<span style="font-style: normal"><font face="Myriad Pro">Cost
effective</font></span></address>
</div>
<div style="position: absolute; width: 282px; height: 58px; z-index: 3; left: 721px; top: 61px" id="layer35">
<address>
<span style="font-style: normal">
<a class="pop" href="resized_png_images/modal3.png" rel="group1">
<img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a></span></address>
<address>
<font size="1"><span style="font-style: normal"> </span></font></address>
<address>
<span style="font-style: normal"><font face="Myriad Pro">Supporting
local good causes</font></span></address>
</div>
<p align="center"> </p>
<p align="center"> </p>
<div style="position: absolute; width: 657px; height: 50px; z-index: 3; left: 262px; top: 194px" id="layer13">
<div style="position: absolute; width: 130px; height: 44px; z-index: 1; left: 679px; top: 1px" id="layer14">
<a title="Join us on Facebook" href="http://www.facebook.com/pages/Truro-United-Kingdom/Imove-cornwall/121184304626633">
<img border="0" src="images/FaceBook-icon.png" width="33" height="33"></a>
<img border="0" src="images/Twitter-icon.png" width="33" height="33">
<img border="0" src="images/Feed-icon.png" width="33" height="33"></div>
<p><font face="Myriad Pro">
<a title="Back to the Homepage" href="index.htm" style="text-decoration: none">
<font color="#000000" id="id1" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id1',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')">
home</font></a>
<a title="About imove" style="text-decoration: none" href="about/index.htm">
<font color="#000000" id="id2" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id2',1,'style.textDecoration','underline','style.color','#000000','style.fontFamily','Myriad Pro','style.fontSize','12pt')">
about</font></a>
<a title="Property for sale with imove" href="search.htm" style="text-decoration: none">
<font color="#000000" id="id3" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id3',1,'style.textDecoration','underline','style.color','#000000','style.fontSize','12pt','style.fontFamily','Myriad Pro')">
property search</font></a>
<a title="Sell your property with imove" href="sell.htm" style="text-decoration: none">
<font color="#000000" id="id4" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id4',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')">
sell your property</font></a>
<a title="Support for existing customers of imove" href="support.htm" style="text-decoration: none">
<font color="#000000" id="id5" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id5',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')">
support</font></a>
<a title="Contact imove cornwall" href="contact.htm" style="text-decoration: none">
<font color="#000000" id="id6" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id6',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')">
contact us</font></a></font></div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</body>
</html>
I know it's probably something really simple but I'm totally lost. Any help would be very much appreciated. Similar TutorialsIv got a scrolling menu on my page using... Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script type="text/javascript" src="scripts.js"></script> and i want to add a lightbox... Code: <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> however whichever one is at the bottom is the only one that works? Can anyone please explain why this is? I gues they conflict? I read about window.onload but neither has that i also tried. Code: onLoad="initLightbox();" in my body tag. Any help greatly apreciated, im hoping theres an easy fix! :-) Hi guys, I'm working on a site where I need to use javascript for two things on the same page: a slideshow and an inquiry form (more specifically, a popup calendar on the inquiry form). The problem is, I can't get them to work simultaneously. Whichever script is at the bottom of the head section is the one that works. So right now, the calendars are working just fine and the slideshow is not. If I move the slideshow script to the bottom of the head, it works perfectly but the calendars refuse to pop up. This is the test site if you need to see exactly what I'm referring to (username: testsite, password: enter) It seems that whichever script is placed on the bottom of the head section is overriding the other. Both scripts are from independent sources, so I have no idea what needs to be done here. Any help would be greatly appreciated! From my current head section, this is the bit that's required for the slideshow: Code: <link rel="stylesheet" type="text/css" href="images/slideshow/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="images/slideshow/js/mootools.js"></script>
<script type="text/javascript" src="images/slideshow/js/visualslideshow.js"></script>
And this is the part that's required for the calendars: Code: <script type="text/javascript">
function go()
{
location=document.forms[0].gowhere.value;
}
</script>
<script type="text/javascript">
var a = new Image(); a.src = 'menu1.jpg';
var b = new Image(); b.src = 'menuhover1.jpg';
var c = new Image(); c.src = 'menu2.jpg';
var d = new Image(); d.src = 'menuhover2.jpg';
var e = new Image(); e.src = 'menu3.jpg';
var f = new Image(); f.src = 'menuhover3.jpg';
var g = new Image(); g.src = 'menu4.jpg';
var h = new Image(); h.src = 'menuhover4.jpg';
</script>
<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{
if (form.salutation.value == "") {
alert( "Please enter your salutation." );
form.salutation.focus();
return false ;
}
if (form.first_name.value == "") {
alert( "Please enter your first name." );
form.first_name.focus();
return false ;
}
if (form.last_name.value == "") {
alert( "Please enter your last name." );
form.last_name.focus();
return false ;
}
if (form.email.value == "") {
alert( "Please enter your email address." );
form.email.focus();
return false ;
}
if (form.country.value == "") {
alert( "Please enter your country of residence." );
form.country.focus();
return false ;
}
if (form.indate.value == "") {
alert( "Please enter your check-in date." );
form.email.focus();
return false ;
}
if (form.outdate.value == "") {
alert( "Please enter your check-out date." );
form.email.focus();
return false ;
}
if (form.elements['00NA000000269Gz'].value == "") {
alert( "Please enter the no. of bedrooms requested." );
form.elements['00NA000000269Gz'].focus();
return false ;
}
if (form.elements['00NA000000269H4'].value == "") {
alert( "Please enter the no. of adults." );
form.elements['00NA000000269H4'].focus();
return false ;
}
if (form.elements['00NA000000269H9'].value == "") {
alert( "Please enter the no. of children." );
form.elements['00NA000000269H9'].focus();
return false ;
}
return true ;
}
//-->
</script>
<style type="text/css">
@import "css/jquery.datepick.css";
/* Or use these for a ThemeRoller theme instead
@import "themes16/southstreet/ui.all.css";
@import "css/ui-southstreet.datepick.css";
*/
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {
// $.datepick.setDefaults({useThemeRoller: true});
$('#indate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});
$('#outdate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});
});
function showDate(dateStr, date) {
if (this.id == 'indate') {
$('#outdate').datepick('option', 'minDate', date);
var dateString = date;
var myDate = new Date(dateString);
$('#00NA000000268NL').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())
}
else {
$('#indate').datepick('option', 'maxDate', date);
var dateString = date;
var myDate = new Date(dateString);
$('#00NA000000268NQ').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())
}
}
//function showDate(date) {
// $('#00NA000000268NQ').datepick.minDate = new Date(date);
// $('#00NA000000268NL').val(date)
//}
function showDate2(date) {
// $('#00NA000000268NQ').val(date)
}
</script>
Any ideas? Do you need me to post links to or codes from the js files or stylesheets? Anything more that I can provide to get this resolved, just let me know. Thanks in advance! Hi all, I am a complete novice to pretty much everything internet but have managed to put together a site that I am trying to get off of the ground. Here is the problem that I am having. The first script below is for a script that shows up in my sidebar and is available on every page of my site. The second script is one that I intend to use on only one specific page. Both of the scripts function properly on their own but not when I try to use them as intended. As mentioned in the FAQ, I tried to name all of the variables with unique names but that still does not work. Any suggestions would be greatly appreciated!! This code is in my sidebar on every page: Code: <script type="text/javascript">
<!--
function calculate() {
var doc = document.pointCalc;
var points = 0;
var fiber = doc.fiber.value;
var fat = doc.fat.value;
var calories = doc.calories.value;
points = (calories / 50) + (fat / 12) - (fiber / 5);
doc.result.value = Math.round(points);
}
// -->
</script>
<center>
<br/>
<br/>
<div class="storyTitle"><b>Approximate Points Calculator</b></div>
<div class="storyContent">
<form name="pointCalc">
<table><tr>
<tr><td>Calories:</td><td><input name="calories" type="text"/></td></tr>
<tr><td>Fat:</td><td><input name="fat" type="text"/></td></tr>
<tr>
<td>Fiber:</td>
<td>
<select name="fiber">
<option value="0"/>0
<option value="1"/>1
<option value="2"/>2
<option value="3"/>3
<option value="4"/>4 or more
</select>
</td>
</tr>
<tr><td colspan="2"><input value="Calculate" onclick="calculate();" type="button"/></td></tr>
<tr><td>POINTS:</td><td><input name="result" type="text"/></td></tr>
</tr></table>
</form>
</div></center>
This code I'm trying to use on just one page of the site: Code: <center><script type="text/javascript">
<!--
function getpoints() {
var doc1 = document.pointquiz;
var dpoints = 0;
var sex = doc1.sex.value;
var age = doc1.age.value;
var weight = doc1.weight.value;
var height = doc1.height.value;
var activity = doc1.activity.value;
var nursing = doc1.nursing.value;
dpoints = (sex * 1) + (age * 1) + (weight * 1) + (height * 1) + (activity * 1) + (nursing * 1);
doc1.dresult.value = Math.round(dpoints);
}
// -->
</script>
<br />
<br />
<div class="storyTitle"><b>Daily Point Allowance Quiz</b></div>
<div class="storyContent">
<form name="pointquiz">
<table><tr>
<tr>
<td>Sex:</td>
<td>
<select name="sex">
<option value="2" />Female
<option value="8" />Male
</select>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<select name="age">
<option value="4" />17-26
<option value="3" />27-37
<option value="2" />38-47
<option value="1" />48-58
<option value="0" />58+
</select>
</td>
</tr>
<tr>
<td>Weight:</td>
<td>
<select name="weight">
<option value="10" />100-109
<option value="11" />110-119
<option value="12" />120-129
<option value="13" />130-139
<option value="14" />140-149
<option value="15" />150-159
<option value="16" />160-169
<option value="17" />170-179
<option value="18" />180-189
<option value="19" />190-199
<option value="20" />200-209
<option value="21" />210-219
<option value="22" />220-229
<option value="23" />230-239
<option value="24" />240-249
<option value="25" />250-259
<option value="26" />260-269
<option value="27" />270-279
<option value="28" />280-289
<option value="29" />290-299
<option value="30" />300-309
<option value="31" />310-319
<option value="32" />320-329
<option value="33" />330-339
<option value="34" />340-349
<option value="35" />350-359
</select>
</td>
</tr>
<tr>
<td>Height:</td>
<td>
<select name="height">
<option value="0" />Under 5'1"
<option value="1" />5'1" to 5'10"
<option value="2" />5'10" and over
</select>
</td>
</tr>
<tr>
<td>Activity:</td>
<td>
<select name="activity">
<option value="0" />Mostly Sitting
<option value="1" />Mostly Standing
<option value="4" />Mostly Walking
<option value="6" />Mostly Physical Labor </select>
</td>
</tr>
<tr>
<td>Nursing Mom:</td>
<td>
<select name="nursing">
<option value="0" />No
<option value="10" />Yes, Solely
<option value="5" />Yes, Supplementing
</select>
</td>
</tr>
<tr><td colspan="2"><input value="Calculate" onclick="getpoints();" type="button" /></td></tr>
<tr><td>POINT ALLOWANCE:</td><td><input name="dresult" type="text" /></td></tr>
</tr></table>
</form>
</div>
<p align="center">Note: Minimum Daily Points is 18, Max is 44</p></center>
I've modified the following 2 scripts, obtained from another author, to work on one page. The problem is, with changes in browsers lately, they stopped working right. They only work in Opera, any other browser, and whichever is posted first goes winky.. This one shows stations heard by a particular station, defined in var callsign = 'ke5gae' (this is not my callsign, but he is active enough to have data for both scripts) Code: <!-- PSK I heard start -->
<style type="text/css">
.psk-sent-box {
margin: 0.5em;
width: 600px;
background-color: #FFFFFF;
border: 2px solid maroon;
font-family: small tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif;
}
.psk-sent-title {
margin-top:0px;
padding:0.2em;
margin-left:0px;
font-size: 16px;
color: #000000;
background-color: #c0c0c0;
}
.psk-sent-stats {
margin-top:0px;
padding:0.2em;
margin-left:0px;
font-size: 14px;
color: #000000;
background-color: #c0c0c0;
}
.psk-sent-item {
margin-top:0px;
padding:0.2em;
margin-left:0px;
font-size: 12px;
color: #000000;
}
</style>
<div id="psksent" class='psk-sent-box'>
</div>
<script type="text/javascript">
var pskrows = 20;
var callsign = 'ke5gae';
var bandmap = [
{ "band": "unknown", "max": 1500000 },
{ "band": "160m", "max": 3000000 },
{ "band": "80m", "max": 5000000 },
{ "band": "60m", "max": 6000000 },
{ "band": "40m", "max": 8000000 },
{ "band": "30m", "max": 12000000 },
{ "band": "20m", "max": 16000000 },
{ "band": "17m", "max": 19000000 },
{ "band": "15m", "max": 22000000 },
{ "band": "12m", "max": 26000000 },
{ "band": "10m", "max": 31000000 },
{ "band": "6m", "max": 55000000 },
{ "band": "2m", "max": 160000000 }
];
function GetBand(freq) {
if (freq == null) {
return "unknown";
}
for (var i = 0; i < bandmap.length; i++) {
if (freq < bandmap[i].max) {
return bandmap[i].band;
}
}
return "unknown";
}
function GetBandOn(freq) {
var band = GetBand(freq);
if (band == "unknown") {
band = "";
} else {
band = " on " + band;
}
return band;
}
function createDiv(cl) {
var d;
try {
d = document.createElement('<div class="' + cl + '">');
} catch (e) {
d = document.createElement('div');
d.setAttribute('class', cl);
}
return d;
}
function pskCreateRow(rr) {
var dt = new Date();
dt.setTime(1000 * rr.flowStartSeconds);
var item = document.createTextNode(dt.toLocaleTimeString() + ": Received a " + rr.mode +" signal " + GetBandOn(rr.frequency) + " from " + rr.senderCallsign + " in " + rr.senderDXCC);
var d = createDiv('psk-sent-item');
d.appendChild(item);
return d;
}
function Displaysent(d) {
// This does the hard work of formatting the data and filling out the pskbadge div
var div = document.getElementById('psksent');
var title = createDiv('psk-sent-title');
title.appendChild(document.createTextNode("Last 20 PSK signals heard at " + callsign));
div.appendChild(title);
var bi = createDiv('psk-sent-items');
div.appendChild(bi);
if (d) {
var rr = d.receptionReport;
if (rr) {
for (var rownum = 0; rownum < pskrows && rownum < rr.length; rownum++) {
bi.appendChild(pskCreateRow(rr[rownum]));
}
} else {
bi.appendChild(document.createTextNode("No recent reports"));
}
var stats = createDiv('psk-sent-stats');
stats.appendChild(document.createTextNode("Last 24 hours: " + d.rawReports[0].last24hours + " reports, " + d.countriesSeen[0].last24hours + " countries."));
div.appendChild(stats);
} else {
bi.appendChild(document.createTextNode("Service unavailable"));
}
}
var script = document.createElement('script');
script.src = "http://pskreporter.info/cgi-bin/pskquery1.pl?callback=Displaysent&statistics=1&noactive=1&nolocator=1&flowStartSeconds=-43200&rptlimit=30&receiverCallsign=" + callsign;
document.getElementsByTagName('head')[0].appendChild(script);
</script>
<!-- End PSK -->
This one shows who has heard the station defined in var callsign2 = 'ke5gae' Code: <!-- PSK 2 start -->
<style type="text/css">
.psk-heard-box {
margin: 0.5em;
width: 600px;
background-color: #FFFFFF;
border: 2px solid maroon;
font-family: small tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif;
}
.psk-heard-title {
margin-top:0px;
padding:0.2em;
margin-left:0px;
font-size: 16px;
color: #000000;
background-color: #c0c0c0;
}
.psk-heard-stats {
margin-top:0px;
padding:0.2em;
margin-left:0px;
font-size: 14px;
color: #000000;
background-color: #c0c0c0;
}
.psk-heard-item {
margin-top:0px;
padding:0.2em;
margin-left:0px;
font-size: 12px;
color: #000000;
}
</style>
<div id="pskheard" class='psk-heard-box'>
</div>
<script type="text/javascript">
var pskrows = 20;
var callsign2 = 'ke5gae';
var bandmap = [
{ "band": "unknown", "max": 1500000 },
{ "band": "160m", "max": 3000000 },
{ "band": "80m", "max": 5000000 },
{ "band": "60m", "max": 6000000 },
{ "band": "40m", "max": 8000000 },
{ "band": "30m", "max": 12000000 },
{ "band": "20m", "max": 16000000 },
{ "band": "17m", "max": 19000000 },
{ "band": "15m", "max": 22000000 },
{ "band": "12m", "max": 26000000 },
{ "band": "10m", "max": 31000000 },
{ "band": "6m", "max": 55000000 },
{ "band": "2m", "max": 160000000 }
];
function GetBand(freq) {
if (freq == null) {
return "unknown";
}
for (var i = 0; i < bandmap.length; i++) {
if (freq < bandmap[i].max) {
return bandmap[i].band;
}
}
return "unknown";
}
function GetBandOn(freq) {
var band = GetBand(freq);
if (band == "unknown") {
band = "";
} else {
band = " on " + band;
}
return band;
}
function createDiv(cl) {
var d;
try {
d = document.createElement('<div class="' + cl + '">');
} catch (e) {
d = document.createElement('div');
d.setAttribute('class', cl);
}
return d;
}
function pskCreateRow(rr) {
var dt = new Date();
dt.setTime(1000 * rr.flowStartSeconds);
var item = document.createTextNode(dt.toLocaleTimeString() + ": Tx " + rr.mode + GetBandOn(rr.frequency) + " heard by " + rr.receiverCallsign + " in " + rr.receiverDXCC);
var d = createDiv('psk-heard-item');
d.appendChild(item);
return d;
}
function DisplayHeard(d) {
// This does the hard work of formatting the data and filling out the pskheard div
var div = document.getElementById('pskheard');
var title = createDiv('psk-heard-title');
title.appendChild(document.createTextNode("Last 20 places that heard " + callsign2));
div.appendChild(title);
var bi = createDiv('psk-heard-items');
div.appendChild(bi);
if (d) {
var rr = d.receptionReport;
if (rr) {
for (var rownum = 0; rownum < pskrows && rownum < rr.length; rownum++) {
bi.appendChild(pskCreateRow(rr[rownum]));
}
} else {
bi.appendChild(document.createTextNode("No recent reports"));
}
}
}
var script = document.createElement('script');
script.src = "http://pskreporter.info/cgi-bin/pskquery1.pl?callback=DisplayHeard&statistics=0&noactive=1&nolocator=1&flowStartSeconds=-43200&rptlimit=30&senderCallsign=" + callsign2;
document.getElementsByTagName('head')[0].appendChild(script);
</script>
<!-- End PSK 2 -->
Any help will be greatly appreciated. Hi everyone, I searched and found some answers to this question, however, after trying the solutions, none worked for me. I am hoping someone can help me figure out where i'm going wrong with this. I am trying to use the jQuery Nivo Slider and the jQuery Ad Gallery on the same page. When both scripts are active, only one works. When i comment out one of them, the other works. This happens either way i do it. I tried using the jQuery.noConflict(); but it did not work...unless i did something wrong. Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/includes/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="/includes/jquery.ad-gallery.js"></script>
<script type="text/javascript">
$(function() {
$('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
$('img.image1').data('ad-title', 'Title through $.data');
$('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
$('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
$('#toggle-description').click(
function() {
if(!galleries[0].settings.description_wrapper) {
galleries[0].settings.description_wrapper = $('#descriptions');
} else {
galleries[0].settings.description_wrapper = false;
}
return false;
}
);
});
jQuery.noConflict();
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:5, // Slide transition speed
pauseTime:7000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:false, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.png', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Does anyone have any ideas? I appreciate the help in advance! Tsiqueira I've seen a few people elsewhere with a similar problem, but couldn't get the solutions to work for my individual problems. I am currently trying to display a gallery of images using Lightbox, and a contact form in a different modal window using a different script. Here is the URL, so you can view the source. Clicking 'contact' opens the Contact window, which currently works, and clicking the images SHOULD open lightbox but doesn't. If I shuffle the code around, I can get Lightbox to work but the contact window then breaks. If someone could provide just the code I should replace mine with so I can just copy and paste it in, that would be great because I don't know anything about javascript and struggled to follow the instructions for this I found elsewhere. However any help is appreciated! Thanks in advance. (: (Just in case you notice - please excuse my use of tables in the coding, this is just temporary) Hi, First, let me preface by saying that I know very little about JavaScript. I have found and modified a nice image gallery script to my liking, but now I'm trying to put this script multiple times on the same page. I read the Frequently Ask Questions section (http://www.codingforums.com/showthre...913#post178913) and have learned that my two options are to rename all of the variable and function names so they're unique. I've tried this, and I don't think I've completely renamed them all in the correct locations. I also see that you can make them Object Oriented. I've read the several threads on this, and I think it's a bit over my head. I was hoping someone would be able to review my code below and provide some suggestions/insight as to what I need to change. Your help is greatly appreciated. Thanks, Ben. Code: <<html>
<head>
<style media="screen,projection" type="text/css">
/* begin gallery styling */
#jgal { list-style: none; width: 400px; position: relative; top: -14px; left: 40px; }
#jgal li { opacity: .5; float: left; display: block; width: 80px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { width: 80px; height: 60px; }
#jgal li.active img { display: block; float: left; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style>
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<script type="text/javascript"> document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal = {
init: function () {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement('img');
document.getElementById('jgal').parentNode.insertBefore(enlargedImg, document.getElementById('jgal').nextSibling);
enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
li[0].className = 'active';
for (i = 0; i < li.length; i++) {
var val = li[0].getElementsByTagName('img')[0].alt;
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i], 'mouseover', function () {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j = 0; j < im.length; j++) {
im[j].className = '';
}
this.className = 'active';
enlargedImg.src = this.getElementsByTagName('img')[0].src;
});
}
},
addEvent: function (obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e" + type + fn] = fn;
obj[type + fn] = function () { obj["e" + type + fn](window.event); }
obj.attachEvent("on" + type, obj[type + fn]);
}
}
}
gal.addEvent(window, 'load', function () {
gal.init();
});
</script>
</head>
<body>
<ul id="gallery">
<li><a href="/bmfsweb/esg/image/Vactor HTML/2100_PLUS_PD.htm" rel="nofollow" target="_blank"><img src="/bmfsweb/esg/image/Vactor Images2/Guzzler_classic_400.JPG" onmouseover="showTitle('Guzzler Classic');"></a></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/Guzzer_ace_400.JPG" onmouseover="showTitle('Guzzler Ace');"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/Guzzler_nx_400.JPG" onmouseover="showTitle('Guzzler NX');"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/Guzzler_XCR_400.JPG" onmouseover="showTitle('Guzzler XCR');"></li>
</ul>
<br />
<br />
<div align=center><span id="title" style="font-weight:bold; size:26pt;"></span></div>
<script type="text/javascript">
function showTitle(txt) {
obj = document.getElementById("title");
obj.innerHTML = txt;
}
</script>
</body>
</html>
Is possible to call cgi scripts from javascript scripts?
I am a total newb with javascript. i got this slideshow code from the following URL http://javascriptsource.com/miscella...slideshow.html its not working and i dont know why. there were no instructions and i cant figure out why there is only one image listed. i replace the img source with one of of my own but shouldnt there be multiple images? isnt that the point of a slideshow? anyway heres the code: Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Original: Mike Canonigo (mike@canonigo.com) -->
<!-- Web Site: http://www.munkeehead.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
NewImg = new Array (
"images/1.gif",
"images/2.gif",
"images/3.gif"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
//Time delay between Slides in milliseconds
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<img src="images/1.gif" name="slideshow">
<table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>
</center><p>
If someone can help me i would really appreciate it. (NO THIS IS NOT HOMEWORK!) I just started with javascript and am working on a little game to wrap my head around it and came across an error I can't seem to fix. Code: if (AsteriodXpos[i] < -50 || AsteriodYpos[i] < -100 || AsteriodYpos[i] > WinHeight + 100) {
AsteriodXpos[i] = WinWidth;
AsteriodYpos[i] = Math.round(Math.random() * WinHeight);
AsteriodXSpeed[i] = Math.random() * 5 + 7;
AsteriodYSpeed[i] = Math.random() * 7 - 5;
AstriodsAvoided += 1;
if (AstriodsAvoided % 15 == 0) {
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
document.write('<div id="ast" style="position:absolute;font-size:2px"><img src="asteroid.png" height=50 width=50></div>');
document.write('</div>');
document.write('</div>');
AsteriodYpos[AsteriodYpos.length] = Math.round(Math.random() * WinHeight);
AsteriodXpos[AsteriodXpos.length] = Math.round(Math.random() * WinWidth) + WinWidth;
AsteriodXSpeed[AsteriodXSpeed.length] = Math.random() * 10 + 5;
AsteriodYSpeed[AsteriodYSpeed.length] = Math.random() * 7 - 5;
asteriods += 1;
}
}
ast[i].style.pixelLeft = AsteriodXpos[i];
ast[i].style.pixelTop = AsteriodYpos[i]+hscrll;
When it seems to not like these last two lines as it says "Error: Unable to get value of the property 'style': object is null or undefined". Essentially it is a game where you are flying through space avoiding astroids. after you avoid so many it increases the number of astroids which is where the problem is happening. In case someone would like to see this in context of what im doing the whole code is Code: <html>
<head>
</head>
<body bgcolor="#000000" onload="fly()" onkeypress="displayunicode(event)" style="overflow: hidden">
>
<script language="JavaScript">
<!-- Begin
x = 0;
var startTime = new Date();
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0] = "ship1.png"
images[1] = "ship2.png"
images[2] = "ship3.png"
images[3] = "ship4.png";
images[4] = "ship5.png"
images[5] = "ship6.png"
// start preloading
for (i = 0; i <= 5; i++) {
imageObj.src = images[i];
}
AstriodsAvoided = 1;
wasCollision = 0;
SmallStars = 20;
LargeStars = 50;
asteriods = 5;
SmallYpos = new Array();
SmallXpos = new Array();
LargeYpos = new Array();
LargeXpos = new Array();
Smallspeed = new Array();
Largespeed = new Array();
AsteriodXpos = new Array();
AsteriodYpos = new Array();
AsteriodXSpeed = new Array();
AsteriodYSpeed = new Array();
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < SmallStars; i++) {
document.write('<div id="si" style="position:absolute;top:0;left:0;width:1px;height:1px;background:#fffff0;font-size:1px"></div>');
}
document.write('</div>');
document.write('</div>');
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < LargeStars; i++) {
document.write('<div id="li" style="position:absolute;top:0;left:0;width:3px;height:2px;background:#ffffff;font-size:2px"></div>');
}
document.write('</div>');
document.write('</div>');
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < asteriods; i++) {
document.write('<div id="ast" style="position:absolute;top:0;left:0;font-size:2px"><img src="asteroid.png" height=50 width=50></div>');
}
document.write('</div>');
document.write('</div>');
imgWidth = 150;
imgHeight = 150;
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
document.write('<div id="shipLayer" style="position:absolute;top:0;font-size:2px"><img id="ship" src="ship.png" height=150 width=150></div>');
document.write('</div>');
document.write('</div>');
WinHeight = window.document.body.clientHeight;
WinWidth = window.document.body.clientWidth;
ShipYpos = Math.round(Math.random() * WinHeight);
ShipXpos = Math.round(Math.random() * WinWidth) / 2;
ShipXSpeed = 0;
ShipYSpeed = 0;
shipLayer.style.pixelLeft = ShipXpos;
shipLayer.style.pixelTop = ShipYpos;
for (i = 0; i < SmallStars; i++) {
SmallYpos[i] = Math.round(Math.random() * WinHeight);
SmallXpos[i] = Math.round(Math.random() * WinWidth);
Smallspeed[i] = Math.random() * 5 + 1;
}
for (i = 0; i < LargeStars; i++) {
LargeYpos[i] = Math.round(Math.random() * WinHeight);
LargeXpos[i] = Math.round(Math.random() * WinWidth);
Largespeed[i] = Math.random() * 10 + 5;
}
for (i = 0; i < asteriods; i++) {
AsteriodYpos[i] = Math.round(Math.random() * WinHeight);
AsteriodXpos[i] = Math.round(Math.random() * WinWidth) + WinWidth;
AsteriodXSpeed[i] = Math.random() * 10 + 5;
AsteriodYSpeed[i] = Math.random() * 7 - 5;
}
function fly() {
document.getElementById("ship").src = images[x];
x += 1;
if (x == 6) { x = 0; }
var WinHeight = window.document.body.clientHeight;
var WinWidth = window.document.body.clientWidth;
var hscrll = document.body.scrollTop;
var wscrll = document.body.scrollLeft;
for (i = 0; i < LargeStars; i++) {
LargeXpos[i] -= Largespeed[i];
if (LargeXpos[i] < -10) {
LargeXpos[i] = WinWidth;
LargeYpos[i] = Math.round(Math.random() * WinHeight);
Largespeed[i] = Math.random() * 10 + 5;
}
li[i].style.pixelLeft = LargeXpos[i];
li[i].style.pixelTop = LargeYpos[i] + hscrll;
}
for (i = 0; i < SmallStars; i++) {
SmallXpos[i] -= Smallspeed[i];
if (SmallXpos[i] < -10) {
SmallXpos[i] = WinWidth;
SmallYpos[i] = Math.round(Math.random() * WinHeight);
Smallspeed[i] = Math.random() * 5 + 1;
}
si[i].style.pixelLeft = SmallXpos[i];
si[i].style.pixelTop = SmallYpos[i] + hscrll;
}
for (i = 0; i < asteriods; i++) {
AsteriodXpos[i] -= AsteriodXSpeed[i];
AsteriodYpos[i] -= AsteriodYSpeed[i];
//for (j=0; j<30; j++){
// xDistance = AsteriodXpos[i]+25-AsteriodXpos[j]+25;
// yDistance = AsteriodYpos[i]-25-AsteriodYpos[j]-25;
// distance =xDistance*xDistance+yDistance*yDistance;
// if (distance<3000 && i!=j){
// }
if (AsteriodXpos[i] < -50 || AsteriodYpos[i] < -100 || AsteriodYpos[i] > WinHeight + 100) {
AsteriodXpos[i] = WinWidth;
AsteriodYpos[i] = Math.round(Math.random() * WinHeight);
AsteriodXSpeed[i] = Math.random() * 5 + 7;
AsteriodYSpeed[i] = Math.random() * 7 - 5;
AstriodsAvoided += 1;
if (AstriodsAvoided % 15 == 0) {
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
document.write('<div id="ast" style="position:absolute;font-size:2px"><img src="asteroid.png" height=50 width=50></div>');
document.write('</div>');
document.write('</div>');
AsteriodYpos[AsteriodYpos.length] = Math.round(Math.random() * WinHeight);
AsteriodXpos[AsteriodXpos.length] = Math.round(Math.random() * WinWidth) + WinWidth;
AsteriodXSpeed[AsteriodXSpeed.length] = Math.random() * 10 + 5;
AsteriodYSpeed[AsteriodYSpeed.length] = Math.random() * 7 - 5;
asteriods += 1;
}
}
ast[i].style.pixelLeft = AsteriodXpos[i];
ast[i].style.pixelTop = AsteriodYpos[i]+hscrll;
}
if (ShipXpos - ShipXSpeed < -150) {
ShipXpos = WinWidth;
}
else {
if (ShipXpos - ShipXSpeed > WinWidth) {
ShipXpos = -150;
}
}
if (ShipYpos - ShipYSpeed < -150) {
ShipYpos = WinHeight;
}
else {
if (ShipYpos - ShipYSpeed > WinHeight) {
ShipYpos = -150;
}
}
ShipXpos -= ShipXSpeed;
ShipYpos -= ShipYSpeed;
shipLayer.style.pixelLeft = ShipXpos;
shipLayer.style.pixelTop = ShipYpos + hscrll;
DidCollide()
sleep(10);
setTimeout('fly()', 10);
}
// End -->
function displayunicode(e) {
var unicode = e.keyCode ? e.keyCode : e.charCode;
var keyPressed;
keyPressed = (String.fromCharCode(unicode));
moveShip(keyPressed)
}
function moveShip(keyPressed) {
switch (keyPressed) {
case "w" || "W":
if (ShipYSpeed != 25) {
ShipYSpeed += 5;
}
break;
case "a" || "A":
if (ShipXSpeed != 25) {
ShipXSpeed += 5;
}
break; ww
case "s" || "S":
if (ShipYSpeed != -25) {
ShipYSpeed += -5;
}
break;
case "d" || "D":
if (ShipXSpeed != -25) {
ShipXSpeed += -5;
}
break;
}
}
function DidCollide() {
for (i = 0; i < asteriods; i++) {
xDistance = AsteriodXpos[i] + 25 - ShipXpos - 75;
yDistance = AsteriodYpos[i] + 25 - ShipYpos - 75;
distance = xDistance * xDistance + yDistance * yDistance;
if (distance < 4225) {
wasCollision = 1;
document.write('<img src="Explosion.png">');
var endTime = new Date();
var totalTime = new Date();
totalTime.setTime(endTime.getTime() - startTime.getTime());
test = "this is a test";
document.write('You managed to last ' + totalTime.getSeconds() + '.' + totalTime.getMilliseconds() + ' seconds. You avoided a total of ' + AstriodsAvoided + 'astroids');
}
}
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds) {
break;
}
}
}
</script>
<!-- Script Size: 3.79 KB -->
</body>
</html>
Any help someone could provide would be wonderful, and if you can explain to me whats going wrong and why its not working that would be even better! Hello, I am trying to make an example that will change when a user selects options. Like: This is some text. <user checks box to remove "some"> This is text. <user checks box to remove "text"> This is. <user UN-checks box to remove "text"> This is text. The problem is, if I try to add the removed text back, I get the original string, even though it was previously changed. I use to have the string between the <p> tags, but then moved it as a global var in the JS file. Code: /* HTML Code */
<body>
<input type="checkbox" id="anoption" />
<p id="exampletext"></p> //Text use to be here
</body>
/* Javascript code(including jquery) */
var example = "This is some text"; //Global in JS file
$('document').ready(function(){
$('#exampletext').text(example); //Place the global var in the html
});
$('#anoption').click(function() { //Place a click handler for checkbox
var tmp = example;
if(tmp.search(/some/)) //Attempting to check if the word is there, i don't think this works right
{
example = tmp.replace("some", "");
}
else // if word is not there - add it back
{
/*
Here is where I could also use some logic help.
I tried a few things here.
*/
}
I am not sure if using a string is the best way or not. Could anyone please point me in the right direction? Thank you! Hello all, I am an admin, and I am building a radial button search option on a webpage. It works fine, except I cant seem to get it to open the results in a new window. I tried using the "window.open" but it didnt work. Any assitance would be appreciated! Also, I am not a great java programmer, and what you see below is the extent of my knowledge Thanks in Advance!! ===================CODE=============== <html> <body> <script language="JavaScript">eng = 'http://www.google.com/search?q=';</script> Search: <input type="text" id="searchterms"> <input type="button" value="Search" onload="" onclick="window.location = eng + escape(document.getElementById('searchterms').value); return false;"> <br /> <input type="radio" onclick="eng = this.value;" checked name="sengines" value="http://www.google.com/search?q=" />Google <input type="radio" onclick="eng = this.value;" name="sengines" value="http://support.citrix.com/search/basic/?searchQuery=" />CTX KB <input type="radio" onclick="eng = this.value;" name="sengines" value="http://support.microsoft.com/search/default.aspx?mode=r&query=" />MS KB </body> </html> I play a text game that allows you to input javascript into a "QuickBar" set up for links. I currently have a couple of short "links" set up to fill in a form for me, but I am trying to do something else now. An example for one I use that fills in a specific blank text area: javascript: var doc=document; if(window.frames.length>0) doc=window.main.document; doc.getElementsByName('light')[0].value=40; doc.getElementsByName('Okay')[0].click(); end(); On a different page than the empty text areas, there is a fixed drop down select with 5 choices, and I would like to set up a 6th choice using the same insert javascript "link" system. Code: <tr> <td>Map size:</td> <td><select name="map_size"> <option label="7x7" value="7">7x7</option> <option label="9x9" value="9">9x9</option> <option label="11x11" value="11">11x11</option> <option label="13x13" value="13">13x13</option> <option label="15x15" value="15" selected="selected">15x15</option> </select></td> </tr> What I would like to do is set up another javascript "link" that will add a "30x30" option to that list and be able to select it after clicking the javascript "link." I have a form validation with an AJAX username check and it works perfectly on FF, but doesn't work in IE 9. I am a complete newb when it comes to Jquery and Javascript, so any help/suggestions would be greatly appreciated. Jquery: Code: $('#username').bind('blur',function() {
var formData = $('#register').serialize();
$.post('username.php',formData,processData).error('ouch');
function processData(data) {
console.log(data);
if (data=='pass') {
if (! $('#fail').length) {
$('#usernameavail').prepend('<p id=\"fail\">Username Is Available!</p>');
} else {
$('#usernameavail').html('<p id=\"fail\">Username Is Available!</p>');
}
} else {
if (! $('#fail').length) {
$('#usernameavail').prepend('<p id=\"fail\"><img src=\"http://images/error.png\"> Username Not Available</p>');
} else {
$('#usernameavail').html('<p id=\"fail\"><img src=\"http:///images/error.png\"> Username Not Available</p>');
}
}
} // end processData
}); // end submit
Here is the username field I am validating against the database for a duplicate username: Code: <input name='username' type='text' id='username' class='required' maxlength='20'> Thanks in advance. Hey guys. I am pretty new to JS and programming. The company that I am working for put me on this project and I have a question. Here is a snippit for a form that we have. We use a dreamweaver extension "HDW form to database" to process the forms and put them in a mysql database. the wpform() is a validation function that has been written. what I want, is the fallowing, if you look at the code below in the option object, there are different categories... rock, funk, hip hop, synth etc. i want it so when one of them is selected, it goes to a different respected page. for example, if the value Rock is selected, and you press submit, it would take you to www.google.com . On the other hand if the value Funk is submitted, it will take you to www.yahoo.com . Code: <form action="/HDWFormToDatabase/FormToDatabase.php" method="post" name="theForm" onSubmit="return wpform()" accept-charset="iso-8859-1">
<select size="1" name="genre">
<option selected="selected" value="genre">Choose a Genre!</option>
<option value="Rock">Rock</option>
<option value="Funk">Funk</option>
<option value="Hip Hop">Hip Hop</option>
<option value="80s">Synthesizer</option>
<option value="Techno">Techno</option>
</select>
<input type="hidden" name="hdwok" id="hdwok" value=" URL GOES HERE" />
</form>
Normally, when this option object is not present, the user presses submit and after the form gets processed to the database, the browser forwards to the "URL GOES HERE" value. However, I am not sure exactly what to do now since the URL which it is forwarded to will change. can someone give me a hint on how to make this happen? just some general advice for a newb? I would write it but I am pretty lost. I was thinking of including a if statement in the wpform() function that goes something like: Code:
if (document.theForm.genre.selectedIndex == 0)
{
alert("Please select your genre.");
document.theForm.genre.focus();
return (false);
}
if (document.theForm.genre.selectedIndex==1)
{
window.location = "http://www.google.com/";
return(true);
}
if (document.theForm.genre.selectedIndex==2)
{
window.location = "http://www.yahoo.com/";
return(true);
}
etc etc Would this work? Is there a more efficient way of doing something like this that I should know of due to my lack of JS skills? Thanks in advance so much for help. I am trying to learn javascript and have no idea why this wont work. I am very familiar with java but am very rusty with html and completely new to javascript. Regardless of whether or not the regular expression is correct, this will not produce any sort of result: Code: <html>
<head>
<script type="text/javascript">
function checkPhoneNumber(phoneNumber)
{
var phoneRE = /^\(\d{3}\) \d{3}-\d{4}$/;
if (phoneNumber.match(phoneRE))
{
//document.write("yes")
return true;
}
else
{
//document.write("no")
alert(“blahblahblah” );
return false;
}
}
</script>
</head>
<body>
<script type="text/javascript">
var num = 555-555-5555
document.write(checkPhoneNumber(3)); //***
</script>
</body>
</html>
the *** line, i have tried with the num variable and as a string, and as it is now, it should at least produce the error.... thank you Hey, First time poster... Apreciate any help here getting this thing to work (apoligise if its in the wrong section as it does cover php aswell) Problem is getting this form to work, it seems to go through ok, but it never makes it back to my mailbox. Its from a template that didnt explain how to get it to work. Codes.... the js in html head Code: <script type="text/javascript" src="js/forms.js"></script> the form html body Code: <form action="#" id="ContactForm"> <div class="success"> Contact form submitted!<br> <strong>We will be in touch soon.</strong> </div> <fieldset> <div class="wrapper"><label class="name"> <span class="bg"><input type="text" value="Name" class="input"></span> <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span> </label></div> <div class="wrapper"><label class="email"> <span class="bg"><input type="text" value="Email" class="input"></span> <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label></div> <div class="wrapper"><label class="phone"> <span class="bg"><input type="tel" value="Phone" class="input"></span> <span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label></div> <div class="wrapper"><label class="comment"> <span class="bg"><textarea rows="1" cols="1">Message</textarea></span> <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span> </label></div> <div class="btns relative"><a href="#" class="button1" data-type="reset"><img src="images/button_hover.png" alt=""><strong>Clear</strong></a><a href="#" class="button1" data-type="submit"><img src="images/button_hover.png" alt=""><strong>Submit</strong></a></div> </fieldset> </form> The Js code Code: (function($){
$.fn.extend({
forms:function(opt){
if(opt===undefined)
opt={}
this.each(function(){
var th=$(this),
data=th.data('forms'),
_={
errorCl:'error',
emptyCl:'empty',
invalidCl:'invalid',
successCl:'success',
successShow:'4000',
mailHandlerURL:'submit.php',
ownerEmail:'admin@bundesign.net',
stripHTML:true,
smtpMailServer:'localhost',
targets:'input,textarea',
controls:'a[data-type=reset],a[data-type=submit]',
validate:true,
rx:{
".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".comment":{rx:/.{20}/,target:'textarea'}
},
preFu:function(){
_.labels.each(function(){
var label=$(this),
inp=$(_.targets,this),
defVal=inp.attr('value'),
trueVal=(function(){
var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
return tmp
})()
trueVal!=defVal
&&inp.val(defVal=trueVal||defVal)
label.data({defVal:defVal})
inp
.bind('focus',function(){
inp.val()==defVal
&&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
})
.bind('blur',function(){
!inp.val()
?inp.val(defVal)
:(_.isValid(label)
?_.showErrorFu(label)
:_.hideErrorFu(label)),
(_.isEmpty(label)
?_.showEmptyFu(label)
:_.hideEmptyFu(label))
})
.bind('keyup',function(){
label.hasClass(_.invalidCl)
&&_.isValid(label)
?_.showErrorFu(label)
:_.hideErrorFu(label)
})
label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
})
_.success=$('.'+_.successCl,_.form).hide()
},
isValid:function(el){
var ret=true,
empt=_.isEmpty(el)
if(empt)
ret=false,
el.addClass(_.invalidCl)
else
$.each(_.rx,function(k,d){
if(el.is(k))
d.rx.test(el.find(d.target).val())
?(el.removeClass(_.invalidCl),ret=false)
:el.addClass(_.invalidCl)
})
return ret
},
isEmpty:function(el){
var tmp
return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
},
validateFu:function(){
_.labels.each(function(){
var th=$(this)
_.isEmpty(th)
?_.showEmptyFu(th)
:_.hideEmptyFu(th)
_.isValid(th)
?_.showErrorFu(th)
:_.hideErrorFu(th)
})
},
submitFu:function(){
_.validateFu()
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
name:$('.name input',_.form).val()||'nope',
email:$('.email input',_.form).val()||'nope',
phone:$('.phone input',_.form).val()||'nope',
fax:$('.fax input',_.form).val()||'nope',
state:$('.state input',_.form).val()||'nope',
comment:$('.comment textarea',_.form).val()||'nope',
owner_email:_.ownerEmail,
stripHTML:_.stripHTML
},
success: function(){
_.showFu()
}
})
},
showFu:function(){
_.success.slideDown(function(){
setTimeout(function(){
_.success.slideUp()
_.form.trigger('reset')
},_.successShow)
})
},
controlsFu:function(){
$(_.controls,_.form).each(function(){
var th=$(this)
th
.bind('click',function(){
_.form.trigger(th.data('type'))
return false
})
})
},
showErrorFu:function(label){
label.find('.'+_.errorCl).slideDown()
},
hideErrorFu:function(label){
label.find('.'+_.errorCl).slideUp()
},
showEmptyFu:function(label){
label.find('.'+_.emptyCl).slideDown()
_.hideErrorFu(label)
},
hideEmptyFu:function(label){
label.find('.'+_.emptyCl).slideUp()
},
init:function(){
_.form=this
_.labels=$('label',_.form)
_.preFu()
_.controlsFu()
_.form
.bind('submit',function(){
if(_.validate)
_.submitFu()
else
_.form[0].submit()
return false
})
.bind('reset',function(){
_.labels.removeClass(_.invalidCl)
_.labels.each(function(){
var th=$(this)
_.hideErrorFu(th)
_.hideEmptyFu(th)
})
})
_.form.trigger('reset')
}
}
if(!data)
(typeof opt=='object'?$.extend(_,opt):_).init.call(th),
th.data({cScroll:_}),
data=_
else
_=typeof opt=='object'?$.extend(data,opt):data
})
return this
}
})
})(jQuery)
the php ( this is possibly where the problem lies, but i assume it goes hand in hand with the JS, is reason why i posted it here as the js seemed really complex. Code: <?php $myemail = "admin@bundesign.net"; $name = $_POST["name"]; $email = $_POST["email"]; $comment = $_POST["comment"]; $phone = $_POST["phone"]; $from = "Bundesign Web <admin@bundesign.net>"; $subject = "Bundesign Web"; $message .= "$name <br> $email <br> $phone <br> $comment"; mail($myemail, $subject, $message,); ?> submit.php is located in the root and also i stuck it in the js folder just in case thats where it was looking. Thanks for any help, Chris. This is a little hard to explain so I'm posting an example. Code: //NESTED FUNCTION I'M USING TO DEMONSTRATE MY QUESTION
function foo(a) {
this.x = 5;
//USED TO SET THE VALUE OF X
if( a == 0 )
return function(z) {
return x = z;
}
//USED TO RETRIEVE THE VALUE OF X
else if( a == 1 )
return function() {
return x;
}
}
//MAKES setX THE SETTER FUNCTION
var setX = foo(0);
//MAKES getX THE GETTER FUNCTION
var getX = foo(1);
print( "setX(25), not an instance: " + setX( 25 ) );
print( "getX(), not an instance: " + getX() );
print( "" );
//CREATES AN OBJECT INSTANCE USING FOO AS CONSTRUCTOR
var q = new foo();
print( "value of x in object instance: " + q.x );
print( "" );
print( "setX(25), not an instance: " + setX( 25 ) );
print( "getX(), not an instance: " + getX() );
This code will output: Code: setX(25), not an instance: 25 getX(), not an instance: 25 value of x in object instance: 5 setX(25), not an instance: 25 getX(), not an instance: 25 Observations: It seems like this.x actually has two meanings. 1)x becomes a member of the "Function" object foo(). 2)x becomes a part of the constructor for prototype class foo. But why then does x revert back to the original value of 5 when I use foo as a constructor? Does javascript automatically save the original value on creation for a reason? What is going on behind the scenes to make this happen? Is this behavior part of an ontological model that makes sense? Similarly, if I change "this.x" to "var x" I can access the value of x but I can't change it. Not that that I should be able to, the syntax "var x" doesn't make x a member of foo anyway. But I'm still having trouble classifying the relationship "var x" has to the function. Anyways this is more of a tangent. My main question is above but if anyone has something to say about this, I'd be interested to hear it. It seems like all these behaviors have rules to them, but there is no conceptual model to think through that guide these behaviors. Or maybe I'm just ignorant. Enlighten me. I'm trying to insert a title and a body into a Google maps window through PHP. The body could contain double or single quotes. How do I output these so that they don't break the script? Relevant code: Code: $('#map_canvas').gmap('openInfoWindow', { 'content': '<strong><?php echo $m->marker->Title; ?></strong><br /><?php echo $m->marker->Body; ?><?php echo '<a href="./marker_info.php?id='.$m->marker->Nid.'"></a>' ?><br /><a id="m_location" href="#" data-role="button" data-icon="search" onclick="$.mobile.silentScroll(500);"></a>'}, this);
I know this looks like I'm spamming for clients, but I have plenty, thankyouverymuch, I just would like your coding help promise I'm a self-taught programmer and working on a couple of my adult sites, and I think it's time I actually figure out how to do a good content warning popup. I would like to be able to link to every page on my site without having to go through my content warning landing page - any ideas? I've seen it done using I believe Java and Ajax in Wordpress, but I'm not using WordPress. And I of course don't want it to popup every time I go to a page on my site. WARNING!!!! links take you to adult content!!!!!! First site: http://stellabrolin.com - this one is basic, all within one domain, no subdomains Second site: http://theroxxbabes.com, sub domains http://hellen.theroxxbabes.com and http://stella.theroxxbabes.com I have 2 subdomains, but I want the same rules to apply; if linked to a page within a subdomain I want the content warning to show, and then a link to the main domain is clicked, I don't want the content warning to show again - how do I do this? am I overthinking this? does this make sense? thanks in advance!! |
|||||||