JavaScript - Photogallery, Shows Nothing In Ie

Knowing just enough about javascript to get myself in trouble, I have put three timed javascripts to appear from 18 December to the 1 January on three pages of my sister's website. The scripts are on the main index for the site; the index page for the bibliography folder /bibliography/ and in the education folder on just one page: /education/educationlinks.html.

Part one of the script inserts the css file; part two of the script inserts a "snowing" script and part three inserts a "make it stop snowing/let it snow" script. Everything is working perfectly for the main index page and the bibliography page. But I cannot figure out why the 3rd "make it stop snowing/let it snow" refuses to show up on the page in the education folder (the snowing javascript IS working on all three pages).

There are no errors being thrown and the education page validates.

This is the coding for the 3rd script:

Code:

// snowscript part 3:   Show the script between 19-31 Dec and 1 Jan 

var date = new Date();
var d  = date.getDate();
var m = date.getMonth() + 1;
dm = d + m;

if  (m = 12) 
{
   if (d > 18)
   { document.write('<script src="/scripts/snowlinkswitch.js" type="text/javascript" id="snow"></script>');   
   }
   else 
   { 
   document.write('');
   }
}
else if (dm == 1,1)
  {
  document.write('<script src="/scripts/snowlinkswitch.js" type="text/javascript"></script>');
  }
else
  {
  document.write('');
  }

This is the coding for snowlinkswitch.js

Code:

function myhref(){
    document.getElementById('myAnchor').innerHTML="please let it snow!";
    document.getElementById('myAnchor').href=location.href;
    document.getElementById('myAnchor').title="let it snow! let it snow!";  
    document.getElementById('myAnchor').onclick="location.reload(); startstop('spanstyle'); return false;";
}

// 

document.write ('<div id="snowlinks"><img src="/images/snow3aa.gif" width="11" height="11" border="0" alt="*"> <a id="myAnchor" href="" onclick="myhref();hidesnow(); return false;" title="please make it stop snowing!">please make it stop snowing!<\/a> <img src="/images/snow3aa.gif" width="11" height="11" border="0" alt="*"></div> ');

I would search for a similar occurrence but have no clue about what search words to use. Does anyone here have an idea about what I have done incorrectly that is causing this to happen? Many thanks.

E Morris
Toronto, Canada

My slideshow is working in the dreamweaver preview, but not showing up when i upload and view on the internet.

http://www.kristynaswebpages.com/home2a.html

I have this in the head 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="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [1024, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.kristynaswebpages.com/falcon_1.jpg", "", "", "The A Control Room is blah blah blah"],
		["http://www.kristynaswebpages.com/falcon_2.jpg", "", "", "The A Control Room is blah blah blah"],
		["http://www.kristynaswebpages.com/falcon_3.jpg"], 
		["http://www.kristynaswebpages.com/falcon_4.jpg", "", "", "The A Control Room is blah blah blah"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})


</script>

and then i put <div id="fadeshow1"></div> where I wanted the slideshow to appear (between the menu bar and the text at the bottom).

I have tried writing the pic links as both "http://www.kristynaswebpages.com/falcon_2.jpg" and "falcon_2.jpg"


If anyone could help, that would be so awesome!

Hello there

I'm trying to code a menu which when clicking say the 'news' button, a div will appear to the right containing the news, if you then click the button below, say 'information', the news div will be replaced by the 'information' div. I can figure out how to make a single menu item show and hide a div, but I can't for the life of me figure out how to do it for a whole menu.

Any help greatly appreciated!

I know this is a common problem, and each slide show script is a bit different and I can't get this to work exactly right:

http://www.javascriptkit.com/script/...ifferent.shtml

I've got two tables containing mouseover image "slide" shows - numbered sequentially but both are on the same index.html page. One image show comes up with the first navigation link, the second image show comes up with the second navigation link. The first image show works, the second doesn't - could you tell me what is causing that.

there is a javascript glider that requires them both to be on the same page. link to the page here . . .

http://www.sunupdesignbuild.com/NEW/index.html

appreciate your help
thank you
T

Hi there,

I saw this on the website for the new blackberry playbook and want to do something similar to that. http://us.blackberry.com/playbook-tablet/ Does anyone know of a script that will let me have 5 pictures or so and it will automatically go through them all but you can fastforward to the picture you like by clicking on a dot at the bottom like on the blackberry website? Hope I explained that well enough

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>Student Information</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

Code:

