'Htm&Javascript'에 해당되는 글 74건

  1. 2012/10/12 visualp 날자 selectbox
  2. 2012/08/24 visualp flash, div, transparent, zindex 관계 정리
  3. 2012/08/17 visualp 동적 form생성 해서 submit
  4. 2012/08/14 visualp javascript src querystring
  5. 2012/07/02 visualp css로 글자수 줄이기
  6. 2012/02/10 visualp javascript 숫자 만 쓰기 , 숫자체크 , 숫자만허용, numberic
  7. 2012/01/16 visualp 폰트, style 정리
  8. 2012/01/16 visualp [DIV 겹치기] - html,css
  9. 2012/01/05 visualp ajax, jquery 예제, ajax 예제
  10. 2011/12/30 visualp 로컬스토리지, Local Storage

구글웹폰트 api를 이용하여 나눔폰트 적용하기

아래 코드를 style.css 파일 상단에 넣고, 폰트를 적용하고 싶은 클래스에 각각 나눔폰트를 지정해주면 됩니다.



2013/11/07 11:45 2013/11/07 11:45
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/619

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/619

[원문] http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

About a month ago I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference  in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Here’s the result:

Pretty slick no? The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

Download

Go to the Before/After download page

What’s So Great About this Plugin?

  • Slick effect, no Flash needed
  • It’s just 7K (4K compressed)
  • Reusable on multiple containers
  • Degradable. If the visitor doesn’t have JavaScript they will still see both images.

How to Use

First, your before and after images must be the same size.  Each image must be inside its own div, and both of those within a containing div which must have an ID.  See this example.

<div id="container">
 <div><img alt="before" src="before.jpg" width="600" height="366" /></div>
 <div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers.

To use the plugin you’ll need to have a copy of  jQuery and the jQuery UI, or point to jquery on Google and jqueryui on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').beforeAfter();
});
</script>

That’s it! You can apply the before/after plugin to any number of elements on a page.

Options

The following options are configurable:

  • animateIntro  – whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint (default  false)
  • introDelay – if animateIntro is true, the number of milliseconds to wait before beginning the automatic drag bar move to the center of the image (default  1000)
  • introDuration – if animateIntro is true, the number of milliseconds it will take for the drag bar to go from the right side of the image to the middle of the image (default 1000)
  • showFullLinks – whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image (default true)
  • imagePath – the path (absolute or relative) to where you store the navigation images (default ‘/js/beforeAfter/’)

Options are added when calling the script:

$('#container').beforeAfter({
	animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});

Enjoy!

Demos

Note that the plugin uses several images which are kept in the same folder as the plugin. If you store the plugin in another folder on your server, update the path to these images. Please be sure to read the license before using.

2013/08/22 10:37 2013/08/22 10:37
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/600

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/600

Jrecorder,녹음

Htm&Javascript RSS Icon ATOM Icon 2013/06/19 14:28 visualp
[원문] : https://github.com/sythoos/jRecorder/

음성을 녹음 하기위해서 red5 의 녹음 기능이나 미디어 서버의 녹음 기능이 필요 없습니다.
바록 JRecorder를 이용하면 가능 합니다.


[원문] : http://flashfriend.tistory.com/2300



ShineMP3Encoder 라는 라이브러리를 사용합니다. Alchemy로 제작된 것 같아요.
실행하면 바로 녹음을 시작됬다가 3초뒤에 자동으로 끝나면서 MP3로 저장 합니다.

< 코드 >

import fr.kikko.lab.ShineMP3Encoder;
var b:ByteArray = new ByteArray();
var m:Microphone = Microphone.getMicrophone();
m.gain = 50; // 녹음될 파일의 볼륨.
m.rate = 44;
m.addEventListener('sampleData', recode);
function recode(e:SampleDataEvent):void
{
    while(e.data.bytesAvailable)
    {
        var s:Number = e.data.readFloat();
        b.writeFloat(s);
b.writeFloat(s);
    }
}
var t:Timer = new Timer(3000); //녹음이 3초뒤 중단 됩니다.
t.start();
t.addEventListener('timer',function(e:TimerEvent):void
{  
m.removeEventListener('sampleData',recode);
t.stop();    
var mp3Encoder:ShineMP3Encoder = new ShineMP3Encoder(new WaveEncoder().encode(b));
mp3Encoder.addEventListener('complete',function(e:Event):void
{    
var f:FileReference=new FileReference();
f.save(e.currentTarget.mp3Data,"c.mp3");
})
mp3Encoder.start();
})
2013/06/19 14:28 2013/06/19 14:28
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/590

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/590

