가로 스크롤 배너 (marquee)

카테고리 없음 2018. 7. 13. 19:45 |

가로 스크롤 배너 (marquee)

 

previewcopy to clipboardprint?
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  6. <meta name="viewport" content="width=device-width, initial-scale=1">  
  7. <title>jQuery ticker Plugin Demos</title>  
  8.   
  9. <style>  
  10. .js-ticker {  
  11.   overflow: hidden;  
  12. }  
  13.   
  14. .js-ticker-track {  
  15.   white-space: nowrap;  
  16. }  
  17.   
  18. .js-ticker-item {  
  19.   white-space: normal;  
  20.   height: 100%;  
  21.   vertical-align: top;  
  22.   display: inline-block;  
  23.   position: relative;  
  24. }  
  25.   
  26. @supports ((display: -webkit-box) or (display: flex)) {  
  27.   .js-ticker-track {  
  28.     position: relative;  
  29.     white-space: normal;  
  30.     display: -webkit-inline-box;  
  31.     display: -ms-inline-flexbox;  
  32.     display: inline-flex;  
  33.   }  
  34.   .js-ticker-item {  
  35.     height: auto;  
  36.     display: block;  
  37.     -webkit-box-flex: 0;  
  38.         -ms-flex: 0 0 auto;  
  39.             flex: 0 0 auto;  
  40.   }  
  41.   .js-ticker.active .js-ticker-track {  
  42.     display: -webkit-box;  
  43.     display: -ms-flexbox;  
  44.     display: flex;  
  45.   }  
  46.   .js-ticker.active .js-ticker-item {  
  47.     -webkit-box-flex: 1;  
  48.         -ms-flex: 1 0 auto;  
  49.             flex: 1 0 auto;  
  50.   }  
  51. }  
  52. </style>  
  53.   
  54. <style>  
  55. .default-ticker {width:1000px; height:80px; margin:0 auto; background:#f7f7f7}  
  56. .default-ticker div img {margin-right:15px !important}  
  57. </style>  
  58. </head>  
  59. <body>  
  60.   
  61.   
  62. <div class="default-ticker">  
  63.   <div><img src="http://www.djhoneymoon.com/images/hotel/banyantree.png" /></div>  
  64.   <div><img src="http://www.djhoneymoon.com/images/hotel/trisara.png" /></div>  
  65.   <div><img src="http://www.djhoneymoon.com/images/hotel/pullman.png" /></div>  
  66.   <div><img src="http://www.djhoneymoon.com/images/hotel/pavilions.png" /></div>  
  67.   <div><img src="http://www.djhoneymoon.com/images/hotel/shore.png" /></div>  
  68. </div>  
  69.   
  70.   
  71. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>  
  72. <script src="http://www.djhoneymoon.com/js/ticker.js"></script>  
  73. <script>  
  74. $(document).ready(function(){  
  75. $(".default-ticker").ticker({  
  76.   
  77.   // item selector  
  78.   item: 'div',  
  79.   
  80.   // Toggles whether the ticker should pause on mouse hover  
  81.   pauseOnHover: true,  
  82.   
  83.   // <a href="https://www.jqueryscript.net/animation/">Animation</a> speed  
  84.   speed: 60,  
  85.   
  86.   // Decides whether the ticker breaks when it hits a new item or if the track has reset  
  87.   pauseAt: '',  
  88.   
  89.   // delay in milliseconds  
  90.   delay: 500  
  91.   
  92. });  
  93. });  
  94. </script>  
  95.   
  96. </body>  

:

ajax 로딩된 페이지 내에서만, 링크걸기

카테고리 없음 2018. 7. 6. 19:34 |

ajax 로딩된 페이지 내에서만, 링크걸기

 

1. onclick="location.href='#'" 형태의 링크걸기

 

<script>

$(document).ready(function(){
$('.t_ok').bind('click', function(e) {          
  var url = $(this).data('url');
  $('#rightwrap').load(url); // load the html response into a DOM element
  e.preventDefault(); // stop the browser from following the link
});
});
</script>


<li class="t_ok" data-url="./sum_right.asp?d_cd=10">링크</li>

 

 

2. a 태그에 바로 링크걸기

 

<script>

$(document).ready(function(){
$('a.t_ok').bind('click', function(e) {          
  var url = $(this).attr('url');
  $('#rightwrap').load(url); // load the html response into a DOM element
  e.preventDefault(); // stop the browser from following the link
});
});
</script>

<li><a href="./sum_right.asp?d_cd=10" class="t_ok">링크</a></li>


<div id="rightwrap"></div>

:

환율 json

카테고리 없음 2018. 4. 18. 21:46 |

환율 참고페이지 http://pureani.tistory.com/4919

 

previewcopy to clipboardprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  5. <title></title>  
  6. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
  7.   
  8. <script>  
  9. $(document).ready(function(){  
  10.   
  11.   
  12.   
  13. $.ajax({  
  14.     url:"http://api.manana.kr/exchange/rate/KRW/JPY,KRW,USD.json",  
  15.     dataType: "json",  
  16.     success:function(data){  
  17.        alert(data[2].name);  
  18.        alert(data[2].rate);  
  19.        alert(data[2].date);  
  20.     }  
  21.     ,error: function () { alert("에러발생"); }  
  22. });  
  23.   
  24. });  
  25.   
  26.   
  27. </script>  
  28.   
  29. </head>  
  30. <body>  
  31.   
  32. </body>  
  33. </html>  

:

백그라운드 overlay dot

카테고리 없음 2018. 3. 30. 20:31 |

previewcopy to clipboardprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE> New Document </TITLE>  
  5. <style>  
  6. @import url('https://fonts.googleapis.com/css?family=Abel&effect=emboss');  
  7.  div { box-sizing: border-box;}  
  8. .image {  
  9.     width: 100%;  
  10.     height: 100%;  
  11.     position: absolute;  
  12.     top:0; left:0;  
  13.     background: url('https://lonelyplanetimages.imgix.net/mastheads/67189269.jpg');  
  14.     background-size: cover;  
  15.     z-index:-100;  
  16. }  
  17. .image:after {  
  18.     content: '';  
  19.     display: block;  
  20.     position: absolute;  
  21.     left: 0;  
  22.     right: 0;  
  23.     top: 0;  
  24.     bottom: 0;  
  25.     background: rgba(0, 0, 0, 0.5);  
  26.     background-image: url(http://s14.directupload.net/images/111129/44ga9qid.png);  
  27.     /*background: rgba(0, 0, 0, 0.5);  
  28.     background-image: radial-gradient(black 33%, transparent 33%);  
  29.     background-size: 5px 5px; */  
  30. }  
  31. </style>  
  32.  </HEAD>  
  33.   
  34.  <BODY style="margin:0">  
  35. <div style="width:100%; height:100%; position:absolute; overflow:hidden; top:0;left:0; z-index:100">  
  36.  <div style="top:15%; left:20%; overflow:hidden; position:relative;">  
  37.  <font style="font-family: 'Abel', sans-serif; font-size:120px; line-height:120px; font-weight:bold; color:white" class="font-effect-emboss">INTERDIGM</font><br>  
  38.   <font style="font-family: 'Abel', sans-serif; font-size:30px; line-height:30px; font-weight:bold; color:white" class="font-effect-emboss">WE MAKE WEB SOLUTION FOR TRAVEL AGENCY AND TRAVEL LAND</font>  
  39.    
  40. </div>  
  41.   
  42.   <div class="image"></div>  
  43.  </BODY>  
  44. </HTML>  

:

환율2

카테고리 없음 2017. 12. 15. 13:40 |

환율2

 

previewcopy to clipboardprint?
  1. <!DOCTYPE html>  
  2.   
  3.   
  4.   
  5. <html>  
  6.   
  7.   
  8.   
  9. <head>  
  10. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  11.   
  12.   
  13. <title></title>  
  14.   
  15.   
  16.   
  17. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
  18.   
  19.   
  20.   
  21. <script>  
  22.   
  23.         $(document).ready(function(){  
  24.   
  25.   
  26. $.ajax({  
  27.   
  28.   
  29. url:"https://www.koreaexim.go.kr/site/program/financial/exchangeJSON?authkey=22VMJ1JCcIFy1mvgvUSn1JCWmRkq3k2A&searchdate=20171215&data=AP01",  
  30. header:'Content-Type:text/plain; charset=utf-8',  
  31.   
  32.   
  33. dataType: "json",  
  34.   
  35.   
  36.   
  37. success: function (data) {  
  38.   
  39.   
  40.   
  41. //받아온 JSON을 테이블에 출력  
  42.   
  43.   
  44.   
  45. $.each(data, function (index,entry) {  
  46.   
  47.   
  48.   
  49. $('#tablList').append("<tr><td>" + this.cur_nm + "</td><td>" + this.cur_unit + "</td><td>" + this["kftc_deal_bas_r"] + "</td></tr>");  
  50.   
  51.   
  52.   
  53.   
  54.   
  55.   
  56.   
  57. });  
  58.   
  59.   
  60.   
  61.   
  62.   
  63.   
  64.   
  65.   
  66.   
  67. },  
  68.   
  69.   
  70.   
  71.   
  72.   
  73. error: function () { alert("에러발생"); }  
  74.   
  75.   
  76.   
  77.   
  78.   
  79.   
  80.   
  81. });  
  82.   
  83.   
  84.   
  85. });  
  86.   
  87.   
  88.   
  89.   
  90.   
  91. </script>  
  92.   
  93.   
  94.   
  95. </head>  
  96.   
  97.   
  98.   
  99. <body>  
  100.   
  101.   
  102.   
  103. <table id="tablList" border="1"></table>  
  104.   
  105.   
  106.   
  107. </body>  
  108.   
  109.   
  110.   
  111. </html>  

:

jquery 달력 특정날자만 선택하고 css 적용

카테고리 없음 2017. 11. 29. 19:52 |

jquery 달력 특정날자만 선택하고 css 적용

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style>
div,ul,li {box-sizing:border-box}
body {
  background: #f7f6f3;
  font-family: sans-serif;
}

.vio-highlight {
    background-color: #746495 !important;
color: #fff !important;
border-radius:50%;

}

.vio-highlight:hover {
    background-color: #503b7c !important;
font-weight:bold;
}

.orange-highlight {
    background-color: #ff894c !important;
    color: white !important;
border-radius:50%;
}

.orange-highlight:hover {
    background-color: #f1590a !important;
font-weight:bold;
}

.blue-highlight {
    background-color: #1b93b6 !important;
    color: white !important;
border-radius:50%;
}

.blue-highlight:hover {
    background-color: #0b7695 !important;
font-weight:bold;
}


/* 카렌다 모양 */
.calendar {
margin:0 auto;
  width: 280px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  color:#ccc;
  border:1px solid #ccc;
}
.ui-datepicker-header {
  height: 50px;
  line-height: 50px;
  color: #000;
  background: #e9e5e3;
  margin-bottom: 10px;
}
.ui-datepicker-prev,
.ui-datepicker-next {
  width: 20px;
  height: 20px;
  text-indent: 9999px;
  border: 2px solid #b0aead;
  border-radius: 100%;
  cursor: pointer;
  overflow: hidden;
  margin-top: 12px;
}
.ui-datepicker-prev {
  float: left;
  margin-left: 12px;
}
.ui-datepicker-prev:after {
  transform: rotate(45deg);
  margin: -43px 0px 0px 8px;
}
.ui-datepicker-next {
  float: right;
  margin-right: 12px;
}
.ui-datepicker-next:after {
  transform: rotate(-135deg);
  margin: -43px 0px 0px 6px;
}
.ui-datepicker-prev:after,
.ui-datepicker-next:after {
  content: '';
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  border-left: 2px solid #b0aead;
  border-bottom: 2px solid #b0aead;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover,
.ui-datepicker-prev:hover:after,
.ui-datepicker-next:hover:after {
  border-color: #5ed1cc;
}
.ui-datepicker-title {
  text-align: center;
}
.ui-datepicker-calendar {
  width: 100%;
  text-align: center;
}
.ui-datepicker-calendar thead tr th span {
  display: block;
  width: 40px;
  color: #00a8b2;
  margin-bottom: 5px;
  font-size: 13px;
}
.ui-state-default {
  display: block;
  text-decoration: none;
  color: #fff;
  line-height: 35px;
  font-size: 12px;
}
.ui-state-default:hover {
  background: rgba(0,0,0,0.02);
}
.ui-state-highlight {
  color: #8dd391;
}
.ui-state-active {
  color: #5ed1cc;
}
.ui-datepicker-unselectable .ui-state-default {
  color: #ccc;
  border: 2px solid transparent;
}

</style>
 </HEAD>

 <BODY>


<p style="line-height:50px">1. 특정날짜만 선택가능하게하기</p>
<script>
$(document).ready(function(){
var availableDates1 = ["13-11-2017","14-11-2017","15-11-2017"];
var availableDates2 = ["3-11-2017","2-11-2017","1-11-2017"];
var availableDates3 = ["30-11-2017","29-11-2017","28-11-2017"];

function available(date, current) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, availableDates1) > -1) {
    return [true, "vio-highlight","예약가능"];
  }
  else if ($.inArray(dmy, availableDates2) > -1) {
    return [true, "orange-highlight","대기예약"];
  }
  else if ($.inArray(dmy, availableDates3) > -1) {
    return [true, "blue-highlight","출발확정"];
  }
  else {
    return [false,"","unAvailable"];
  }
}



$('#demo').datepicker({ beforeShowDay: available,
onSelect: function(dateText, inst) {
        window.location = 'https://www.amerigotour.com/goods_airtel.calendar.asp?g_cd=' + dateText;
    }
 });



$('#123,#datepicker').datepicker({
    constrainInput: true,   // prevent letters in the input field
    //minDate: new Date(),    // prevent selection of date older than today
    showOn: 'button',       // Show a button next to the text-field
    autoSize: true,         // automatically resize the input field
    altFormat: 'yy-mm-dd',  // Date Format used
    beforeShowDay: $.datepicker.noWeekends,     // Disable selection of weekends
    firstDay: 1 // Start with Monday
})


});

