공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/JavaScript

div 테이블구성과 고정좌표 display 연산

serpiko 2014. 1. 17. 13:54

실무반영을 위한 테스트 - div 테이블구성과 고정좌표 display 연산


포스팅 정리는 나중에


<!DOCTYPE HTML>
<HTML>
<HEAD>
	<title></title>
	<meta charset="utf-8" />
	<script src="js/jquery-2.0.3.min.js"></script>
	<style>
		body #dataContainer {position:absolute;left:100px;top:100px}
		body td {text-align:center;}
		body #vendorID {position:absolute;}
	</style>
</HEAD>

<BODY>
	<div id="dataContainer">
		
			<table border="1">
				<tr>
					<td id="tdID"><img src="sample.jpg" /></td>
				</tr>
				<tr>
					<td>가나다라마바사길다길어긴텍스트다어긴텍스트다</td>
				</tr>
			</table>
	</div>
	<div id="vendorID">
		<img src="linux.png" />
	</div>

	<script>
	/*
	function init(){
			var x = $('#dataContainer').offset().left;
			var y = $('#dataContainer').offset().top;
			var w = $('#tdID img').width();
			var h = $('#tdID img').height();

			//var leftGap =  ($('#tdID').width() - $('#tdID img').width())/2 
			//$('#vendorID').css({ 'left':x + leftGap - $('#vendorID').width() , 'top':y  });

			var td = $('#tdID').width();
			console.log(td);
			var img = $('#tdID img').width();
			console.log(img);
			var leftGap = (td - img) /2;
			
			console.log(leftGap);
		}*/

		$(document).ready(function(){

			setTimeout(function(){calculate();}, 100);

			function calculate(){
				var x = $('#dataContainer').offset().left;
				var y = $('#dataContainer').offset().top;

				var td_w = $('#tdID').width();
				var td_h = $('#tdID').height();

				var w = $('#tdID img').width();
				var h = $('#tdID img').height();
				
				var leftGap = (td_w - w) /2;
				var topGap = (y + td_h);
				
				
				var percent = $('#vendorID img').width() * 50 / 100;
				$('#vendorID img').css({ 'width':percent});
				
				/*
				$('#vendorID').css({ 'left':x + leftGap - ($('#vendorID').width()/2), 
									 'top':topGap - $('#vendorID').height(),
									 });
				*/				
				
				var temp_x = $('#tdID img').offset().left;
				var temp_y = $('#tdID img').offset().top + $('#tdID img').height();
				$('#vendorID').css({'left':temp_x - ($('#vendorID').width()/2), 'top':temp_y -$('#vendorID').height() })
				

			}
		});
		
	</script>
</BODY>
</HTML>


저작자표시 비영리 동일조건 (새창열림)

'■ 프론트엔드 ■ > JavaScript' 카테고리의 다른 글

브라우저 종류 판별  (2) 2014.01.24
indexOf - String개체안에서 부분 문자열이 처음 나오는 문자 위치 반환  (0) 2014.01.24
canvas의 셀렉팅과 인식  (0) 2013.12.03
자바스크립트의 array sort  (0) 2013.11.25
테이블의 동적 삭제  (0) 2013.11.25
댓글