HTML CSS Javascript
계정
Location
location.hash ="#n"
$(location).attr('hash')
List, Dictionary
prod = { "key":"value" };
for (var key in prod) {
key
prod[key]
}
CSS Style
$('#mask').removeClass('active');
$('#mark').addClass('active')
$('html').css('overflow', 'initial');
$(this).attr('id')
@media (min-width: 768px) {
/* wide mode css */
.classname {
attr : value !important; /* override */
}
}
String
function comma(str) { // 숫자에 컴마 및 원 붙이기
str = String(str);
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,') + "원";
}
resize
$(window).on('resize', function() {
if ($(window).width() >= 768) {
set_tablet_mode();
status = "t";
} else {
status = "m";
}
});
disable Telephone Link on Desktop
https://jsfiddle.net/az96o8Ly/
// Use event delegation, to catch clicks on links that may be added by javascript at any time.
jQuery(document.documentElement).on('click', '[href^="tel:"]', function(e){
try{
// These user-agents probably support making calls natively.
if( /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// Do nothing; This device probably supports making phone calls natively...
} else {
// Extract the phone number.
var phoneNumber = jQuery(this).attr('href').replace('tel:', '').trim();
// Tell the user to call it.
alert("Please call "+phoneNumber);
// Prevent the browser popup about unknown protocol tel:
e.preventDefault();
e.stopPropagation();
}
} catch(e){
console.log("Exception when catching telephone call click!", e);
}
});
Image resize - area map
https://github.com/stowball/jQuery-rwdImageMaps
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<img src="https://go.pardot.com/l/552572/2019-03-27/32l8vw/552572/111582/1903_cafe24________________1_01_______.jpg" width=3750 height=1080 border="0", alt="" usemap="#Map">
<map name="Map">
<area shape="rect" coords="391,79,1864,415" href="https://go.pardot.com/l/552572/2019-03-27/32krky" target="_blank">
<area shape="rect" coords="1933,79,3405,415" href="tel:1661-0004">
</map>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
Page onload
- window.onload = onPageLoad(); function onPageLoad(ids) {}
- $(window).load(function(){ }); : 더 나중에 실행됨
Click to popup layer
Table x-y scroll
<table id=maintable style=“height:550px;overflow-x: scroll;display:block;”>
Jquery on Internet Explorer, IE
- ActiveX 인식 못할 때 : head에 추가
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”> - for each 보다 index 이용이 더 빠름 (Table Rendering이 느림..)
Overflow (말줄임표) - ellipsis
통신사/Device 찾기
// 홈페이지_기업_인트렌치컨설팅_통신사확인_태그
<script>
var transactionXmlHttpRequest;
var itemXmlHttpRequest;
var telecomType;
if (window.XMLHttpRequest)
{
// code for modern browsers
transactionXmlHttpRequest = new XMLHttpRequest();
itemXmlHttpRequest = new XMLHttpRequest();
} else {
// code for IE6, IE5
transactionXmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
itemXmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
}
// 서버 연결
transactionXmlHttpRequest.open('POST', 'http://ip-api.com/json', true);
// 데이터 전송
transactionXmlHttpRequest.send(encodeURI(""));
transactionXmlHttpRequest.onreadystatechange = function() {
if (transactionXmlHttpRequest.readyState == 4 && transactionXmlHttpRequest.status == 200)
{
telecomType = JSON.parse(this.responseText);
//console.log( "Telecom Type : "+telecomType.isp );
//return telecomType.isp;
}
};
</script>
// 맞춤 자바스크립트 수정
function(){
return telecomType.isp;
}
function(){
var pc_device = "win16|win32|win64|mac|macintel"; // 디바이스 종류 설정
var this_device = navigator.platform; // 접속한 디바이스 환경
if( pc_device.indexOf(navigator.platform.toLowerCase()) < 0 ){
return "MO"
}else{
return "PC"
}
}
Discussion