</script>



<div id="demo" class="calendar"></div>

<p style="height:50px">


2. Datepicker(데이트피커) 바로보여주기

<div id="123" style="width:220px; overflow:hidden; background:#666"></div>
<p style="height:50px">


 3. Datepicker(데이트피커) 사용하기
<input type="text" name="datepicker" id="datepicker" placeholder="클릭해보세요">





 </BODY>
</HTML>

previewcopy to clipboardprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">  
  3. <HTML>  
  4.  <HEAD>  
  5.   <TITLE> New Document </TITLE>  
  6.   
  7. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
  8. <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>  
  9. <style>  
  10. div,ul,li {box-sizing:border-box}  
  11. body {  
  12.   background: #f7f6f3;  
  13.   font-family: sans-serif;  
  14. }  
  15.   
  16. .vio-highlight {  
  17.     background-color: #746495 !important;  
  18.     color: #fff !important;  
  19.     border-radius:50%;  
  20.   
  21. }  
  22.   
  23. .vio-highlight:hover {  
  24.     background-color: #503b7c !important;  
  25.     font-weight:bold;  
  26. }  
  27.   
  28. .orange-highlight {  
  29.     background-color: #ff894c !important;  
  30.     color: white !important;  
  31.     border-radius:50%;  
  32. }  
  33.   
  34. .orange-highlight:hover {  
  35.     background-color: #f1590a !important;  
  36.     font-weight:bold;  
  37. }  
  38.   
  39. .blue-highlight {  
  40.     background-color: #1b93b6 !important;  
  41.     color: white !important;  
  42.     border-radius:50%;  
  43. }  
  44.   
  45. .blue-highlight:hover {  
  46.     background-color: #0b7695 !important;  
  47.     font-weight:bold;  
  48. }  
  49.   
  50.   
  51. /* 카렌다 모양 */  
  52. .calendar {  
  53. margin:0 auto;  
  54.   width: 280px;  
  55.   background: #fff;  
  56.   border-radius: 4px;  
  57.   overflow: hidden;  
  58.   color:#ccc;  
  59.   border:1px solid #ccc;  
  60. }  
  61. .ui-datepicker-header {  
  62.   height: 50px;  
  63.   line-height: 50px;  
  64.   color: #000;  
  65.   background: #e9e5e3;  
  66.   margin-bottom: 10px;  
  67. }  
  68. .ui-datepicker-prev,  
  69. .ui-datepicker-next {  
  70.   width: 20px;  
  71.   height: 20px;  
  72.   text-indent: 9999px;  
  73.   border: 2px solid #b0aead;  
  74.   border-radius: 100%;  
  75.   cursor: pointer;  
  76.   overflow: hidden;  
  77.   margin-top: 12px;  
  78. }  
  79. .ui-datepicker-prev {  
  80.   float: left;  
  81.   margin-left: 12px;  
  82. }  
  83. .ui-datepicker-prev:after {  
  84.   transform: rotate(45deg);  
  85.   margin: -43px 0px 0px 8px;  
  86. }  
  87. .ui-datepicker-next {  
  88.   float: right;  
  89.   margin-right: 12px;  
  90. }  
  91. .ui-datepicker-next:after {  
  92.   transform: rotate(-135deg);  
  93.   margin: -43px 0px 0px 6px;  
  94. }  
  95. .ui-datepicker-prev:after,  
  96. .ui-datepicker-next:after {  
  97.   content: '';  
  98.   position: absolute;  
  99.   display: block;  
  100.   width: 4px;  
  101.   height: 4px;  
  102.   border-left: 2px solid #b0aead;  
  103.   border-bottom: 2px solid #b0aead;  
  104. }  
  105. .ui-datepicker-prev:hover,  
  106. .ui-datepicker-next:hover,  
  107. .ui-datepicker-prev:hover:after,  
  108. .ui-datepicker-next:hover:after {  
  109.   border-color: #5ed1cc;  
  110. }  
  111. .ui-datepicker-title {  
  112.   text-align: center;  
  113. }  
  114. .ui-datepicker-calendar {  
  115.   width: 100%;  
  116.   text-align: center;  
  117. }  
  118. .ui-datepicker-calendar thead tr th span {  
  119.   display: block;  
  120.   width: 40px;  
  121.   color: #00a8b2;  
  122.   margin-bottom: 5px;  
  123.   font-size: 13px;  
  124. }  
  125. .ui-state-default {  
  126.   display: block;  
  127.   text-decoration: none;  
  128.   color: #fff;  
  129.   line-height: 35px;  
  130.   font-size: 12px;  
  131. }  
  132. .ui-state-default:hover {  
  133.   background: rgba(0,0,0,0.02);  
  134. }  
  135. .ui-state-highlight {  
  136.   color: #8dd391;  
  137. }  
  138. .ui-state-active {  
  139.   color: #5ed1cc;  
  140. }  
  141. .ui-datepicker-unselectable .ui-state-default {  
  142.   color: #ccc;  
  143.   border: 2px solid transparent;  
  144. }  
  145.   
  146. </style>  
  147.  </HEAD>  
  148.   
  149.  <BODY>  
  150.   
  151.   
  152. <p style="line-height:50px">1. 특정날짜만 선택가능하게하기</p>  
  153. <script>  
  154. $(document).ready(function(){  
  155. var availableDates1 = ["13-11-2017","14-11-2017","15-11-2017"];  
  156. var availableDates2 = ["3-11-2017","2-11-2017","1-11-2017"];  
  157. var availableDates3 = ["30-11-2017","29-11-2017","28-11-2017"];  
  158.   
  159. function available(date, current) {  
  160.   dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();  
  161.   if ($.inArray(dmy, availableDates1) > -1) {  
  162.     return [true, "vio-highlight","예약가능"];  
  163.   }  
  164.   else if ($.inArray(dmy, availableDates2) > -1) {  
  165.     return [true, "orange-highlight","대기예약"];  
  166.   }  
  167.   else if ($.inArray(dmy, availableDates3) > -1) {  
  168.     return [true, "blue-highlight","출발확정"];  
  169.   }  
  170.   else {  
  171.     return [false,"","unAvailable"];  
  172.   }  
  173. }  
  174.   
  175.   
  176.   
  177. $('#demo').datepicker({ beforeShowDay: available,  
  178.                         onSelect: function(dateText, inst) {  
  179.         window.location = 'http://www.amerigotour.com/goods_airtel.calendar.asp?g_cd=' + dateText;  
  180.     }  
  181.  });  
  182.   
  183.   
  184.   
  185. $('#123,#datepicker').datepicker({  
  186.     constrainInput: true,   // prevent letters in the input field  
  187.     //minDate: new Date(),    // prevent selection of date older than today  
  188.     showOn: 'button',       // Show a button next to the text-field  
  189.     autoSize: true,         // automatically resize the input field  
  190.     altFormat: 'yy-mm-dd',  // Date Format used  
  191.     beforeShowDay: $.datepicker.noWeekends,     // Disable selection of weekends  
  192.     firstDay: 1 // Start with Monday  
  193. })  
  194.   
  195.   
  196. });  
  197.   
  198. </script>  
  199.   
  200.   
  201.   
  202. <div id="demo" class="calendar"></div>  
  203.   
  204. <p style="height:50px">  
  205.   
  206.   
  207. 2. Datepicker(데이트피커) 바로보여주기  
  208.   
  209. <div id="123" style="width:220px; overflow:hidden; background:#666"></div>  
  210. <p style="height:50px">  
  211.   
  212.   
  213.  3. Datepicker(데이트피커) 사용하기  
  214. <input type="text" name="datepicker" id="datepicker" placeholder="클릭해보세요">  
  215.   
  216.   
  217.   
  218.   
  219.   
  220.  </BODY>  
  221. </HTML>  

