|
JavaScript - Using Two Scripts On The Same Page, Only One At A Time Works.
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) Similar TutorialsI am attempting to implement a Close icon which responds to mouseover, mouseup, mousedown, and mouseout. The problem is that the first DIV I display, using this code, works as intended, i.e. all the button states work. I can close and reopen the same DIV and everything is still fine. If I open a second DIV, which uses the reuse code below, the button states do not appear, although the DIV will close properly. If I step through the debugger all of the state images load properly but do not appear. Once I have tried to use the button in the second DIV, all of the DIV's fail to display the button states but close properly. Additionally all of the pages where this is used are generated using XMLHttpRequest(). The DIV's using this are generated when the site loads and then shown and hidden as needed with their contents being generated via XMLHttpRequest(). Anyone have any ideas? The intent is to reuse the following in a number of DIV's: Code: rtn = "<div id='closepanel' class='closepanel'><img src='images/closebutup.png' name='closebut' width='20px' height='20px' border='0px' onmouseover=\"swapbuttonstate('closebut','over')\" onmouseout=\"swapbuttonstate('closebut','out')\" onmousedown=\"swapbuttonstate('closebut','down')\" onmouseup=\"closePanel('"+this.msDivid+"')\" ></div>";
On startup I preload the images using : Code: if (document.images) {
closebutup= new Image();
closebutup.src="images/closebutup.png";
closebutover= new Image();
closebutover.src="images/closebutover.png";
closebutdown=new Image();
closebutdown.src="images/closebutdown.png";
}
The swapbuttonstate function is defined as: Code: function swapbuttonstate(buttonname, state) {
switch(state) {
case "over":
if (document.images) {
butover=eval(buttonname + "over.src");
document[buttonname].src= butover;
}
break;
case "out":
case "up":
if (document.images) {
butup=eval(buttonname + "up.src");
document[buttonname].src= butup;
}
break;
case "down":
if (document.images) {
butdown=eval(buttonname + "down.src");
document[buttonname].src= butdown;
}
break;
}
}
and closePanel is defined as: Code: function closePanel(divid) {
document.getElementById(divid).style.display='none';
}
Any help would be greatly appreciated. Hello everybody I am new here and my English is not very good, sorry. I hope this post is in the correct forum.Thank you in advance for helping me out. I am from the netherlands and we are having a problem with a script. I will explain a few things so everything is clear for you. We are a member from a website: www.onderdelenzoeker.nl Through this website customers can ask for used carparts. If we have these parts in stock we can send the customers an email trough this website. (we are loggin in at leden.onderdelenzoeker.nl) We don't have a regular stock and price so every email we send is unique. That is why we are using this script. When we are sending a customer an email, this script will put the parts in our webshop with the prices. The customer will get an email with a unique link and can order the parts and pay trough the internet. But now the problem , this script won't work the first time. If we fill in a form and send it the first time the script won't work (the customer is getting an email but without the link and the parts are not in the webshop). If we fill in the same form a second time and send it the script is working and the customer is getting an email with a link and the parts are in the shop. Now the script is working in IE and we are using Trixie (is the same like greasemonkey is for FF) I hope I have written down all the information you need. And I hope there is somebody who can help me out. Thank you for your time and effort. Nicole This is the script: PHP Code: // ==UserScript== // @name onderdelenzoeker.nl Extractor for ie // @namespace http://www.autodemontage-wlubbers.nl // @description Adds products to the autodemontage-wlubbers.nl webshop width the information form the onderdelenzoeker.nl website when a users request a product. // @date 09.05.2011 // @version 1.0.2 // @require http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js // @include http://leden.onderdelenzoeker.nl/* // ==/UserScript== var merk; var model; var bouwjaar; var base_url = 'http://www.autodemontage-wlubbers.nl/shop/admin/services.php?action='; $(document).ready(function(){ setTimeout('replace_button()',500); }); replace_button = function(){ if($('.info').find('td:eq(7)').length!=0){ merk = $('.info').find('td:eq(7)').html().split(' ')[0]; model = $('.info').find('td:eq(10)').html(); bouwjaar = $('.info').find('td:eq(13)').html().replace(/[^A-Za-z0-9 .]/,''); $('.info:eq(4)').find('button').after('<input type="button" class="button" onclick="addProjectToShop();" style="width:100%" value="Verstuur gegevens naar aanvrager" />'); $('.info:eq(4)').find('button:eq(0)').remove(); $('body').after('<iframe style="display:none;" id="sendFrame" />'); $('#sendFrame').attr('src',base_url+'login&pass=q6pk4mcn5kzy5hppg0bcq'); } setTimeout('replace_button()',1000); } addProjectToShop = function (){ $('body').after('<div style="position:fixed;top:'+(window.innerHeight/2-100)+';left:'+(window.innerWidth/2-200)+';width:400px;height:200px;border:1px solid black;background:white;" id="loadingFrame" ><h1>Sending...</h1></div>'); var length = 10; var sPassword = ""; for (i=0; i < length; i++) { numI = getRandomNum(); while (checkPunc(numI)) { numI = getRandomNum(); } sPassword = sPassword + String.fromCharCode(numI); } var int_ = 200; $('.info:eq(4)').find('label').each(function(){ var parent = $(this).parent().parent().parent(); if(parent.find('input:eq(0)').attr('checked')) { setTimeout('$(\'#sendFrame\').attr(\'src\',\''+base_url+'addProduct&pass=q6pk4mcn5kzy5hppg0bcq&code='+sPassword+'&merk='+merk+'&model='+model+'&bouwjaar='+bouwjaar+'&item='+$(this).html()+'&prijs='+parent.find('input:eq(1)').val()+'&statiegeld='+parent.find('input:eq(2)').val()+'&verzendkosten='+$('#verzendkosten').val()+'&garantie='+parent.find('select option:selected').text()+'\');',int_); int_ = int_ + 200; } }); setTimeout('$(\'#sendFrame\').attr(\'src\',\''+base_url+'logout\');',int_); $('textarea').val($('textarea').val()+"\nU kunt de producten via onze webshop bestellen.\nKlik of kopieer de onderstaande link in uw browser.\nhttp://www.autodemontage-wlubbers.nl/shop/index.php?route=product/product/refcode&refcode="+sPassword); setTimeout('$(\'#loadingFrame\').remove();$(\'#sendFrame\').remove();validate_and_submit();',4000); return false; } getRandomNum = function () { var rndNum = Math.random() rndNum = parseInt(rndNum * 1000); rndNum = (rndNum % 94) + 33; return rndNum; } checkPunc = function (num) { if ((num >=33) && (num <=47)) { return true; } if ((num >=58) && (num <=64)) { return true; } if ((num >=91) && (num <=96)) { return true; } if ((num >=123) && (num <=126)) { return true; } return false; } Am I doing something wrong here? I have two anonymous functions to validate two different forms on two different pages. They both work on the individual page, though when I try and put them in the same script.js folder only the top function seems to work. Code: <script type="text/javascript">
// Form Validation / Catalog Template ----------------------------------------------------------------------------------------------------------------------
document.getElementById("formValidation").onsubmit = function(){
if(document.getElementById("reqAddrCont").value == ""){
document.getElementById("reqAddrCont").className = "error";
return false;
}if(document.getElementById("reqAddrName").value == ""){
document.getElementById("reqAddrName").className = "error";
return false;
}if(document.getElementById("reqAddr1").value == ""){
document.getElementById("reqAddr1").className = "error";
return false;
}if(document.getElementById("reqAddr6").value == ""){
document.getElementById("reqAddr6").className = "error";
return false;
}if(document.getElementById("reqAddrState").value == "0"){
document.getElementById("reqAddrState").className = "error";
return false;
}if(document.getElementById("reqAddrPost").value == ""){
document.getElementById("reqAddrPost").className = "error";
return false;
}if(document.getElementById("reqAddrPhone").value == ""){
document.getElementById("reqAddrPhone").className = "error";
return false;
}if(document.getElementById("reqAddrEMail").value == ""){
document.getElementById("reqAddrEMail").className = "error";
return false;
}else{
return true;
}
};
// Form Validation / New Account Template --------------------------------------------------------------------------------------------------------------------------
document.getElementById("formValidationAccount").onsubmit = function(){
if(document.getElementById("AcctName").value == ""){
document.getElementById("AcctName").className = "error";
return false;
}if(document.getElementById("AcctTitle").value == ""){
document.getElementById("AcctTitle").className = "error";
return false;
}if(document.getElementById("AcctCompany").value == ""){
document.getElementById("AcctCompany").className = "error";
return false;
}if(document.getElementById("AcctAddress1").value == ""){
document.getElementById("AcctAddress1").className = "error";
return false;
}if(document.getElementById("AcctAddress2").value == ""){
document.getElementById("AcctAddress2").className = "error";
return false;
}if(document.getElementById("AcctAddress6").value == ""){
document.getElementById("AcctAddress6").className = "error";
return false;
}if(document.getElementById("AcctState").value == "0"){
document.getElementById("AcctState").className = "error";
return false;
}if(document.getElementById("AcctPost").value == ""){
document.getElementById("AcctPost").className = "error";
return false;
}if(document.getElementById("AcctCountry").value == ""){
document.getElementById("AcctCountry").className = "error";
return false;
}if(document.getElementById("AcctPhone").value == ""){
document.getElementById("AcctPhone").className = "error";
return false;
}if(document.getElementById("AcctLogin").value == ""){
document.getElementById("AcctLogin").className = "error";
return false;
}if(document.getElementById("AcctLogin2").value == ""){
document.getElementById("AcctLogin2").className = "error";
return false;
}if(document.getElementById("AcctPassword").value == ""){
document.getElementById("AcctPassword").className = "error";
return false;
}if(document.getElementById("AcctPasswordDupe").value == ""){
document.getElementById("AcctPasswordDupe").className = "error";
return false;
}else{
return true;
}
};
</script>
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 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>
Hi everyone, I searched and found some answers to this question, however, after trying the solutions, none worked for me. I am hoping someone can help me figure out where i'm going wrong with this. I am trying to use the jQuery Nivo Slider and the jQuery Ad Gallery on the same page. When both scripts are active, only one works. When i comment out one of them, the other works. This happens either way i do it. I tried using the jQuery.noConflict(); but it did not work...unless i did something wrong. Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/includes/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="/includes/jquery.ad-gallery.js"></script>
<script type="text/javascript">
$(function() {
$('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
$('img.image1').data('ad-title', 'Title through $.data');
$('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
$('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
$('#toggle-description').click(
function() {
if(!galleries[0].settings.description_wrapper) {
galleries[0].settings.description_wrapper = $('#descriptions');
} else {
galleries[0].settings.description_wrapper = false;
}
return false;
}
);
});
jQuery.noConflict();
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:5, // Slide transition speed
pauseTime:7000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:false, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.png', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Does anyone have any ideas? I appreciate the help in advance! Tsiqueira I've 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 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! Hello! I am playing with CSS3 transitions to show/hide a DIV element. The application will be for a newsletter which will allow a user to show and hide article content. There will be multiple articles. I have a <DIV id="article1" class="content"> and the default height is 0px. When someone clicks the "show/hide article" link I set the height to 250px. A CSS transition on the content class (height) adds a smooth change from 0px to 250px. I have rigged up a simple Javascript function so that when someone clicks the "show/hide article" link, it checks the height of the DIV. If the div is 0px, it should expand the content, if not, it should shrink it. It works when you click the link the first time (i.e. the content div height is set to 250px and the transition works). But when you click it again, it does not set the height to 0px in order to hide the content. I think there is something wrong with the validation of document.getElementById(articleID).style.height ? Any ideas? Thank you! Code: Code: <!DOCTYPE html>
<html land="en">
<head>
<script language="javascript" type="text/javascript">
function showhideContent(articleID) {
if(document.getElementById(articleID).style.offsetHeight = '0px'){
document.getElementById(articleID).style.height = '250px';
}
else{
document.getElementById(articleID).style.height = '0px';
}
}
</script>
<style type="text/css">
p {
margin:10px;
font-size:12px;
}
h1 {
margin:10px;
}
body {
background-color:lightgrey;
font-family:Arial;
font-size:12px;
}
#newsletter {
width:500px;
border:solid;
border-width:1px;
border-color:black;
background-color:white;
text-align:left;
font-size:11px;
}
#header {
height:125px;
}
#footer {
height:50px;
background-color:#330033;
}
#headerbar{
background-color:lightblue;
height:35px;
overflow:hidden;
font-size:12px;
-webkit-transition: background-color 1s;
}
#headerbar:hover{
background-color:#3399FF;
}
.content{
background-color:white;
height:0px;
overflow:hidden;
-webkit-transition: height 0.5s ease-in-out;
}
#expand{
background-color:red;
}
</style>
</head>
<meta charset="UTF-8">
<body>
<center>
<div id="newsletter">
<section id="header">
<img src="newsletter_header_test.jpg">
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem.
</p>
<article>
<section id="headerbar">
<div style="float:left;">
<h1>Introducing: the first article</h1>
</div>
<div style="float:right;">
<p>
<a id="expand" href="#" onClick="javascript:showhideContent
('article1');return false;">Show/Hide Article</a>
</p>
</div>
</section>
<div>
<section id="article1" class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem. Quisque ultricies volutpat mauris, nec cursus
<br><br>
sapien laoreet ut. Maecenas volutpat porta enim et tincidunt. Sed vel lectus eget dolor dictum ultrices in in
mauris. Praesent laoreet velit vitae est vulputate a varius lorem eleifend.
</p>
</section>
</div>
</article>
<br>
<br>
<section id="footer">
<p>footer</p>
</section>
</div>
</center>
</body>
</html>
So this is my first thread and I am a noob at javascript so please forgive obvious mistakes. I am try to make images float across the screen horizontally. Ideally I would like them to come from both sides and be at different y positions. The problem I am having is that I can only seem to get one to move at a time. Another problem is that when they move off to the right of the screen it expands the viewable size of the site. So here's what I've come up with thus far. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
body {
background-color: #0CF;
}
</style>
<script language="javascript">
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1000; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("cloud").style.top = y+'px';
document.getElementById("cloud").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',100);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="backgroundgradient.png" onload="moveImage()">
<div id="cloud" class="movable">
<img src="cloud01.png" />
</div>
<script language="javascript">
var x = -100; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1500; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage01() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("plane").style.top = y+'px';
document.getElementById("plane").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage01()',10);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="web_layout/backgroundgradient.png" onload="moveImage01()">
<div id="plane" class="movable">
<img src="plane.png" />
</div>
</body>
</html>
Any help is greatly appreciated. Thanks 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?
Hello: I need help with an issue I'm having with the HTML5 audio, the createsoundbite works fine for onClick if your reference is for current/ same page, here is an example of what I mean. <a href="#" onClick=uniquevar.playclip()><img src="some image"></a> I can here my click cound. But if I actually have a link to another page on the href no sound is heard it just navigate to the html page. <a href="New_html" onClick=uniquevar.playclip()><img src="someimage"></a> no sound is hear. Can anyone tell me what the problem may be or what it is I'm doing wrong. I surely hope it was not designed to work this way. Thanks in advance. PDH So, I am working out a current issue I'm having with a sortable table script. Code: var sortableTable = new Class({:thumbsup:
getOptions: function(){
return {
overCls: false,
onClick: true,
sortOn: 0,
sortBy: 'ASC',
filterHide: true,
filterHideCls: 'hide',
filterSelectedCls: 'selected'
};
},
initialize: function(table, options){
this.setOptions(this.getOptions(), options);
this.table = $(table);
this.tHead = this.table.getElement('thead');
this.tBody = this.table.getElement('tbody');
this.tFoot = this.table.getElement('tfoot');
this.elements = this.tBody.getElements('tr');
this.filtered = false;
/*for(i=0;i<10;i++){
this.elements.clone().injectInside(this.tBody);
}
this.elements = this.tBody.getElements('tr');*/
//THIS IS FOR ANIMATION AND POINTER EFFECT ON HOVER
this.elements.each(function(el,i){
if(this.options.overCls){
el.addEvent('mouseover', function(){
el.addClass(options.overCls);
}, this);
el.addEvent('mouseout', function(){
el.removeClass(options.overCls);
});
}
if(this.options.onClick){
el.addEvent('click', options.onClick);
}
}, this);
//setup header
this.tHead.getElements('th').each(function(el,i){
if(el.axis){
el.addEvent('click', this.sort.bind(this,i));
el.addEvent('mouseover', function(){
el.addClass('tableHeaderOver');
});
el.addEvent('mouseout', function(){
el.removeClass('tableHeaderOver');
});
el.getdate = function(str){
// inner util function to convert 2-digit years to 4
function fixYear(yr) {
yr = +yr;
if (yr<50) { yr += 2000; }
else if (yr<100) { yr += 1900; }
return yr;
};
var ret;
//
if (str.length>12){
strtime = str.substring(str.lastIndexOf(' ')+1);
strtime = strtime.substring(0,2)+strtime.substr(-2)
}else{
strtime = '0000';
}
//
// YYYY-MM-DD
if (ret=str.match(/(\d{2,4})-(\d{1,2})-(\d{1,2})/)) {
return (fixYear(ret[1])*10000) + (ret[2]*100) + (+ret[3]) + strtime;
}
// DD/MM/YY[YY] or DD-MM-YY[YY]
if (ret=str.match(/(\d{1,2})[\/-](\d{1,2})[\/-](\d{2,4})/)) {
return (fixYear(ret[3])*10000) + (ret[2]*100) + (+ret[1]) + strtime;
}
return 999999990000; // So non-parsed dates will be last, not first
};
//
el.findData = function(elem){
var child = elem.getFirst();
if(child){
return el.findData(child);
}else{
return elem.innerHTML.trim();
}
};
//
el.compare = function(a,b){
var1 = el.findData(a.getChildren()[i]);
var2 = el.findData(b.getChildren()[i]);
//var1 = a.getChildren()[i].firstChild.data;
//var2 = b.getChildren()[i].firstChild.data;
if(el.axis == 'number'){
var1 = parseFloat(var1);
var2 = parseFloat(var2);
if(el.sortBy == 'ASC'){
return var1-var2;
}else{
return var2-var1;
}
}else if(el.axis == 'string'){
var1 = var1.toUpperCase();
var2 = var2.toUpperCase();
if(var1==var2){return 0};
if(el.sortBy == 'ASC'){
if(var1<var2){return -1};
}else{
if(var1>var2){return -1};
}
return 1;
}else if(el.axis == 'date'){
var1 = parseFloat(el.getdate(var1));
var2 = parseFloat(el.getdate(var2));
if(el.sortBy == 'ASC'){
return var1-var2;
}else{
return var2-var1;
}
}else if(el.axis == 'currency'){
var1 = parseFloat(var1.substr(1).replace(',',''));
var2 = parseFloat(var2.substr(1).replace(',',''));
if(el.sortBy == 'ASC'){
return var1-var2;
}else{
return var2-var1;
}
}
}
if(i == this.options.sortOn){
el.fireEvent('click');
}
}
}, this);
},
sort: function(index){
if(this.options.onStart){
this.fireEvent('onStart');
}
//
this.options.sortOn = index;
var header = this.tHead.getElements('th');
var el = header[index];
header.each(function(e,i){
if(i != index){
e.removeClass('sortedASC');
e.removeClass('sortedDESC');
}
});
if(el.hasClass('sortedASC')){
el.removeClass('sortedASC');
el.addClass('sortedDESC');
el.sortBy = 'DESC';
}else if(el.hasClass('sortedDESC')){
el.removeClass('sortedDESC');
el.addClass('sortedASC');
el.sortBy = 'ASC';
}else{
if(this.options.sortBy == 'ASC'){
el.addClass('sortedASC');
el.sortBy = 'ASC';
}else if(this.options.sortBy == 'DESC'){
el.addClass('sortedDESC');
el.sortBy = 'DESC';
}
}
//
this.elements.sort(el.compare);
this.elements.injectInside(this.tBody);
//
if(this.filtered){
this.filteredAltRow();
}else{
this.altRow();
}
//
if(this.options.onComplete){
this.fireEvent('onComplete');
}
},
altRow: function(){
this.elements.each(function(el,i){
if(i % 2){
el.removeClass('altRow');
}else{
el.addClass('altRow');
}
});
},
filteredAltRow: function(){
this.table.getElements('.'+this.options.filterSelectedCls).each(function(el,i){
if(i % 2){
el.removeClass('altRow');
}else{
el.addClass('altRow');
}
});
},
filter: function(form){
var form = $(form);
var col = 0;
var key = '';
form.getChildren().each(function(el,i){
if(el.id == 'column'){
col = Number(el.value);
}
if(el.id == 'keyword'){
key = el.value.toLowerCase();
}
if(el.type == 'reset'){
el.addEvent('click',this.clearFilter.bind(this));
}
}, this);
if(key){
this.elements.each(function(el,i){
if(this.options.filterHide){
el.removeClass('altRow');
}
if(el.getChildren()[col].firstChild.data.toLowerCase().indexOf(key) > -1){
el.addClass(this.options.filterSelectedCls);
if(this.options.filterHide){
el.removeClass(this.options.filterHideCls);
}
}else{
el.removeClass(this.options.filterSelectedCls);
if(this.options.filterHide){
el.addClass(this.options.filterHideCls);
}
}
}, this);
if(this.options.filterHide){
this.filteredAltRow();
this.filtered = true;
}
}
},
clearFilter: function(){
this.elements.each(function(el,i){
el.removeClass(this.options.filterSelectedCls);
if(this.options.filterHide){
el.removeClass(this.options.filterHideCls);
}
}, this);
if(this.options.filterHide){
this.altRow();
this.filtered = false;
}
}
});
sortableTable.implement(new Events);
sortableTable.implement(new Options);
It works flawlessly on my dev page: http://www.align.com/Dev/Resources/ But I am having issues with is on my live page: http://www.align.com/Resources/ My first thought is that it could be a labeling issue (ie: I forgot to remove "/dev" when moving the HTML over to live) but after reviewing for an hour, I don't believe this is the issue. Could it be an ASP issue? thx in advance.... -Mike Fortuna Greetings too all, here is my personal website. Situation I have a relatively simple few lines of javascript that allow me to slideToggle a div (#main-content-info) into (and back out of) display. The div begins with its display set to none and when the header buttons at the top of the page are clicked, (#main-content-info) slides into display. Problem The function stops working when you navigate to other pages in the site (by using the "Browse Portfolio" drop down). Question How do I allow this function to perform on all pages of the site? Please see code below. Code:
$(document).ready(function(){
$(".slide-button-one").click(function(){
$("#main-content-info").slideToggle(600,function(){
$("#main-content-portfolio").toggle();
});
return false;
});
});
Thank you for your time and I would appreciate any responses, long or short – including "don't do it like that, do it like this." Rob I am using the following code to show visitors when my page was updated last. It seems really cumbersome for what it does, too. Right now, it reads: Last updated on Monday, December 19, 2011 I wanted to add code to it so that it reads the hours and is in this format: Last updated on Monday, December 19, 2011 at 8:44am How can I add the "at hh:mm am/pm" part? Or is there easier code that will do this? Thank you in advance. Code: function getLongDateString()
{month = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
dayOfWeek = this.getDay();
day = dayNames[dayOfWeek];
dateOfMonth = this.getDate();
monthNo = this.getMonth();
month = month[monthNo];
year = this.getYear();
if (year < 2000)
year = year + 1900;
dateStr = day+", "+month+" "+dateOfMonth+", "+year;
return dateStr;
}
//register the method in the class Date
Date.prototype.getLongDateString=getLongDateString;
function DocDate()
{ //return the document modification date (excl.time)
//as a string
DateTimeStr = document.lastModified;
secOffset = Date.parse(DateTimeStr);
if (secOffset == 0 || secOffset == null) //Opera3.2
dateStr = "Unknown";
else
{
aDate = new Date();
aDate.setTime(secOffset);
//use method defined above
datestr = aDate.getLongDateString();
}
return dateStr;
}
document.write("<left> Last updated on ");
document.writeln(DocDate(),"</left>");
this page will display new images when you mouseover the red and orange arrows on the menu on the right side in chrome, but not ff, ie, opera, and safari. Any ideas as to why these other browsers aren't running the code like chrome? guessing this is javascript related - anyone want to offer any clues?
I'm no coder, as you will soon discover. The web work I do is from a purely novice, even hobby standpoint and the sites I create and host are nothing more than favors for friends and acquaintances who have needed but have not had a presence on the web. This being explained, I am asking those with coding skills to please take a look at the site I've just completed for a little diner down the road. (They're just starting out and can't afford to pay a professional web designer and, unfortunately, are stuck with me.) The site is http://d-n-ddiner.com I'm the first to say that the mouseover sound would drive me crazy, but the guys who own the diner are enthusiastic and want it left as is. I have had to combine scripts in order to have the "black-and-white to color" image effect work simultaneously with sound. The sound script depends on uploaded files: soundmanager.js, soundcontroller.swf and sound-config.xml and its tags are found incorporated with each involved image, within the body. The image effects are just the result of playing around with bits and pieces I've seen, mucking about the Internet. Its script is found within the head and also within the body, in each involved image's area, in mouseover, mouseout and, of course when specifying "name=" (such as Img_1). I opted for providing the sound in this manner because I am able to use an .mp3 file, rather than having to weigh through the pros and cons of .au versus .wav, etc., and the fickle nature of different browsers and plug-in crashes. After having many test the site (friends with varying operating systems and browsers) it appears that this mp3 solution makes the mouseover sound available to a broader range of users. Success has been achieved with Firefox, Safari, Netscape, Omniweb and Chrome. However, Internet Explorer and Opera seem to be the holdouts for both Mac and PC users. All this brings me to two requests: Would someone take a look at the site (particularly with Firefox) to determine if something might be done to help the page load more smoothly? Secondly, is there some sleight-of-hand that might be incorporated into the script to help IE and Opera detect the mouseover sound or do you consider these two browsers essentially not worth the bother? I am attaching a zip of the sound files I mentioned. The mp3 is not included but any mp3 snippet would do for testing, provided the sound config file is edited to reflect its file name. My primary concern is smooth page-loading; the IE and Opera issue is of less importance. Thank you for your patience and for any assistance you would offer. |
|||||||