SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    preenting image append 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
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by wright67uk View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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