:

탭 아이프레임

카테고리 없음 2017. 11. 29. 14:32 |

탭 아이프레임

 

previewcopy to clipboardprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE> New Document </TITLE>  
  5. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  6. <script src="//code.jquery.com/jquery.min.js"></script>  
  7. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>  
  8.   <script>  
  9.   $(document).ready(function() {  
  10.     $("#tabs").tabs({  
  11.         beforeActivate: function( event, ui ) {  
  12.             if(ui.newPanel.attr("id")=="fragment-2") {  
  13.                 ui.newPanel.html("<iframe src='http://www.experts-exchange.com' style='width:320px;height:600px;'/>");  
  14.             }  
  15.             if(ui.newPanel.attr("id")=="fragment-3") {  
  16.                 ui.newPanel.html("<iframe src='http://iskytour.co.kr' style='width:600px;height:500px;'/>");  
  17.             }  
  18.         }  
  19.   
  20.     });  
  21. });  
  22.   </script>  
  23.  </HEAD>  
  24.   
  25.  <BODY>  
  26.   
  27. <div id="tabs">  
  28.   <ul style="background:#fff;">  
  29.     <li><a href="#fragment-1"><span>One</span></a></li>  
  30.     <li><a href="#fragment-2"><span>Two</span></a></li>  
  31.     <li><a href="#fragment-3"><span>Three</span></a></li>  
  32.   </ul>  
  33.   <div id="fragment-1">  
  34.     <p>First tab is active by default:</p>  
  35.     <pre><code>$( "#tabs" ).tabs(); </code></pre>  
  36.   </div>  
  37.   <div id="fragment-2">  
  38.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
  39.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
  40.   </div>  
  41.   <div id="fragment-3" style="overflow:hidden; height:auto">  
  42.   
  43.   </div>  
  44. </div>  
  45.  </BODY>  
  46. </HTML>  