rolling text

Htm&Javascript RSS Icon ATOM Icon 2012/12/26 18:23 visualp
[원문] : http://www.htmldrive.net/items/demo/266/jquery-vticker-vertical-news-ticker

div id="scrolltextup" style="background-color:#44b316;border:1px solid #e0e0e0; overflow:hidden; position:relative; width:200px; height:20px;">
<div id="textup" style="text-align:center; position:absolute; top:0; left:0; width:200px;color:#fff;">
<div style="line-height:20px;">
+++text1.<br/>
+++text2.<br/>
+++text3.<br/>
+++text4
</div>
</div>
</div>

<script type="text/javascript">
var rollingTimeIntervalID;
var durationTime = 1000;
var rollingTime = 3000;

function scrollTextUp(){
$("#textup").animate({"top":"-=20"},{
duration: durationTime,
easing: "linear",
complete:function(){
$("#textup").children(":last").after("<div style='line-height:20px;'>"+$("#textup").children(":first").html()+"</div>");
if($("#textup").children(":first").height() <= (parseInt($("#textup").css("top"))*-1)){
$("#textup").children(":first").remove();
$("#textup").css({"top":0});
}
}
});
}
rollingTimeIntervalID = setInterval(scrollTextUp, rollingTime);
</script>

2012/12/26 18:23 2012/12/26 18:23
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/542

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/542

날자 selectbox

Htm&Javascript RSS Icon ATOM Icon 2012/10/12 15:06 visualp

<script language="javascript" src="jquery-1.3.2.js"></script>
<script language="javascript">

/**

* query를 이용한 날짜 셀렉트 박스

**/
$(function () {
initDaySelect('sYear', 'sMonth', 'sDay');
});

/**
* 년도 역순 셀렉트
* param : s - 시작연도, p - 출력년수, v - 선택값
* date : 2010-05-10
* auth : sunghee (xxda@naver.com)
**/
$.fn.setYearSelect = function(s, p, v){
var tday = new Date()
if(!s){s=tday.getFullYear()};
if(!p){p=5};
if(!v){v=(new Date).getFullYear()};
this.each(function(){
if (this.tagName=='SELECT') {
this.options.length = 0;
for (var i=s;i>s-p;i--){
if ( i == v || i == v)
var option = new Option(i , i, false,true);
else
var option = new Option(i , i);
if ($.browser.msie) { this.add(option);
}else{ this.add(option,null);}
}
}
});
}

/**
* 월 셀렉트
* param : v - 선택값
* date : 2010-05-10
* auth : sunghee (xxda@naver.com)
**/
$.fn.setMonthSelect = function(v){
var tday = new Date();
var tmp = "";
if(!v){v=(new Date).getMonth()+1};
if (v.length < 2) v = '0' + v;
this.each(function(){
if (this.tagName=='SELECT') {
this.options.length = 0;
for (var i=1;i<13;i++){
if(i < 10) tmp = '0' + i;
else tmp = '' + i;
if ( tmp == v || tmp == v)
var option = new Option(tmp , tmp, false,true);
else
var option = new Option(tmp , tmp);
if ($.browser.msie) { this.add(option);
}else{ this.add(option,null);}
}
}
});
}

