JavaScript - Using Onload Spry Animations - Yay Or Nay?

Hello everyone! I found this article over devness: http://devness.com/2009/06/playing-w...animated-menu/

It is fantastic, but I'm a complete n00b and I was wondering what the JavaScript would look like if the situation was a little different.

Picture this:

A Super Mario sprite with him standing normally, but to his right is the word "Home".

Upon roll over of either the sprite itself or the text, mario does one of his trademark jumps by the way of a few sprites.

I know how to do this in flash, but I would like to eliminate it so I have maximum compatibility and no external plugins required.


Anyone have any ideas or suggestions?

Any help is greatly appreciated!!

Need Help with Spry Menu Bar

This is the site I am working on:
http://www.alpinelakesair.com/newsite/index.php

To quickly summarize: (without getting into the *why* of things)
- the website has only two pages: 1=index.php, 2=charter-flights.php
- the homepage links to specific tabs within the spry region of the main menu bar, which is located on page the 2nd page.
- all the sub pages of the site are located within the spry content of the spry tabs of the menu bar (this is so the header image never has to reload)

So, the idea goes that you click on the tabs of the home page and it brings you to the 2nd page with the corresponding menu bar item already highlighted.

The pages work in Safari and Firefox on my Mac - but - when you try click on the first four tabs from the homepage in Internet Explorer it doesn't open any content. If you click on the last three tabs it opens content - but all the content, and the sub-spry regions do not work...

I am new to spry, so if you help please make your answers for someone with a little but not much spry knowledge.

Please let me know if more information is needed..

I am reposting this as the issue has not been resolved...

alex

I've built a site with DW4 and the spry menus are not working. they worked for a little while and then I changed something in the JS menu on the template and now none of the spry works on my site.

also, I imbedded a google gadget and that didn't show up either!

any help would be appreciated. thx:

Hi,
I am having problem in validating my form using spry tools. The problem is that if I try to include any other validation other than spry along with spry validation the spry validation does not work.
Plzz tell a possible solution

Hello,

trying to cooperate with Spry atm, and its going fairly ok..
Its just one thing, i would like it when you open one spry panel,
the rest of them would close. Anyone know how to do that?

Thanks

Thanks to everyone for all the help so far. I've done a search for this but haven't found anything applicable.

I have a Spry dataset pulling form an External XML file. The masterColumn needs to scroll horizontally. You can see what I'm talking about here. Under the "pics" section.

(Thanks again JWPhillips and Tiny Script for helping to get the shuffle to work. And yeah, not everything is ready so It looks choppy.)

Anyway, this is the div tag in question:
Code:

<div id="contentpics">
      <div class="MasterDetail">
  <div spry:region="ds2" class="MasterContainer">

    <img  class="MasterColumn" spry:repeat="ds2" spry:setrow="ds2" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected" src="{thumb}" width="80" height="80"/></div>
  
        <div spry:detailregion="ds2" class="DetailContainer">
          <div class="DetailColumn"><img name="" src="{large}"  alt="" width="350" height="350"/></div>
        </div>
        <br style="clear:both" />
      </div>
    </div>

I've tried several JS custom scrollbars, but I don't think that they work with the spry. Any suggestions?

Thanks,

SweetAnne

Hi All,


I searched for an answer but didn't find anything that matched my issue. I am using Dreamweaver CS5 and have a few spry validation select boxes on my page. All but one are working correctly. The one in question is spryselect1 ("spryEquipLoc"). For some reason (which I cannot figure out) this field will display the selectRequiredState even after a selection has been made. Thanks in advance for any help. Here is the code:


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<script src="javascripts/Calendar.js" type="text/javascript"></script>
<!--<script src="javascripts/datetimepicker_css.js"></script>-->

<script type="text/javascript">

