1.  




<?php
    /*
        Author: Redprogrammer
        Author Mail : redprogrammer@gmail.com
        Author Web : www.redplugin.com
        Explanation : Firstly this function returns an array. It crops all the strings between 
        $start_tag and $end_tag then it returns an array. First value of array ($tags[0]) is the remaining string, 
        the other/s is/are the cropped value/s. $start_tag and $end_tag must be two string.
    */
    function tagCrop($str,$start_tag,$end_tag)
    {
        $str=trim($str);
        $tags=array();
        $startpos = stripos($str, $start_tag);
        $endpos=stripos($str, $end_tag,$startpos+strlen($start_tag));
        while($startpos !== false&&$startpos !== ""&&$endpos !== false&&$endpos !== "")
        {
            array_push($tags,substr($str,$startpos,$endpos-$startpos+strlen($end_tag)));
            $str=substr($str,0,$startpos).substr($str,$endpos+strlen($end_tag));
            $startpos = stripos($str, $start_tag);
            $endpos=stripos($str, $end_tag,$startpos+strlen($start_tag));
            
        }
        array_unshift($tags,$str);
        return    $tags;
    }
    $htmltag="<div><span>a</span>d</div><div><span>b</span>e</div><div><span>c</span>f</div>silly silly silly silly silly";
    $return_tag_array=tagCrop($htmltag,"<span>","</span>");
    print_r(($return_tag_array));
    /*
        Output:
        Array ( [0] =>
        d
        e
        f
        silly silly silly silly silly [1] => a [2] => b [3] => c )
    */
?>
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
REDPLUGIN
Forgot
Login
Logout
Sign In
User Options




Red Swap Animation

Explanation : 

This code provides to divs swapping with animation. It's not a sorting only swapping. Drag a div and drop it on another and watch it.


Code : 

<script type="text/javascript" src="swap.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $("div[id*='box']").redswap({
         speed:'slow',
         opacity:0.6
      });
   });
<script>

Example : 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 

 

You can use this plugin with using $(selector).redswap(options); ,This plugin uses the drag and drop functions of jqueryui library. This plugin swaps two specific div elements each other with animation. Your swapable elements must have a parent element.. 

<style>
   .coursesdiv
   {
      border:1px solid #FF6600;
      background-color:#FFCC00;
      width:120px;
      height:60px;
      float:left;
      font-family:Antipasto;
      margin: 3px 3px 3px 3px;
      position:relative;
   }
   .maindiv
   {
      border:1px solid #FF6600;
      position:relative;
      width:640px;
      height:340px;
      margin-left:5px;
      font-family:Antipasto;
   }
</style>
<div class="maindiv" align="center">
   <div id="1box" class="coursesdiv">1</div>
   <div id="2box" class="coursesdiv">2</div>
   <div id="3box" class="coursesdiv">3</div>
   <div id="4box" class="coursesdiv">4</div>
   <div id="5box" class="coursesdiv">5</div>
   <div id="6box" class="coursesdiv">6</div>
   <div id="7box" class="coursesdiv">7</div>
   <div id="8box" class="coursesdiv">8</div>
   <div id="9box" class="coursesdiv">9</div>
   <div id="10box" class="coursesdiv">10</div>
   <div id="11box" class="coursesdiv">11</div>
   <div id="12box" class="coursesdiv">12</div>
   <div id="13box" class="coursesdiv">13</div>
   <div id="14box" class="coursesdiv">14</div>
   <div id="15box" class="coursesdiv">15</div>
   <div id="16box" class="coursesdiv">16</div>
   <div id="17box" class="coursesdiv">17</div>
   <div id="18box" class="coursesdiv">18</div>
   <div id="19box" class="coursesdiv">19</div>
   <div id="20box" class="coursesdiv">20</div>
   <div id="21box" class="coursesdiv">21</div>
   <div id="22box" class="coursesdiv">22</div>
   <div id="23box" class="coursesdiv">23</div>
   <div id="24box" class="coursesdiv">24</div>
   <div id="25box" class="coursesdiv">25</div>
</div>

,Then we can start our plugin.

<script type="text/javascript" src="swap.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $("div[id*='box']").redswap({
         speed:'slow',
         opacity:0.6
      });
   });
<script>

 

Speed : String,Integer

You can use this option to mark the speed of your web site. (Low,Medium,Fast,1000,2000)

$("div[id*='box']").redswap({speed:'Slow'});

$("div[id*='box']").redswap({speed:3000});

 

 

Opacity : Float

You can use this option to mark the opacity of cloned element in draggable.

$("div[id*='box']").redswap({opacity:0.6});



Download Project
(252) Downloads





Questions and Comments : 
  Designed and Coded by Redprogrammer Copyright © 2011 REDPLUGIN