Show Text dynamically on page load using jquery

Question

Hi all

I need to show text message dynamically once i enter into my site newly using jquery and which should be there for certain time period and rest to some place holder. that is which wants to start from left and show the message and rest on the right side. which is similar to animation effect..anyone kindly help me to do using jquery.

Answer 1

This assumes that you have some place where you want the message to reside once the time period has elapsed. In my example, this is a DIV with id dock. This uses the jQuery UI dialog widget. It also allows the user to close it -- at which point it automatically gets docked. Note that it doesn't do any animation of the message. The timer takes care of closing the dialog if the user doesn't dismiss it.

<div id="startMessage" title="Attention" style="display: none;">
  <p>Your message here</p>
</div>

<script type="text/javascript">
    $(function() {
        $('#startMessage').dialog({
            modal: true,
            autoOpen: true,
            draggable: false,
            resizeable: false,
            buttons: {
               'Close' : function() { $(this).dialog('close'); }
            },
            close: function() {
                 $(this).find('p').appendTo('#dock');
                 $(this).dialog('destroy');
            }
        });

        setTimeout( function() { $('#startMessage').dialog('close') }, 10000 );
    });
</script>

If you wanted to animate the message you might try changing the close callback to:

function() {
   var $dock = $('#dock');
   var position = $dock.offset();
   var $dialog = $(this);
   $dialog.animate( { top: position.top, left: position.left, height: 0, width: 0 }, function() {
       $dialog.find('p').appendTo( $dock );
       $dialog.dialog('destroy');
   });
});

This would move the top left corner of the dialog to the top left corner of the dock while fading it to no size. When it gets to the dock it should have faded out. At that point it takes the paragraph element from the dialog, appends it to the dock, and deletes the dialog and its handlers.

All of the above untested. Adjust as needed.