:

팝업하루 안뜨기

카테고리 없음 2017. 11. 27. 18:58 |

팝업하루 안뜨기

 

previewcopy to clipboardprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <HEAD>  
  4. <TITLE>New Document</TITLE>  
  5. </HEAD>  
  6. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
  7. <script src="http://code.jquery.com/jquery-latest.js"></script>  
  8. <script type="text/javascript">  
  9.   
  10. $(document).ready(function(){  
  11. $("#closeBtn").click(function () {  
  12.     setCookie("showCookies", "N", 1); //1일동안 유지되는 쿠키 생성  
  13.     $('#popup_1').hide(); // 레이어 감춤  
  14. });  
  15. $("#closex").click(function () {  
  16.     $('#popup_1').hide(); // 레이어 감춤  
  17. });  
  18. $("#deleteCookie").on("click", function () {  
  19.     delete_cookie("showCookies"); //쿠기 삭제  
  20. });  
  21.   
  22. if (getCookie("showCookies") != "N") {  
  23.     $("#popup_1").show(); // showCookies 라는 이름의 쿠키 값이 "N" 이 아니면 레이어 보여줌  
  24. }  
  25. });  
  26. function setCookie(cname, cvalue, exdays) {  
  27.     var d = new Date();  
  28.     d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));  
  29.     var expires = "expires=" + d.toUTCString();  
  30.     document.cookie = cname + "=" + cvalue + "; " + expires + '; Path=/;';  
  31. }  
  32.   
  33. function getCookie(cname) {  
  34.     var name = cname + "=";  
  35.     var ca = document.cookie.split(';');  
  36.     for (var i = 0; i < ca.length; i++) {  
  37.         var c = ca[i];  
  38.         while (c.charAt(0) == ' ') cc = c.substring(1);  
  39.         if (c.indexOf(name) == 0) return c.substring(name.length, c.length);  
  40.     }  
  41.     return "";  
  42. }  
  43.   
  44. function delete_cookie(name) {  
  45.     document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';  
  46. }  
  47.   
  48.   
  49.       </script>  
  50.   
  51. <style type="text/css">  
  52. #popup_1 {  
  53.     overflow:hidden;  
  54.     display: none;  
  55.     border: 1px solid #cccccc;  
  56.     width:350px; /* 팝업가로크기 세로크기는 관계없음 */  
  57.     top:0px;     /* 팝업 위에서 숫자 적용 */  
  58.     left:100px;     /* 팝업 왼쪽에서 숙자 적용 */  
  59.     padding: 0px;  
  60.     position: fixed;  
  61. }  
  62. #closeBtn {  
  63.     cursor:pointer;  
  64.     position: relative;  
  65.     text-align:right;  
  66.     font-size:12px;  
  67.     padding:8px 10px 5px 10px;  
  68.     line-height:12px;  
  69. }  
  70. #closeX {  
  71.     cursor:pointer;  
  72.     position: relative;  
  73.     padding:8px 10px 5px 10px;  
  74.     font-color:blue;  
  75.     font-size:12px;  
  76.     line-height:12px;  
  77.     background:#f7f7f7;  
  78. }  
  79. #closeX li {  
  80.     float:right;  
  81.     list-style:none  
  82. }  
  83. #deleteCookie {  
  84.     cursor: pointer;  
  85. }  
  86. </style>  
  87. <BODY>  
  88. <body>  
  89. <div id="popup_1">  
  90.   <div id="closex" style="">오사카하루특가 !!!  
  91.     <li>X 닫기</li>  
  92.   </div>  
  93.   <img src="http://www.jt1.co.kr/total_upload/popup/pop_autumn[2].jpg">  
  94.   <div id="closeBtn"> [닫기 - 하루동안 안보임] </div>  
  95. </div>  
  96. <Br>  
  97. <Div id="deleteCookie"> [쿠키삭제] </Div>  
  98. <br>  
  99. <br>  
  100. 테스트 방법: <br>  
  101. 1. 처음에 레이어가 보임 (쿠기가 없으므로) <br>  
  102. 2. 아래의 [닫기] 누르면 레이어 사라짐 (하루안뜬 쿠키생성) <br>  
  103. 3. 위의 X닫기 누르면.. 그냥닫힘 <br>  
  104. 4. [쿠키삭제] 누르고 다시 새로고침하면 레이어 뜸 (쿠기가 없으므로)  
  105. </body>  
  106. </BODY>  
  107. </HTML>  

:

상품 리스트 및 일정표 responsive

카테고리 없음 2017. 11. 23. 20:53 |

상품 리스트 및 일정표 responsive

 

previewcopy to clipboardprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE> New Document </TITLE>  
  5.   <script src="http://code.jquery.com/jquery-latest.js"></script>  
  6.   <script>  
  7. $(document).ready(function(){  
  8.   
  9. });  
  10.   
  11.   </script>  
  12. <style>  
  13. * {font-size:12px;}  
  14. div.best_goods{  
  15.     padding: 15px;  /* 패딩값은 간격을 보고 적당히 조절 */  
  16.     max-width: 1100px;  
  17.     width:80%;  
  18.     border: 1px solid #ccc;  
  19.     box-sizing:border-box;  
  20.     margin:0 auto;  
  21.     overflow:hidden;  
  22.   
  23.   
  24. }  
  25. div.best_goods_item{  
  26.     float: left;  
  27.     background-color: #eee;  
  28.     border: 1px solid #898989;  
  29.     border-radius: 11px;  
  30.     padding: 20px;  
  31.     min-height:220px;  
  32.     width: 23%;  
  33.     margin-left:2.666%;  /* 1줄 3칸일때는 32%-2%, 1줄 4칸일때는 23%-2.666% */  
  34.     text-align: center;  
  35.     box-sizing:border-box;  
  36.     margin-bottom:15px;  
  37. }  
  38.   
  39. /* 일정표 스타일 */  
  40. div {box-sizing:border-box}  
  41. li {list-style-position:inside; list-style-type:none; display:inline-block; padding:8px}  
  42.   
  43. #il_wrap {max-width:1100px; width:80%; overflow:hidden;margin:30px auto; padding:15px; border:1px solid #ccc}  
  44. #il_cha {width:100%; overflow:hidden; border:1px solid #ccc; display:flex;}  
  45. #il_cha .area {flex: 1;border-right:1px solid #ccc; padding:8px; text-align:center}  
  46. #il_cha .area2 {display:none; flex:none; width:100%; height:40px; padding:8px; border-bottom:1px solid #ccc}  
  47. #il_cha .ilcon {flex: 10; padding:8px}  
  48.   
  49.   
  50.   
  51. /* 일정표 스타일 */  
  52.   
  53.   
  54.   
  55.   
  56.   
  57. @media (max-width: 1920px) and (min-width:1024px) {  
  58.   
  59. /* 1줄 4개일때 */  
  60. div.best_goods_item:nth-child(4n+1){  
  61.     margin-left: 0;  
  62. }  
  63.   
  64.   
  65.   }  
  66.   
  67. @media (max-width: 1024px) and (min-width:800px) {  
  68.   
  69. #il_cha {display:block}  
  70. #il_cha .area {display:none;}  
  71. #il_cha .area2 {display:block;}  
  72. #il_cha .ilcon {flex:none}  
  73. div.best_goods_item{  
  74. width: 32%;  
  75. margin-left:2%;  
  76. }  
  77. /* 1줄 3개일때 */  
  78. div.best_goods_item:nth-child(3n+1){  
  79.     margin-left: 0;  
  80. }  
  81.   
  82.   
  83.   }  
  84.   
  85. @media (max-width: 800px) and (min-width:480px) {  
  86. #il_wrap {width:100%;}  
  87. #il_cha {display:block}  
  88. #il_cha .area {display:none; }  
  89. #il_cha .area2 {display:block; }  
  90. #il_cha .ilcon {flex:none}  
  91. div.best_goods{  
  92. width:100%;  
  93. }  
  94.   
  95. div.best_goods_item{  
  96. width: 48%;  
  97. margin-left:4%;  
  98. }  
  99. /* 1줄 2개일때 */  
  100. div.best_goods_item:nth-child(2n+1){  
  101.     margin-left: 0;  
  102. }  
  103.   
  104.   
  105.   }  
  106.   
  107. @media (max-width: 480px) {  
  108. #il_wrap {width:100%;}  
  109. #il_cha {display:block}  
  110. #il_cha .area {display:none; }  
  111. #il_cha .area2 {display:block; }  
  112. #il_cha .ilcon {flex:none}  
  113. div.best_goods{  
  114. width:100%;  
  115. }  
  116.   
  117. div.best_goods_item{  
  118. width: 100%;  
  119. margin-left:0%;  
  120. }  
  121. /* 1줄 2개일때 */  
  122. div.best_goods_item:nth-child(1n+1){  
  123.     margin-left: 0;  
  124. }  
  125.   
  126.   
  127.   }  
  128. </style>  
  129.  </HEAD>  
  130.   
  131.  <BODY>  
  132. <div class="best_goods">  
  133.     <div class="best_goods_item">inner box 1<br>222</div>  
  134.     <div class="best_goods_item">inner box 2</div>  
  135.     <div class="best_goods_item">inner box 3</div>  
  136.     <div class="best_goods_item">inner box 4</div>  
  137.     <div class="best_goods_item">inner box 5</div>  
  138.     <div class="best_goods_item">inner box 6</div>  
  139.     <div class="best_goods_item">inner box 7</div>  
  140.     <div class="best_goods_item">inner box 2</div>  
  141.     <div class="best_goods_item">inner box 3</div>  
  142.     <div class="best_goods_item">inner box 4</div>  
  143.   
  144.   
  145.   
  146. </div>  
  147.   
  148.   
  149. <div id="il_wrap">  
  150. <div style="height:40px; background:#1a4f98; color:#fff; font-weight:bold; font-size:24px; line-height:40px; padding-left:15px">1<span style="font-size:12px; font-weight:normal">일차</span></div>  
  151.  <div id="il_cha">  
  152.  <div class="area2"><span style="display:inline-block; width:60px; padding:5px 5px; background:#f7f7f7;border:1px solid #ebebeb; text-align:center; border-radius:5px; margin-right:15px; font-size:11px">지역</span>부산 / 타이페이</div>  
  153.  <div class="area">부산<br>타이페이</div>  
  154.  <div class="ilcon">  
  155.  항공기 출발<STRONG> </STRONG><FONT color=#ff0000>2시간 30분 전까지 공항 도착</FONT> 후 탑승수속&nbsp;→ <A href="http://www.iskytour.co.kr/tinfo/tinfo_detail.asp?t_cd=10"><A href="http://www.iskytour.co.kr/tinfo/tinfo_detail.asp?t_cd=10"><STRONG><FONT color=#1e90ff size=3 face=Thread-0000422c-Id-00000000><U>바로보기</U></FONT></STRONG></A><BR><BR><STRONG>[20:00]</STRONG> 부산&nbsp;국제공항 출발<STRONG> </STRONG><FONT color=#ff0000><STRONG>[CI 187]</STRONG></FONT><BR><STRONG>[21:45]</STRONG>&nbsp;타이페이 국제공항 도착 후 환승&nbsp;&nbsp; <BR><STRONG>[23:50]</STRONG>&nbsp;타이페이 국제공항 출발<FONT color=#ff0000>&nbsp;<STRONG>[CI 51]<BR><BR></STRONG><FONT color=#6e246d>위탁수화물(짐)은 호주 시드니에서 찾습니다.</FONT></FONT>  
  156.  </div>  
  157.   </div>  
  158. <div style="height:30px; line-height:30px; padding-left:10px; border:1px solid #ccc; border-top:0; background-image: url(http://special.iskytour.co.kr/images/iljung/ic_hotel.png);background-position: left center;background-repeat: no-repeat;background-origin: content-box"><span style="color:blue; margin-left:30px;">호텔 : 아시아나 호텔 및 동급</span></div>  
  159. <div style="height:30px; line-height:30px; padding-left:10px; border:1px solid #ccc; border-top:0; background-image: url(http://special.iskytour.co.kr/images/iljung/ic_food.png);background-position: left center;background-repeat: no-repeat;background-origin: content-box"><span style="color:blue; margin-left:30px;">조식 : 호텔식  /  중식 : 호텔식 / 석식 : 호텔식</span></div>  
  160. </div>  
  161.  </BODY>  
  162. </HTML>  

