Unable to change the dragged item on drop - html

I am new to jQuery. I have a requirement of drag and drop where i got '3 draggable div' with id 'parent1, parent2 and parent3' to be dropped in a "container div drop-parent".
Scenario:
When i drag the div with id 'parent1' on container div 'drop-parent' it get dropped but when i choose 'parent 2' div to drop it isn't able to replace the div 'parent1' and to come at its inital position. Please refer below JSBin link for same [click here]
$(".child").draggable({
revert: "invalid",
containment: ".drag_drop_container"
});
$('.drop-parent').droppable({
accept: ".drag-parent > .child",
drop: function(event, ui) {
Dropped($(this), ui.draggable.click());
}
});
$('.drag-parent').droppable({
accept: function(draggable) {
if($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) {
return true;
}
},
drop: function(event, ui) {
Reverted($(this), ui.draggable.click());
}
});
function Dropped($this, $item) {
$item.css({'left': '0px', 'top': '0px'});
$this.droppable("disable").css('opacity',0.9);;
if($item.parent().hasClass('drop-parent')) {
$item.parent().droppable("enable");
} else {
$('.text-input').val($item.attr('data-id'));
}
$this.append($item);
$this.sortable();
}
function Reverted($this, $item) {
$item.css({'left': '0px', 'top': '0px'});
$item.parent().droppable("enable");
$this.append($item);
$('.droped_val').val('');
}
.drop-parent {
//border: 1px solid red!important;
/* background-color: red; */
//width: 640px; /*can be in percentage also.*/
height: 42px;
width: 100px;
//margin: 0 auto;
left:-4px;
//padding: 10px;
top:184px;
position: relative;
}
.dragbody {
//border: 1px solid blue!important;
/* background-color: red; */
//width: 281px;
//position: relative;
//height: 53px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag1.js"></script>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag2.js"></script>
</head>
<body>
<div class="drag_drop_container">
<div class="cards">
<table align="center" class="Table1">
<tr>
<td>
<div class="drag-parent" id="parent1">
<div class="child" data-id=1><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/happy.png"/></div>
</div>
</td>
<td>
<div class="drag-parent" id="parent2">
<div class="child" data-id=2><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/neutral.png"/></div>
</div>
</td>
<td>
<div class="drag-parent" id="parent3">
<div class="child" data-id=3><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/sad.png"/></div>
</div>
</td>
</tr>
</table>
</div>
<div align="center" class="dragbody">
<div align="center" class="drop-parent">
</div>
<img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px"/>
</div>
</div>
</body>
</html>


I've edited the Dropped() function so that it moves all old elements that where on the body back to their parent and then adds the new one.
$(".child").draggable({
revert: "invalid",
containment: ".drag_drop_container"
});
$('.drop-parent').droppable({
accept: ".drag-parent > .child",
drop: function(event, ui) {
Dropped($(this), ui.draggable.click());
}
});
$('.drag-parent').droppable({
accept: function(draggable) {
if ($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) {
return true;
}
},
drop: function(event, ui) {
Reverted($(this), ui.draggable.click());
}
});
function Dropped($this, $item) {
$item.css({
'left': '0px',
'top': '0px'
});
if ($item.parent().hasClass('drop-parent')) {
$item.parent().droppable("enable");
} else {
$('.text-input').val($item.attr('data-id'));
}
for (i = 0; i < $this.children().length; i++) {
$oldElement = $($this.children()[i]);
$("#parent" + $oldElement.data("id")).append($oldElement);
}
$this.append($item);
$this.sortable();
}
function Reverted($this, $item) {
$item.css({
'left': '0px',
'top': '0px'
});
$item.parent().droppable("enable");
$this.append($item);
$('.droped_val').val('');
}
.drop-parent {
//border: 1px solid red!important;
/* background-color: red; */
//width: 640px; /*can be in percentage also.*/
height: 42px;
width: 100px;
//margin: 0 auto;
left:-4px;
//padding: 10px;
top:184px;
position: relative;
}
.dragbody {
//border: 1px solid blue!important;
/* background-color: red; */
//width: 281px;
//position: relative;
//height: 53px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag1.js"></script>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag2.js"></script>
</head>
<body>
<div class="drag_drop_container">
<div class="cards">
<table align="center" class="Table1">
<tr>
<td>
<div class="drag-parent" id="parent1">
<div class="child" data-id=1>
<img data-parent-id="1" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/happy.png" />
</div>
</div>
</td>
<td>
<div class="drag-parent" id="parent2">
<div class="child" data-id=2>
<img data-parent-id="2" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/neutral.png" />
</div>
</div>
</td>
<td>
<div class="drag-parent" id="parent3">
<div class="child" data-id=3>
<img data-parent-id="3" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/sad.png" />
</div>
</div>
</td>
</tr>
</table>
</div>
<div align="center" class="dragbody">
<div align="center" class="drop-parent">
</div>
<img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px" />
</div>
</div>
</body>
</html>

Related

How to create right and left buttons to move product carousel in jQuery?

Investigating and, putting together my code little by little, I have achieved a carousel with the mouseup function that allows me to move the products by pressing the left button of the mouse without releasing it, so far it goes very well, well sometimes it remains as stalled, that is, without having pressed if I move the pointer moves the products.
What I want to achieve in my code is to be able to integrate two buttons, one right and one left, to also be able to move the products of the carousel in that way. How can I achieve it, can you explain to me?
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function(){
// vars for clients list carousel
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140); // 140px width for each client item
$product_carousel.css('width',product_width);
var rotating = true;
//var product_speed = 1800;
//var see_products = setInterval(rotateClients, product_speed);
$(document).on({
mouseenter: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + ( e.pageX - scroll ) +"px, 0)")
}
});
});
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div> <div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

