...

View Full Version : Div toggler not working in FF



canadianjameson
05-05-2006, 09:30 PM
Hi, i can't quite figure out why this script will no longer work in FF


<script type="text/javascript">
var arrPrevDiv = [null, null];

function toggle(id, linkGroup) {
if (linkGroup==0 && arrPrevDiv[1] && arrPrevDiv[1].id=="stopShow") {
alert("Please stop the slideshow before continuing.");
return false;
}
if (arrPrevDiv[linkGroup] != null) {
arrPrevDiv[linkGroup].style.display = "none";
}

var s = document.getElementById(id);
if (s == contact)
{
setTimeout("document.fvjonesContact.senderName.focus();",1);
document.fvjonesContact.senderName.value = "";
document.fvjonesContact.senderEmail.value = "";
document.fvjonesContact.emailSubject.value = "";
document.fvjonesContact.emailBody.value = "";
}
s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none";
arrPrevDiv[linkGroup] = s;
window.location.href='#'+ id;
window.status=''

}

window.onload = function(){
arrPrevDiv[1] = document.getElementById("startShow");
}
</script>

I could have sworn it worked before but I may have just thought it did.

you can see it working in IE here, but not FF: www.fvjones.ca/enter.html

any ideas?

canadianjameson
05-16-2006, 06:14 PM
hey, its been a week without any responce... should i explain the problem in a different way?

