Load In and Animate content

Question

Hello,
I have a little issue concerning an animation-effect which loads a certain div into the body of the site.

Let me be more precise: I have a div with the id 'contact': <div id="contact">content</div> The jquery code loads the contents within that div, when I press the link with the id 'ajax_contact': <a href="#" id="ajax_contact">link</a>.

The code is working perfectly. However, I want #contact to be HIDDEN when the site loads, i.e. the default state must be non-visible. Only when the user clicks the link #ajax_contact, the div must appear.

Please have a look at the jquery code:

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#ajax_contact').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #contact';
            $('#contact').load(toLoad)
        }
    });

    $('#ajax_contact').click(function(){

        var toLoad = $(this).attr('href')+' #contact';
        $('#contact').hide('fast',loadContent);
        $('#load').remove();
        $('body').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#contact').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#contact').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

I am not sure whether I must change something inside the HTML, but I believe the key is inside the jquery-code. I also tried giving the #contact a CSS style of visible:none, yet this loops and makes the jquery impossible to load the #contact in.

I hope I've explained myself well; thank you very much in advance.
Chris

Answer 1

CSS:

#contact { display: none; }

jQuery:

$("#contact").hide();

What I'd suggest is:

<a id="contact" class="load">Load contacts</a>
<div id="content_contact" class="load"></div>

with CSS:

div.load { display: none; }

and:

$("a.load").click(function() {
  $("#load_" + this.id).load("...", function() {
    $(this).show();
  });
  return false;
});

Edit: your main problem is the way you're passing callbacks. Instead of:

$("#contact").load(toLoad, '', showNewContent());

do:

$("#contact").load(toLoad, '', showNewContent);

The first version passes the return value to load(). The second passes the function itself.

Edit 2: to toggle to display:

$("a.load").click(function() {
  var dest = $("#load_" + this.id);
  if (dest.hasClass("loading")) {
    // do nothing if already loading
  } else if (dest.is(":visible")) {
    dest.hide();
  } else if (dest.is(":empty")) {
    dest.addClass("loading").load("...", function() {
      $(this).removeClass("loading").show();
    });
  } else {
    dest.show();
  }
  return false;
});

A class of "loading" is added to stop multiple load() calls. The class is removed once loaded. The content is only loaded once by checking if the destination div is empty. You can change this if you wish so it's loaded each time its hidden. It depends on what you're loading.