Tag Archive for drop

Drag & Drop with WPF in C#

// WPF Canvas Object
// Canvas LayoutCanvas;
//
// Events Required
//
// Canvas_PreviewMouseLeftButtonDown
// Canvas_PreviewMouseMove
// Canvas_PreviewMouseLeftButtonUp
// Parent_PreviewKeyDown
//
// LayoutCanvas.PreviewMouseLeftButtonDown += LayoutCanvas_PreviewMouseLeftButtonDown;
// LayoutCanvas.PreviewMouseMove += LayoutCanvas_PreviewMouseMove;
// LayoutCanvas.PreviewMouseLeftButtonUp += LayoutCanvas_PreviewMouseLeftButtonUp;
// WindowOrPage.PreviewKeyDown += WindowOrPage_PreviewKeyDown;
//
// Parameters Required
//
// For capturing the mouse position:
// Point ddStartPoint;
//
// The top left corner of the child object (left = x, top = y)
// double ddOriginalLeft;
// double ddOriginalTop;
//
// Properties for managing the state of the drag & drop process:
// bool ddIsMouseDown;
// bool ddIsBeingDragged;
//
// Our original UI element (in my case the children are all Image objects)
// UIElement ddOriginalElement;
//
// The container of the above element when we are in dragging mode
// System.Windows.Shapes.Rectangle ddOverlay;
//

//
// Canvas_PreviewMouseLeftButtonDown
//
// We assign this to our Canvas object as it will control
// catching whether or not we are clicking on the canvas itself
// or on one of its children
//
private void LayoutCanvas_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    // If the source of the click is our canvas object then we want
    // to exit because we are looking for it's children to drag 
    // and not the canvas itself.
    if(e.Source == LayoutCanvas)
    {
	return;
    }
    
    // Identifies that we have started dragging
    ddIsMouseDown = true;

    // Captures the mouse position in the layout canvas
    ddStartPoint = e.GetPosition(LayoutCanvas);

    // Sets up our element that we will be dragging
    ddOriginalElement = (UIElement)e.Source;

    // Tells the Window to give the mouse to the LayoutCanvas
    // object.
    LayoutCanvas.CaptureMouse();

    e.Handled = true;
}	

//
// Canvas_PreviewMouseMove
// 
// Our event handler for updating the position of our
// dragged element
//
// This introduces two helper methods DragStarted() and DragMoved()
// They will be covered later on in the code.
//
private void LayoutCanvas_PreviewMouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
    if(ddIsMouseDown)
    {
	if(!ddIsBeingDragged)
	{
	    // Capture our mouse position relative to the LayoutCanvas object
	    var mousePosition = e.GetPosition(LayoutCanvas);

	    // Creates a transparent rectangle around our current drag point and we want to 
	    // check here that we are within that rectangle
	    if(Math.Abs(mousePosition.X - ddStartPoint.X) > SystemParameters.MinimumHorizontalDragDistance &&
		    Math.Abs(mousePosition.Y - ddStartPoint.Y) > SystemParameters.MinimumVeritcalDragDistance)
	    {
		DragStarted();
	    }
	}
	else
	{
	    DragMoved();
	}
    }
}

//
// Canvas_PreviewMouseLeftButtonUp
//
// Controls the functionality for finishing our drag and drop process.
// This will also introduce the call to DragFinished(bool state);
//
private void LayoutCanvas_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    // This is a fairly simple check. If we are still dragging
    // or starting to drag which means ddIsMouseDown would be 'True'
    // then we don't stop the drag
    if(ddIsMouseDown)
    {
	DragFinished(false);
    }
}

//
// Page_PreviewKeydown
//
// In my code I have my canvas in a Page, you can do this with a Window object as well.
//
private void Page_PreviewKeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
    if(e.Key == Key.Escape && ddIsBeingDragged)
    {
	DragFinished = true;
    }
}

// Helper Methods

//
// DragStarted()
//
//
private void DragStarted()
{
    // Capture our last remaining properties
    // needed to support our drag and drop
    // process
    ddIsBeingDragged = true;
    ddOriginalLeft = Canvas.GetLeft(ddOriginalElement);
    ddOriginalTop = Canvas.GetTop(ddOriginalElement);

    // What we are doing here is creating a semi-transparent
    // mirror image of the object we are dragging.
    //
    // This allows us to visually see that we have selected 
    // an object and are dragging it.
    var brush = new VisualBrush(ddOriginalElement);
    brush.Opacity = 0.5;

    ddOverlay = new System.Windows.Shapes.Rectangle();
    ddOverlay.Width = ddOriginalElement.RenderSize.Width;
    ddOverlay.Height = ddOriginalElement.RenderSize.Height;
    ddOverlay.Fill = brush;

    // Finally add the overlay to the LayoutCanvas for displaying
    LayoutCanvas.Children.Add(ddOverlay);
}


