편집 요약 없음 |
편집 요약 없음 |
||
1번째 줄: | 1번째 줄: | ||
var | var drawer, origin, content; | ||
function showDrawer(id, name) { | |||
{ | origin.attr("href", "#" + id); | ||
origin.attr("data-target", id); | |||
origin.text(name); | |||
content.html($("#" + id + " > .reference-text").html()); | |||
drawer.addClass("visible"); | |||
} | |||
$(document).ready(function($) { | |||
/* create drawer */ | |||
drawer = $("<div></div>").attr("id", "reference-drawer"); | |||
$( | origin = $("<a></a>") | ||
.attr("id", "reference-origin") | |||
.click(function() { | |||
$( | $('html, body').animate({scrollTop: ($("#" + $(this).attr("data-target")).offset().top - 60)}, 400); | ||
}); | |||
content = $("<span></span>").attr("id", "reference-drawer-text"); | |||
drawer.append(origin); | |||
drawer.append(content); | |||
$(document.body).append(drawer); | |||
$(document).click(function(e) { | |||
if (!$(event.target).closest("#reference-drawer").length) { | |||
$( | if ($(window).width() < 768) { | ||
drawer.removeClass("visible"); | |||
} else { | |||
drawer.animate({opacity: 0}, 100, function() { $(this).css({visibility: "hidden", width: 0, height: 0}); }); | |||
} | |||
} | |||
}).scroll(function(e) { | |||
if ("ontouchstart" in window && !$(window).width() < 768) { | |||
drawer.removeClass("visible"); | |||
} | |||
}); | |||
$(".reference a").each(function() { | |||
var span = document.createElement("span"); | |||
span.className = "reference-hooker"; | |||
} | span.appendChild(this.childNodes[0]); | ||
this.appendChild(span); | |||
{ | }); | ||
$(".reference-hooker").click(function(e) { | |||
e.preventDefault(); | |||
$( | e.stopPropagation(); | ||
showDrawer(this.parentNode.href.split("#")[1], this.textContent); | |||
if ($(window).width() < 768) { | |||
drawer.addClass("visible"); | |||
} else { | |||
drawer.css({visibility: "visible", width: "auto", height: "auto"}); | |||
drawer.css({ top: ($(this).offset().top - drawer.outerHeight()), left: $(this).offset().left }); | |||
drawer.stop().animate({opacity: 1}, 100); | |||
} | } | ||
); | }); | ||
}); | }); |
2015년 6월 4일 (목) 00:20 판
var drawer, origin, content;
function showDrawer(id, name) {
origin.attr("href", "#" + id);
origin.attr("data-target", id);
origin.text(name);
content.html($("#" + id + " > .reference-text").html());
drawer.addClass("visible");
}
$(document).ready(function($) {
/* create drawer */
drawer = $("<div></div>").attr("id", "reference-drawer");
origin = $("<a></a>")
.attr("id", "reference-origin")
.click(function() {
$('html, body').animate({scrollTop: ($("#" + $(this).attr("data-target")).offset().top - 60)}, 400);
});
content = $("<span></span>").attr("id", "reference-drawer-text");
drawer.append(origin);
drawer.append(content);
$(document.body).append(drawer);
$(document).click(function(e) {
if (!$(event.target).closest("#reference-drawer").length) {
if ($(window).width() < 768) {
drawer.removeClass("visible");
} else {
drawer.animate({opacity: 0}, 100, function() { $(this).css({visibility: "hidden", width: 0, height: 0}); });
}
}
}).scroll(function(e) {
if ("ontouchstart" in window && !$(window).width() < 768) {
drawer.removeClass("visible");
}
});
$(".reference a").each(function() {
var span = document.createElement("span");
span.className = "reference-hooker";
span.appendChild(this.childNodes[0]);
this.appendChild(span);
});
$(".reference-hooker").click(function(e) {
e.preventDefault();
e.stopPropagation();
showDrawer(this.parentNode.href.split("#")[1], this.textContent);
if ($(window).width() < 768) {
drawer.addClass("visible");
} else {
drawer.css({visibility: "visible", width: "auto", height: "auto"});
drawer.css({ top: ($(this).offset().top - drawer.outerHeight()), left: $(this).offset().left });
drawer.stop().animate({opacity: 1}, 100);
}
});
});