|
JavaScript - Conflicting Scripts On Same Page
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! Similar TutorialsHi guys I have to scripts on my page and they work fine on their own but when i put them together one stops working ?? One is the colorbox script and the other toggles some hidden content. Any ideas why they wont work on the same page ? This is whats in my head section and the start of the body section 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="../../js_files/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../js_files/jquery.tools.min.js"></script>
<!--[if lt IE9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="../../colorbox/colorbox.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../../colorbox/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='slides']").colorbox({transition:"none", width:"70%", height:"70%", scalePhotos:false});
});
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
$(function() {
$("#tabs").tabs("#tabscontent section", {
effect: 'fade',
fadeOutSpeed: 0,
fadeInSpeed: 400
});
});
</script>
Hello everyone, I've been scratching my head over this one for quite a while. I'm having trouble running two different scripts on my site- one named accordion and the other named lightbox. I think that it might because of a similar behavior in both the scripts (and if I had to guess I'd say maybe its preload.) I'd appreciate any help/questions. The page that I'm having the problem with is he http://lehdesigns.com/bearpaws.html And here are the codes.. Lightbox Code: LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
overlayOpacity: 0.8, // controls transparency of shadow overlay
animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)
borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});
// -----------------------------------------------------------------------------------
var Lightbox = Class.create();
Lightbox.prototype = {
imageArray: [],
activeImage: undefined,
// initialize()
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
this.updateImageList();
this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;
this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
// If animations are turned off, it will be hidden as to prevent a flicker of a
// white 250 by 250 box.
var size = (LightboxOptions.animate ? 250 : 1) + 'px';
// Code inserts html at the bottom of the page that looks similar to this:
//
// <div id="overlay"></div>
// <div id="lightbox">
// <div id="outerImageContainer">
// <div id="imageContainer">
// <img id="lightboxImage">
// <div style="" id="hoverNav">
// <a href="#" id="prevLink"></a>
// <a href="#" id="nextLink"></a>
// </div>
// <div id="loading">
// <a href="#" id="loadingLink">
// <img src="images/loading.gif">
// </a>
// </div>
// </div>
// </div>
// <div id="imageDataContainer">
// <div id="imageData">
// <div id="imageDetails">
// <span id="caption"></span>
// <span id="numberDisplay"></span>
// </div>
// <div id="bottomNav">
// <a href="#" id="bottomNavClose">
// <img src="images/close.gif">
// </a>
// </div>
// </div>
// </div>
// </div>
var objBody = $$('body')[0];
objBody.appendChild(Builder.node('div',{id:'overlay'}));
objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
Builder.node('div',{id:'outerImageContainer'},
Builder.node('div',{id:'imageContainer'}, [
Builder.node('img',{id:'lightboxImage'}),
Builder.node('div',{id:'hoverNav'}, [
Builder.node('a',{id:'prevLink', href: '#' }),
Builder.node('a',{id:'nextLink', href: '#' })
]),
Builder.node('div',{id:'loading'},
Builder.node('a',{id:'loadingLink', href: '#' },
Builder.node('img', {src: LightboxOptions.fileLoadingImage})
)
)
])
),
Builder.node('div', {id:'imageDataContainer'},
Builder.node('div',{id:'imageData'}, [
Builder.node('div',{id:'imageDetails'}, [
Builder.node('span',{id:'caption'}),
Builder.node('span',{id:'numberDisplay'})
]),
Builder.node('div',{id:'bottomNav'},
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
)
)
])
)
]));
$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
$('outerImageContainer').setStyle({ width: size, height: size });
$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
var th = this;
(function(){
var ids =
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
$w(ids).each(function(id){ th[id] = $(id); });
}).defer();
},
//
// updateImageList()
// Loops through anchor tags looking for 'lightbox' references and applies onclick
// events to appropriate links. You can rerun after dynamically adding images w/ajax.
//
updateImageList: function() {
this.updateImageList = Prototype.emptyFunction;
document.observe('click', (function(event){
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));
},
//
// start()
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
//
start: function(imageLink) {
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
// stretch overlay to fill page and fade in
var arrayPageSize = this.getPageSize();
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
this.imageArray = [];
var imageNum = 0;
if ((imageLink.rel == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}
// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
this.changeImage(imageNum);
},
//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) {
this.activeImage = imageNum; // update global var
// hide elements during transition
if (LightboxOptions.animate) this.loading.show();
this.lightboxImage.hide();
this.hoverNav.hide();
this.prevLink.hide();
this.nextLink.hide();
// HACK: Opera9 does not currently support scriptaculous opacity and appear fx
this.imageDataContainer.setStyle({opacity: .0001});
this.numberDisplay.hide();
var imgPreloader = new Image();
// once image is preloaded, resize image container
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},
//
// resizeImageContainer()
//
resizeImageContainer: function(imgWidth, imgHeight) {
// get current width and height
var widthCurrent = this.outerImageContainer.getWidth();
var heightCurrent = this.outerImageContainer.getHeight();
// get new width and height
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
// scalars based on change from old to new
var xScale = (widthNew / widthCurrent) * 100;
var yScale = (heightNew / heightCurrent) * 100;
// calculate size difference between new and old image, and resize if necessary
var wDiff = widthCurrent - widthNew;
var hDiff = heightCurrent - heightNew;
if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
// if new and old image are same size and no scaling transition is necessary,
// do a quick pause to prevent image flicker.
var timeout = 0;
if ((hDiff == 0) && (wDiff == 0)){
timeout = 100;
if (Prototype.Browser.IE) timeout = 250;
}
(function(){
this.prevLink.setStyle({ height: imgHeight + 'px' });
this.nextLink.setStyle({ height: imgHeight + 'px' });
this.imageDataContainer.setStyle({ width: widthNew + 'px' });
this.showImage();
}).bind(this).delay(timeout / 1000);
},
//
// showImage()
// Display image and begin preloading neighbors.
//
showImage: function(){
this.loading.hide();
new Effect.Appear(this.lightboxImage, {
duration: this.resizeDuration,
queue: 'end',
afterFinish: (function(){ this.updateDetails(); }).bind(this)
});
this.preloadNeighborImages();
},
//
// updateDetails()
// Display caption, image number, and bottom nav.
//
updateDetails: function() {
// if caption is not null
if (this.imageArray[this.activeImage][1] != ""){
this.caption.update(this.imageArray[this.activeImage][1]).show();
}
// if image is part of set display 'Image x of x'
if (this.imageArray.length > 1){
this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
}
new Effect.Parallel(
[
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
],
{
duration: this.resizeDuration,
afterFinish: (function() {
// update overlay size and update nav
var arrayPageSize = this.getPageSize();
this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
this.updateNav();
}).bind(this)
}
);
},
//
// updateNav()
// Display appropriate previous and next hover navigation.
//
updateNav: function() {
this.hoverNav.show();
// if not first image in set, display prev image button
if (this.activeImage > 0) this.prevLink.show();
// if not last image in set, display next image button
if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
this.enableKeyboardNav();
},
//
// enableKeyboardNav()
//
enableKeyboardNav: function() {
document.observe('keydown', this.keyboardAction);
},
//
// disableKeyboardNav()
//
disableKeyboardNav: function() {
document.stopObserving('keydown', this.keyboardAction);
},
//
// keyboardAction()
//
keyboardAction: function(event) {
var keycode = event.keyCode;
var escapeKey;
if (event.DOM_VK_ESCAPE) { // mozilla
escapeKey = event.DOM_VK_ESCAPE;
} else { // ie
escapeKey = 27;
}
var key = String.fromCharCode(keycode).toLowerCase();
if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
this.end();
} else if ((key == 'p') || (keycode == 37)){ // display previous image
if (this.activeImage != 0){
this.disableKeyboardNav();
this.changeImage(this.activeImage - 1);
}
} else if ((key == 'n') || (keycode == 39)){ // display next image
if (this.activeImage != (this.imageArray.length - 1)){
this.disableKeyboardNav();
this.changeImage(this.activeImage + 1);
}
}
},
//
// preloadNeighborImages()
// Preload previous and next images.
//
preloadNeighborImages: function(){
var preloadNextImage, preloadPrevImage;
if (this.imageArray.length > this.activeImage + 1){
preloadNextImage = new Image();
preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
}
if (this.activeImage > 0){
preloadPrevImage = new Image();
preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
}
},
//
// end()
//
end: function() {
this.disableKeyboardNav();
this.lightbox.hide();
new Effect.Fade(this.overlay, { duration: this.overlayDuration });
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
},
//
// getPageSize()
//
getPageSize: function() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
return [pageWidth,pageHeight];
}
}
document.observe('dom:loaded', function () { new Lightbox(); });
Hi there, Having a problem on a clients website incorporating two js sliders in the same page. The scripts before editing were the TinySlider and TinyFader from http://forum.leigeber.com/ The parsers in Internet Explorer, Firefox and Chrome cannot seem to differentiate between the two scripts, although I tried altering various defined names for script control it didn't make much difference. The problems are the controls of the first slider operate the second and only the second slider works. Also, I'm getting validation errors (document type does not allow element "li" here; missing one of "ul", "ol" start-tag) where the showroom (second) script content lies. Not sure if this is related or not but either way if I try to fix it the only working slider is broken. Here is the testing url. http://www . bellsdomestics.co.uk/testing/index . html Can anyone point me in the right direction? Thanks. 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! :-) 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 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. 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 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 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?
Hey, I've been trying to make two javascript files kiss and make up in my web site code. I tried the "noconflict" function, but either I did it wrong, or it didn't work out. Here is the page with the conflict. Help? Hi there, I am having trouble getting two javascript's to work at the same time. I am creating a long page that uses anchor links and the jquery.js to scroll the page to these. I am also trying to use lightbox.js to generate a 'contact us' form in a lightbox. Each function works stand alone but not when combined. The head of my html looks like this... Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Acudrill | Specialists in Diamond Core Drilling and Sawing</title> <meta name="keywords" content="acudrill, core diamond drilling, diamond sawing, chasing, lintel installation and erection, " /> <meta name="description" content="Acudrill - Specialists in Diamond Core Drilling and Sawing" /> <meta name="Creation Design and Communication Ltd" content="Acudrill" /> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen,projection"/> <link rel="stylesheet" type="text/css" href="css/text.css" media="screen,projection"/> <link rel="stylesheet" type="text/css" media="all" href="css/901_12_25.css" /> <!-- JavaScript --> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="jquery.js"></script> <script> function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); } </script> </head> The prototype.js and lightbox.js work fine together but the scrolling (jquery.js) does not. When removing the prototype.js and lightbox.js the jquery.js functions. I'm sure I'm just confusing everyone but I hope you can see what I mean. The functions are to run when selecting from the navigation... Quote: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="javascript:void(0)" onClick="goToByScroll('1')">Home</a></li> <li><a href="javascript:void(0)" onClick="goToByScroll('2')">Services</a></li> <li><a href="javascript:void(0)" onClick="goToByScroll('3')">Case Studies</a></li> <li><a href="contact.html" class="lbOn">Contact</a></li> <li><a href="#"><orange>Acublog</orange></a></li> </ul> </div> You can see how each link should scroll to a section of the page, apart from contact that should bring up a lightbox. Hope some one can help me with this. Thanks, p.s I have read this article but this has not helped as the scripts do not include 'onLoad" Im pretty sure I have some javascript conflicts on my site. Can any one offer advice on how to correct this. Heres a link to a page where there are problems. Every time I refresh that page in IE8 it loads differently - sometimes it loads OK and others it stops loading before the end - a symptom of the js problems I believe? http://tinyurl.com/ocqsmv I have some kind of conflict in my Javascript he http://www.SonomaCountyFamilyLaw.com Drop down menu pops up when one scrolls over "Family Law," but rollover images do not load on other menu items as they should I am relatively new to Javascript; would much appreciate any assistance. Thank you kindly.... Here is the code in question: Code:
<script type="text/javascript">function mmLoadMenus() {
if (window.mm_menu_0514172011_0) return;
window.mm_menu_0514172011_0 = new Menu("root",298,24,"Arial, Helvetica, sans-serif",14,"#FFFFFF","#020056","#3C3A7D","#FFFFFF","left","middle",5,0,100,-5,7,true,true,true,5,true,true);
mm_menu_0514172011_0.addMenuItem("DIVORCE","location='divorce.html'");
mm_menu_0514172011_0.addMenuItem("CUSTODY","location='custody.html'");
mm_menu_0514172011_0.addMenuItem("ADOPTION/GUARDIANSHIP","location='adoption.html'");
mm_menu_0514172011_0.addMenuItem("PRIVATE JUDGING & SETTLEMENTS","location='private.html'");
mm_menu_0514172011_0.hideOnMouseOut=true;
mm_menu_0514172011_0.bgColor='#FFFFFF';
mm_menu_0514172011_0.menuBorder=1;
mm_menu_0514172011_0.menuLiteBgColor='#FFFFFF';
mm_menu_0514172011_0.menuBorderBgColor='#434089';
mm_menu_0514172011_0.writeMenus();
} // mmLoadMenus()var switchTo5x=false;
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
menu_02_over = newImage("assets/menu_02-over.jpg");
menu_06_over = newImage("assets/menu_06-over.jpg");
menu_08_over = newImage("assets/menu_08-over.jpg");
menu_10_over = newImage("assets/menu_10-over.jpg");
menu_12_over = newImage("assets/menu_12-over.jpg");
menu_14_over = newImage("assets/menu_14-over.jpg");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'04ce05ad-19c3-4812-98d3-7e46a3d579db'});</script>
<script language="JavaScript" src="mm_menu.js" type="text/javascript"></script>
</head>
<body onload="preloadImages();">
<script language="JavaScript1.2" type="text/javascript">mmLoadMenus();</script>
hey all, I'm using a js script for horizontal scrolling as well as a little script that changes the class of a tag when it's clicked, but the latter doesn't work with the horizontal scrolling script. not really sure why, i'm pretty new to javascript, any help would be awesome.. here's the horizontal scrolling: http://code.google.com/p/wplatformer...5e4d03a48bfc07 and the onclick change: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='selected'; Lst=obj; } /*]]>*/ </script></head> <body> <style type="text/css"> #nav .selected { opacity:1.00;} </style> <div id="nav"> <a href="#home" id="hlink" onClick="CngClass(this);" style="margin-left:130px">home</a> <a href="#foamo" class="flink">foamo</a> <a href="#book" class="blink">book</a> <a href="#portfolio" class="plink">portfolio</a> <a href="#contact" class="clink">contact</a> </div> </body> I'm trying to get a javascript lightbox and a background image resize script to work on the same webpage but one's causing the other to work incorrectly. If anyone can help combine the 2 into a working script it would be hugely appreciated: <!-- BG script --> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script type="text/javascript" src="supersized.2.0.js"></script> <script type="text/javascript"> $(function(){ $.fn.supersized.options = { startwidth: 640, startheight: 480, vertical_center: 1, slideshow: 0, }; $('#supersize').supersized(); }); </script> <!-- lightbox script --> <script type="text/javascript" src="imagezoom.js"></script> <script type="text/javascript" src="mootools-1.2.4-core-yc.js"></script> <link href="imagezoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> window.addEvent("domready", function() { initImageZoom(); }); </script> Hi All, I have been racking my brain over this the last few days, and am hoping I can get help with an issue I am having. The website i am working on is using Wordpress as a CMS. I created a custom splash page that features 3 tabs that operate using CSS/Javascript to show and hide content in DIVs. One of those DIVs contains the login form to the rest of the site, and is housed in a sub-DIV generated by short code from a plugin. I am no expert with JavaScript, but understand that its code displays a given div while hiding the others, by telling the active div to Code: display:block; and the inactive ones to Code: display:none; . The problem is that the div that contains the login form, which has a plugin-generated div within it, is being hidden, so that when the page is loaded, everything appears, but when you click the other tabs and return to it, it disappears. You can see what I mean by going to http://le-raq.com/test/tab. For whatever reason, the sub div is being told to Code: display:none; (as verified by Firebug). Any idea of what code i can put in to stop this? Im banging my head against a wall here. Here is the code to the site as reviewed in Firebug: Code: <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>LE-RAQ.com | Independent Street/ Urban Wear</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://le-raq.com/home.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://le-raq.com/site/wp-content/themes/theunstandard/cufon-yui.js" type="text/javascript"></script>
<script src="http://le-raq.com/site/wp-content/themes/theunstandard/League_Gothic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#plink', {hover: true});
Cufon.replace('.links', {hover: true});
Cufon.replace('#slink', {hover: true});
</script>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=160852
function show_visibility(IDS){
hide_visibility();
document.getElementById(IDS).style.display = 'block';
}
function hide_visibility(){
var sel = document.getElementById('lnks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
}
</script>
</head>
<body>
<div id="maindivbox">
<div id="leftbox">
<script type="text/javascript"><!--
var img = new Array();
img.push("http://www.le-raq.com/indeximages/SplashLEFT2.png");
img.push("http://www.le-raq.com/indeximages/splashslide2.png");
var num = 1;
for(i=0;i<num;i++) {
rand = Math.floor(Math.random()*img.length);
document.write("<img src=\"" + img[rand] + "\" />");
}
//--></script>
<br><br>
<center><iframe src="http://www.facebook.com/plugins/like.php?href=facebook.com/pages/le-raqcom/148545595176936&layout=standard&show_faces=true&width=450&action=like&font=segoe+ui&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></center>
<br><center><p style="font-family:'Arial Black', Gadget, sans-serif; font-size:9px;">Copyright © 2010 LE-RAQ.com, a division of <a href="http://nxtlvl-media.com">NXTLVL Media, LLC</a> - All Rights Reserved</p></center>
</div>
<div id="rightboxtop" align="left">
<img src="http://www.le-raq.com/smlogo.png" style="margin-top:10px;"></img>
</div>
<div id="middlerightbox" >
<div style="width:100%; height:30px; margin-bottom:10px;"" align=center>
<p id="slink" style="margin-top:10px;"> <a href="#login" onclick="show_visibility('logintab')" class="tab">LOGIN</a> | <a href="#subscribe" onclick="show_visibility('subscribe')" class="tab">SUBSCRIBE</a> | <a href="#howitworks" onclick="show_visibility('howitworks')" class="tab">HOW</a></p>
</div>
<div id='lnks' style="margin-top:35px;">
<!--LOGIN/REGISTER-->
<DIV id="logintab" style="margin: 20px 20px; display: block;">
<li><h2>Welcome, Administrator</h2>
<div class="login" id="theme-my-login1">
<div class="tml-user-avatar"><img alt='' src='http://0.gravatar.com/avatar/c6cdbf9cbd96c836560d6031fc24027d?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G' class='avatar avatar-50 photo' height='50' width='50' /></div>
<ul class="tml-user-links"><li><a href="http://le-raq.com/test/wp-admin/">Dashboard</a></li>
<li><a href="http://le-raq.com/test/wp-admin/profile.php">Profile</a></li>
<li><a href="http://le-raq.com/test/?action=logout&_wpnonce=d9d35f125f">Log out</a></li>
</ul>
</div></li>
</DIV>
<!--END LOGIN/REGISTER-->
<!--Subscribe-->
<DIV id="subscribe" style="margin: 20px 20px; display: none;">
<P id="plink" style="margin-top: 20px; margin-left: 10px; color:#FFFFFF;"> SIGN UP FOR OUR FREE PRE-LAUNCH<BR>NEWSLETTER, AND GET FIRST DIBS ON THE<BR>HOTTEST APPAREL AND DEALS!!<br><br>JOIN NOW AND YOU CAN ALSO EARN UP TO $15*!!</P>
</DIV>
<!--END Subscribe-->
<!--Howitworks-->
<DIV id="howitworks" style="margin: 20px 20px; display: none;">
</DIV>
<!--END Howitworks-->
</div>
</div>
<div id="rightboxbottom">
<p style="font-family:'Arial Black', Gadget, sans-serif; font-size:9px; margin-top:10px;">*<strong>THE FINE PRINT</strong>: Offer available to only the first 1,500 Subscribers. Earn $10 in store credit for signing up with LE-RAQ.com and an extra $5 in store credit for inviting a friend, to a limit of $15 store credit. Offer may end without notice.<br><br>
PRIVACY NOTICE: Your privacy is important to us. Therefore, we will not sell or rent your information to anyone else for any reason.<br> QUESTIONS?: Contact <a href="mailto: info@le-raq.com">info@le-raq.com</a> </p>
</div>
</div>
<script src="chrisdomroll.js">
/****************************************************
* DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/
</script>
</body>
</html>
<!-- Dynamic Page Served (once) in 0.749 seconds -->
Thanks in advance!! Hello, I'm sure someone on this site is familiar with Lightforms AJAX contact forms. I've downloaded one and am attempting to integrate with my current Contact page. Lightform comes with 3 external .js sheets one of which is formcheck.js. While Lightform has sufficiently functioning and nicely styled JS which checks for valid inputs in the text fields, I would also like to add watermark text in a few of the text fields. I pretty much had what I wanted on my own form until I tired to mix it as inline code with with Lightform Contact form. Here is the mixtu Code: <input id="name" name="name" type="text" class="validate['required','length[3,-1]','nodigit']" size="20" value="Mr., Ms., Pastor..."onBlur="if(document.getElementById('name').value=='') {document.getElementById('name').value='Mr., Ms., Pastor...'};" onfocus="document.getElementById('name').value=''"; />
Perhaps someone can tell me why my watermark effect won't happen anymore. thanks for your time. |
|||||||