/**
* 일 셀렉트
* param : ds - 일수, v - 선택값
* date : 2010-05-10
* auth : sunghee (xxda@naver.com)
**/
$.fn.setDaySelect = function(ds, v){
var tmp = "";
if(!v){v=(new Date).getDate()};
if (v.length < 2) v = '0' + v;
this.each(function(){
if (this.tagName=='SELECT') {
this.options.length = 0;
for (var i=1;i<ds+1;i++){
if(i < 10) tmp = '0' + i;
else tmp = '' + i;
if ( tmp == v || tmp == v)
var option = new Option(tmp , tmp, false,true);
else
var option = new Option(tmp , tmp);
if ($.browser.msie) { this.add(option);
}else{ this.add(option,null);}
}
}
});
}

/**
* 날짜 셀렉트 박스에 날짜 세팅
**/
function initDaySelect(yName, mName, dName){
$("#"+yName).setYearSelect();
$("#"+mName).setMonthSelect();
setDaySelect(yName, mName, dName);
}

/**
* 날짜세팅
**/
function setDaySelect(yName, mName, dName){
var days = new Date(new Date($("#"+yName).val(), $("#"+mName).val(), 1)-86400000).getDate();
$("#"+dName).setDaySelect(days, $("#"+dName).val());
}
</script>
<select id="sYear" name="sYear" onchange="setDaySelect('sYear', 'sMonth', 'sDay')"></select> 년
<select id="sMonth" name="sMonth" onchange="setDaySelect('sYear', 'sMonth', 'sDay')"></select> 월
<select id="sDay" name="sDay" onchange="setDaySelect('sYear', 'sMonth', 'sDay')"></select> 일

2012/10/12 15:06 2012/10/12 15:06
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/520

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/520

[원문] :http://html.nhndesign.com/blog/?p=22

wmode 값을 설정하여 플래시 플레이어를 제어 하여 배경을 투명하게 하거나 위에 레이어를 올릴 수 있다.

