preventing javascript overflow

wright67uk · January 28, 2012

Hello;

http://www.1pw.co.uk/demo3.html

How can i change my javascript to ensure that images being dropped, never overflow div.bowlpic?

Many thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>Drag and Drop Demo</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.main.js"></script>
<style type="text/css">
	.products{
		list-style:none;
		padding:0px;
		height:100%;
	}
	.products li{
		display:inline;
		float:left;
		margin:10px;
	}
	.item{
		display:block;
		text-decoration:none;
	}
	.item img{
		border:1px solid #333;
	}
	.item p{
		margin:0;
		font-weight:bold;
		text-align:center;
		color:#c3c3c3;
	}
	.cart{
		position:fixed;
		right:0;
		top:0;
		width:300px;
		height:100%;
		background:#ccc;
		padding:0px 10px;
	}
	.bowlpic {
		height:300px; width:260px; overflow:none; background-image:url(bowl.jpg); background-repeat:no-repeat; background-color:#FF0000; float:left;
	}
	h1{
		text-align:center;
		color:#555;
	}
	h2{
		position:absolute;
		font-size:16px;
		left:10px;
		bottom:20px;
		color:#555;
	}
	.total{
		margin:0;
		text-align:right;
		padding-right:20px;
	}
	#productpics {
		height:300px; width:1000px;
	}
	#arrow {height:300px; width:300px; float:left;
	}
</style>
<script>
	var data = {"total":0,"rows":[]};
	var totalCost = 0;
	var bowlItems = 10;

	$(function(){
$('#cartcontent').datagrid({
singleSelect:true
                                         });
$('.item').draggable({
revert:true,
proxy:'clone',
onStartDrag:function(){
	$(this).draggable('options').cursor = 'not-allowed';
	$(this).draggable('proxy').css('z-index',10);
			},
onStopDrag:function(){
$(this).draggable('options').cursor='move';
		     }
		});
		$('.bowlpic').droppable({
	onDragEnter:function(e,source){
                              $(source).draggable('options').cursor='auto';
			                     },
			onDragLeave:function(e,source){
				$(source).draggable('options').cursor='not-allowed';
			},
			onDrop:function(e,source){
				var name = $(source).find('p:eq(0)').html();
				var price = $(source).find('p:eq(1)').html();
				addProduct(name, parseFloat(price.split('£')[1]));
				bowlItems = bowlItems + 50;
				$('.bowlpic').append('<img style="width: 50px; position: absolute; margin-left:'+ bowlItems +'px;" src="' + $(source).children().attr('src') +'"/>');
			}
		});
	});

	function addProduct(name,price){
		function add(){
			for(var i=0; i<data.total; i++){
				var row = data.rows[i];
				if (row.name == name){
					row.quantity += 1;
					return;
				}
			}
			data.total += 1;
			data.rows.push({
				name:name,
				quantity:1,
				price:price
			});
		}
		add();
		totalCost += price;
		$('#cartcontent').datagrid('loadData', data);
		$('div.cart .total').html('Total: £'+totalCost);
	}
</script>
</head>
<body style="margin:0;padding:0;height:100%;background:#fafafa;">
<div id="productpics">
<ul class="products">
	<li>
		<a href="#" class="item">
			<img src="shirt1.gif"/>
			<div>
				<p>Balloon</p>
				<p>Price:£25</p>
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="item">
			<img src="shirt2.gif"/>
			<div>
				<p>Feeling</p>
				<p>Price:£25</p>
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="item">
			<img src="shirt3.gif"/>
			<div>
				<p>Elephant</p>
				<p>Price:£25</p>
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="item">
			<img src="shirt4.gif"/>
			<div>
				<p>Stamps</p>
				<p>Price:£333</p>
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="item">
			<img src="shirt5.gif"/>
			<div>
				<p>Monogram</p>
				<p>Price:£25</p>
			</div>
		</a>
	</li>
</ul>
    </div>
<div class="cart">
	<h1>Shopping Cart</h1>
	<div style="background:#fff">
	<table id="cartcontent" fitColumns="true" style="width:300px;height:auto;">
		<thead>
	     <tr>
	<th field="name" width=140>Name</th>
	<th field="quantity" width=60 align="right">Quantity</th>
	<th field="price" width=60 align="right">Price</th>
	     </tr>
		</thead>
	</table>
	</div>
	<p class="total">Total: £0</p>
</div>
    <div class="bowlpic"></div>
    <div id="arrow"><p> < drag to here</p></div>
</body>
</html>

joel24 · January 28, 2012

if the width of the bowlitems is greater than the width of the image, put it on a new line with margin-top...

I would store each row of bowlitems in an array, if the row exceeds the image width, then start a new row in the array

or if you just don't want to show those images which exceed, use an if condition to check

wright67uk · January 29, 2012

"I would store each row of bowlitems in an array, if the row exceeds the image width, then start a new row in the array"

Thankyou,

Are you saying that if only 5 images fit into a row and the user drops a 6th image, then the 6th image would go to the next row in the array?

Im quite new to arrays etc. How can i implement this in my code?

Thanks for the reply!

joel24 · January 29, 2012

might be easier to use css and "float:left" - then on every 5th element, add css "clear:both;"

wright67uk · January 29, 2012

i can use float left however the 5th element doesnt exist until the user has done the drag and drop?

'

joel24 · January 31, 2012

you'll have to handle the dynamic dom elements - live() , either that or have a global count variable and increment it each time a element is dropped.

Sign In

preventing javascript overflow

Recommended Posts

wright67uk

Link to comment

Share on other sites

joel24

Link to comment

Share on other sites

wright67uk

Link to comment

Share on other sites

joel24

Link to comment

Share on other sites

wright67uk

Link to comment

Share on other sites

joel24

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information