JavaScript - Two Jquery Scripts On Same Page

Iv 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 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>
		&nbsp;</address>
	<address>
		&nbsp;</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">
&nbsp;</address>
	<p align="left">
	&nbsp;</p>
	<p align="center">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</span></font></address>
		<address>
			<span style="font-style: normal"><font face="Myriad Pro">Supporting 
			local good causes</font></span></address>
</div>


        
        
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</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>&nbsp;&nbsp;
		<img border="0" src="images/Twitter-icon.png" width="33" height="33">&nbsp;&nbsp;
		<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<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">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>

</body>

</html>

I know it's probably something really simple but I'm totally lost. Any help would be very much appreciated.

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.

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?

Hi,

I wish to get some content from another page.
Here is my code.
Code:

<script type="text/javascript">
jQuery.ajax({url: 'http://www.livecounter.dk/viewstats/30050',type: 'get',success: function(ajax) {
var x = jQuery('#box4 .first:last', ajax).innerHTML;
document.write(x);
}
}
});
</script>

<script src="http://code.jquery.com/jquery-1.6.1.min.js"> </script>

But it isn't working. I can't get the at this page : http://www.livecounter.dk/viewstats/30050 under "Altid" (to the right), next to "Sidevisninger". Image of it here : http://i51.tinypic.com/2e0sb9s.png

Thanks

Hi guys, I want to make a website and instead of having individual pages for each page, I would like it all to be on one page. I want to use jQuery to switch between the different tabs but I also need it to be able to stay on that certain tab when the page is reloaded. I also need to be able to link to the certain tabs which I think would be accomplished by using ID tags. If anyone can help, that would be great.

Hello all, I would like someone to help me with this. I'm building my portfolio website. I'm an illustrator and graphic designer (for printing). My website uses html and css. I introduce a jquery plugin to create a slide show with my work. Until then, everything was working well. The problem appears when I introduce php to my code in order not to repeat the navigation bar all the time. With php and the jquery together I get a blank page in my browser.

This link shows the blank page I'm getting using php and jquery together.
http://www.raulmv.com/calendar.php

This is an example of the site without the jquery.
http://www.raulmv.com/graphics.php

Could someone please help me with this thanks.



Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />

<title>#</title>

<meta name="google-site-verification" content="1ksaaEb5-Ur8h5ivruWp4iRcUB-tDLyM43L6yCl1OuQ" />

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

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/common.js"></script>


<!--Google Analytics-->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12002561-1']);
  _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);
  })();

</script>




</head>

<body class="#" id="portfolio">

<div id="container">

<!--Top Navigation-->  
<div id="navcontainer"> <?php {include("navbartop.html");} ?> </div>

  
 
<!--Left Navigation-->  
<div id="navBar"> <?php include("navbarleft.html"); ?> </div>


<!--Info-->
<div id="info">
       <span class="Title">ANYTIME CALENDAR | 2009</span>
          <span class="style">Calendar designed to be used any year, any occasion, anytime.</span>    
</div>  





<!--Imagenes-->
<div id="showreel-nav-wrap">
  <span>
    </span>
</div>



<ul id="buy-links" class="slideshow">
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
</ul>
        

<div id="showreel">
                <ul class="slideshow pics">    
                    <?xml version="1.0" encoding="utf-8"?>

<li><img src="images/Calendar.png" height="522px"/>
</li>

<li><img src="images/IMG_1162.png" height="522px" />
</li>

<li><img src="images/IMG_1307.png" />
</li> 

<li><a href="images/Calendar/Instructions.gif"><img src="images/Instructions_small.gif" /></a>
</li>        
      </ul>  
			</div><!--/showreel-->




