Dynamicaly Generate Page Contents

Today it is Sunday and i am a free for a Little while so i am here to share my experience.last week i decided to make a website totally jquery base.and retrieve data through json.i was thinking to have a single page in whole site and depending on user input different controls should be generated on run time.so here is a little start.

First of all add following libraries in my folder in root directory.

1)   <script src="inc/jquery-1.5.2.min.js" language="javascript"></script>

 2)   <script src="inc/jquery-ui-1.8.11.custom.min.js" language="javascript"></script>

1st one is the basic jquery minified library containing all the basic requirements to implement jQuery.
2nd is user interface library if you have to use draggable() droppable() like functionality the add this one.



 <script language="javascript" type="text/javascript">
        $(document).ready(function() {
 /////////animate images//////////
            $(".image").hover(function() {
                $(this).stop().animate({ height: "230px", width: "230px" }, "fast");
            }, function() { $(this).stop().animate({ height: "200px", width: "200px" }, "fast"); })
            $(".pd_photo").draggable({ containment: "#pd_container" });
            $(".pd_photo").css({ "left": Math.floor(Math.random() * 100) + 'px', "top": Math.floor(Math.random() * 50) + 'px' });
            $(".pd_photo").droppable();

 ///////bring image front/////////
            var highest = 0;
            function findHighestZIndex() {
                var photos = $container.find('.pd_photo');

                photos.each(function() {
                    var $photo = $(this);
                    var zindex = $photo.css('z-index');
                    if (parseInt(zindex) > highest) {
                        highest = zindex;
                    }
                    alert(highest);
                });
                return highest;
            }

var maxz = highest;
            $(".pd_photo").click(function() {
                $(this).css("z-index", maxz);
                maxz = maxz + 1;
            });


all of the above is simply animating my divs containing photos and setting their z-index on click.
now in the following code i have a string containing all the names of photos against a specific user from database.and in a method i split it on , base and then pass each img control a src property.

<script type="text/javascript">
                    function getimage()
                    {                       
                        var imagearray =new Array();
                        function getImages() {
                            for (i = 0; i < getImages.arguments.length-1; i++) {
                                                    imagearray[i] = getImages.arguments[i];
                               
                            }
                        }
                        getImages(<%=imagestr%>);
                       
                        $.each(imagearray, function() {
                            $("#pd_container").append('<div class="pd_photo"><div  style="position: relative"><img id="image" class="image" src="' + this + '" alt="" /><img id="close" src="Images/close.png" alt="Close" class="Close" /></div></div>');                   
                        }
                     )}
                     getimage();
                    
            </script>


in .append the number of div would depend on the images from database.
i don't know here what to explain so if you consider it according to your requirement and you feel it confusing post .then i would feel pleasure on your question in the way of comments.i am not something like master or expert in jquery so if you feel me wrong somewhere then i shall b thank full on your correctness.

Thanks,

Muhammad Khalil