연우, 장을 열다.

자바스크립트도로 쿠키를 제어할 수 있는줄 몰랐는데 찾아보니까 소스가 존재했습니다. 

하단에 나와있는  아이디 mainInfoLayer  이것이 팝업소스이고, 이것을 쿠키처리해 팝업을 작성했습니다. 


사용원하시는 분들 잘 활용하시길 바랍니다. :) 



<!-- 팝업 시작-->

<style>

map area:focus, map area:active {outline: none; border:0; }

</style>

<div style="position:absolute; margin:auto; width:512px; height:636px;; top:132px; left:215px; background:white;border:1px solid #000;display:none;" id="mainInfoLayer">

<div class="scroll_box_pure" style="overflow:hidden;">

<div class="popUpWrap" style="width:512px;height:100%; padding:0 !important;">

<!-- <img src="/resource/img/popup/seller_ingel_noti.jpg" /> -->

<img src="/resource/img/popup/seller_ginseng_noti.jpg" alt="2018년 설 기획 상품 셀러모집" usemap="#Map" hidefocus="true" />

<map name="Map" id="Map">

    <area alt="하루동안보지않기" title="하루동안보지않기" id="mapAr1" href="#" shape="poly" coords="1,615,140,616,141,633,3,634" />

    <area alt="팝업닫기" title="팝업닫기" id="mapAr2" href="#" shape="poly" coords="489,615,512,615,512,634,489,635" />

    <area alt="" id="mapAr3" title="" href="#" shape="poly" coords="49,447,151,447,163,459,164,465,163,472,159,477,153,482,150,485,49,485,44,482,40,476,37,470,36,462,40,454" />

</map>

<img src="/resource/img/popup/seller_ginseng_noti_close.jpg" alt="닫기버튼" id="ginseng_close" style="position:absolute;left:0px;bottom:0px;display:none;"/>

</div>

</div>

</div>

<script>

function setCookie(name, value, hours){

if(hours){

var date = new Date();

        date.setTime(date.getTime()+(hours*60*60*1000));

        var expires = "; expires="+date.toGMTString();

}

    document.cookie=name + "=" + escape(value) + "; path=/"+expires+";"

}

function openPop(){

     if(getCookie("mainpop")!="closepop"){

    $("#mainInfoLayer").show();

     }

}

function getCookie(name){

    var nameOfCookie = name + "=";24*60*60/24/12

    var x =0;

    while (x<=document.cookie.length){

        var y = (x+nameOfCookie.length);

        if(document.cookie.substring(x,y) == nameOfCookie){

            if((endOfCookie=document.cookie.indexOf(";",y))==-1)

                endOfCookie = document.cookie.length;

            return unescape(document.cookie.substring(y, endOfCookie));

            }

            x=document.cookie.indexOf(" ",x) +1;

            if(x==0)

            break;

            }

        return "";

}

openPop();

$(function(){

console.log();

$("#mapAr1").on("click", function(){

if(!$("#ginseng_close").hasClass("clicked")){

$("#ginseng_close").show();

$("#ginseng_close").addClass("clicked");

}else{

$("#ginseng_close").hide();

$("#ginseng_close").removeClass("clicked");

}

});

$("#ginseng_close").on("click", function(){

if(!$("#ginseng_close").hasClass("clicked")){

$("#ginseng_close").show();

$("#ginseng_close").addClass("clicked");

}else{

$("#ginseng_close").hide();

$("#ginseng_close").removeClass("clicked");

}

});

$("#mapAr2").on("click", function(){

$("#mainInfoLayer").hide("500");

if($("#ginseng_close").hasClass("clicked")){

//cookie start

setCookie("mainpop","closepop","24");

}

});

});

</script>

<!--팝업  끝  -->


만약 이미지 맵을 따서, 작업하다가 이미지 맵 라인을 지우고 싶다면 아래 글도 보고 오십시오! 진짜 유용할겁니다. ^^




