dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: preventing append image from overflowing a div

  1. #1
    Join Date
    Sep 2011
    Posts
    9

    preventing append image from overflowing a div

    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>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,709
    Code:
    					$('.bowlpic').append('<img style="width: 50px; position: relative; margin-left:'+ 25 +'px;" src="' + $(source).children().attr('src') +'"/>');
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center