var categories = [];
categories["startList"] = ["Equipment issue","Log issue","Operator error","Media issue","Satellite issue","Program issue","Playlist issue","Promo issue"]
categories["Equipment issue"] = ["Digibeta deck","XDCAM deck","Video monitor","Chyron","Switcher","Media port","Downstream keyer","Asset base PC","Device server","Rapid Play X PC","Satellite receiver","Video server","Miranda wall","Crispen automation","Vertigo X-Play"];
categories["Log issue"] = ["Log/Playlist mismatch","Log timing light","Log timing heavy","Incorrect duration","Wrong start time","Events deleted"];
categories["Operator error"] = ["Operator Name1","Operator Name2","Operator name3"];
categories["Media issue"] = ["Damaged tape","Missing media","Dublist not received","Bad media file","Snipe Issue","Bug Issue","Missing audio","Audio out of sync","Audio clipping/distorted","Audio level too low","Embedded credits"];
categories["Satellite issue"] = ["Black on air", "Signal outage", "Sun outage", "Closed captions","Audio issue","Transmitter related"];
categories["Program issue"] = ["Program light","Program heavy","Incorrect program","Incorrect material ID","Program replaced","Incorrect segment lengths","Embedded credits"];
categories["Playlist issue"] = ["Playlist light","Playlist heavy", "Incorrect playlist loaded", "Wrong playback source"];
categories["Promo issue"] = ["Incorrect material ID","Incorrect duration","Incorrect snipe","Incorrect snipe duration","Promo replaced"];

var nLists = 2; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['frmOnAirActivity']['List'+i].length = 1;
document.forms['frmOnAirActivity']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option'); 
var nData = document.createTextNode(nCat[each]); 
nOption.setAttribute('value',nCat[each]); 
nOption.appendChild(nData); 
currList.appendChild(nOption); 
} 
}

function init() {
fillSelect('startList',document.forms['frmOnAirActivity']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>On Air Activity Form</title>

<style type="text/css">
body,td,th {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
	color: #052F47;
}
body {
	background-color: #8E8E8E;
	background-image: url();
	background-repeat: no-repeat;
}
#form {
	behavior: url(PIE.htc);
	font-family: Verdana, Geneva, sans-serif;
	background-repeat: repeat;
	font-size: 14px;
	padding: 10px;
	width: 660px;
	border-radius: 0px 0px 20px 20px;
	box-shadow: #666 10px 10px 10px;
	border-top-style: none;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: none;
	background-color: #589DC6;
	float: right;
}
#wrapper {
	margin: auto;
	width: 860px;
}
</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
<link href="css/Calendar.css" rel="stylesheet" type="text/css" />
</head>

<body>
<script type="text/javascript">
// show and hide sections of a form
function preparePage() {
	document.getElementById("List1").onclick = function() {
		if (document.getElementById("List1").value=="Equipment issue") {
			// use CSS style to show it
			document.getElementById("Equipment").style.display = "block";
			document.getElementById("Satellites").style.display = "none";
		} else if (document.getElementById("List1").value=="Satellite issue") {
			// use CSS style to show it
			document.getElementById("Satellites").style.display = "block";
			document.getElementById("Equipment").style.display = "none";
		} else {
			// hide the div
			document.getElementById("Equipment").style.display = "none";
			document.getElementById("Satellites").style.display = "none";
		}
	};
	// now hide it on the initial page load.
	document.getElementById("Equipment").style.display = "none";
	document.getElementById("Satellites").style.display = "none";
}

window.onload =  function() {
	preparePage();
};
</script>
<div id="wrapper">  <img src="Graphics/banner.png" alt="Banner" width="860" height="84" />
  <div id="form">
    <form id="frmOnAirActivity" name="frmOnAirActivity" method="post" action="">
<span id="spryAirdate">    
        <label for="Airdate">Airdate</label><br/>
        <input type="Text" id="Airdate" tabindex="1" />
        <img src="graphics/cal.gif" onclick="javascript:showCalendar('Airdate')" style="cursor:pointer" />
		<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
      <p>
        <span id="spryDiscrepType">
        <label for="List1">Event Category</label><br />
        <select name="List1" id="List1" tabindex="2" onchange="fillSelect(this.value,this.form['List2'])">
          <option selected></option>
        </select>
        <span class="selectRequiredMsg">Please select an item.</span></span>
      </p>
      <span id="spryDiscrepSubType">
      <label for="List2">Detail</label><br />
      <select name="List2" id="List2" tabindex="3" onchange="fillSelect(this.value,this.form['List3'])">
        <option selected></option>
      </select>
      <span class="selectRequiredMsg">Please select an item.</span></span>
      <p>