팝업창을 닫으면서 부모창을 새로고침하는 방법 간단합니다.


첫번째 방법

<script>

    opener.parent.location="부모창주소(원하는주소)";

</script>

 

이렇게 직접 주소를 적어도 좋고,  



두번째방법

단순히 새로고침을할거라면 


<script>

opener.parent.location.reload();

window.close();

</script>


 간단하쥬? :) 



모바일에서 클립보드 복사를 해야 하는 경우가 있었습니다. 


찾아보니까 플래시(flash) 를 이용해 클립보드 복사하는 것이 있는데, 이것말고, jquery를 이용해서 복사를 띄울 수가 있었습니다. 

그 방법을 설명해드리겠습니다. 







사이트에 접속합니다. 사이트 바로가기


<script src="<?=G5_URL?>/js/clipboard.min.js"></script>

<!-- 위 처럼 소스 코드를 임포트하고, -->


<a href="#null" data-source="<?=G5_URL?>/index.php?id=<?=$member[mb_id]?>" id="copyContent" style="color:#fff; background:#333;">홍보 주소</a> 


<!-- 

클릭했을때, 이벤트가 발생하는 것은 바로 위 소스

아이디값 물려주고, 복사시킬 데이타를 data-source에 넣습니다.

-->


<script>

    var clipboard = new Clipboard('#copyContent', {

        text: function() {

var this_text = $("#copyContent").attr("data-source");

            return this_text; // 복사 대사이었던 data-source 그것을 반환

        }

    });


    clipboard.on('success', function(e) {

        //console.log(e);

alert("홍보주소 복사가 완료됐습니다.");

        //복사 액션이 벌어지고 난 후에 액션을 적는 곳입니다. 

    });


    clipboard.on('error', function(e) {

        //에러가  뜬다면 이렇게 나오겠쥬

        console.log(e);

    });

</script>





오늘 소개할 제이쿼리는 제이캐러셀입니다. 이 플러그인은 오픈소스로, 자유자재로 응용이 가능한 아주 건강하고 훌륭한 소스입니다. 


사이트 주소를 안내해드리겠습니다. http://sorgalla.com/jcarousel/examples/ 이곳에 가면, 기본적으로 제공해주는 여러개의 example 소스가 있습니다. 


위 예시를 응용해 하단의 이미지와 같은 레이아웃으로 작성해보겠습니다. 






위 이미지는 진행중인 업체의 고유 이미지이므로, 빨간 칸으로 가려두었습니다. 


작은 썸네일을 클릭하면, 큰 이미지로 보여지는 소스입니다. 







			
			





위와 같이 작성하면 효과가 나는 것을 보실 수 있습니다. 

 


"//첫 로드시" 라고 주석 처리 되어 있는 부분이 처음 로드 되었을때  <img src="" id="big_pic"> 내부의 src에 소스를 넣어주는 부분입니다. 또한 썸네일 클릭을 했을 때,  


큰 이미지에 소스를 던져 주는 것이 






이것에 의해 가능합니다. 



감사합니다. 


postscript > 혹시 사용에 궁금한 점 있으시면 댓글 주시기 바랍니다. ^^ 

날씨가 따듯해진 봄날이 되었습니다. 여러분들과 따듯한 봄날에 지식을 나누고자 합니다.

오늘 소개할 것은 글쓰기 수정 시, 체크박스 태그에 "checked" 를 하지 않고, 스크립트단에서 체크할 수 있도록 하는 방법을 소개하려고 합니다. 


가장 기본적인 방법은 



	
Test checkbox checked> checked> checked> checked>



위와 같은 방식으로 수정을 합니다. 

그런데, 이 체크박스가 너무나도 많아지면 이 태그를 모두 checked 로 써주기엔 번거롭습니다. 

그리고 때때로 체크박스 자체를 반복문으로 돌리는 경우가 있습니다. 