<param name="wmode" value="window">
<param name="wmode" value="opaque">
<param name="wmode" value="transparent">

  • window는 Flash Movie 를 맨 위에 놓게 된다. (기본값)
  • 기본값으로 모든 html 엘리먼트 위로 flash 가 나타납니다.

  • opaque는 Movie 아래의 모든 것을 가리게 된다. 위에 레이어를 올릴 수 있다.
  • flash 위에 html 엘리먼트를 위치 시킬때 사용합니다.

  • transparent는 Movie를 투명하게 하여 뒤의 html 부분을 보여준다.
  • flash 를 투명하게 하여 flash 아래의 html 엘리먼트가 화면상에 나오게 됩니다.
  • transparent모드를 사용할 경우 animation performance를 떨어뜨리게 되기 때문에 반드시 필요한 경우에만 사용해야 한다.
    면적이 넓으면 피하는 것이 좋다.

    wmode의 기본값은 “window”이고 “transparent”의 반대인 경우는 “opaque”

    wmode 속성중 transparent는 플래시 속성창에서 설정했던 Background Color를 투명하게 나타내고
    opaque는 지정한 Background Color색을 그대로 사용합니다.

    2012/08/24 17:16 2012/08/24 17:16
    받은 트랙백이 없고, 댓글이 없습니다.

    댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/507

    댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/507

    //원문 : http://www.waitfor.com/phpBB3/viewtopic.php?f=58&t=1009
    var f = document.createElement("form"); // form 엘리멘트 생성
    f.setAttribute("method","post"); // method 속성 설정
    f.setAttribute("action","https://pg.billgate.net/card/korea1/pgauth.jsp"); // action 속성 설정
    document.body.appendChild(f); // 현재 페이지에 form 엘리멘트 추가

    var i = document.createElement("input"); // input 엘리멘트 생성
    i.setAttribute("type","hidden"); // type 속성 설정
    i.setAttribute("name","CURRENCY"); // name 속성 설정
    i.setAttribute("value","410"); // value 속성 설정
    f.appendChild(i); // form 엘리멘트에 input 엘리멘트 추가

    f.submit(); // 전송


    //jquery 에서

       $(document).ready(function(){
    $("#u_join").click(function(){
    f = makeform('index.php');
    f.appendChild(AddData('mode', 'join'));
    f.submit();
    });
    });

    function makeform(ActionURL)
    {
    var f = document.createElement("form");
    f.setAttribute("method", "post");
    f.setAttribute("action", ActionURL);
    document.body.appendChild(f);

    return f;
    }

    function AddData(name, value)
    {
    var i = document.createElement("input");
    i.setAttribute("type","hidden");
    i.setAttribute("name",name);
    i.setAttribute("value",value);
    return i;
    }


    2012/08/17 00:17 2012/08/17 00:17
    받은 트랙백이 없고, 댓글이 없습니다.

    댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/506

    댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/506

    javascript src querystring

    Htm&Javascript RSS Icon ATOM Icon 2012/08/14 11:20 visualp

    [원문] : http://feather.elektrum.org/book/src.html

    window.onload=function(){
     var reffer  = document.referrer
     var scripts = document.getElementsByTagName('script');
     var myScript = scripts[ scripts.length - 1 ];
     var queryString = myScript.src.replace(/^[^\?]+\??/,'');
     var params = parseQuery( queryString );
     alert(params['js_pmcode']);
    }

    function parseQuery ( query ) {
       var Params = new Object ();
       if ( ! query ) return Params; // return empty object
       var Pairs = query.split(/[;&]/);
       for ( var i = 0; i < Pairs.length; i++ ) {
          var KeyVal = Pairs[i].split('=');
          if ( ! KeyVal || KeyVal.length != 2 ) continue;
          var key = unescape( KeyVal[0] );
          var val = unescape( KeyVal[1] );
          val = val.replace(/\+/g, ' ');
          Params[key] = val;
       }
       return Params;
    }

    2012/08/14 11:20 2012/08/14 11:20
    받은 트랙백이 없고, 댓글이 없습니다.

    댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/503

    댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/503

    css로 글자수 줄이기

    Htm&Javascript RSS Icon ATOM Icon 2012/07/02 18:55 visualp

    <html>
     <head></head>
     <body>
     
      <STYLE>.ellipsis {overflow:hidden; text-overflow:ellipsis; }</STYLE>
    <TABLE style="TABLE-LAYOUT: fixed" width=200 border=1><BR>
    <TR>

     <TD class=ellipsis noWrap>가나다라마바사 가나다라마바사 가나다라마바사 가나다라마바사 가나다라마바사 가나다라마바사

     </TD>

    </TR>

    </TABLE>

     </body>
    </html>


    참고 주소:http://html.nhncorp.com/blog/37677
    완벽 호환 하려면 다음을 참조 하면 될거 같음

    2012/07/02 18:55 2012/07/02 18:55
    받은 트랙백이 없고, 댓글이 없습니다.

    댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/475

    댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/475

    <input type="text" onKeyDown = "onlyNumberInput(this)" />

    function onlyNumberInput(obj){
      var code = window.event.keyCode;

      if ((code > 34 && code < 41) || (code > 47 && code < 58) || (code > 95 && code < 106) || code == 8 || code == 9 || code == 13 || code == 46){
       window.event.returnValue = true;
       return;
      }
      window.event.returnValue = false;
     }



    onKeyup="" 데이터 처리를 한다. ex)

    function nvaridate(obj){

      var val = parseInt(obj.value);
       obj.value =val;
       
       if(obj.id=="s_score1"){
       
        if(val > cooking_contest1 ){
         obj.value=cooking_contest1;
        }
        calc_t1();
       }

       if(obj.id=="s_score2"){
        if( val > cooking_contest2){
         obj.value=cooking_contest2;
        }
        calc_t1();
       }

       if(obj.id=="s_score3"){
        if( val > cooking_contest3){
         obj.value=cooking_contest3;
        }
        calc_t1();
       }

       if(obj.id=="s_score4"){
        if( val > cooking_contest4){
         obj.value=cooking_contest4;
        }
        calc_t1();
       }
       
       if(obj.id=="s_score5"){
        if( val > cooking_contest5){
         obj.value=cooking_contest5;
        }
        calc_t3();
       }
     }//end function

    2012/02/10 17:13 2012/02/10 17:13
    받은 트랙백이 없고, 댓글이 없습니다.

    댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/454

    댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/454