<SCRIPT type="text/javascript">
<!--
function displayEntries () {
var sfirst = document.frmStudentInfo.textSfirst.value;
var smi = document.frmStudentInfo.textSmi.value;
var slast = document.frmStudentInfo.textSlast.value;
var sadd = document.frmStudentInfo.textSadd.value;
var scity = document.frmStudentInfo.textScity.value;
var sstate = document.frmStudenInfo.textSstate.value;
var szip = document.frmStudentInfo.textSzip.value;
var sphone = document.frmStudentInfo.textSphone.value;
var sdob = document.frmStudentInfo.textSdob.value;

window.alert('sfirst' + 'smi' + 'slast' + '\n' +
'sadd' + '\n' +
'scity' + 'sstate' + 'szip' + '\n' +
'sphone' + '\n' +
'sdob');
}
//-->
</SCRIPT>

</head>
<body>
<table width="70%" align=center ID="Table1">
<tr><td><img SRC = "nwlogo.jpg" width=120 height=60></td>
<td><H3>Student Information</H3></td></tr>
</table>
<form name="frmStudentInfo" action="ignore">
<table align="center">
<tr><td>&nbsp;Last Name:</td>
<td><input type="text" name="txtSlast" size="20"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</tr>
<tr><td>&nbsp;First Name:</td>
<td><input type="text" name="txtSfirst" size="20" ></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
<tr><td>&nbsp;MI:</td>
<td><input type="text" name="txtSmi" size="5" tabindex="3"><td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr><td>&nbsp;Address:</td>
<td><input type="text" name="txtSadd" size="20" tabindex="4"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</tr>
<tr><td>&nbsp;City:</td>
<td><input type="text" name="SCity" size="20" tabindex="5"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</tr>
<tr><td>&nbsp;State:</td>
<td><input type="text" name="txtSstate" size="5" tabindex="6"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

Code:

    <td><input type="button" name="cmdUpdate" value="Update" onClick="displayEntries();"></td>

</tr>
<tr><td>&nbsp;ZIP Code:</td>
<td><input type="text" name="txtSzip" size="20" tabindex="7"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</tr>
<tr><td>&nbsp;Phone:</td>
<td><input type="text" name="txtSPhone" size="20" tabindex="8"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</td>
</tr>
<tr><td>&nbsp;Date of Birth:</td>
<td><input type="text" name="txtSdob" size="20" tabindex="9"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>

I'm having trouble with the pop up window. I cannot get it to pop up and I'm not sure where I have went wrong with it. I need it to pop up once the update button is clicked and contain the information that has been input into the form. Any help would be much appreciated.

Hey Guys,

I'm using the jQuery Cycle plugin developed Here on this website.

In FF, IE8, etc it seems to show up just fine - no background on the animation. In IE7 its showing the color attributed to the body element - a dark blue color.

Is there anyway to fix this?

Thanks!

Does any know a code or a site I can get that from?

Hi guys,

I am using jquery ui to have two connected sortable lists. The first list is available numbers, and the second is selected numbers. Everything with the jquery is working fine. The problem i am having is when i try to get the contents of the selected numbers box, it is empty, even though the sortables are or were dragged to that list.

I tried using this...
Code:

var response = $("#selected_numbers_box").val();
alert( response );

and I also tried this..
Code:

var response = $("#selected_numbers_box").html();
alert( response );

both are empty. What i am trying to do is retrieve the values of the new list "Selected numbers Box".

Any suggestions? My code was taken directly from the jquery ui tutorial.

Thanks in advance.

hiya, I just have a specific question regarding to use a canvas-element with javascript

I have one empty canvas that I want to add 9x7 smaller image elements to, the function "regRead" gets an image-element-code from a global register and that element code is then changed to a base64-encoded string for use as src for the currect image.

the problem is that when i run the script, all the 63 images added to the canvas gets the same content even if imgCode show different values in debug, i appreciate some solution feedback.

Code:

function UpdateCanvas (CanvId) {
  var canvIDNames = ["front", "back"]; // DOM IDs
  var currentCanvas = document.getElementById(canvIDNames[CanvId]).getContext("2d");
  var newImg = "";
  var topLeft = CanvId * 63;
  var bottomRight = topLeft + 63;
  var xa = 0;
  var posX = 0;
  var posY = 0;
  var imgCode = "";
  for (xa = topLeft; xa < bottomRight; xa++) {
    newImg = new Image();
    imgCode = regRead(xa, 1);
    newImg.src = getBase64src(imgCode);
    newImg.onload = function () {
      currentCanvas.drawImage(newImg, posX, posY);
      if (posX == 400) {
        posX = 0;
        posY += 90;
      }
      else {
        posX += 50;
      }
    }
  }
}

I am using the following code from this site...

http://www.javascriptkit.com/script/...selector.shtml

but for some reason if the page is long the whole page scrolls up so the top of the calendar is at the top of the browser, which actually hides the box that the date will end up in.

