Question

I have a javascript function using Jquery on my page. I want to make so that it will start this function automatically when the page loads, but so the user can also still interact with the function. It’s a function that involves selecting a link that will hide and fadeIn a new div. I am trying to have this happen automatically as well.

$(document).ready(function() {


        $('#tablecell1').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell1 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_01.gif').addClass('selected');
        $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
        $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
        $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
        $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

    }
})());

    $('#tablecell2').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell2 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_02.gif').addClass('selected');
        $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
        $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
        $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
        $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

    }
})());

    $('#tablecell2').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell2 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_02.gif').addClass('selected');
        $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
        $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
        $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
        $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

    }
})());

    $('#tablecell3').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell3 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_03.gif').addClass('selected');
        $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
        $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
        $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
        $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

    }
})());

    $('#tablecell4').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell4 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_04.gif').addClass('selected');
        $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
        $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
        $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
        $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

    }
})());

    $('#tablecell5').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell5 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_05.gif').addClass('selected');
        $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
        $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
        $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
        $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');

    }
})());


     $('.preview').hide();

  $('#link_1').click(function(){ 
      $('#latest_story_preview1').hide();
       $('#latest_story_preview2').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_main').fadeIn(800);
  });   

  $('#link_2').click(function(){ 
      $('#latest_story_main').hide();
      $('#latest_story_preview2').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_preview1').fadeIn(800);
  });

  $('#link_3').click(function(){ 
      $('#latest_story_main').hide();
      $('#latest_story_preview1').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_preview2').fadeIn(800);
  });

    $('#link_4').click(function(){ 
      $('#latest_story_main').hide();
       $('#latest_story_preview1').hide();
      $('#latest_story_preview2').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_preview3').fadeIn(800);
  });
    $('#link_5').click(function(){ 
      $('#latest_story_main').hide();
       $('#latest_story_preview1').hide();
      $('#latest_story_preview2').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').fadeIn(800);
  });


    });

Answer 1

you can use .trigger() for triggering any event in code

as

  $('#link_1').trigger('click');