2015. 5. 21. 14:56 IT/html_css

placeholder 줄바꿈.

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

<br> 대신 

&#10;

넣어주면 된다



<textarea cols="30" rows="5" placeholder="가 &#10; 나 &#10; 다 &#10; "></textarea>

Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


   iframe을 적용할 사이트는 a사이트


   참고할 사이트는 b사이트


 


아래는 참고할 b사이트 소스


<html>

<head>

<script type="text/javascript"> 

<!--

function rsize() {

  var iframe = document.getElementById( 'inneriframe' );

  var wrapper = document.getElementById( 'wrapper' );

  

  if(wrapper.offsetHeight == 0){

  } else {

  pageheight = wrapper.offsetHeight;

  var height = pageheight+"px";


 }

iframe.src = 'http://적용할a사이트주소/autosize.htm?height='+height;

}

//-->

</script>

</head>


<body onload=rsize();>

<div id="wrapper">

내용...

</div>

<iframe id="inneriframe" width="10" height="10" style="display:none"></iframe>

</body>

</html>

 

or


<html>

<head>

<script type="text/javascript"> 

<!--

$(document).ready(function(){

var iframe = document.getElementById( 'inneriframe' );

var wrapper = document.getElementById( 'ifmwrapper' );

 

if(wrapper.offsetHeight == 0){

} else {

pageheight = wrapper.offsetHeight;

var height = pageheight;

}


iframe.src = 'http://적용할a사이트주소/autosize.htm?height='+height;

});

//-->

</script>

</head>


<body onload=rsize();>

<div id="wrapper">

내용...

</div>

<iframe id="inneriframe" width="10" height="10" style="display:none"></iframe>

</body>

</html>

 


 


 


iframe을 적용하는 a사이트에 autosize.htm문서를 작성한다.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>


<script>

function goPage(value) {

 window.open(value,'_self','');

}

      function onLoad() {

        var params = window.location.search.substring( 1 ).split( '&' );

        var height;

        for( var i = 0, l = params.length; i < l; ++i ) {

          var parts = params[i].split( '=' );

          switch( parts[0] ) {

          case 'height':

            height = parseInt( parts[1] );

            break;

          }

        }

        if( typeof( height ) == 'number' ) {

          window.top.updateIFrame( height );

        }

      }

    window.onload = onLoad;

</script>

</head>

<body>

</body>

</html>


Or PHP일 경우


<html>

<head>

<script src="/cms/js/jquery/jquery-1.11.2.min.js"></script>

<script type="text/javascript">

  $(document).ready(function(){

    top.resizeIframe(<?=$_GET["height"]?>); // B 에서 숨겨진 아이프레임으로 A1 이 호출되지만, A 가 top 이 되는 것.

  });

</script>

</head>

<body>

</body>

</html>




 


iframe이 들어갈 a사이트 페이지에 아래 소스를 적용시킨다


<script type="text/javascript">

      function updateIFrame( height ) {

        var iframe = document.getElementById( 'myiframe' );

        iframe.setAttribute( 'height', height ); 

  //alert(height);

      }

    </script>


<iframe id="myiframe" src="http://아래는 참고할 b사이트 페이지" scrolling=no frameborder=0 width="320" height="600"></iframe>


 


'IT > html_css' 카테고리의 다른 글

iframe 문제점.  (0) 2015.05.21
placeholder 줄바꿈.  (0) 2015.05.21
iframe resize, resizing, 리사이징.  (0) 2015.04.27
HTML5 / CSS3 placeholder 폰트 색상 지정  (0) 2015.03.17
div 스크롤. div scroll.  (0) 2014.12.31
Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

iframe에 열리는 페이지의 길이를 알아내어 iframe의 크기를 바꿔주는 소스입니다..

========================================================================================

도메인이 다른 문서를 iframe에 링크할 경우 iframe resizable시 "권한이 없습니다"라는 문구가 뜹니다.

이런경우 iframe 에 onLoad 하지 말고 iframe내 문서의 body 문에 아래와 같은 스크립트를

사용하여 iframe을 resizable 시키도록 합니다.

 

# iframe 링크 문서

<body onLoad="resizeHeight();">

function resizeHeight()

{

  // iframe reSizable 도메인 다른 곳에서 링크 걸경우

  h = document.body.scrollHeight + 10;

  resizeTo(602, h);

}

========================================================================================

도메인이 동일한 문서의 일 경우는 아래 요약글에 쓰여진 스크립트를 사용해 주세요!!

'IT > html_css' 카테고리의 다른 글

iframe 문제점.  (0) 2015.05.21
placeholder 줄바꿈.  (0) 2015.05.21
다른 도메인 ifame 리사이징.  (0) 2015.05.08
HTML5 / CSS3 placeholder 폰트 색상 지정  (0) 2015.03.17
div 스크롤. div scroll.  (0) 2014.12.31
Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

HTML5 / CSS3 placeholder 폰트 색상 지정



::-webkit-input-placeholder { /* WebKit browsers */

    color:    #aaa; font-size:12px;

}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

    color:    #aaa; font-size:12px;

}

::-moz-placeholder { /* Mozilla Firefox 19+ */

    color:    #aaa; font-size:12px;

}

:-ms-input-placeholder { /* Internet Explorer 10+ */

    color:    #aaa; font-size:12px;

}

'IT > html_css' 카테고리의 다른 글

iframe 문제점.  (0) 2015.05.21
placeholder 줄바꿈.  (0) 2015.05.21
다른 도메인 ifame 리사이징.  (0) 2015.05.08
iframe resize, resizing, 리사이징.  (0) 2015.04.27
div 스크롤. div scroll.  (0) 2014.12.31
Posted by 당양부부34
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

<div id="sample" 

          style="overflow:auto; width:100%; height:30px; line-height:150%">

                 스크롤이 되는 div<br>

                 스크롤이 되는 div<br>

                 스크롤이 되는 div<br>

                 스크롤이 되는 div<br>

                 스크롤이 되는 div<br>

                 스크롤이 되는 div<br>

        

</div>


위 코드의 style에서 "overflow" 라는 것이 핵심인데, overflow에 auto 혹은 scroll이라고 주면, scrollbar가 나타나며, scroll이 된다.


스크롤바가 맘에 들지 않는다면, "overflow: hidden" 이라고 주어, scrollbar가 사라지게 한 후, javascript로 원하는 것을 만들어 낼 수 있다.


아래 javascript는 위 또는 아래로 div를 스크롤하는 예제이다.

이것을 응용하면, 이쁘고 훌륭한 scroll div를 만들 수 있을 것이다.


        function doScrollerIE(dir, src, amount) 

        {

                if (amount==null) amount=10;

                if (dir=="up")

                        document.all[src].scrollTop-=amount;

                else

                        document.all[src].scrollTop+=amount;

        }


'IT > html_css' 카테고리의 다른 글

iframe 문제점.  (0) 2015.05.21
placeholder 줄바꿈.  (0) 2015.05.21
다른 도메인 ifame 리사이징.  (0) 2015.05.08
iframe resize, resizing, 리사이징.  (0) 2015.04.27
HTML5 / CSS3 placeholder 폰트 색상 지정  (0) 2015.03.17
Posted by 당양부부34
이전버튼 1 2 이전버튼

블로그 이미지
주요 토렌트를 블로깅하고 있습니다. 토렌트 순위 등은 다른 사이트를 찾아보세요. 주요 웹툰 순위도 게재했어요 경제를 좋아하는 일산의 행복한 프로그래머입니다.
당양부부34
Yesterday
Today
Total

달력

 « |  » 2024.4
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함