JavaScript - Spry Collapsible Panel - Help Please

Hi. I haven't used much Javascript before and I have a question about the following code. I've taken it from this tut and changed it a bit so it applies an expand/collapse functionality to a floating sidebar on the side of a website I'm working on.

When I remove the background on the toggle function, it refuses to come back. I have a feeling it's a simple solution, I just don't know what syntax to fill into the second part of the conditional to restore the background image. I've tried display, show, an actual path to the image...

Code:

<script language="JavaScript" type="text/javascript">
    function toggle() {

      	
        var bar = document.getElementById('floater');
        var barText = document.getElementById('f_news');

       
        if (bar.style.width == '210px') {

            
            bar.style.width = '40px';
	    bar.style.backgroundImage = 'none';

            
            barText.style.display = 'none';

           
       
        } else {


            
            bar.style.width = '210px';
	    bar.style.backgroundImage = 'HELP!';

            
            barText.style.display = 'block';

        }
    }
	</script>

Thanks in advance.

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

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 there!

Brand new to the forums, but a regular reader. I'm currently in the process of putting together a site and before I get too much further I had a few Spry related questions (hope this is the correct forum for such questions). Please bear with me if my questions seem plentiful or ignorant.

First off, here's the current progress of the site in question:

http://thedeadhamster.com/testing/index.htm

As you can (hopefully) see, upon the site's loading the header does some slide in animations. This animation would only animate on the home page; all linked pages would have a static header. While I think it looks rather nice I'm actually hesitant to use it. Here's a few of my concerns, perhaps some of you know of some possible solutions:
I can't seem to get the images to animate when they're just div backgrounds. As such, I'm using image tags to make up the header which unfortunately adds the images into the HTML structure itself and doesn't really seem "good practice". Or am I simply missing something? The images sometimes "flash" on screen prior to animating, a result of the browser loading the images before the Spry coding I assume. Any simple workaround to that? Should I just forget animating the header and settle for a static background image header instead? Aka, is this more trouble than it's worth?
Any thoughts or suggestions are most welcome, I appreciate any help you guys graciously throw my way. Thanks!

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 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>

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

helo,
i just want to know how to add the same panel by clicking on a button right below the button..

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.

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!

Hello.
I've created this sliding panel where I click the Sidebar button and it slides out or in. But I would like to make it run more smoothly. I tried storing references to the elements within the MoveSidebar() as this.variables, so that they wouldn't be re-defined each time, but then FF spits out that 'this.sidebar.style' is undefined?!

How can I make it run more smoothly, or get FF to recognise 'this.sidebar.style' please (once I reinstate all the this.references)? Here's the whole page and the button is also attached for ease of testing. Andy.
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Sidebar Panel</title>
    <style type="text/css">
        #sidebar {
            display: inline-block;
            position: fixed;
            top: 200px;
            right: -100px;
        }
        #sidebar img {
            cursor: pointer;
        }
        #sidebar ul {
            display: inline-block;
            list-style-type: none;
            padding: 0; margin: 0;
            background: lightgrey;
            margin-left: -4px;
            height: 97px;   /* same as the image */
        }
        #sidebar li {
            display: inline;
        }
        #sidebar a {
            float: left;
            clear: left;
            width: 90px;
            text-decoration: none;
            padding: 2px 5px;
        }
    </style>
    <script type="text/javascript">
        var theTimer;
        function MoveSidebar() {
            var sidebar = document.getElementById('sidebar');
            var sideRight = parseInt(sidebar.style.right || "-100px");
            var out = document.getElementById('sideImage').out;
            if ( out && sideRight <= 0 ) {
                sidebar.style.right = (sideRight + 2) + 'px';
            }
            else if ( !out && sideRight >= -100 ) {
                sidebar.style.right = (sideRight - 2) + 'px';
            }
            else {
                clearInterval(theTimer);
            }
        }
        function InitSide() {
            document.getElementById('sideImage').onclick = function () {
                this.out = ( this.out ) ? false : true;
                clearInterval(theTimer);
                theTimer = setInterval(MoveSidebar,10);
            }
        }
        window.onload = InitSide;
    </script>
</head>
<body>
    <h1>Creating a Sidebar Panel Button</h1>
    <div id="sidebar">
        <img src="images/sidebar.png" id="sideImage">
        <ul>
            <li><a href="#home">Home</a></li>  
            <li><a href="#about">About</a></li>
            <li><a href="#further">Further Info</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div>
</body>
</html>

I'm trying to create a menu navigation system from the top of the page.
I want it so when I hover over the link, it drops down (the link drops down; so it'd be as if there was a whole field being hidden beyond the 0px mark) with the related field.

I've gotten it to work, somehow but it still isn't right.
A few issues a

- when I hover over .drop_slide and then if I choose to close it by hovering back over the .drop_slide it does as it's told, which is "slide, slide". I'm interested in rectifying this issue so it doesn't do that, however I just don't know how.

- The idea is to have multiple links in the .slide, so I need it to be constantly open while the user mouses over the other links. Should this be created in one field? If so, how would I do that with a drop down in mind?

- Am I approaching this completely wrong? Lol. Should I be researching into .animate? I've been looking at it actually, but I can't get anything to grow negatively. Say; marginTop: -85px or something.

ANY help is appreciated, thanks!

Code:

<html>
<head>
<title>test slide panel</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
        $(document).ready(function(){

        function slide() {
        $("#panel").slideToggle("slow");
        }

        $(".drop_slide").hover(slide, stop);
        $("#panel").hover(stop, slide);
         
});
</script>

<style type="text/css">
body {
        margin: 0 auto;
        padding: 0;
        width: 570px;
        font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
        outline: none;
}
#panel {
        background: grey;
        height: 200px;
        display: none;
}
.slide {
        margin: 0;
        padding: 0;
        background-color: red;
}
.drop_games {
        width: 200px;
        height: 31px;
        padding: 10px 10px 0 0;
        display: block;
        font: bold 120%/100% Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
}
</style>
</head>

<body>

<div id="panel">
additional links here...or information
</div>

<p class="slide"><a href="#" class="drop_slide">test link</a></p>


</body>
</html>

hi
i was wondering if anybody outhere could refer me to a tut that show how to create a drop down login panel.I've read any tut about drop down from DynamicDrive.com but it's not really what i'm looking forward.I try to change the content in "Drop Down Panel" script released into the relevant tut but it's not working.So help will be welcome.