Я работаю над веб-комиксом с навигацией с помощью клавиатуры от панели к панели, используя якоря и виджет на основе кода перехода / прокрутки, чтобы улучшить Adobe Muse.
Я хотел бы сделать вариант навигации доступным для мобильных пользователей с набором динамических кнопок, размещенных в рамке верхнего уровня, которые запускают действие аналогично нажатию клавиши со стрелкой вверх и стрелкой вниз (в настоящее время функционально, но глючит).
Я надеюсь, что зритель может ссылаться на любую привязку в данной главе и перемещаться от точки привязки к точке привязки либо вперед, либо назад (страница вверх к последней точке привязки или страница вниз к следующей точке привязки), поэтому важно, чтобы код не зависел в конкретной начальной точке, особенно потому, что переход прокрутки к коду привязки не срабатывает на мобильных платформах.
вот ссылка на пример главы:
http://www.attilathe.com/chapter-5.html
Поскольку JSFiddle не воспроизводит композицию содержимого фрейма верхнего уровня или поведение плагина виджета, я не уверен, как воспроизвести код.
Я также видел этот оставшийся без ответа вопрос о стеке: -page-without-knowing-anchor-n">Как сделать так, чтобы ссылка вела к следующему якорю на странице, не зная имени якоря?
- Я считаю, что это уместно, но мне нужна помощь в переводе того, как эффективно добавить код в Adobe Muse, чтобы код размещался правильно по отношению к содержимому и учитывал главный кадр.
Заранее большое спасибо за понимание!
Изменить добавление по запросу -
Ниже приведен фрагмент кода, который мне пришлось удалить в больших количествах, чтобы соответствовать этому ограничению, поэтому я мог случайно его сломать, поэтому, пожалуйста, посмотрите исходный код ссылки, если. В главе примера кнопки не размещены, так как они не функционируют, но есть кнопки, уже выполняющие другие функции в основном слое кадра, где должны быть размещены предполагаемые кнопки:
<html class="js html" lang="en-US"><head>
<script async="" src="//www.google-analytics.com/analytics.js"></script><script type="text/javascript">
if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "webpro.js", "musewpslideshow.js", "jquery.museoverlay.js", "touchswipe.js", "jquery.watch.js", "jquery.scrolleffects.js", "chapter-5.css"], "outOfDate":[]};
</script>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="generator" content="2015.1.2.344">
<title>CHAPTER 5</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?4245379245">
<link rel="stylesheet" type="text/css" href="css/master_a-comic-nav.css?277903926">
<link rel="stylesheet" type="text/css" href="css/chapter-5.css?233531573" id="pagesheet">
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className = document.documentElement.className.replace(/\bnojs\b/g, 'js');
</script>
<!--custom head HTML-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54742566-1', 'auto');
ga('send', 'pageview');
</script>
<!--?php include_once("analyticstracking.php") ?-->
<!--HTML Widget code-->
<style>
html, body {overflow-x: hidden !important;}
</style>
</head>
<body data-whatinput="mouse">
<div class="clearfix" id="page"><!-- column -->
<div class="position_content" id="page_position_content">
<div class="clearfix colelem" id="pu1714"><!-- group -->
<div class="grpelem" id="u1714"><!-- custom html -->
</div>
<div class="grpelem" id="u9156"><!-- custom html -->
</div>
</div>
<div class="colelem" id="u1920"><!-- simple frame --></div>
<div class="PamphletWidget clearfix pinned-colelem wp-slideshow-playing" id="pamphletu6146"><!-- none box -->
<div class="ThumbGroup clearfix grpelem" id="u6161"><!-- none box -->
<div class="popup_anchor">
<div class="Thumb popup_element wp-tab-active PamphletThumbSelected" id="u6162" role="button" tabindex="0" aria-haspopup="true" aria-controls="u6150" aria-selected="true"><!-- simple frame --></div>
</div>
</div>
<div class="popup_anchor" id="u6149popup">
<div class="ContainerGroup clearfix" id="u6149" style="width: 0px; height: 0px;"><!-- stack box -->
<div class="Container clearfix grpelem wp-panel wp-panel-active" id="u6150" role="tabpanel" aria-labelledby="u6162" style=""><!-- group -->
<div class="clearfix grpelem" id="u6151"><!-- group -->
<div class="clearfix grpelem" id="u6153-6"><!-- content -->
<p></p>
<p></p>
</div>
<div class="clearfix grpelem" id="u6152-10"><!-- content -->
<p>USE ARROW KEYS</p>
<p>OR</p>
<p>PAGE UP / DOWN</p>
<p>TO JUMP NAVIGATE</p>
</div>
</div>
</div>
</div>
</div>
<div class="popup_anchor">
<div class="PamphletCloseButton PamphletLightboxPart popup_element clearfix" id="u6156" tabindex="0" role="button" aria-label="close" style="display: block;"><!-- group -->
<div class="clearfix grpelem" id="u6157"><!-- group -->
<div class="clip_frame grpelem" id="u6159"><!-- image -->
<img class="block" id="u6159_img" src="images/dots-crop-u6159.png" alt="" width="38" height="35">
</div>
<div class="clearfix grpelem" id="u6158-4"><!-- content -->
<p></p>
</div>
</div>
</div>
</div>
</div><div class="colelem"></div>
<div class="colelem" id="u5458"><!-- custom html --></div>
<a class="anchor_item colelem" id="start"></a>
<div class="clearfix pinned-colelem" id="u6501"><!-- group -->
<a class="nonblock nontext clip_frame" id="u6502" href="menu.html" data-href="page:U2522"><!-- image --><img class="block" id="u6502_img" src="images/dots-crop-u6502.png" alt="" width="84" height="85"></a>
</div><div class="colelem"></div>
<a class="nonblock nontext clearfix pinned-colelem" id="u10301-4" href="menu.html" data-href="page:U2522"><!-- content --><p>MENU</p></a><div class="colelem"></div>
<div class="PamphletWidget clearfix wp-slideshow-playing" id="pamphletu18523" style="left: -280px; top: 110.6px;"><!-- none box -->
<div class="ThumbGroup clearfix grpelem" id="u18524"><!-- none box -->
<div class="popup_anchor">
<div class="Thumb popup_element wp-tab-active PamphletThumbSelected" id="u18525" role="button" tabindex="0" aria-haspopup="true" aria-controls="u18533" aria-selected="true"><!-- simple frame --></div>
</div>
</div>
<div class="popup_anchor" id="u18532popup">
<div class="ContainerGroup clearfix" id="u18532" style="width: 0px; height: 0px;"><!-- stack box -->
<div class="Container clearfix grpelem wp-panel wp-panel-active" id="u18533" role="tabpanel" aria-labelledby="u18525" style="opacity: 0.992;"><!-- group -->
<div class="clearfix grpelem" id="u18534"><!-- group -->
<!-- m_editable region-id="editable-static-tag-U18536-BP_infinity" template="chapter-5.html" data-type="html" data-ice-options="disableImageResize,link" -->
<div class="clearfix grpelem" id="u18536-4" data-muse-uid="U18536" data-muse-type="txt_frame"><!-- content -->
<p></p>
</div>
<!-- /m_editable -->
<!-- m_editable region-id="editable-static-tag-U18535-BP_infinity" template="chapter-5.html" data-type="html" data-ice-options="disableImageResize,link" -->
<div class="clearfix grpelem" id="u18535-4" data-muse-uid="U18535" data-muse-type="txt_frame"><!-- content -->
<p>SCROLL</p>
</div>
<!-- /m_editable -->
</div>
</div>
</div>
</div>
</div>
<div class="PamphletWidget clearfix wp-slideshow-playing" id="pamphletu1864" style="left: -262px; top: 110.6px;"><!-- none box -->
<div class="ThumbGroup clearfix grpelem" id="u1865"><!-- none box -->
<div class="popup_anchor">
<div class="Thumb popup_element wp-tab-active PamphletThumbSelected" id="u1866" role="button" tabindex="0" aria-haspopup="true" aria-controls="u1871" aria-selected="true"><!-- simple frame --></div>
</div>
</div>
<div class="popup_anchor" id="u1869popup">
<div class="ContainerGroup clearfix" id="u1869" style="width: 0px; height: 0px;"><!-- stack box -->
<div class="Container clearfix grpelem wp-panel wp-panel-active" id="u1871" role="tabpanel" aria-labelledby="u1866" style="opacity: 0.992;"><!-- group -->
<div class="clearfix grpelem" id="u1888"><!-- group -->
<!-- m_editable region-id="editable-static-tag-U1890-BP_infinity" template="chapter-5.html" data-type="html" data-ice-options="disableImageResize,link" -->
<div class="clearfix grpelem" id="u1890-4" data-muse-uid="U1890" data-muse-type="txt_frame"><!-- content -->
<p></p>
</div>
<!-- /m_editable -->
<!-- m_editable region-id="editable-static-tag-U1889-BP_infinity" template="chapter-5.html" data-type="html" data-ice-options="disableImageResize,link" -->
<div class="clearfix grpelem" id="u1889-4" data-muse-uid="U1889" data-muse-type="txt_frame"><!-- content -->
<p>SCROLL</p>
</div>
<!-- /m_editable -->
</div>
</div>
</div>
</div>
</div>
<!-- m_editable region-id="editable-static-tag-U18513-BP_infinity" template="chapter-5.html" data-type="image" -->
<div class="clip_frame colelem" id="u18513" data-muse-uid="U18513" data-muse-type="img_frame"><!-- image -->
<img class="block" id="u18513_img" src="images/chapter%205.jpg" alt="" width="997" height="748" data-muse-src="images/chapter%205.jpg">
</div>
<a class="anchor_item colelem" id="f8"></a>
<div class="clearfix colelem" id="u20093"><!-- column -->
<!-- m_editable region-id="editable-static-tag-U23280-BP_infinity" template="chapter-5.html" data-type="image" data-ice-options="clickable" data-ice-editable="link" -->
<a class="nonblock nontext clip_frame colelem" id="u23280" href="chapter-6.html#a1" data-href="anchor:U20374:U21661" data-muse-uid="U23280" data-muse-type="img_frame"><!-- image --><img class="block" id="u23280_img" src="images/chapter%206-crop-u23280.png" alt="" width="335" height="135" data-muse-src="images/chapter%206-crop-u23280.png"></a>
<!-- /m_editable -->
<!-- m_editable region-id="editable-static-tag-U20098-BP_infinity" template="chapter-5.html" data-type="html" data-ice-options="disableImageResize,link,clickable" data-ice-editable="link" -->
<a class="nonblock nontext clearfix colelem ose_ei" id="u20098-6" href="chapter-6.html#a1" data-href="anchor:U20374:U21661" data-muse-uid="U20098" data-muse-type="txt_frame" style="opacity: 0;"><!-- content --><p id="u20098-2">CHAPTER 6</p><p id="u20098-4">WELCOME TO BAT COUNTRY</p></a>
<!-- /m_editable -->
</div>
<!-- m_editable region-id="editable-static-tag-U20096-BP_infinity" template="chapter-5.html" data-type="image" -->
<div class="clip_frame" id="u20096" data-muse-uid="U20096" data-muse-type="img_frame" data-mu-ie-matrix="progid:DXImageTransform.Microsoft.Matrix(M11=-1,M12=0,M21=0,M22=-1,SizingMethod='auto expand')" data-mu-ie-matrix-dx="0" data-mu-ie-matrix-dy="0" style="display: none;"><!-- image -->
<img class="block" id="u20096_img" src="images/scroll_down_prompt-crop-u20096.png" alt="" width="100" height="66" data-muse-src="images/scroll_down_prompt-crop-u20096.png">
</div>
<!-- /m_editable -->
<div class="verticalspacer"></div>
</div>
</div>
<!-- JS includes -->
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn2.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script><script src="http://musecdn2.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/museutils.js?3790713428" type="text/javascript"></script>
<script src="scripts/whatinput.js?84559013" type="text/javascript"></script>
<script src="scripts/webpro.js?329496574" type="text/javascript"></script>
<script src="scripts/musewpslideshow.js?394033048" type="text/javascript"></script>
<script src="scripts/jquery.museoverlay.js?4265131668" type="text/javascript"></script>
<script src="scripts/touchswipe.js?497316881" type="text/javascript"></script>
<script src="scripts/jquery.watch.js?4244854265" type="text/javascript"></script>
<script src="scripts/jquery.scrolleffects.js?4219894366" type="text/javascript"></script>
<!-- Other scripts -->
<script type="text/javascript">
$(document).ready(function() { try {
(function(){var a={},b=function(a){if(a.match(/^rgb/))return a=a.replace(/\s+/g,"").match(/([\d\,]+)/gi)[0].split(","),(parseInt(a[0])<<16)+(parseInt(a[1])<<8)+parseInt(a[2]);if(a.match(/^\#/))return parseInt(a.substr(1),16);return 0};(function(){$('link[type="text/css"]').each(function(){var b=($(this).attr("href")||"").match(/\/?css\/([\w\-]+\.css)\?(\d+)/);b&&b[1]&&b[2]&&(a[b[1]]=b[2])})})();(function(){$("body").append('<div class="version" style="display:none; width:1px; height:1px;"></div>');
for(var c=$(".version"),d=0;d<Muse.assets.required.length;){var f=Muse.assets.required[d],g=f.match(/([\w\-\.]+)\.(\w+)$/),k=g&&g[1]?g[1]:null,g=g&&g[2]?g[2]:null;switch(g.toLowerCase()){case "css":k=k.replace(/\W/gi,"_").replace(/^([^a-z])/gi,"_$1");c.addClass(k);var g=b(c.css("color")),h=b(c.css("background-color"));g!=0||h!=0?(Muse.assets.required.splice(d,1),"undefined"!=typeof a[f]&&(g!=a[f]>>>24||h!=(a[f]&16777215))&&Muse.assets.outOfDate.push(f)):d++;c.removeClass(k);break;case "js":k.match(/^jquery-[\d\.]+/gi)&&
typeof $!="undefined"?Muse.assets.required.splice(d,1):d++;break;default:throw Error("Unsupported file type: "+g);}}c.remove();if(Muse.assets.outOfDate.length||Muse.assets.required.length)c="Some files on the server may be missing or incorrect. Clear browser cache and try again. If the problem persists please contact website author.",(d=location&&location.search&&location.search.match&&location.search.match(/muse_debug/gi))&&Muse.assets.outOfDate.length&&(c+="\nOut of date: "+Muse.assets.outOfDate.join(",")),d&&Muse.assets.required.length&&(c+="\nMissing: "+Muse.assets.required.join(",")),alert(c)})()})();
/* body */
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.fullPage('#page');/* 100% height page */
Muse.Utils.initWidget('#pamphletu6146', ['#bp_infinity'], function(elem) { return new WebPro.Widget.ContentSlideShow(elem, {contentLayout_runtime:'stack',event:'click',deactivationEvent:'',autoPlay:true,displayInterval:1000,transitionStyle:'fading',transitionDuration:500,hideAllContentsFirst:true,shuffle:false,enableSwipe:false,resumeAutoplay:false,resumeAutoplayInterval:3000,playOnce:false,autoActivate_runtime:false}); });/* #pamphletu6146 */
Muse.Utils.initWidget('#pamphletu18523', ['#bp_infinity'], function(elem) { return new WebPro.Widget.ContentSlideShow(elem, {contentLayout_runtime:'stack',event:'click',deactivationEvent:'',autoPlay:true,displayInterval:3000,transitionStyle:'fading',transitionDuration:500,hideAllContentsFirst:true,shuffle:false,enableSwipe:false,resumeAutoplay:false,resumeAutoplayInterval:3000,playOnce:false,autoActivate_runtime:false}); });/* #pamphletu18523 */
Muse.Utils.initWidget('#pamphletu1864', ['#bp_infinity'], function(elem) { return new WebPro.Widget.ContentSlideShow(elem, {contentLayout_runtime:'stack',event:'click',deactivationEvent:'',autoPlay:true,displayInterval:3000,transitionStyle:'fading',transitionDuration:500,hideAllContentsFirst:true,shuffle:false,enableSwipe:false,resumeAutoplay:false,resumeAutoplayInterval:3000,playOnce:false,autoActivate_runtime:false}); });/* #pamphletu1864 */
$('#u18533').registerOpacityScrollEffect([{"fade":50,"opacity":100,"in":[-Infinity,-0.4]},{"opacity":100,"in":[-0.4,-0.4]},{"fade":50,"opacity":0,"in":[-0.4,Infinity]}]);/* scroll effect */
$('#pamphletu18523').registerPositionScrollEffect([{"in":[-Infinity,-0.4],"speed":[0,0]},{"in":[-0.4,Infinity],"speed":[0,-3]}]);/* scroll effect */
$('#u1871').registerOpacityScrollEffect([{"fade":50,"opacity":100,"in":[-Infinity,-0.4]},{"opacity":100,"in":[-0.4,-0.4]},{"fade":50,"opacity":0,"in":[-0.4,Infinity]}]);/* scroll effect */
$('#pamphletu1864').registerPositionScrollEffect([{"in":[-Infinity,-0.4],"speed":[0,0]},{"in":[-0.4,Infinity],"speed":[0,-3]}]);/* scroll effect */
$('#u20098-6').registerOpacityScrollEffect([{"fade":50,"opacity":0,"in":[-Infinity,117203.86]},{"opacity":100,"in":[117203.86,117203.86]},{"fade":50,"opacity":100,"in":[117203.86,Infinity]}]);/* scroll effect */
$('#u20096').registerPositionScrollEffect([{"in":[-Infinity,117245.86],"speed":[0,0.8]},{"in":[117245.86,Infinity],"speed":[0,1]}]);/* scroll effect */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { if (e && 'function' == typeof e.notify) e.notify(); else Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
<!--HTML Widget code-->
<script type="text/javascript">
$(window).load(function(){var pos1=1;if(pos1===1){(function(){var delay=false;$(document).on('mousewheel DOMMouseScroll',function(event){event.preventDefault();if(delay)return;delay=true;setTimeout(function(){delay=false},800)
var wd=event.originalEvent.wheelDelta||-event.originalEvent.detail;var XZ="";var a=$("a:not([href])").not(XZ.replace(/\b(?=\w)/g,'#'));if(wd<0){for(var i=0;i<a.length;i++){var t=a[i].getClientRects()[0].top;if(t>=85)break;}}else{for(var i=a.length-1;i>=0;i--){var t=a[i].getClientRects()[0].top;if(t<-85)break;}}
var time=700;var easing='easeInOutCirc';$("html, body").animate({scrollTop:$(a[i]).offset().top},time,easing);});})();}});$(window).load(function(){var pos1=1;if(pos1===2){(function(){$(document).on('mousewheel DOMMouseScroll',function(event){var XZ="";var a=$("a:not([href])").not(XZ.replace(/\b(?=\w)/g,'.'));var x=$(a[a.length-1]).offset();var m=(x.top)+10;var fo=$(window).scrollTop();fo=fo+500;var dox=$(a[0]).offset();var dom=(dox.top)+200;var dofo=$(window).scrollTop();if(dofo<dom){if(event.originalEvent.deltaY<0){event.preventDefault();return;}}
if(fo>m){if(event.originalEvent.deltaY>0){event.preventDefault();return;}}
$("body").css("opacity","0");var timing=500+550;var fnz=500+450;setTimeout(function(){$("body").css("opacity","1");},timing);var wd=event.originalEvent.wheelDelta||-event.originalEvent.detail;var XZ="";var a=$("a:not([href])").not(XZ.replace(/\b(?=\w)/g,'#'));if(wd<0){for(var i=0;i<a.length;i++){var t=a[i].getClientRects()[0].top;if(t>=70)break;}}else{for(var i=a.length-1;i>=0;i--){var t=a[i].getClientRects()[0].top;if(t<-70)break;}}
setTimeout(function(){$("html, body").animate({scrollTop:$(a[i]).offset().top},0);},fnz);});})();;}});
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
def: "easeOutQuad",
swing: function(e, f, a, h, g) {
return jQuery.easing[jQuery.easing.def](e, f, a, h, g)
},
easeInQuad: function(e, f, a, h, g) {
return h * (f /= g) * f + a
},
easeOutQuad: function(e, f, a, h, g) {
return -h * (f /= g) * (f - 2) + a
},
easeInOutQuad: function(e, f, a, h, g) {
if ((f /= g / 2) < 1) {
return h / 2 * f * f + a
}
return -h / 2 * ((--f) * (f - 2) - 1) + a
},
easeInCirc: function(e, f, a, h, g) {
return -h * (Math.sqrt(1 - (f /= g) * f) - 1) + a
},
easeOutCirc: function(e, f, a, h, g) {
return h * Math.sqrt(1 - (f = f / g - 1) * f) + a
},
easeInOutCirc: function(e, f, a, h, g) {
if ((f /= g / 2) < 1) {
return -h / 2 * (Math.sqrt(1 - f * f) - 1) + a
}
return h / 2 * (Math.sqrt(1 - (f -= 2) * f) + 1) + a
},
});
</script>
<script type="text/javascript">
document.onmousewheel = function(){ (); }
if(document.addEventListener){
document.addEventListener('DOMMouseScroll', , false);
}
function (e){
if(!e){ e = window.event; }
if(e.preventDefault) { e.preventDefault(); }
e.returnValue = false;
}
</script>
<script language="JavaScript">
var message="Right-click is disabled";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event. );
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
<script type="text/javascript">
function disableselect(e) {
return false
}
function reEnable() {
return true
}
//if IE4+
document.onselectstart = new Function("return false")
if (window.sidebar) {
document. = disableselect
document.onclick = reEnable
}
</script>
<script type="text/javascript">
(function () {
// Convert anchor names the same way Muse does
function convertAnchorNames(name) {
return name.replace(/([A-Z])/g, function (a, c) {
return c.toLowerCase();
});
}
var anchors = $('a:not([href])'),
ignoreList = " ".split(/\s*,\s*/),
dir = "vert";
if( ignoreList && ignoreList.length && !(ignoreList.length == 1 && ignoreList[0] == '') ) {
// We're ignoring some
for(var i in ignoreList) {
ignoreList[i] = convertAnchorNames(ignoreList[i]);
}
anchors = anchors.filter(function (i, el) {
return ignoreList.indexOf(el.id) < 0 ? el : null;
});
}
// Sort
var sortFn;
switch (dir){
case "vert":
// Sort items by vertical position top to bottom
sortFn = function (a, b) {
return $(a).offset().top - $(b).offset().top;
};
break;
case "horiz":
// Sort items by horizontal position left to right
sortFn = function (a, b) {
return $(a).offset().left - $(b).offset().left;
};
break;
default:
// Sort items from top left to bottom right
sortFn = function (a, b) {
if($(a).offset().top == $(b).offset().top)
return $(a).offset().left - $(b).offset().left;
return $(a).offset().top - $(b).offset().top;
};
}
anchors.sort(sortFn);
// Use the current window scroll position to figure out what
// anchors we are currently between, so we can determine
// next and previous anchors in our list
function findCurrentAnchor() {
if(dir == 'horiz') {
var currAt = $(window).scrollLeft(),
compVal = 'left';
} else {
var currAt = $(window).scrollTop(),
compVal = 'top';
}
var pos = 0;
anchors.each(function (i, el) {
if( Math.floor($(el).offset()[compVal]) > currAt) {
return false;
}
pos = i;
});
return pos;
}
// Trigger Muse anchor navigation to give anchor
function navigateTo(anchor) {
var a = document.createElement('a');
a.href = '#' + anchor.id;
a.className = 'anim_swing';
// This is the native Muse function for navigating
// to a hyperlink. THIS IS UNSAFE, but most reliable
// way to navigate consistently
Muse.Utils.processHyperlink(a);
return false;
}
// Go to the next anchor
function nextAnchor() {
var i = findCurrentAnchor() + 1;
if(i < anchors.length) {
return navigateTo(anchors[i]);
}
}
// Go to the previous anchor
function prevAnchor() {
var i = findCurrentAnchor() - 1;
if(i >= 0) {
return navigateTo(anchors[i]);
}
}
// Handle all keydown events. Currently no focus
// distinctions are made
$(document.documentElement).keydown(function (e) {
var code = e.keyCode;
if(true) {
switch(code){
case 38: // up
case 37: // left
return prevAnchor();
case 40: // down
case 39: // right
return nextAnchor();
}
}
if(true) {
switch(code){
case 34: // page down
return nextAnchor();
case 33: // page up
return prevAnchor();
}
}
});
})();
</script>
</body></html>
