preenting image append from overflowing a div

**wright67uk** · Jan 30, 2012 16:51

Im having a few troubles with my javascript, can anybody help?

In my page http://www.1pw.co.uk/demo3.html

Im dropping images into a div named "bowlpic"

If I drop more than 4 images into the div, the images begin to overflow the div. opposed to starting a new line as text normally would.

Is there a way around this?

Ive tried playing around with the inline styles embedded into the script

ie.
$('.bowlpic').append('<img style="width: 50px; position: fixed; float: left; etc

Im fairly new to javascript so any help would be really appreciated!

Code:

<!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;
	text-align: 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: fixed; float: left; 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>

**paul_wilkins** · Jan 30, 2012 18:28

When testing what you have posted, without the linked CSS code and JS scripts, images that are added to bowlpic seem to wrap down to the next line without any trouble.

It's quite likely to be an existing CSS declaration that's causing the problem.

**wright67uk** · Jan 30, 2012 23:56

Hi Paul,

Thankyou for the reply! I put my link rels in comment blocks but the overflow still occured.
I then put the linked javascript and css in a comment block and this prevented me from doing a drag and drop in the first place.

Im not sure if im doing somthing differently to you?

**paul_wilkins** · Jan 31, 2012 00:03

Originally Posted by wright67uk

I then put the linked javascript and css in a comment block and this prevented me from doing a drag and drop in the first place.

Im not sure if im doing somthing differently to you?

That I did differently (since I didn't have the same access to files that you did) is that I manually added image tags (with set widths and heights) in to the bowlpic div, which resulted confirming that the images added to it weren't misbehaving.

User Tag List

Thread: preenting image append from overflowing a div

Thread Tools

Display

preenting image append from overflowing a div

Bookmarks

Bookmarks

Posting Permissions