can anyone see how I can alter the code so that the page does not scroll up, but have the calendar show just below the box that the date will go in and the page does not scroll?

here is the full code that I am using to test this out with.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">







<style type="text/css">

.ds_box {
	background-color: #FFF;
	border: 1px solid #000;
	position: absolute;
	z-index: 32767;
}

.ds_tbl {
	background-color: #FFF;
}

.ds_head {
	background-color: #333;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 2px;
}

.ds_subhead {
	background-color: #CCC;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	width: 32px;
}

.ds_cell {
	background-color: #EEE;
	color: #000;
	font-size: 13px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	padding: 5px;
	cursor: pointer;
}

.ds_cell:hover {
	background-color: #F3F3F3;
} /* This hover code won't work for IE */

</style>
</head>
<body>

<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
<tr><td id="ds_calclass">
</td></tr>
</table>
<script>
// <!-- <![CDATA[

// Project: Dynamic Date Selector (DtTvB) - 2006-03-16
// Script featured on JavaScript Kit- http://www.javascriptkit.com
// Code begin...
// Set the initial date.
var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();

// Get Element By Id
function ds_getel(id) {
	return document.getElementById(id);
}

// Get the left and the top of the element.
function ds_getleft(el) {
	var tmp = el.offsetLeft;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetLeft;
		el = el.offsetParent;
	}
	return tmp;
}
function ds_gettop(el) {
	var tmp = el.offsetTop;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetTop;
		el = el.offsetParent;
	}
	return tmp;
}

// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');

// Output Buffering
var ds_ob = ''; 
function ds_ob_clean() {
	ds_ob = '';
}
function ds_ob_flush() {
	ds_oe.innerHTML = ds_ob;
	ds_ob_clean();
}
function ds_echo(t) {
	ds_ob += t;
}

var ds_element; // Text Element...

var ds_monthnames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
]; // You can translate it for your language.

var ds_daynames = [
'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
]; // You can translate it for your language.

// Calendar template
function ds_template_main_above(t) {
	return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
	     + '<tr>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();">&lt;&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();">&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Close]</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">&gt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">&gt;&gt;</td>'
		 + '</tr>'
	     + '<tr>'
		 + '<td colspan="7" class="ds_head">' + t + '</td>'
		 + '</tr>'
		 + '<tr>';
}

function ds_template_day_row(t) {
	return '<td class="ds_subhead">' + t + '</td>';
	// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}

function ds_template_new_week() {
	return '</tr><tr>';
}

function ds_template_blank_cell(colspan) {
	return '<td colspan="' + colspan + '"></td>'
}

function ds_template_day(d, m, y) {
	return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	// Define width the day row.
}

function ds_template_main_below() {
	return '</tr>'
	     + '</table>';
}

// This one draws calendar...
function ds_draw_calendar(m, y) {
	// First clean the output buffer.
	ds_ob_clean();
	// Here we go, do the header
	ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
	for (i = 0; i < 7; i ++) {
		ds_echo (ds_template_day_row(ds_daynames[i]));
	}
	// Make a date object.
	var ds_dc_date = new Date();
	ds_dc_date.setMonth(m - 1);
	ds_dc_date.setFullYear(y);
	ds_dc_date.setDate(1);
	if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
		days = 31;
	} else if (m == 4 || m == 6 || m == 9 || m == 11) {
		days = 30;
	} else {
		days = (y % 4 == 0) ? 29 : 28;
	}
	var first_day = ds_dc_date.getDay();
	var first_loop = 1;
	// Start the first week
	ds_echo (ds_template_new_week());
	// If sunday is not the first day of the month, make a blank cell...
	if (first_day != 0) {
		ds_echo (ds_template_blank_cell(first_day));
	}
	var j = first_day;
	for (i = 0; i < days; i ++) {
		// Today is sunday, make a new week.
		// If this sunday is the first day of the month,
		// we've made a new row for you already.
		if (j == 0 && !first_loop) {
			// New week!!
			ds_echo (ds_template_new_week());
		}
		// Make a row of that day!
		ds_echo (ds_template_day(i + 1, m, y));
		// This is not first loop anymore...
		first_loop = 0;
		// What is the next day?
		j ++;
		j %= 7;
	}
	// Do the footer
	ds_echo (ds_template_main_below());
	// And let's display..
	ds_ob_flush();
	// Scroll it into view.
	ds_ce.scrollIntoView();
}

// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
	// Set the element to set...
	ds_element = t;
	// Make a new date, and set the current month and year.
	var ds_sh_date = new Date();
	ds_c_month = ds_sh_date.getMonth() + 1;
	ds_c_year = ds_sh_date.getFullYear();
	// Draw the calendar
	ds_draw_calendar(ds_c_month, ds_c_year);
	// To change the position properly, we must show it first.
	ds_ce.style.display = '';
	// Move the calendar container!
	the_left = ds_getleft(t);
	the_top = ds_gettop(t) + t.offsetHeight;
	ds_ce.style.left = the_left + 'px';
	ds_ce.style.top = the_top + 'px';
	// Scroll it into view.
	ds_ce.scrollIntoView();
}

// Hide the calendar.
function ds_hi() {
	ds_ce.style.display = 'none';
}

// Moves to the next month...
function ds_nm() {
	// Increase the current month.
	ds_c_month ++;
	// We have passed December, let's go to the next year.
	// Increase the current year, and set the current month to January.
	if (ds_c_month > 12) {
		ds_c_month = 1; 
		ds_c_year++;
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous month...
function ds_pm() {
	ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
	// We have passed January, let's go back to the previous year.
	// Decrease the current year, and set the current month to December.
	if (ds_c_month < 1) {
		ds_c_month = 12; 
		ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the next year...
function ds_ny() {
	// Increase the current year.
	ds_c_year++;
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous year...
function ds_py() {
	// Decrease the current year.
	ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Format the date to output.
function ds_format_date(d, m, y) {
	// 2 digits month.
	m2 = '00' + m;
	m2 = m2.substr(m2.length - 2);
	// 2 digits day.
	d2 = '00' + d;
	d2 = d2.substr(d2.length - 2);
	// YYYY-MM-DD
	// return y + '-' + m2 + '-' + d2;
	return d2 + '-' + m2 + '-' + y;
}

// When the user clicks the day.
function ds_onclick(d, m, y) {
	// Hide the calendar.
	ds_hi();
	// Set the value of it, if we can.
	if (typeof(ds_element.value) != 'undefined') {
		ds_element.value = ds_format_date(d, m, y);
	// Maybe we want to set the HTML in it.
	} else if (typeof(ds_element.innerHTML) != 'undefined') {
		ds_element.innerHTML = ds_format_date(d, m, y);
	// I don't know how should we display it, just alert it to user.
	} else {
		alert (ds_format_date(d, m, y));
	}
}

// And here is the end.

// ]]> -->

</script>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>






<form action="" method="post">
<div>
<b>Example Form</b><br/>
Please input a date: <input onclick="ds_sh(this);" name="date" readonly="readonly" style="cursor: text" /><br />
Please input another date: <input onclick="ds_sh(this);" name="date2" readonly="readonly" style="cursor: text" /><br />
<input type="submit" value="Submit" />
</div>
</form>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>








</body>
</html>

Is it possible to make an app that creates a gif that shows the process of a finished drawing?

Im a kid and love drawing and gif .
i wanna make app that shows a replay of my initial start of my drawing till the finish product of my drawing in a gif file.

thinking to approach this with javascript? would it be possible?

I wish to add a help icon to variousd parts of my pages that places an overlay text box for the help that that help icon relates to.

maybe a call like

help(datefield) or
help(somethingelse)

then the script that shows the help text shows the text that relates to the string passed.

can someone please provide information on how i can do this.

Hey everyone. I'm looking for a tutorial or open source script to accomplish the following tasks:

1 - Accordion style vertical list that expands element (Film # and description) when "+more" link is clicked, and closes the previous open film and description.
2 - Activation of "+ more" shows a photo in separate div, and hides the previous photo that was visible in this separate div.

I've attached a mockup photo of the idea I need to execute. Seems like a simple idea, but I have not been able to find a similar example/tutorial online. If anyone can point me in the right direction, that would be greatly appreciated. Thanks.

I'm writing a small browser-side Javascript that parses XML from a file and modifies it using E4X. I need to get the result to an xml text file without making the user go through a dozen hoops.

Since making a JS client do file I/O is nearly impossible I gave up on that. My next idea was to make Firefox open a new window of contentType text/xml, with my serialized xml in it:

Code:

var xmlDoc = new XML(SourceXMLString); //SourceXMLString is read from an xml text file
output = window.open("");
output.document.open("text/xml");
output.document.write(xmlDoc.toXMLString());
output.document.close();

However any document.write instance seems to set the contentType to text/html and so all the tags are rendered wrong, naturally. From https://bugzilla.mozilla.org/show_bug.cgi?id=73409 it seems that document.open creates the right contentType, but document.write messes it up.

Note: this is for a specific internal project, not the public internet. Therefore it only needs to work in Mozilla 3+, and also server-side is not an option.

I'm totally open to other suggestions. What's the most streamlined/easiest way, for the code and the user, to get from that XML construct to an .xml file?