CODEWITHSUNDEEP
jquerycsshtml
Kẻ GiếtChết ThờiTrang
Kẻ GiếtChết ThờiTrang

Reputation: 21

Change div position

I have 20 divs on page which looks like tile side by side. I want to move these divs place (on live page) by changing jquery Mansory code. For example:

<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div>

I have coded above thing which displays content in below manner (with help of css - float) :

1 2 3 4 5 6 7 8 9 10 11 12 13 14

what script or css without changing HTML structure will help me to show content in below structure:-

1 2 7 8 13 14
3 4 9 10 ...
5 6 11 12
can any one help me with this please.

Upvotes: 2

Views: 623

Answers (2)

bhb
bhb

Reputation: 2561

Try this cool jquery plugin - http://masonry.desandro.com/index.html

From the site: Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Cheers!

EDIT: Try this Isotope plugin - arranges elements into rows based on their category.

You can categorize the divs and let the plugin sort accordingly. The above link rearranges the divs according to their class names.

Upvotes: 1

Maddy
Maddy

Reputation: 90

use it to do to all...

<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
    <html>
       <head>
          <style>
          .Text{
            font-family: Verdana,Arial,Sans-serif,'Times New Roman';
            font-size: 9pt;
            font-weight: normal;
            font-style: normal;
            color: #666;
            text-decoration: none;
          }

          .alertsBoxTitle{
            font-family: Verdana,Arial,Sans-serif,'Times New Roman';
            font-size: 9pt;
            font-weight: bold;
            font-style: normal;
            color: #ffffff;
            text-decoration: none;
          }
          .alertsBox{
            background: #ECF1F9;
            border: 1px #a1bcdf solid;
          }
          body{
           overflow:hidden;
          }
          </style>

          <script language="javascript">
          // browser detection
          var agt=navigator.userAgent.toLowerCase();
          var is_major = parseInt(navigator.appVersion);
          var is_minor = parseFloat(navigator.appVersion);

          var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                      && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                      && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
          var is_nav4 = (is_nav && (is_major == 4));
          var is_nav6 = (is_nav && (is_major == 5));
          var is_nav6up = (is_nav && (is_major >= 5));
          var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

          var dragapproved=false
          var z,x,y
          var maxleft,maxtop,maxright,maxbottom;

          function setdragBounds()
          {
              // you can set the bounds of the draggable area here
              maxleft = 10;
              maxtop = 10;
              maxright = document.body.clientWidth - 10;
              maxbottom = document.body.clientHeight - 100;
          }

          function move(e)
          {
               var tmpXpos = (!is_ie)? temp1+e.clientX-x: temp1+event.clientX-x;
               var tmpYpos = (!is_ie)? temp2+e.clientY-y : temp2+event.clientY-y;
               if (dragapproved)
               {
                  z.style.left = tmpXpos;
                  z.style.top = tmpYpos;

                  if (tmpXpos < maxleft)
                      z.style.left = maxleft;

                  if (tmpXpos > maxright)
                      z.style.left = maxright;

                  if (tmpYpos < maxtop)
                      z.style.top = maxtop;
                  if (tmpYpos > maxbottom)
                      z.style.top = maxbottom;

                  return false
               }
          }

          function drags(e)
          {
                 if (!(is_ie)&&!(!is_ie)) return

                 var firedobj=(!is_ie)? e.target : event.srcElement
                 var topelement=(!is_ie)? "HTML" : "BODY"

                 while (firedobj.tagName!=topelement && firedobj.className!="drag" && firedobj.tagName!='SELECT' && firedobj.tagName!='TEXTAREA' && firedobj.tagName!='INPUT' && firedobj.tagName!='IMG')
                 {
                     // here you can add the elements that cannot be used for drag . using their class name or id or tag names
                     firedobj=(!is_ie)? firedobj.parentNode : firedobj.parentElement
                 }

                 if (firedobj.className=="drag")
                 {
                     dragapproved = true
                     z = firedobj
                     var tmpheight = z.style.height.split("px")
                     maxbottom = (tmpheight[0])?document.body.clientHeight - tmpheight[0]:document.body.clientHeight - 20;

                     temp1 = parseInt(z.style.left+0)
                     temp2 = parseInt(z.style.top+0)
                     x = (!is_ie)? e.clientX: event.clientX
                     y = (!is_ie)? e.clientY: event.clientY
                     document.onmousemove = move

                     return false
                 }
          }

          document.onmousedown=drags
          document.onmouseup=new Function("dragapproved=false")
       </script>
    </head>

    <body>
      <div id="Dialog" style="width:316px;height:119px;max-width:316px;position:relative;top:50px;left:140px; z-index:1000;" class="drag">
        <table width="100%" style="width:315px;height:119px" cellspacing="0" cellpadding="0" class="alertsBox" id="dialog_table">
          <tr style="cursor:move">
            <td class="alertsBoxTitle notselectable" colspan="2" align="left" height="21" style="cursor:move;background-color:#32426F">Drag Me</td>
          </tr>
          <tr>
            <td align="center" colspan="2" height="5"> </td>
          </tr>
          <tr>
            <td align="center" colspan="2">
              <table width="97%"  border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                  <td valign='top' align="center">
                    </td>
                </tr>
                <tr>
                  <td valign='top' colspan="2" class="Text">this div can be placed any where</td>
                </tr>
                <tr>
                  <td valign='top' colspan="2" align="center"><br/><input type="button" value="Ok"/></td>
                </tr>
              </table></td>
          </tr>
        </table>
      </div>
    </body>
</html>

http://mukhesh.mywapblog.com/category/java-script-27/1.xhtml

Upvotes: 0

Related Questions