따라서, 자바스크립트 내에서 checked를 제어할 수 있습니다. 


방법은 아래와 같습니다. 

 TV광고  일간지 및 전문지  라디오광고
 현수막광고  유관기관 및 단체 소개  지인소개
 초청장 및 포스터  인터넷  SMS(문자)
 이메일&뉴스레터  기타




위와 같은 방식으로 



적용을 하면 체크하게 됩니다. 


먼저 디비에 저장된 값을 str_wr_13에 담아서, input[name='wr_13'] 만큼 jquery 내부에서 포문을 돌리면서, 돌리는 value와 동일한 값이 str_wr_13에 존재하면, 그곳에 체크해주는 방식입니다. 


이 같은 방식으로 적용을 하면 한결 간결한 코딩이 가능해서 정신건강에도 도움을 줍니다. 


감사합니다. 

이미지 내부에 링크를 여러개 걸기 위해서 map을 이용해 링크를 걸면... 안타깝게도 삐뚤빼뚤한 링크가 잡힙니다. 





보기 안타깝죠, 


이걸 없애기 위해서 아래와 같이 하면 됩니다. 



css
=================================
<style>
map area:focus, map area:active {outline: none; border:0; }

</style>


html
=================================
<div class="sub_img"><img src="/sub/17_img.png" alt="조직도" usemap="#Map"/></div>

<map name="Map" id="Map">
    <area alt="" title="" href="#null" shape="poly" coords="377,0,353,10,333,44,333,65,358,91,382,98,419,79,429,50,420,21,404,7" />
</map>

요 정도 하면 익스를 제외하고 다 먹어요 근데, 익스만... 위 이미지 처럼 또렷히 나옵니다. 

방법은 

div class="sub_img"><img src="/sub/17_img.png" alt="조직도" usemap="#Map" hidefocus="true"/></div>

요고를 넣으면 싹 사라집니다. 


이상 끝





소위 이미지에 링크를 걸기 위해선 


<a href="링크값"><img src="이미지 경로"></a>


이것이 일반적인 방법인데, 간혹 이미지 내부에 부분적으로 끊어서 링크를 걸어야할때가 가끔 있다. 


그래서 링크를 걸어보자 !! 




1. 사이트 접속 ㄱㄱ


http://imagemap-generator.dariodomi.de/


위 사이트 접속



2. 사진을 첨부하거나 이미지 유알엘값을 넣거나 





전 링크를 넣을겁니다. 








위와같이 이미지가 뜨게 되는데, 그럼 링크걸 자리를 클릭합니다. 


어 근데 변화가 없죠? 


점이 아니라 면을 만들어야 하니까 링크걸고자 하는 영역에 


클릭

클릭

클릭

클릭


합니다. 




네 이제 끝났어요 . 



<img src="url/to/your/image.jpg" alt="" usemap="#Map" />

<map name="Map" id="Map">

    <area alt="" title="" href="#" shape="poly" coords="112,129,132,159,139,183,124,203,111,212,70,215,61,183,67,139,68,115" />

    [...]

</map>


언제된 주소가 위와 같습니다. 


링크값은 


<img src="url/to/your/image.jpg" alt="" usemap="#Map" />

<map name="Map" id="Map">

    <area alt="" title="" href="여기에 링크값을 넣으면 돼요~" shape="poly" coords="112,129,132,159,139,183,124,203,111,212,70,215,61,183,67,139,68,115" />

    [...]

</map>




"여기에 링크값을 넣으면 돼요~" 이 부분에 넣음 됩니다 끝! 



일단 기존에 구글링 하면 브라우저 화면 확대에 대한 소스들이 여러개가 있다. 

그러나 그 방법이, 작업하던 익스플로러 버전에선 먹지 않았다. 


따라서 아래와 같이 적용하니 100프로 적용이 되었다.. 