//
// DragMoved();
//
private void DragMoved()
{
    // Capture the current mouse position, this will be used
    // to redraw the overlay element we created in DragStarted()
    var currentPosition = System.Windows.Input.Mouse.GetPosition(LayoutCanvas);
    var elementLeft = (currentPosition.X - ddStartPoint.X) + ddOriginalLeft;
    var elementTop = (currentPosition.Y - ddStartPoint.Y) + ddOriginalTop;

    // We update the overlay's position on the LayoutCanvas
    // by setting it's top left corner position below
    Canvas.SetLeft(ddOverlay, elementLeft);
    Canvas.SetTop(ddOverlay, elementTop);
}

//
// DragFinished();
//
private void DragFinished(bool canceled)
{
    if(ddOverlay != null)
    {
	// capture our current position
	var topLeft = Canvas.GetLeft(ddOverlay);
	var top = Canvas.GetTop(ddOverlay);

	if(ddIsBeingDragged)
	{
	    LayoutCanvas.Children.Remove(ddOverlay);

	    // If it wasn't prematurely canceled, then
	    // move the element to the current mouse position
	    if(!canceled)
	    {
		Canvas.SetLeft(ddOriginalElement, topLeft);
		Canvas.SetTop(ddOriginalElement, top);
	    }

	    // Release the mouse from the layoutcanvas.
	    // This is very important. If you do not release the mouse
	    // you have to set the focus of the mouse to another application
	    // and then back again to regain mouse control
	    LayoutCanvas.ReleaseMouseCapture();

	    // Reset our drag & drop properties
	    ddOverlay = null;
	    ddIsMouseBeingDragged = false;
	    ddIsMouseDown = false;
	}
    }
}

source

State Dropdown

Function GetStates() As Object

	Dim statesList As String, states As Object
	statesList = ("AL,AK,AZ,AR,CA,CO,CT,DC,DE,FL,GA,HI,ID,IL,IN,IA,KS,KY,LA,ME,MD,MA,MI,MN,MS,MO,MT,NE,NV,NH,NJ,NM,NY,NC,ND,OH,OK,OR,PA,RI,SC,SD,TN,TX,UT,VT,VA,WA,WV,WI,WY")
	states = Split(statesList, ",")
	Return states

End Function



<asp:ObjectDataSource ID="ODS_ListStates" runat="server" TypeName="GlobalClass" SelectMethod="GetStates" />
<asp:DropDownList ID="DDL_State" runat="server" DataSourceID="ODS_ListStates" />

source

Box Shadow

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

source

Simple jQuery Drop Down Menu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#dropdownbutton").click(function () {
$("#menu").slideToggle("slow");
});
});
</script>

</head>
<body>
<a href="#" id="dropdownbutton">Show Menu</a>
<ul id="menu" style="display:none">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>

source

AS2 Basic Drag-Drop Collision

#include "mc_tween2.as"
// if you don't have mc_tween, comment it out.

var startX:Number = 0; // original X position of item picked up
var startY:Number = 0; // original Y position of item picked up
var drawCollision:Boolean = true; // for debugging

box1_mc.onPress = function() { pickup(this, 1); };
box1_mc.onRelease = function() { dropoff(this, 1, box2_mc); };
//box1_mc.onRollOver = function() { rollover(this, 1); };
//box1_mc.onRollOut = function() { rollout(this, 1); };

function pickup(which_mc:MovieClip, intMC:Number):Void {
which_mc.swapDepths(this.getNextHighestDepth()); // bring picked-up object to foreground
which_mc.startDrag();
startX = which_mc._x;
startY = which_mc._y;
}

function dropoff(which_mc:MovieClip, intMC:Number, target_mc:MovieClip):Void {
which_mc.stopDrag();

if (isColliding(target_mc, which_mc)) // try removing the second parameter here.  See function for more details.
{
status_txt.text += "
collided";
which_mc.slideTo(85, undefined, .5);
} else {
status_txt.text += "
missed";
which_mc.slideTo(startX, startY, .5);
}
}