The goal here is to shift the order of elements to the left or right. With jQuery this is exceptionally easy.
The logic is as so:
To shift the order to the right, select the last item, delete it, then insert before the first item
To shift the order to the left, select the first item, delete it, then insert after the last item
To achieve this, we attach a click event listener to each respective button. We select all the slider items with the selector $('.item.product'), use last() and first() to get the first and last items, and the remove() function to delete the element. Then, to reorder, we use jQuery's insertBefore() and insertAfter().
This is the result:
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
And the rest is just a matter of styling (note: uses Material Icons for the arrow icons). Define two button elements;
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
The "chevron_right" and "chevron_left" are icon names | List of Icons
Set their position to fixed so that their position isn't lost when the user scrolls. Set the top attribute to calc(50vh - 50px), where 50vh is half the height of the viewport and 50px is the height of the button (to make it exactly in the "center").
A full example (best viewed in full page mode):
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function() {
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140);
$product_carousel.css('width', product_width);
var rotating = true;
$(document).on({
mouseenter: function() {
rotating = false;
},
mouseleave: function() {
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + (e.pageX - scroll) + "px, 0)")
}
});
});
/* button integration styling (start) */
#left {
left: 10px;
}
#right {
right: 10px;
}
.nav-btn {
position: fixed;
top: calc(50vh - 50px);
z-index: 100;
z-index: 100;
height: 50px;
width: 50px;
border-radius: 50%;
cursor: pointer;
background-color: white;
box-shadow: 0 0 1px black;
transition: 0.2s;
}
.nav-btn:hover {
background-color: #d1d1d1;
}
/* button integration styling (end) */
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96&d=identicon&r=PG&f=1">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Spectric</h3>
</div>
<div class="author">
<span>Spectric</span>
</div>
<div class="purchased items-center">
<button>Check out</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

drag & drop using jQuery in a table to create a copy for every drag

