Ticket #4229: sample_test_krunal.html

File sample_test_krunal.html, 6.0 KB (added by krunal, February 25, 2009 11:56AM UTC)

sample of my problem

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="http://ui.jquery.com/testing/themes/base/ui.all.css" />
  <script type="text/javascript" src="http://ui.jquery.com/testing/jquery-1.3.1.js"></script>
  <script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.droppable.js"></script>
  <style type="text/css">
    #draggable { width: 75px; height: 25px; background: silver; padding: 10px; }
    #droppable { position: absolute; top: 25px; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }

  .drop
    {
        width: 780px;
        height: 140px;
        margin-top: 18px;
        position: absolute;
        top: 25px;
        opacity: 0.7;
        overflow: auto;
    }

   .droppable-active
    {
        opacity: 1.0;
    }
    .droppable-hover
    {
        outline: 1px dotted black;
    }

.drop-panel{width:980px; position:fixed; bottom:0; }
.drop-panel .top-title{height:34px; background:url(../images/title-black.gif); width:980px;}
.drop-panel .top-title .title{float:left; padding:10px 0 0 20px; width:230px; }
.drop-panel .top-title .text{float:left; width:470px; text-align:center;  line-height:34px;}
.drop-panel .top-title .show{float:right; widows:230px; padding:10px 20px 0px 0px;}

.drop-panel .gray-box{width:978px; height:140px; border:1px solid #565656; background:#fff url(../images/bg-gry-box.gif) no-repeat right; }
.drop-panel .gray-box .inner{padding:8px 0 0 15px;}
.drop-panel .gray-box .item{background:url(../images/panel-item-bg.gif); width:91px; height:125px; float:left; margin-right:4px;}
.drop-panel .gray-box .item .inner{padding:3px 0 0 5px;}
.drop-panel .gray-box .button{ float:right; width:175px; padding-top:50px;}

.drop-panel .btm-pageing{height:35px; width:978px; border:1px solid #565656; border-top:none;  background:url(../images/bg-btm-panel.gif) repeat-x;}
.drop-panel .btm-pageing .remove-btn{float:left; width:91px; padding:8px 0 0 16px;}
.drop-panel .btm-pageing .paging{line-height:35px; float:left;   width:820px; text-align:center;}

  </style>
  <script>
  $(document).ready(function(){
    $("#draggable").draggable({  refreshPositions: true, start: function(ev, ui) {
            showFirst();
        }
        });
$(".drop").droppable({
 activeClass: 'droppable-active',
            hoverClass: 'droppable-hover',
  drop: function() { alert('dropped'); }
});
  });
  </script>
</head>
<body style="font-size:62.5%;">

<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
<div id="draggable">Drag me</div>
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>
<p>
<img src="http://www.lipsum.com/images/lipsum08.gif">
</p>



<script type="text/javascript">
    $(document).ready(function() {
        $("#open").click(show);
        $("#close").click(hide);
    });
    function show() {
        $("#Content").slideToggle("slow");
        $("#open").slideToggle("slow");
        $("#close").slideToggle("slow");
    }
    function showFirst() {
        $("#Content").slideDown("slow");
        $("#open").slideUp("slow");
        $("#close").slideDown("slow");
    }
    function hide() {
        $("#Content").slideToggle("slow");
        $("#open").slideToggle("slow");
        $("#close").slideToggle("slow");
    }                                      
</script>

<div class="outer-drop-panel">
    <div class="drop-panel">
        <dl id="open" class="top-title">
            <dd class="title">
                <img src="images/title-artist-shortlist.gif" alt="Artist Shortlist" /></dd>
            <dd class="text">
                Drag n� Drop</dd>
            <dd class="show">
                <img src="images/link-show.gif" alt="Show" title="Show" onmouseover="this.src='images/link-show-o.gif'"
                    onmouseout="this.src='images/link-show.gif'" />
            </dd>
        </dl>
        <dl id="close" style="display: none;" class="top-title">
            <dd class="title">
                <img src="images/title-artist-shortlist.gif" alt="Artist Shortlist" /></dd>
            <dd class="text">
                Drag n� Drop</dd>
            <dd class="show">
                <img src="images/link-close-black.gif" title="Close" alt="Close" onmouseover="this.src='images/link-close-black-o.gif'"
                    onmouseout="this.src='images/link-close-black.gif'" />
            </dd>
        </dl>
        <dl id="Content" style="display: none;">
            <dd class="gray-box">
                <dl class="inner">
                    <div id="dropzone" class="drop">
                    </div>
                    <dd class="button">
                        <a href="javascript:void(0);" onclick="emailShortList();return false;">
                            <img src="images/btn-email-shortlist.gif" alt="Email ShortList" border="0" title="Email ShortList" /></a></dd>
                </dl>
            </dd>
            <dd class="btm-pageing">
                <dl>
                    <dd class="remove-btn">
                        <a href="javascript:void(0);">
                            <img src="images/btn-remove-all.gif" alt="Remove All" title="Remove All" onclick="return removeAll();" /></a></dd>
                    <dd id="myShorListPager" class="paging">
                    </dd>
                </dl>
            </dd>
        </dl>
    </div>
</div>

</body>
</html>

Download in other formats:

Original Format