function rollover(which_mc:MovieClip, intMC:Number):Void {
status_txt.text += "
rolled over";
}

function rollout(which_mc:MovieClip, intMC:Number):Void {
status_txt.text += "
rolled out";
}

function isColliding(target_mc:MovieClip, which_mc:MovieClip):Boolean
{
// If you do not send a "which_mc" this will assume you want to check on the mouse position (which will probably be within the target when the item is dropped)

obj1_x = target_mc._x;
obj1_y = target_mc._y;
if (which_mc) {
obj2_x = which_mc._x - Number(which_mc._width / 2);
obj2_y = which_mc._y - Number(which_mc._height / 2);
} else {
obj2_x = this._xmouse - 1;
obj2_y = this._ymouse - 1;
}

obj1_x2 = target_mc._width + obj1_x;
obj1_y2 = target_mc._height + obj1_y;
if (which_mc) {
obj2_x2 = which_mc._width + obj2_x;
obj2_y2 = which_mc._height + obj2_y;
} else {
obj2_x2 = 2 + this._xmouse;
obj2_y2 = 2 + this._ymouse;
}

if (drawCollision == true)
{
this.createEmptyMovieClip("rectangle_mc", 10);
rectangle_mc._x = obj2_x;
rectangle_mc._y = obj2_y;
if (which_mc) {
drawRectangle(rectangle_mc, which_mc._width, which_mc._height, 0x990000, 50);
} else {
drawRectangle(rectangle_mc, 2, 2, 0x990000, 50);
}

this.createEmptyMovieClip("rectangle2_mc", 11);
rectangle2_mc._x = obj1_x;
rectangle2_mc._y = obj1_y;
drawRectangle(rectangle2_mc, target_mc._width, target_mc._height, 0x99FF00, 50);
}

if ((obj2_x > obj1_x) && (obj2_x2 < obj1_x2) && (obj2_y > obj1_y) && (obj2_y2 < obj1_y2)) {
return true;
} else {
return false;
}

}

function drawRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, fillColor:Number, fillAlpha:Number):Void {
with (target_mc) {
beginFill(fillColor, fillAlpha);
moveTo(0, 0);
lineTo(boxWidth, 0);
lineTo(boxWidth, boxHeight);
lineTo(0, boxHeight);
lineTo(0, 0);
endFill();
}
}

source

AS2 Basic Drag-Drop Collision

#include "mc_tween2.as"
// if you don't have mc_tween, comment it out.

var startX:Number = 0; // original X position of item picked up
var startY:Number = 0; // original Y position of item picked up
var drawCollision:Boolean = true; // for debugging

box1_mc.onPress = function() { pickup(this, 1); };
box1_mc.onRelease = function() { dropoff(this, 1, box2_mc); };
//box1_mc.onRollOver = function() { rollover(this, 1); };
//box1_mc.onRollOut = function() { rollout(this, 1); };

function pickup(which_mc:MovieClip, intMC:Number):Void {
which_mc.swapDepths(this.getNextHighestDepth()); // bring picked-up object to foreground
which_mc.startDrag();
startX = which_mc._x;
startY = which_mc._y;
}

function dropoff(which_mc:MovieClip, intMC:Number, target_mc:MovieClip):Void {
which_mc.stopDrag();

if (isColliding(target_mc, which_mc)) // try removing the second parameter here.  See function for more details.
{
status_txt.text += "
collided";
which_mc.slideTo(85, undefined, .5);
} else {
status_txt.text += "
missed";
which_mc.slideTo(startX, startY, .5);
}
}

function rollover(which_mc:MovieClip, intMC:Number):Void {
status_txt.text += "
rolled over";
}

function rollout(which_mc:MovieClip, intMC:Number):Void {
status_txt.text += "
rolled out";
}