I'm using jQuery for drag & drop in a table , the requirement is like when I drag image to multiple cells(one by one) I'm dynamically adding a div and to the div s, I'm adding span text like wise I want that to all the cells . I'm trying clone() to the compose so the copy can we created but when I drag span text also it is creating copy of 'div'. please run the snippet and see the issue.
Please Response.
Thanks in advance :)
$(function() {
var compose = $("<div>", {
id: "data-hide",
class: "db-click"
});
$("<p>", {
class: "margin5 strong drop-able"
}).appendTo(compose);
$("<img>", {
src: "xyz.png"
}).appendTo($("p", compose));
$("<p>", {
class: "margin5 strong drop-able"
}).appendTo(compose);
$("<img>", {
src: "abc.png"
}).appendTo($("p:eq(1)", compose));
$("#init").draggable({
opacity: 0.5,
helper: "clone",
});
$(".drag-able").draggable({
opacity: 0.5,
helper: "clone",
});
$("td").droppable({
tolerance: 'pointer',
drop: function(event, ui) {
$(compose).clone().appendTo(this);
$(".drop-able").droppable({
drop: function(event, ui) {
$(this).append(ui.draggable.clone());
}
});
}
});
});
#slot {
border: 1px dashed black;
width: 100px;
height: 40px;
}
#slot1 {
border: 1px dashed black;
width: 100px;
height: 40px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div><img src="xyz.png" id="init" /></div>
<div class="textdata">
<span class="drag-able">hello</span>
<span class="drag-able">morning</span>
</div>
<table>
<tr style="border : 1px dotted rgba(0, 0, 0, 0.15);">
<td id="slot"></td>
<td id="slot1"></td>
</tr>
</table>

I remodified few thing and this will do the thing.
$(function() {
var compose = $("<div>", {
id: "data-hide",
class: "db-click"
});
$("<p>", {
class: "margin5 strong drop-able"
}).appendTo(compose);
$("<img>", {
src: "xyz.png"
}).appendTo($("p", compose));
$("<p>", {
class: "margin5 strong drop-able"
}).appendTo(compose);
$("<img>", {
src: "abc.png"
}).appendTo($("p:eq(1)", compose));
$("#init").draggable({
opacity: 0.5,
helper: "clone",
});
$(".drag-able").draggable({
opacity: 0.5,
helper: "clone",
});
$("td").droppable({
tolerance: 'pointer',
drop: function(event, ui) {
$("td").droppable('enable');
$(compose).clone().appendTo(this);
$(".drop-able").droppable({
drop: function(event, ui) {
$(this).append(ui.draggable.clone());
}
});
if($(this).has('#data-hide').length) {
$(this).droppable('disable');
}
}
});
});
#slot {
border: 1px dashed black;
width: 100px;
height: 40px;
}
#slot1 {
border: 1px dashed black;
width: 100px;
height: 40px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div><img src="xyz.png" id="init" /></div>
<div class="textdata">
<span class="drag-able">hello</span>
<span class="drag-able">morning</span>
</div>
<table>
<tr style="border : 1px dotted rgba(0, 0, 0, 0.15);">
<td id="slot"></td>
<td id="slot1"></td>
</tr>
</table>

I am trying to display text over image on more info click

