Dec 19, 2011

A simple jQuery slideshow

by
I have used jQuery animate() method to create a simple slideshow. I am toggling the opacity of the image from 0 to 1 and also changing the URL of the image. 

Script:

<script type="text/javascript">
function AnimateImg()
{

    var imgUrls = new Array("picture1.png", "picture2.png", " picture3.png ");
    var opacVal = 0;
    var currentImage = imgUrls[0];
    var index = 0;
    var DELAY = 1000;
    setInterval(function()
            {
            $("#animate-img").animate({ opacity: opacVal }, DELAY, function() {

                    if (opacVal == 0) {
                        opacVal = 1;
                    }
                    else {
                        opacVal = 0;
                    }

                    if (index == imgUrls.length) {
                        index = 0;
                    }

                    if (opacVal == 0) {
                        currentImage = imgUrls[index++];
                        $("#animate-img").attr("src", currentImage);
                    }
                });

            }, DELAY
       );
}
</script>
HTML:


<image id="animate-img" src="" style="height:200px"/>

DEMO:

Also check the jquery modal dialog here.

Dec 12, 2011

A jQuery modal wait dialog

by
The jQuery UI modal dialogs are great add-ons but they don’t necessary fit well when you just have to show a wait message. There are issues with removing the title bar and styling the dialog. BlockUI is another alternative but I find it little hard to style using css.

This is how I came up with a wait dialog. I am using two divs here. 
First div will cover the page content in such a way that the content is still visible but user cannot perform any action. For this, I need a div with near transparent background (opacity of 0.8)

  
   #loading-div-background 
    {
        display:none;
        position:fixed;
        top:0;
        left:0;
        background:black;
        width:100%;
        height:100%;
     }


The second div will contain an animated image and it can be positioned centrally in the page.

  
   #loading-div
    {
         width: 300px;
         height: 200px;
         background-color: #0c0b0b;
         text-align:center;
         position:absolute;
         left: 50%;
         top: 50%;
         margin-left:-150px;
         margin-top: -100px;
     }


Script

  
<script type="text/javascript">
        $(document).ready(function () {
            $("#loading-div-background").css({ opacity: 0.8 });
           
        });

        function ShowProgressAnimation() {
           

            $("#loading-div-background").show();

        }

    </script>


I am assigning the opacity property through jQuery css() funtion as it will take care of any browser compatibility issues.
Also, I have written a method which will bring up the background div. This can be invoked during form submit or whenever it is desired to block the page content. In this demo, I am triggering through a button click event.

HTML

  
<button id="show" onclick="ShowProgressAnimation();" >Show dialog</button>

<div id="loading-div-background">
    <div id="loading-div" class="ui-corner-all" >
      <img style="height:80px;margin:30px;" src="images/loading.gif" alt="Loading.."/>
      <h2 style="color:gray;font-weight:normal;">Please wait....</h2>
     </div>
</div>



Demo


Loading..

Please wait....

Also check the jQuery image slide show here.
Newer Posts Older Posts

Top Ad 728x90