function isColliding(target_mc:MovieClip, which_mc:MovieClip):Boolean
{
// If you do not send a "which_mc" this will assume you want to check on the mouse position (which will probably be within the target when the item is dropped)

obj1_x = target_mc._x;
obj1_y = target_mc._y;
if (which_mc) {
obj2_x = which_mc._x - Number(which_mc._width / 2);
obj2_y = which_mc._y - Number(which_mc._height / 2);
} else {
obj2_x = this._xmouse - 1;
obj2_y = this._ymouse - 1;
}

obj1_x2 = target_mc._width + obj1_x;
obj1_y2 = target_mc._height + obj1_y;
if (which_mc) {
obj2_x2 = which_mc._width + obj2_x;
obj2_y2 = which_mc._height + obj2_y;
} else {
obj2_x2 = 2 + this._xmouse;
obj2_y2 = 2 + this._ymouse;
}

if (drawCollision == true)
{
this.createEmptyMovieClip("rectangle_mc", 10);
rectangle_mc._x = obj2_x;
rectangle_mc._y = obj2_y;
if (which_mc) {
drawRectangle(rectangle_mc, which_mc._width, which_mc._height, 0x990000, 50);
} else {
drawRectangle(rectangle_mc, 2, 2, 0x990000, 50);
}

this.createEmptyMovieClip("rectangle2_mc", 11);
rectangle2_mc._x = obj1_x;
rectangle2_mc._y = obj1_y;
drawRectangle(rectangle2_mc, target_mc._width, target_mc._height, 0x99FF00, 50);
}

if ((obj2_x > obj1_x) && (obj2_x2 < obj1_x2) && (obj2_y > obj1_y) && (obj2_y2 < obj1_y2)) {
return true;
} else {
return false;
}

}

function drawRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, fillColor:Number, fillAlpha:Number):Void {
with (target_mc) {
beginFill(fillColor, fillAlpha);
moveTo(0, 0);
lineTo(boxWidth, 0);
lineTo(boxWidth, boxHeight);
lineTo(0, boxHeight);
lineTo(0, 0);
endFill();
}
}

source

PHP Create Drop Shadow on Image

<?php
/* set drop shadow options */

/* offset of drop shadow from top left */
define("DS_OFFSET",  5);

/* number of steps from black to background color /*
define("DS_STEPS", 10);

/* distance between steps */
define("DS_SPREAD", 1);

/* define the background color */
$background = array("r" =&gt; 255, "g" =&gt; 255, "b" =&gt; 255);

$src = isset($_REQUEST['src']) ? urldecode($_REQUEST['src']) : null;
if(isset($src) &amp;&amp; file_exists($src)) {

/* create a new canvas.  New canvas dimensions should be larger than the original's */
list($o_width, $o_height) = getimagesize($src);
$width  = $o_width + DS_OFFSET;
$height = $o_height + DS_OFFSET;
$image = imagecreatetruecolor($width, $height);

/* determine the offset between colors */
$step_offset = array("r" =&gt; ($background["r"] / DS_STEPS), "g" =&gt; ($background["g"] / DS_STEPS), "b" =&gt; ($background["b"] / DS_STEPS));

/* calculate and allocate the needed colors */
$current_color = $background;
for ($i = 0; $i &lt;= DS_STEPS; $i++) {
$colors[$i] = imagecolorallocate($image, round($current_color["r"]), round($current_color["g"]), round($current_color["b"]));

$current_color["r"] -= $step_offset["r"];
$current_color["g"] -= $step_offset["g"];
$current_color["b"] -= $step_offset["b"];
}

/* floodfill the canvas with the background color */
imagefilledrectangle($image, 0,0, $width, $height, $colors[0]);

/* draw overlapping rectangles to create a drop shadow effect */
for ($i = 0; $i &lt; count($colors); $i++) {
imagefilledrectangle($image, DS_OFFSET, DS_OFFSET, $width, $height, $colors[$i]);
$width -= DS_SPREAD;
$height -= DS_SPREAD;
}

/* overlay the original image on top of the drop shadow */
$original_image = imagecreatefromjpeg($src);
imagecopymerge($image, $original_image, 0,0, 0,0, $o_width, $o_height, 100);

/* output the image */
header("Content-type: image/jpeg");
imagejpeg($image, "", 100);

/* clean up the image resources */
imagedestroy($image);
imagedestroy($original_image);
}
?>

source

Drupal 5 Select Drop Down

$options = array(
1 => 'Something',
);

$form['userList'] = array(
'#type' => 'select',
'#title' => t(''),
'#default_value' => NULL,
'#options' => $options,
'#description' => t(''),
);

source

CSS Drop Shadow

****************
***** CSS ******
****************

.dropShadow {
position:relative;
z-index:1;
}

/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }

.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2, .dropShadow.dropBR .drop3,
.dropShadow.dropBR .drop4, .dropShadow.dropBR .drop5 {
top:0; left:0;			/*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2, .dropShadow.dropBL .drop3,
.dropShadow.dropBL .drop4, .dropShadow.dropBL .drop5 {
top:0; left:-16px;		/*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2, .dropShadow.dropTR .drop3,
.dropShadow.dropTR .drop4, .dropShadow.dropTR .drop5 {
top:-16px; left:0;		/*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2, .dropShadow.dropTL .drop3,
.dropShadow.dropTL .drop4, .dropShadow.dropTL .drop5 {
top:-16px; left:-16px;	/*shadow positioned top-left*/
}

/*top & bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div, .dropShadow .drop3 div,
.dropShadow .drop4 div, .dropShadow .drop5 div {
position:absolute;
top:8px; right:0; bottom:0; left:8px;
border-style:solid;
border-color:#999999;
}
.dropShadow .drop1 div { margin:7px -1px -1px 7px; border-width:1px 0 1px 0; background-color:#999999; }
.dropShadow .drop2 div { margin:6px -2px -2px 6px; border-width:1px 0 1px 0; }
.dropShadow .drop3 div { margin:4px -4px -4px 4px; border-width:2px 0 2px 0; }
.dropShadow .drop4 div { margin:2px -6px -6px 2px; border-width:2px 0 2px 0; }
.dropShadow .drop5 div { margin:0 -8px -8px 0; border-width:2px 0 2px 0; }

/*left & right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div, .dropShadow .drop3 div div,
.dropShadow .drop4 div div, .dropShadow .drop5 div div {
position:absolute;
top:0; right:0; bottom:0; left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }

/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
background-color:white;
}

****************
***** HTML *****
****************

<div class="dropShadow dropBR" style="float:left; position:absolute;">
<div class="drop1"><div><div></div></div></div>
<div class="drop2"><div><div></div></div></div>
<div class="drop3"><div><div></div></div></div>
<div class="drop4"><div><div></div></div></div>
<div class="drop5"><div><div></div></div></div>
<div class="dropContent" style="border:1px solid black; padding:2px;">

<img src="birdhouse4.gif">

</div>
</div>

source

Image-less Dropshadow

#north {position: absolute;width: 200px;left: 100px;top: 100px;height: 5px;}

#east {width: 5px;position: absolute;height: 200px;top: 100px;left: 100px}

#south {position: absolute;width: 200px;height: 5px;left: 100px;top: 302px;}

#west {width: 5px;position: absolute;height: 200px;top: 100px;left: 305px}

.ds_ch {height: 1px;line-height: 1px;width: 100%;background: black;display: block;overflow: hidden;}

#east .ds_ch, #west .ds_ch {width: 1px;height: 100%;float: left;clear: none;display: inline;}

.o1 {opacity: .5;filter: alpha(opacity=50);}

.o2 {opacity: .4;filter: alpha(opacity=40);}

.o3 {opacity: .3;filter: alpha(opacity=30);}

.o4 {opacity: .20;filter: alpha(opacity=20);}

.o5 {opacity: .10;filter: alpha(opacity=10);}

/* For connecing the shadow in 2 corners */

.mv1 {margin-top: 0px;padding-bottom: 7px;}

.mv2 {margin-top: 1px;padding-bottom: 5px;}

.mv3 {margin-top: 2px;padding-bottom: 3px;}

.mv4 {margin-top: 3px;padding-bottom: 1px;}

.mv5 {margin-top: 4px;padding-bottom: 0px;}

.m1 {margin-left: 1px;padding-right: 8px;}

.m2 {margin-left: 2px;padding-right: 6px;}

.m3 {margin-left: 3px;padding-right: 4px;}

.m4 {margin-left: 4px;padding-right: 2px;}

.m5 {margin-left: 5px;padding-right: 0px;}

/*
ds = dropshadow

ch = child
pa = parent

o = opacity
m = margin
mv = margin vertical

*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="#" />
<meta name="Description" content="#" />
<meta name="Copyright" content="#" />
<meta name="Robots" content="#" />
<meta name="Generator" content="#" />
<meta name="Keywords" content="#" />
<link rel="stylesheet" href="shadows.css" type="text/css"  media="screen"/>
</head>
<body>
<div id="north">
<div class="ds_ch o1 m1">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o5 m5">
</div>
</div>
<div id="east">
<div class="ds_ch o5 mv5">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o1 mv1">
</div>
</div>
<div id="south">
<div class="ds_ch o5 m5">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o1 m1">
</div>
</div>
<div id="west">
<div class="ds_ch o1 mv1">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o5 mv5">
</div>
</div>
</body>
</html>

source