I am trying to display text over image on more info click and hide text from image on hide info button click.
I am developing website in razor. I am trying to display text over image on more info click and hide text from image on hide info button click.
<style>
.portfolioImage {
position: relative;
overflow: hidden;
}
.portfolioImage .footerBar {
position: absolute;
width: 100%;
height: 100%;
position: absolute;
left: 0;
margin-top: -200px;
border-radius: 5px;
}
.portfolioImage:hover .footerBar {
margin-top: 0px;
background-color: #ffb268;
opacity: 0.8;
}
.footerBar {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>
<div class="thumbnail" style="padding:0px;height:200px">
<div class="portfolioImage" id="portfolioImage#(i)">
<div class="footerBar" id="footerBar#(i)">
<table class="table rate-info">
<tr>
<td>First Passenger Fare</td>
</tr>
</table>
</div>
<div id="image_frame#(i)" class="image_frame">
<img alt="100%x200" data-src="#(Url.Content("~/Images/van/"+vanImg+".png"))" src="#(Url.Content("~/Images/van/" + vanImg + ".png"))" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
</div>
</div>
<div class="col-sm-2">
<a id="btncollapseShow#(i)" name="btncollapse#(i)" onclick="ShowHideRates('#(i)','show')" style="color:#4285f4;font-size:small;cursor:pointer;" class="btnExpand" title="#Global.Translate("More info")"> + </a>
<a id="btncollapseHide#(i)" name="btncollapse#(i)" onclick="ShowHideRates('#(i)','hide')" style="color:#4285f4;font-size:small;cursor:pointer;display:none;" class="btnExpand" title="#Global.Translate("Hide info")"> – </a>
</div>
function ShowHideRates(_cellindex, _showHide) {
var _image_frame = "#image_frame" + _cellindex;
var btncollapseShow = "#btncollapseShow" + _cellindex;
var btncollapseHide = "#btncollapseHide" + _cellindex;
if (_showHide == "show") {
$(btncollapseShow).css({ "display": "none" });
$(btncollapseHide).css({ "display": "block" });
// $(_image_frame).addClass("portfolioImage footerBar").css('margin-top','+200');
} else {
$(btncollapseShow).css({ "display": "block" });
$(btncollapseHide).css({ "display": "none" });
// $(_image_frame).removeClass("footerBar");
}
}

Center JWPlayer in UIWebView

I'm loading HTML files in WebView, and I would like to center JWPlayer. I succeed to center image, but not JWPlayer.
I display border for showing the JWPlayer I would like to center.
I don't know what I'm doing wrong :
html :
<html><body>
<div id="banner"></div>
<div id="my-video"></div>
<div align="middle" id="playerKQLqhEDY5doy_wrapper" style="text-align: center; position: relative; display: block; width: 320px; height: 300px; overflow:auto;-webkit-overflow-scrolling:touch"><a id="beforeswfanchor0" href="#playerKQLqhEDY5doy" tabindex="0" title="Flash start" style="border:0;clip:rect(0 0 0 0);display:block;height:1px;margin:-1px;outline:none;overflow:hidden;padding:0;position:absolute;width:1px;" data-related-swf="playerKQLqhEDY5doy"></a>
<object type="application/x-shockwave-flash" data="http://p.jwpcdn.com/6/11/jwplayer.flash.swf" width="100%" height="100%" bgcolor="#000000" id="playerKQLqhEDY5doy" name="playerKQLqhEDY5doy" class="jwswf swfPrev-beforeswfanchor0 swfNext-afterswfanchor0" tabindex="0"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="seamlesstabbing" value="true"><param name="wmode" value="opaque"></object><a id="afterswfanchor0" href="#playerKQLqhEDY5doy" tabindex="0" title="Flash end" style="border:0;clip:rect(0 0 0 0);display:block;height:1px;margin:-1px;outline:none;overflow:hidden;padding:0;position:absolute;width:1px;" data-related-swf="playerKQLqhEDY5doy"></a>
<div id="playerKQLqhEDY5doy_aspect" style="display: none;"> </div>
<div id="playerKQLqhEDY5doy_jwpsrv" style="top: 0px; z-index: 10;"></div>
<div id="playerKQLqhEDY5doy_sharing" style="top: 0px; z-index: 11;"></div>
</div>
<script type="text/javascript">
jwplayer('playerKQLqhEDY5doy').setup({
playlist: [{
image: "http://www.bundoransurfco.com/wp-content/uploads/2010/12/homepage_offers1.jpg",
sources: [{
file: "rtmp://144.76.75.86/live/bundoransurfco"
},{
file: "http://144.76.75.86/hls/bundoransurfco/playlist.m3u8"
}]
}],
height: 200,
primary: "flash",
width: 300,
controls: true,
autostart: true,
sharing: true
});
</script>
<style type="text/css">
#playerKQLqhEDY5doy_wrapper {
left:0em;
right:0em;
top:12.2em;
bottom:0em;
max-width: 100%;
max-height: 100%;
border-style: solid;
border-width: 10px;
}
#photo{
position:relative;
max-width: 100%;
bottom:0em;
left:0em;
right:0em;
top:0em;
display:block;
}
iframe, object, embed {
position:relative;
display:block;
border-style: solid;
border-width: 10px;
}
</style>
<span id="photo" align="middle">
<img src="http://myipstream.com/images/bundoran.jpeg" width="139" height="50" alt="# Surf Co">
</body></html>
Already TRY :
<div class="header-wide" style="clear: both; margin: auto;">[var.lang_latest_videos]</div>
<!--Video Player Container. This is where the player embed code goes-->
<div id="index-player-container" style="margin: auto;">
<div id="player"></div>
<script type="text/javascript">
jwplayer('playerKQLqhEDY5doy').setup({
playlist: [{
image: "http://www.bundoransurfco.com/wp-content/uploads/2010/12/homepage_offers1.jpg",
sources: [{
file: "rtmp://144.76.75.86/live/bundoransurfco"
},{
file: "http://144.76.75.86/hls/bundoransurfco/playlist.m3u8"
}]
}],
height: 200,
primary: "flash",
width: 300,
controls: true,
autostart: true,
sharing: true
});
</script>
</div>
<!--End Video Player Container-->