하단의 소스는 확대되는 것 이외에도 세션으로 그것을 저장해 페이지 전환 이후에도 화면을 확대된 채로 보여지게 하는 소스다.


HTML


<div class="screen_pm">

<a href="#null" id="zoom-in">+</a>

<span>화면크기</span>

<a href="#null" id="zoom-out">-</a>

</div>


SCRIPT


<script>

var size = 1.0;

$(document).ready(function(){

<?if($_SESSION[zoom_size]){//세션이 있다면, 사이즈를 확대된 채로 실행하기 위해서 ?>

size =<?=$_SESSION[zoom_size]?>-0.05; //0.05를 빼주는 이유는 바로 하단에 updateZoom(1);실행함으로써 한번 더 화면이 확대되기때문.

updateZoom(1);

<?}?>


$('#zoom-in').on("click",function() {

updateZoom(1);

});


$('#zoom-out').on("click",function() {

updateZoom(-1);

});

}); // jquery end 



var updateZoom = function(zoom) {


var currentSize=0 ;

if (zoom == 0) {

currentSize = 1.0;

} else {

currentSize += size+zoom* 0.05;

}

this.size = currentSize;


$('body').css('-webkit-transform','scale(' + this.size + ')');

$('body').css('-moz-transform','scale(' + this.size + ')');

$('body').css('-o-transform','scale(' + this.size + ')');

$('body').css('-webkit-transform-origin', '50% 0%');

$('body').css('-moz-transform-origin', '50% 0%');

$('body').css('-o-transform-origin', '50% 0%');


$('body').css('transform','scale(' + this.size + ')');

$('body').css('transform-origin', '50% 0%');


send_ses(this.size);

}


function send_ses(size){ 

   // ajax 통신으로 세션에 저장하는 것.. 저장 이후에 페이지 전환 후에도 계속 확대된 상태고 있기 위해서

var url="<?=G5_URL?>/sub/zoom_ajax.php";

var param="size="+encodeURIComponent(size);

var method="POST";

$.ajax({

type: method, 

url:url,

dataType:"html",

data:param,

success:function (msg){

document.getElementById("spn_bo_2").innerHTML = msg;

}

});

}

</script>





<script>
//caldate("+될 기간" , "기준되는 날짜" )날짜 계산해줌^^
function caldate(day ,fromdate ){
 
 var caledmonth, caledday, caledYear;
 var loadDt = new Date(fromdate);
 var v = new Date(Date.parse(loadDt) + day*1000*60*60*24);
 
 caledYear = v.getFullYear();
 
 if( v.getMonth() < 9 ){
caledmonth = '0'+(v.getMonth()+1);
 }else{
caledmonth = v.getMonth()+1;
 }
 if( v.getDate() < 9 ){
caledday = '0'+v.getDate();
 }else{
caledday = v.getDate();
 }
 //return caledmonth+'/'+caledday+'/'+caledYear;
 return caledYear+"-"+ caledmonth+"-"+caledday ; 
}


$(document).ready(function(){
var text = caldate("7","2016-04-14");

alert(text); // 결과나옴 ^^
});


</script>

 출처 : http://webskills.kr/archives/310


익스플로서8(ie8)에서 호환됨


input>>

<td><input type="text" value="<?=$write[wr_15]?>" name="wr_15" id="wr_15" class="cnt_boos" onkeydown='return onlyNumber(event)' onkeyup='removeChar(event)' style='ime-mode:disabled;'> 개 부스</td>


<script>
function onlyNumber(event){ event = event || window.event; var keyID = (event.which) ? event.which : event.keyCode; if ( (keyID >= 48 && keyID <= 57) || (keyID >= 96 && keyID <= 105) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39|| keyID == 9 ) return; else return false; } function removeChar(event) { event = event || window.event; var keyID = (event.which) ? event.which : event.keyCode; if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 || keyID == 9) return; else event.target.value = event.target.value.replace(/[^0-9]/g, ""); }

</script>