• Advertisement
Sign in to follow this  

[web] Javascript question, probably stupid.

This topic is 3869 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I just started tinkering with web development again, after having completely ignored it for years, so I'm probably just making an incredibly stupid mistake here. I just wanted a little function that would toggle a comments section on a blog--using the script.aculo.us toggle blind effect. The effect works fine, but my "one comments section at a time" constraint isn't working. I just keep the div name of the currently displayed div in a string, and act accordingly. The problem seems to be that the string isn't being set. I have that alert at the top for debugging, and every time the function is called it shows the value of displayedCommentDiv as "none", meaning that it isn't being set. Any obvious mistakes here? I thought it looked pretty straightforward. [sad]
var displayedCommentDiv = 'none'
function toggleCommentDiv(newDisplayedCommentDiv)
{
  alert("Old: " + displayedCommentDiv + "  New: " + newDisplayedCommentDiv)
  
  // If we are just toggling off the current comments div, set 
  // displayedCommentDiv to 'none'
  if (newDisplayedCommentDiv == displayedCommentDiv) {
      displayedCommentDiv = 'none'
      Effect.toggle(newDisplayedCommentDiv, 'blind', {duration:0.2})
  }
  // Otherwise, toggle both divs, and store new div in displayedCommentDiv
  else {
      Effect.toggle(newDisplayedCommentDiv, 'blind', {duration:0.2})
      Effect.toggle(displayedCommentDiv, 'blind', {duration:0.2})
      displayedCommentDiv = newDisplayedCommentDiv
  }
}


[Edited by - smitty1276 on July 14, 2007 1:17:45 PM]

Share this post


Link to post
Share on other sites
Advertisement
Try putting your function into a variable and calling it from there:


var displayedCommentDiv = 'none';
var toggleCommentDiv = function(newDisplayedCommentDiv)
{
alert("Old: " + displayedCommentDiv + " New: " + newDisplayedCommentDiv)

// If we are just toggling off the current comments div, set
// displayedCommentDiv to 'none'
if (newDisplayedCommentDiv == displayedCommentDiv) {
displayedCommentDiv = 'none';
Effect.toggle(newDisplayedCommentDiv, 'blind', {duration:0.2});
}
// Otherwise, toggle both divs, and store new div in displayedCommentDiv
else {
Effect.toggle(newDisplayedCommentDiv, 'blind', {duration:0.2});
Effect.toggle(displayedCommentDiv, 'blind', {duration:0.2});
displayedCommentDiv = newDisplayedCommentDiv;
}
};





I haven't tested this, but see if it works better for you since it's a variable containing a function, not a function trying to access an outside variable.

I'd also include the semicolon at the end of each command. It's not necessary for each one, but better safe than sorry (and it's more consistent).

Share this post


Link to post
Share on other sites
A javascript toggle function that doesn't need to track anything:

function toggle(divID)
{
var block = document.getElementById(divID);
if(block != null)
{
if(block.style.display == "none")
{
block.style.display = "block";
}
else
{
block.style.display = "none";
}
}
}


The order of the if/else conditions is significant. If you don't run the script I have below, then the block.style.display property will have no value, so the browser will use the default value of "block". In that case, you want to hide it. If you change the order of the conditions, i.e. doing "if(block.style.display == "block"){block.style.display = "none";}", then the first click won't appear to do anything.

if you need the divs hidden at start:

window.onload = function()
{
var arr = document.getElementsByTagName("div");
for(var i = 0; i < arr.length; ++i)
{
if(arr.className == "hidden")
{
arr.style.display = "none";
}
}
}


Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement