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

Thread: Can't place div under div with JS function

Hybrid View

  1. #1
    Join Date
    Jan 2014
    Posts
    2

    Can't place div under div with JS function

    Since I can't master the subject, I'm not sure if it's CSS or JS related. Here's my problem; I have a script to upload, crop and save image. The problem is I want to put the thumbnail preview under the image but I can't. Here are the codes:

    These are in the head part
    HTML Code:
    <script type="text/javascript" src="js/jquery-pack.js"></script>
    <script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
    HTML Code:
    <script type="text/javascript">
    
    function preview(img, selection) { 
    	var scaleX = 100 / selection.width; 
    	var scaleY = 100 / selection.height; 
    	$('#thumbnail + div > img').css({ 
    		width: Math.round(scaleX * 500) + 'px', 
    		height: Math.round(scaleY * 375) + 'px',
    		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
    		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
    	});
    	$('#x1').val(selection.x1);
    	$('#y1').val(selection.y1);
    	$('#x2').val(selection.x2);
    	$('#y2').val(selection.y2);
    	$('#w').val(selection.width);
    	$('#h').val(selection.height);
    } 
    
    $(window).load(function () { 
    	$('#thumbnail').imgAreaSelect({ aspectRatio: '16:9', onSelectChange: preview }); 
    });
    </script>
    This is in the body part
    HTML Code:
    <div align="center">
    			<img src="resized_pic.jpg" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
    			<div style="float:left; position:relative; overflow:hidden; width:160px; height:90px;">
    			<img src="resized_pic.jpg" style="position: relative;" alt="Thumbnail Preview" />
    			</div>
    </div>
    How can I possibly put the Thumbnail Preview under Create Thumbnail?

  2. #2
    Join Date
    Jan 2014
    Posts
    2
    I found the solution myself fortunately

    I replaced this code:
    HTML Code:
    $('#thumbnail + div > img').css({
    with this:
    HTML Code:
    $('#preview img').css({
    And I assigned the ID to div
    HTML Code:
    <div align="center">
    			<img src="resized_pic.jpg" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
    			<div style="float:left; position:relative; overflow:hidden; width:160px; height:90px;">
    			<img id="preview" src="resized_pic.jpg" style="position: relative;" alt="Thumbnail Preview" />
    			</div>
    </div>
    Then with simple table tag, I fulfilled what I needed. I hope it helps someone else too.

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



Recent Articles