<div id="Equipment">
<span id="spryEquipLoc">
	<label for="EquipLoc">Equipment Location</label><br/>
    <select name="EquipLoc" id="EquipLoc" tabindex="4">
      <option selected></option>
      <option>Master Control</option>
      <option>Media Services</option>
      <option>Central Tape</option>
    </select>
    <span class="selectRequiredMsg">Please select an item.</span></span>
<p>
<span id="spryEquipID">
	<label for="EquipID">Equipment ID</label><br />
		<input type="text" name="EquipID" id="EquipID" tabindex="5" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
</div>
<p>
<div id="Satellites">
	<fieldset><legend>Affected Satellites:</legend>
    <table width="424">
      <tr>
        <td width="152"><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_12" />
          NET Sat1</label></td>
        <td width="119"><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_16" />
          Net Sat2</label></td>
        <td width="137"><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_20" />
          Net Sat3</label></td>
        </tr>
      <tr>
        <td><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_13" />
          Net Sat4</label></td>
        <td><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_17" />
          Net Sat5</label></td>
        <td><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_21" />
          Net Sat6</label></td>
        </tr>
      <tr>
        <td><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_14" />
          Net Sat7</label></td>
        <td><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_18" />
          Net Sat8</label></td>
        <td><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_22" />
          Net Sat9</label></td>
        </tr>
      <tr>
        <td><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_15" />
          Net Sat10</label></td>
        <td><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_19" />
          Net Sat11</label></td>
        <td><label>
          <input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_23" />
          Net Sat12</label></td>
        </tr>
      </table>
	</fieldset>
</div>
<fieldset>
  <legend>Network:</legend>
  <table width="424">
    <tr>
      <td width="152">
        <label>
          <input type="checkbox" name="Network_1" value="checkbox" id="Network_1" />
          Networl_1</label>
        </td>
      <td width="119">
        <label>
          <input type="checkbox" name="Network_2" value="checkbox" id="Network_2" />
          Network_2</label>
        </td>
      <td width="137">
        <label>
          <input type="checkbox" name="Network_3" value="checkbox" id="Network_3" />
          Network_3</label>
        </td>
      </tr>
  </table>
</fieldset>
<p>
<label for="OnAirVariance">On Air Variance</label>
  <input name="OnAirVariance" type="checkbox" value="" />
<p>
<span id="spryDescription">
	<label for="Description">Description</label><br />
	<textarea name="Description" id="Description" cols="45" rows="5" tabindex="6"></textarea>
    <span class="textareaRequiredMsg">A value is required.</span></span>
<p>
<span id="spryResolution">
	<label for="Resolution">Action Taken</label><br />
	<textarea name="Resolution" id="Resolution" cols="45" rows="5" tabindex="7"></textarea>
	<span class="textareaRequiredMsg">A value is required.</span></span></p>
</form>
</div>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("spryAirdate", "date", {validateOn:["blur"], useCharacterMasking:true, format:"mm/dd/yyyy"});
var sprytextfield2 = new Spry.Widget.ValidationTextField("spryEquipID", "none", {validateOn:["blur"]});
var spryselect1 = new Spry.Widget.ValidationSelect("spryEquipLoc", {validateOn:["blur"]});
var spryselect2 = new Spry.Widget.ValidationSelect("spryDiscrepType", {validateOn:["blur"]});
var spryselect3 = new Spry.Widget.ValidationSelect("spryDiscrepSubType", {validateOn:["blur"]});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("spryDescription", {validateOn:["blur"]});
var sprytextarea2 = new Spry.Widget.ValidationTextarea("spryResolution", {validateOn:["blur"]});
</script>
</body>
</html>

I am trying to place a different google map in each tabbed of a spry tabbed panel. There is a known issue with google map V3 where the map will function properly on the default tab, but when the hidden tabs are unhidden, the map on those previously hidden tabs has centred in the very top left of the container div and only fills a small part of the container.