<script type="text/javascript">
$(function() {	
	var totalImg = $("#showreel li").size() - 1;
	$("#buy-links li:gt(" + totalImg + ")").remove();
	
    $("#showreel-nav-wrap span").after('<div id="showreel-nav" class="showreel-nav">')

	$('.slideshow').each(function(index) {
        $(this).cycle({
			fx:     'fade',
			speed:  'slow',
			timeout: 0,
			sync:    false,
			pager:  '#showreel-nav',
			pagerAnchorBuilder: function(i) {
				if (index == 0)
					// for first slideshow, return a new anchor
					return '<a href="#">'+(i+1)+'</a>';
				// for 2nd slideshow, select the anchor created previously
				return '#showreel-nav a:eq('+i+')';
        	}
		});
    });

	//Image to trigger showreel links
	activeLink = $('#showreel-nav').find('.activeSlide');
	nextLink = activeLink.next();

	$('.slideshow img').bind('click',function(){
		activeLink = $('#showreel-nav').find('.activeSlide');
		nextLink = activeLink.next();
		nextLink.trigger('click');
	});
	
	//Get h1 text length
	var h1length = $('h1').text().length;
	if(h1length > 27) {
		$('.oj-title').css('margin-top','-21px');
	}
});
</script>

<!-- end #mainContent --></div>


</body>
</html>

Those <li> tags Im using is to numbered the images. It might not be a good practice but it works.

Thanks for reading this post, I hope someone could help me. It's frustrating I have been for the last two days going around trying to change things and nothing seems to work.

Hello!
I am developing my personal website!
And I am trying to implement it with JS completely. which means I need the page to be one front end page.
But the back-end pages would be the ones which do the work and calculations!
In other words and more explaination:
I would like to have one "index.php" page that contains only a nav bar which handles the mission.
Once the page load it loads with the content of "home.php" (the landing page) if the "contact" tab is clicked then I would like to load the "ContactMe.php" page content.
I have done this already! but the problem is:
"home.php" uses alot of javascript functions and jquery plug-ins. when I load it, it looks messy that you think the JS is disabled in your machine :-\
Note: the loading has been done with those methods: .load(), $.ajax! -> same results!

The conclusion:
* "home.php"
* "ContactMe.php"
* "About.php"
Is it possible to load those pages in the "index.php" and still have their JS functions function correctly and display as if they were accessed individually?

The goal that I am trying to achieve is that I make my whole website for the visitor as "One Page Site"! I am challenging myself with it though!

Thank you in advance for your informative posts!


Please Note that I have only put the <html><head><body> tags in the index.php and removed them from the back-end pages such as home.php, contactme.php and about.php! for that sake that it works correctly! but with no hope!

I have a problem where the page doesn't expand when more results get loaded via jquery on a facebook style wall. Once more results get loaded the footer stays static instead of moving down.

What's the best way to do this?

Hi I'm trying to load a part of a page (that has script in it) into another page using jquery. However, though the html loads in correctly, none of the script is working.

I'm using code from http://css-tricks.com/video-screenca...namic-content/
ie. the pages all work without java (static pages) and when java is enabled, instead of going to bio.html you get taken to ..#bio.html.

However if I've got any script I would like to be loaded .. ie. lightbox gallery or even a simple jav split and put back together email address hider.

Any help greatly appreciated. I'm not very clued up about jquery at the moment unfortunately and though I've been trying to read and learn, alot is going over my head..


Not sure how best it is to show you the page as it's not live yet. Maybe if it helps I can upload a zip of the site. It's a simple 6 page musician site.
Though my code is exactly like the css-tricks page, just that I have a lightbox on one page (which loads fine if there's no hash in the address - but when hash is there, it shows thumbnails, and when you click one, it just takes you to the larger .jpg destination page (no lightboxness etc).)

Thanks

I've got a client using JQuery pageslide function on a wordpress site - http://srobbin.com/blog/jquery-pageslide/

There is a sidebar menu on the left and about 5 pages in the right hand side. So you click one of the links on the sidebar menu and it slides to one of the 5 corresponding pages. I guess the 5 pages are all really one page though within the slider app? I'm wondering if it's possible to link directly to a page within the slider... because right now it always goes to the first page of the 5. And is there a way to program it so the back button in the browser makes the page slide go back to the previous page, rather than going to the last actual page in the browser?