Question

I’m trying to place a link on a page that will pop up a form for users to share the page via email…

  <a href="javascript:function()"><img src="images/email.jpg"></a>

  <div id="tellfriend">
    <form id='tellafriend_form' method="post" onsubmit="return executeOnSubmit();"
    action="sharemail.php" name="tellafriend_form">
      <label for="name">Your Name:</label>
        <input class="std_input" type="text" id="name" name="name" size="40" maxlength="35" value="">
      <label for="to">Recipient's Email:</label>
        <input class="std_input" type="text" id="to" name="email" size="40" maxlength="35">
      <label for="message">Message:</label> 
      <textarea id="message" name="message" rows="18" cols="40">
message here</textarea>
        <input type="submit" onclick="javascript: pageTracker._trackPageview('/share/wf360');" name="submit" class="form_but" value="Submit">
    </form>
  </div><!-- #tellfriend -->

here’s the javascript I’m using (in addition to jQuery):

<script> 
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};

$(document).ready(function() {
    $('#tellfriend').hide();
    $('a.email, #tellfriend a.close').click(function() {
    $("#tellfriend").fadeToggle('slow');
  });
}); 
</script>
<script type="text/javascript">
function executeOnSubmit()
{
alert('Email has been successfully sent. Thanks for sharing!');
}
</script>

I’m not sure why it’s not working: the form isn’t popping up.

Answer 1

It appears you are trying to replace the already existing fadeToggle() function.

Also, the existing fadeToggle() function does not accept 'toggle' as a value for opacity. Quoted from the jQuery API page:

.fadeToggle() works on the same principle as .fadeOut() and .fadeIn(). Like .fadeOut(), .fadeToggle() will fade elements out if they are visible; like fadeIn(), it will fade elements in if they are hidden. Even if an element begins with opacity 0, if it takes up space in the document (i.e. it has a height or width), it isn’t considered hidden. The same is true for an element with visibility: hidden. You can use .fadeTo() or .animate() to fade an element from one opacity to another without affecting its display property. If you do that, however, an element that initially has display: none won’t become visible just because you’re animating the opacity. Hope that helps.

So try removing the function you added at the beginning and it looks like the rest of your code should be okay.

---

Update:

After looking at your site, it appears you have two copies of jQuery, v1.4.2 (which doesn’t have fadeToggle() and v1.5.2 which does have it. But you are loading v1.5.2 after a lot of other scripts have loaded… I get an error on firebug of “$ is not a function” because of this. So, try completely replacing v1.4.2 (the very first script tag) with v1.5.2…. and get firebug 😉

And actually, the script does work – but other scripts are probably broken due to the above reasons. The form pops up WAY at the top next to the first image. You’ll need to change the position from absolute to relative and adjust the left to around 130px in the CSS.