:

상품리스트 레이아웃 no flex -- responsive

카테고리 없음 2017. 11. 23. 17:40 |

상품리스트 레이아웃 no flex -- responsive

 

previewcopy to clipboardprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE> New Document </TITLE>  
  5. <style>  
  6.   
  7. div.best_goods{  
  8.     padding: 15px;  /* 패딩값은 간격을 보고 적당히 조절 */  
  9.     max-width: 1100px;  
  10.     width:80%;  
  11.     border: 1px solid #ccc;  
  12.     box-sizing:border-box;  
  13.     margin:0 auto;  
  14.     overflow:hidden;  
  15.   
  16.   
  17. }  
  18. div.best_goods_item{  
  19.     float: left;  
  20.     background-color: #eee;  
  21.     border: 1px solid #898989;  
  22.     border-radius: 11px;  
  23.     padding: 20px;  
  24.     min-height:220px;  
  25.     width: 23%;  
  26.     margin-left:2.666%;  /* 1줄 3칸일때는 32%-2%, 1줄 4칸일때는 23%-2.666% */  
  27.     text-align: center;  
  28.     box-sizing:border-box;  
  29.     margin-bottom:15px;  
  30. }  
  31.   
  32.   
  33.   
  34.   
  35. @media (max-width: 1920px) and (min-width:1024px) {  
  36.   
  37. /* 1줄 4개일때 */  
  38. div.best_goods_item:nth-child(4n+1){  
  39.     margin-left: 0;  
  40. }  
  41.   
  42.   
  43.   }  
  44.   
  45. @media (max-width: 1024px) and (min-width:600px) {  
  46.   
  47. div.best_goods_item{  
  48. width: 32%;  
  49. margin-left:2%;  
  50. }  
  51. /* 1줄 3개일때 */  
  52. div.best_goods_item:nth-child(3n+1){  
  53.     margin-left: 0;  
  54. }  
  55.   
  56.   
  57.   }  
  58.   
  59. @media (max-width: 600px) and (min-width:320px) {  
  60.   
  61. div.best_goods_item{  
  62. width: 48%;  
  63. margin-left:4%;  
  64. }  
  65. /* 1줄 2개일때 */  
  66. div.best_goods_item:nth-child(2n+1){  
  67.     margin-left: 0;  
  68. }  
  69.   
  70.   
  71.   }  
  72.   
  73. @media (max-width: 320px) {  
  74.   
  75. div.best_goods_item{  
  76. width: 100%;  
  77. margin-left:0%;  
  78. }  
  79. /* 1줄 2개일때 */  
  80. div.best_goods_item:nth-child(1n+1){  
  81.     margin-left: 0;  
  82. }  
  83.   
  84.   
  85.   }  
  86. </style>  
  87.  </HEAD>  
  88.   
  89.  <BODY>  
  90. <div class="best_goods">  
  91.     <div class="best_goods_item">inner box 1<br>222</div>  
  92.     <div class="best_goods_item">inner box 2</div>  
  93.     <div class="best_goods_item">inner box 3</div>  
  94.     <div class="best_goods_item">inner box 4</div>  
  95.     <div class="best_goods_item">inner box 5</div>  
  96.     <div class="best_goods_item">inner box 6</div>  
  97.     <div class="best_goods_item">inner box 7</div>  
  98.     <div class="best_goods_item">inner box 2</div>  
  99.     <div class="best_goods_item">inner box 3</div>  
  100.     <div class="best_goods_item">inner box 4</div>  
  101.     <div class="best_goods_item">inner box 5</div>  
  102.     <div class="best_goods_item">inner box 6</div>  
  103.     <div class="best_goods_item">inner box 7</div>  
  104.     <div class="best_goods_item">inner box 2</div>  
  105.     <div class="best_goods_item">inner box 3</div>  
  106.     <div class="best_goods_item">inner box 4</div>  
  107.     <div class="best_goods_item">inner box 5</div>  
  108.     <div class="best_goods_item">inner box 6</div>  
  109.     <div class="best_goods_item">inner box 7</div>  
  110.   
  111.   
  112. </div>  
  113.   
  114.   
  115.  </BODY>  
  116. </HTML>  

:

티스토리툴바