A very easy solution for centering JWPlayer:
<div class="header-wide" style="clear: both; margin: auto;">[var.lang_latest_videos]</div>
<!--Video Player Container. This is where the player embed code goes-->
<div id="index-player-container" style="margin: auto;">
<div id="player"></div>
<script type="text/javascript">
var so = new SWFObject('[var.base_url]/flvplayer.swf','mpl','708','300','7');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','file=[var.base_url]/playlist.php&backcolor=5798CA&frontcolor=FFFFFF&lightcolor=FFFFFF&screencolor=FFFFFF&logo=[var.base_url]/images/playerlogos/logo-player.png&playlistsize=220&skin=[var.base_url]/skins/Snel.swf&volume=100&playlist=right&shuffle=true&stretching=exactfit&autostart=[var.auto_play_index]');
so.write('player');
</script>
</div>
<!--End Video Player Container-->
referred from link.

I found the magic CSS :
display: block;
margin-left: auto;
margin-right: auto
did the trick !!!
#playerKQLqhEDY5doy_wrapper {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
top:10em;
}

Drag and drop divs across page?

I'm building a single page which consists of a list (of div's) on the left and a grid (of div's) on the right. I would like to add the ability for a user to click and drag one of the list items and drop it over one of the grid boxes. I'm not using HTML5, but I know it comes with this native capability. I'm trying to avoid HTML 5 at the moment.
The above illustration shows my basic page layout and the red line shows how things will be dragged/dropped. Any of the list items may be dragged into any of the grid boxes. The grid cells are dynamically sized (resizing the page will resize the grid cells) to where everything always fits in the page at any given time, no scroll bars. Each grid cell has an index starting from 0, counting from left-to-right then top-to-bottom. I need to pair the list item ID (could be any number) with its corresponding grid cell index (0-8 in this case).
I don't know even the first thing I need to do to make this drag/drop possible. I just know the very core basics of HTML - so I need some example to demonstrate this, not just some brief explanation of use this and that, because I won't know what this and that means. All the tutorials I can find are related to either HTML 5 in particular or related to just moving a list item within the same list - but in my case I need to move it outside the list.
Here's the page structure which I am working with below. Note that the list items are dynamically added upon page load...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>View Cameras</title>
<script type="text/javascript" language="javascript">
var selIndex = 0;
var lastListIndex = 0;
function selBox(index) {
document.getElementById('b' + selIndex).style.backgroundColor = "Black";
selIndex = index;
document.getElementById('b' + selIndex).style.backgroundColor = "Blue";
}
function pageload() {
AddListItem('rtsp://192.168.1.1', 'Test Item 1');
AddListItem('rtsp://192.168.1.2', 'Test Item 2');
AddListItem('rtsp://192.168.1.3', 'Test Item 3');
selBox(0);
camload('');
selBox(1);
camload('');
selBox(2);
camload('');
selBox(3);
camload('');
selBox(4);
camload('');
selBox(5);
camload('');
selBox(6);
camload('');
selBox(7);
camload('');
selBox(8);
camload('');
selBox(0);
}
function AddListItem(address, caption) {
lastListIndex += 1;
var i = lastListIndex;
var h = '<div id="camlistitem' + i + '" class="camlistitem" onclick="camload(\''+address+'\')">';
h += caption;
h += '</div>';
document.getElementById('divCamList').innerHTML += h;
}
function camload(addr) {
var h = '';
if (addr == '') {
h = '<div style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">';
h += ' <img src="Cam.jpg" style="width: 100px; height: 80px;" alt="No Camera Selected"';
h += '</div>';
} else {
h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" ';
h += 'id="player'+selIndex+'" events="True" style="width: 100%; height: 100%;">';
h += '<param name="Src" value="' + addr + '" />';
h += '<param name="ShowDisplay" value="True" />';
h += '<param name="AutoLoop" value="False" />';
h += '<param name="AutoPlay" value="True" />';
h += '<embed id="vcl' + selIndex + '" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" ';
h += 'autoplay="yes" loop="no" target="' + addr + '" style="width: 100%; height: 100%;"></embed></OBJECT>';
}
document.getElementById('divContent' + selIndex).innerHTML = h;
}
</script>
<style type="text/css">
body
{
height: 100%;
}
* { margin: 0px; border: 0px; padding: 0px; }
h3
{
font-size: 14px;
font-weight: bold;
}
div.title
{
height: 40px;
box-sizing: border-box;
overflow: hidden;
}
div.main
{
height: 100%;
}
div.contentmain
{
top: 40px;
bottom: 0;
left: 250px;
right: 0;
overflow: hidden;
position: absolute;
}
div.side
{
top: 40px;
bottom: 0;
width: 250px;
position: absolute;
background: lightgrey;
}
.matrix
{
display: table;
width: 100%;
height: 100%;
}
.row
{
display: table-row;
}
div.contentbox
{
display: table-cell;
width: 33%;
}
table.selecttable
{
width: 200px;
height: 100%;
}
td.selecttable
{
text-align: center;
cursor: pointer;
color: White;
}
div.camlist
{
}
div.camlistitem
{
background-color: Navy;
color: White;
cursor: pointer;
margin-top: 1px;
padding-left: 5px;
}
div.camlistitem:hover
{
background-color: Blue;
}
</style>
</head>
<body onload="pageload()">
<div id="divTitle" class="title">
<h1>View Cameras</h1>
</div>
<div id="divMain" class="main">
<div class="side">
<h3>1) Click box to select view:</h3>
<div style="position: relative; float: left; width: 100%;">
<table class="selecttable" border="1px">
<tr>
<td class="selecttable" id="b0" onclick="selBox(0);" style="background-color: Black;">0<br /></td>
<td class="selecttable" id="b1" onclick="selBox(1);" style="background-color: Black;">1<br /></td>
<td class="selecttable" id="b2" onclick="selBox(2);" style="background-color: Black;">2<br /></td>
</tr>
<tr>
<td class="selecttable" id="b3" onclick="selBox(3);" style="background-color: Black;">3<br /></td>
<td class="selecttable" id="b4" onclick="selBox(4);" style="background-color: Black;">4<br /></td>
<td class="selecttable" id="b5" onclick="selBox(5);" style="background-color: Black;">5<br /></td>
</tr>
<tr>
<td class="selecttable" id="b6" onclick="selBox(6);" style="background-color: Black;">6<br /></td>
<td class="selecttable" id="b7" onclick="selBox(7);" style="background-color: Black;">7<br /></td>
<td class="selecttable" id="b8" onclick="selBox(8);" style="background-color: Black;">8<br /></td>
</tr>
</table>
</div>
<h3>2) Select cam to show in selected box:</h3>
<div style="position: relative; float: left; width: 100%;">
<div id="divCamList" class="camlist">
<div id="camlistitem0" class="camlistitem" onclick="camload('')">
[No Camera]
</div>
</div>
</div>
<h3>3) Can't see the cameras? Click Here.</h3>
</div>
<div class="contentmain">
<div class="matrix">
<div class="row">
<div class="contentbox" id="divContent0"></div>
<div class="contentbox" id="divContent1"></div>
<div class="contentbox" id="divContent2"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent3"></div>
<div class="contentbox" id="divContent4"></div>
<div class="contentbox" id="divContent5"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent6"></div>
<div class="contentbox" id="divContent7"></div>
<div class="contentbox" id="divContent8"></div>
</div>
</div>
</div>
</div>
</body>
</html>
PS - there will be a missing picture Cam.jpg
UPDATE
Thanks to the help of roflmao's effort on the answer below, I got everything working fine now. Just a glitch where when I drag an item, it highlights everything on the page, but that's another story.

Okay, so the first thing you'll want to do right off the bat is use a javascript library, either jQuery or Prototype (jQuery being the more popular one). Manipulating standard JS the way you are is begging for cross-browser compatibility issues.
Once you've put in jQuery, you can just use the jQuery UI library and use the draggable and droppable interfaces. Check this page out.
The code will look something like this:
http://jsfiddle.net/CZNhP/21/
$(function() {
$("#menu li").draggable({reset: true});
$("#container").droppable({
drop: function(event, ui) {
// Here you instantiate your media object.
// You can access the place your object was dropped on with
// "this" and the draggged item with "ui.draggable"
}
});
});