( www.kimholt.co.uk/locations demonstrates this, the London tab is fine, but the South West tab doesn't work properly).

I have spent hours on this bug so far, and tried many fixes. The only one that has got me anywhere so far is adding
[CODE]
google.maps.event.addListener(map, "idle", function() {google.maps.event.trigger(map, 'resize'); });

after var map = new google.maps.Map(document.getElementById(canvas), myOptions);

[CODE]

This doesn't resize the map automatically, but will resize it if the map is dragged slightly by the user. It also still has the marker centred in the top left of the screen rather than the centre of the canvas. The following solutions have also been suggested:

Re-centrering the map around the marker

[CODE]
google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition());
[CODE]

Zooming in and out again to trigger the resize:

[CODE]
map.setZoom( map.getZoom() );
[CODE]

Or using this to do the same thing:

[CODE]
this.map.setZoom( this.map.getZoom() - 1); this.map.setZoom( this.map.getZoom() + 1);
[CODE]

Suggested for use if there are multiple markers:

[CODE]
map.setZoom(map.getZoom()); map.fitBounds(bounds);
[CODE]

I haven't been able to get any of these to work, but I'm not sure if I am using them in the right place in the javascript, and I'm also not sure if there are any parts of this code that need amending to make them work in my particular code. How can I get the map to automatically resize when the tab is selected? How can I get the map to automatically recentre around the marker when the map is opened? Being fairly new to this I really need someone to look at my actual code and help me work out exactly what to put where, in other words assume I know nothing and will be extremely grateful for any help!

Hey folks,

I have a question around Spry. There are two navigational elements to the website I'm building and I'm using Spry to do it. I have a horizontal header menu and vertical main menu. Both menus must load their content in the same content area. I've tried a ton of things and I can't get them to work without breaking anything. Here is the basic Spry code. Any help would be very much appreciated. Thanks!!

Code:

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
  </div>
</div>

<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>

The CSS and Jscript files are attached.

Hi there!

I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem:

I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong.

First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me.

When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly.

My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE]

No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
rs_CasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_CasteAbilities.gallery) {
return row;
}
return null;
}
rs_CasteAbilities.filter(chooseSet);
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE]

The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
rs_CasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_CasteAbilities.gallery) {
return row;
}
return null;
}
rs_CasteAbilities.filter(chooseSet);
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities");
rs_ProfAbility.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_ProfAbility.gallery) {
return row;
}
return null;
}
rs_ProfAbility.filter(chooseSet); [CODE]

This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help!

Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he

www.iotheatre.com/GoldenAgeAbilities.php

-Chris Blockus

Hi,

I'm looking to create a box that shows to IE6 users or lower, to tell them that my site does not render properly in the IE6 browser and that they should therefore upgrade to a newer version or alternative browser.

Basically I would put whatever the code to show the box into these tags:
Code:

<!--[if lte IE 6]>
INSERT HERE
<![endif]-->

to enable it to only appear to IE6 or below users. Preferably when this box appeared, it would be nice if it could fade the page behind it.

Does anyone have a script for this or know of a tutorial I could use? The box would also need buttons at the bottom that said "Ok, upgrade me" (this would load another window with links to alternative browsers) or "No thanks" (or "Close")

Thanks in advance.

Am I saying the onload event wrong or something?

PHP Code:
<input type="button" value="Mouse"
       onload="popup_show('popup', 'popup_drag', 'popup_exit', 'mouse', -10, -10);" /> 


Other events like onmouseover and onClick work

Hi all

I would like the img src to be populated after page load

I'm not sure this is doing what I would like it to do.

I have done this.

(tag shortened for post)

Code:

<img src="" id="testImg2" onload="(this.src='images/USA.jpg')"/>

Is this populating the img src after page load
or when the img tag is loaded?

LT

I have this code:
Code:

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c7b22470e521876"></script>

I want this JavaScript code above to be executed when all My page finished loading (maybe by using JavaScript onload)
So how can I do that?