the full page code is here if it helps:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Francine V. Jones</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height:100%;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 11px;
font-weight: bold;
}
A:link, A:visited, A:active {
text-decoration: none; color: white;
}
A:hover {
text-decoration: underline; color: white;
}
#pageContainer {
background-image: url(images/background.jpg);
min-height: 100%;
}
* html #pageContainer {
height:100%;
}
.picLink {
border: 0
}
#topBar {
height: 75px;
}
#header {
background: #FFFFFF;
text-align: center;
border-bottom: solid 1px black;
}
#topMenu {
height: 175px;
border-bottom: solid 1px white;
border-top: solid 1px white;
text-align: center;
}
#jonesArt {
position: relative;
margin-left: 60px;
margin-top: 15px;
float: left;
display: inline;
text-align: left;
width: 130px
}
#jonesArt p {
margin-top: 15px;
}
#fvjdesign {
position: relative;
margin: 15px 190px 0 190px;
}
#fvjdesign p {
margin-top: 5px;
}
#efviCollections {
position: relative;
margin-top: 15px;
margin-right: 60px;
float: right;
display: inline;
text-align: right;
width: 150px;
}
#efviCollections p {
margin-top: 40px;
}
#infoLinks {
float: left;
text-align: left;
color: white;
padding: 6px;
border-bottom: solid 1px white;
border-right: solid 1px white;
}
#galleryLinks {
float: left;
text-align: left;
color: white;
padding: 6px;
border-bottom: solid 1px white;
border-right: solid 1px white;
}
#contactLinks {
float: left;
text-align: left;
color: white;
padding: 6px;
border-bottom: solid 1px white;
border-right: solid 1px white;
}
#spacer {
height: 100px;
}
br.heading {
font-size: 20px
}
#biographicalNotes{
display: none;
margin-left: 250px;
margin-bottom: 100px;
line-height: 1.8;
color: white;
font-weight: normal;
font-size: 16px
}
#artistStatement {
display: none;
margin-left: 250px;
padding-bottom: 125px;
line-height: 1.8;
color: white;
font-weight: normal;
font-size: 16px
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#productSpectrum {
display: none;
margin-top: 25px;
text-align: left;
color: #FFFFFF;
font-size: 13px;
}
#productSpectrum ul {
list-style:url(images/smallBull.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 0px 30px 0px;
font-style: italic;
}
#Landscape, #Floral, #Jewelry, #artGallery{
display: none;
margin-top: 50px;
margin-bottom: 30px;
font-size: 13px;
}
#landscapeLink {
float: left;
text-align: center;
margin-left: auto;
margin-right: auto;
padding-left: 125px;
}
#floralLink {
float: right;
text-align: center;
padding-right: 125px;
margin-left: auto;
margin-right: auto;
}
#floralGallerySwitcher {
clear: left;
margin-top: -25px;
margin-left: 85px
}
#landscapeGallerySwitcher {
clear: left;
margin-top: -40px;
margin-left: 100px
}
#contact {
display: none;
margin-top: 40px;
margin-bottom: 30px;
margin-left: 150px;
font-size: 13px;
color: white;
text-align: left;
}
.formTitles {
clear: left;
display: inline;
float: left;
width: 200px
}
.field {
position: relative;
display: inline;
}
#asRight {
display: inline;
float: right;
margin-right: 260px;
margin-top: -125px;
font-size: 16px;
margin-bottom: 50px
}
#psLeft {
float: left;
width: 125px;
margin-left: 75px;
}
#psLeft p {
margin-bottom: 100px;
}
#psLeft a {
text-decoration: underline
}
#psMid {
float: left;
width: 175px;
height: 150px;
margin-left: 100px;
}
#psRight {
float: left;
height: 150px;
margin-left: 100px;

}
#psRight p {
margin-bottom: 100px;
}
.heading {
font-size: 20px
}
.indent {
margin-left: 20px;
}
.thumbs {
float: left;
width: 180px;
height: 310px;
margin-left: 40px
}
.thumbs div {
width: 77px;
height: 77px;
float: left;
margin: 5px 5px 5px 5px;
text-align: center;
}
.thumbnails {
border: 1px solid white;
}
.materials {
float: left;
padding: 5px 5px 5px 5px;
margin-left: 50px;
color: white
}
.materials ul {
list-style:url(images/smallBull.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 0px 30px 0px;
font-style: italic;
}
</style>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript">
var arrPrevDiv = [null, null];

function toggle(id, linkGroup) {
if (linkGroup==0 && arrPrevDiv[1] && arrPrevDiv[1].id=="stopShow") {
alert("Please stop the slideshow before continuing.");
return false;
}
if (arrPrevDiv[linkGroup] != null) {
arrPrevDiv[linkGroup].style.display = "none";
}

var s = document.getElementById(id);
if (s == contact)
{
setTimeout("document.fvjonesContact.senderName.focus();",1);
document.fvjonesContact.senderName.value = "";
document.fvjonesContact.senderEmail.value = "";
document.fvjonesContact.emailSubject.value = "";
document.fvjonesContact.emailBody.value = "";
}
s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none";
arrPrevDiv[linkGroup] = s;
window.location.href='#'+ id;
window.status=''

}

window.onload = function(){
arrPrevDiv[1] = document.getElementById("startShow");
}
</script>

<script language="javascript" type="text/javascript">
function checkCR(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
if (!evt) return true;
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (evt.keyCode == 13 && node && node.type=="text") {
evt.keyCode = 9; //tab
return true;
}
}
document.onkeydown = checkCR;
</script>

<script type="text/javascript">
function validate(oForm)
{
var name = oForm['name'];
var email = oForm['email'];
var subject = oForm['subject'];
var body = oForm['body'];
var errors = [];
var messages = [];
var nums = /[0-9]/;
var mail = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;


/* you could trim down these if statements, but I figured you might have different
* conditions for each one, so meh
*/
if(name.value == "" || nums.test(name.value))
{
errors[errors.length] = name;
messages[messages.length] = "Please enter a valid name";
}
if(email.value == "" || !mail.test(email.value))
{
errors[errors.length] = email;
messages[messages.length] = "Please enter a valid email";
}
if(subject.value == "")
{
errors[errors.length] = subject;
messages[messages.length] = "Please enter a valid subject";
}

// use length property to validate how many chars you want
if(body.value == "" || body.value.length < 5)
{
errors[errors.length] = body;
messages[messages.length] = "Please enter a valid message";
}

if(errors.length > 0)
{
var err = 'The following modifications are required:' + "\n" ;
for(var i = 0; i < errors.length; i++)
{
err += '~ ' + messages[i] + "\n";
errors[0].select();
}
alert(err);
return false;
}
return true;
}
// <a href="#contact" onclick="return toggle('contact', 0);">Contact</a> </script>
</head>

<body>
<div id="pageContainer">
<div id="topBar"></div>
<div id="topMenu">
<div id="jonesArt"><img src="images/jonesArt.jpg" width="80" height="80" alt=""></div>
<div id="efviCollections"><img src="images/efviCollections.jpg" alt=""></div>
<div id="fvjdesign"><img src="images/fvdesign.jpg" alt=""></div>
</div>
<div id="infoLinks">
<a href="#artistStatement" onclick="return toggle('artistStatement', 0);">Artist's Statement</a><br>
<a href="#biographicalNotes" onclick="return toggle('biographicalNotes', 0);">Biographical Notes</a><br>
<a href="#productSpectrum" onclick="return toggle('productSpectrum', 0);">Product Spectrum</a><br>
</div>
<div id="galleryLinks">
<a href="#artGallery" onclick="toggle('artGallery', 0);">Art Gallery</a><br>
<a href="#Jewelry" onclick="toggle('Jewelry', 0);">Jewelry Gallery</a><br>
</div>
<div id="contactLinks">
<script language="JavaScript" type="text/JavaScript">
<!--
var name = "francine";
var domain = "fvjones.ca";
document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">Contact</a>');
// -->
</script>
</div>
<div id="spacer"></div>
<div id="artistStatement">
<span class="heading">artist's statement ...</span>
<br>
<br>"In a world of checks and balances
<br>where two + two predictably equal four
<br>how delicious it is to savour
<br>a state of mind and heart where
<br>the bottom line need never
<br>be straight."
<br>___________
<div id="asRight">
<br>francine v. jones
</div>
</div>
<div id="biographicalNotes">
<span class="heading">francine v. jones
<br>a few biographical notes...</span>
<br>
<br>a native montr&#233;aler
<br>francine v. jones revisited art, her first love, in the late 1990's
<br>choosing watercolour as her primary medium
<br>for its independent nature, unpredictability and fluid grace.
<br>
<br>Her works includes paintings, monoprints and collages . . .
<br>recently complemented by a selection of
<br>unique gold and silver jewellery created in the spirit of wearable sculpture.
</div>
<div id="productSpectrum">
<div id="psLeft">
<p><a href="#artGallery" onclick="toggle('artGallery', 0)">JONES art</a></p>
<p>FV design</p>
<p><p><a href="#Jewelry" onclick="toggle('Jewelry', 0)">EFVI collections</a></p>
</div>
<div id="psMid">
Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul>

Decorative Accessories<ul><li>frames</li><li>trays</li><li>platters</li><li>plus ...</li></ul>

Jewellery<ul><li>rings</li><li>bracelets</li><li>necklaces</li><li>plus ...</li></ul>
</div>
<div id="psRight">
<p>Watercolour & Mixed Media</p>
<p>Silver & Mixed Media</p>
<p>Silver & Gold</p>
</div>
<div class="clear">&nbsp;</div>
</div>
<div id="artGallery">
<div id="landscapeLink">
<a href="#Landscape" onclick="toggle('Landscape', 0)">Landscapes</a>
<br>
<br>
<a href="#Landscape" onclick="toggle('Landscape', 0)" title="Indian Summer - Dimensions: 65 x 50 cm"><img class="picLink" src="images/paintings/landscapes/thumbnails/IndianSummerLink.jpg"></a>
</div>
<div id="floralLink">
<a href="#Floral" onclick="toggle('Floral', 0)">Florals</a>
<br>
<br>
<a href="#Floral" onclick="toggle('Floral', 0)" title="Feather Foliage - Dimensions: 57 x 76 cm"><img class="picLink" src="images/paintings/florals/thumbnails/FeatherFoliageLink.jpg"></a>
</div>
</div>
<div id="Landscape">
<div class="thumbs">
<div><a href="images/paintings/landscapes/InletCove.jpg" rel="lightbox[landscapes]" title="Inlet Cove - Dimensions: 38 x 58 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/InletCove.jpg"></a></div>
<div><a href="images/paintings/landscapes/Grasslands.jpg" rel="lightbox[landscapes]" title="Grasslands - Dimensions: 56 x 76 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/Grasslands.jpg"></a></div>
<div><a href="images/paintings/landscapes/NorthernLight.jpg" rel="lightbox[landscapes]" title="Northern Light - Dimensions: 56 x 76 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/NorthernLight.jpg"></a></div>
<div><a href="images/paintings/landscapes/SpringThaw.jpg" rel="lightbox[landscapes]" title="Spring Thaw - Dimensions: 56 x 76 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/SpringThaw.jpg"></a></div>
<div><a href="images/paintings/landscapes/NewDawn.jpg" rel="lightbox[landscapes]" title="New Dawn - Dimensions: 56 x 76 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/NewDawn.jpg"></a></div>
<div><a href="images/paintings/landscapes/GraniteGorge.jpg" rel="lightbox[landscapes]" title="Granite Gorge - Dimensions: 50 x 65"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/GraniteGorge.jpg"></a></div>
<div><a href="images/paintings/landscapes/GlacierLake.jpg" rel="lightbox[landscapes]" title="Glacier Lake - Dimensions: 57 x 76 cm"><img class="thumbnails" src="images/paintings/landscapes/thumbnails/GlacierLake.jpg"></a></div>
<div><a href="images/paintings/landscapes/ChasmVista.jpg" rel="lightbox[landscapes]" title="Chasm Vista - Dimensions: 55 x 55 cm "><img class="thumbnails" src="images/paintings/landscapes/thumbnails/ChasmVista.jpg"></a></div>
<br>
</div>
<div class="materials">Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul></div>
<div id="landscapeGallerySwitcher"><a href="#Floral" onclick="toggle('Floral', 0)">View Floral Gallery</a></div>
</div>
<div id="Floral">
<div class="thumbs">
<div><a href="images/paintings/florals/BowledOver.jpg" rel="lightbox[florals]" title="Bowled Over - Dimensions: 76 x 57 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/BowledOver.jpg"></a></div>
<div><a href="images/paintings/florals/Fresh.jpg" rel="lightbox[florals]" title="Fresh - Dimensions: 56 x 38 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/Fresh.jpg"></a></div>
<div><a href="images/paintings/florals/HarvestOffering.jpg" rel="lightbox[florals]" title="Harvest Offering - Dimensions: 76 x 57 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/HarvestOffering.jpg"></a></div>
<div><a href="images/paintings/florals/Splash!.jpg" rel="lightbox[florals]" title="Splash! - Dimensions: 76 x 57 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/Splash!.jpg"></a></div>
<div><a href="images/paintings/florals/FlashFlower.jpg" rel="lightbox[florals]" title="Flash Flower - Dimensions: 28 x 22 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/FlashFlower.jpg"></a></div>
<div><a href="images/paintings/florals/Spring_is_Sprung.jpg" rel="lightbox[florals]" title="Spring is Sprung - Dimensions: 65 x 50 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/Spring_is_Sprung.jpg"></a></div>
<div><a href="images/paintings/florals/FlightOfFancy.jpg" rel="lightbox[florals]" title="Flight of Fancy - Dimensions: 76 x 57 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/FlightOfFancy.jpg"></a></div>
<div><a href="images/paintings/florals/Zenith.jpg" rel="lightbox[florals]" title="Zenith - Dimensions: 75 x 57 cm"><img class="thumbnails" src="images/paintings/florals/thumbnails/Zenith.jpg"></a></div>
<br>
</div>
<div class="materials">Works on paper<ul><li>paintings</li><li>wall hangings</li><li>cards</li><li>plus ...</li></ul></div>
<div id="floralGallerySwitcher"><a href="#Landscape" onclick="toggle('Landscape', 0)">View Landscape Gallery</a></div>
</div>
<div id="Jewelry">
<div class="thumbs">
<div><a href="images/jewelry/CrazyForYou.jpg" rel="lightbox[jewelry]" title="Crazy for You"><img class="thumbnails" src="images/jewelry/thumbnails/CrazyForYou.jpg"></a></div>
<div><a href="images/jewelry/PearlAbacus.jpg" rel="lightbox[jewelry]" title="Pearl Abacus"><img class="thumbnails" src="images/jewelry/thumbnails/PearlAbacus.jpg"></a></div>
<div><a href="images/jewelry/OrientExpress.jpg" rel="lightbox[jewelry]" title="Orient Express"><img class="thumbnails" src="images/jewelry/thumbnails/OrientExpress.jpg"></a></div>
<div><a href="images/jewelry/Trapeze.jpg" rel="lightbox[jewelry]" title="Trapeze"><img class="thumbnails" src="images/jewelry/thumbnails/Trapeze.jpg"></a></div>
<div><a href="images/jewelry/UpBeat.jpg" rel="lightbox[jewelry]" title="Up Beat"><img class="thumbnails" src="images/jewelry/thumbnails/UpBeat.jpg"></a></div>
<div><a href="images/jewelry/Seascape.jpg" rel="lightbox[jewelry]" title="Seascape"><img class="thumbnails" src="images/jewelry/thumbnails/Seascape.jpg"></a></div>
<div><a href="images/jewelry/Contempo.jpg" rel="lightbox[jewelry]" title="Contempo"><img class="thumbnails" src="images/jewelry/thumbnails/Contempo.jpg"></a></div>
<div><a href="images/jewelry/CelticSpirit.jpg" rel="lightbox[jewelry]" title="Celtic Spirit"><img class="thumbnails" src="images/jewelry/thumbnails/CelticSpirit.jpg"></a></div>
</div>
<div class="materials">Jewellery<ul><li>rings</li><li>bracelets</li><li>necklaces</li><li>plus ...</li></ul></div>
</div>
<div id="contact">
<form action="../../cgi-bin/fvjones.pl" name="fvjonesContact" method="post" ID="Form1" onsubmit="return validate(this);">
<input type="hidden" name="_config" value="contact" ID="Hidden1"/>
Please enter the following information:<br><br>
<div class="formTitles">Name</div><input type=text class="field" name="name" size="40" tabindex="1" ID="senderName">
<br>
<div class="formTitles">E-mail Address</div><input type=text class="field" name="email" size="40" tabindex="2" id="senderEmail">
<br>
<div class="formTitles">Subject</div><input type=text class="field" name="subject" size="40" tabindex="3" id="emailSubject">
<br>
<div class="formTitles">Message</div>
<textarea name="body" cols="80" rows="12" wrap="HARD" id="emailBody" tabindex="4"></textarea>
<br><br>
<input type="submit" name="Submitbtn" value="Submit" tabindex="5" ID="Submit1">
</form>
</div>
</div>

</body>
</html>

Beagle
05-16-2006, 07:53 PM
are you getting an error in IE? Are you getting an error message? How about a line number? Nothing jumps out at me from your code.

Bill Posters
05-16-2006, 08:18 PM
Change...

if (s == contact)
...to this...

if (s == 'contact')

You're presumably supposed to be checking for a string, not a variable

arnyinc
05-16-2006, 08:20 PM
It doesn't appear to be doing anything in FF or IE. I mouseover the links and nothing happens.

canadianjameson
05-16-2006, 08:38 PM
Bill: worked like a charm! thanks!

If anyone wants to venture a guess (or I can bring the issue over to the CSS forum)... when you now open the art or jewelery gallery links in FF, there's a whitespace on the bottom of the page for some reason (the background doesn't extend far enough down).

There are also other spacing issues on most of the links (if you compare them in IE v. FF)

any ideas why this is occuring, and if its something that needs to be tweaked in the JS of the div toggler or the CSS of the page?

p.s: arny: you needed to click the links

bigtiger
05-16-2006, 10:50 PM
I have try a bit that increase the min-height to higher value will get the space on the bottom of the page disappear.:)

canadianjameson
05-17-2006, 01:52 AM
errr... what?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum