<div id="message"></div>\r
\r
<div id="main">\r
+ <div id="background"></div>\r
<header>\r
<nav id="nav"></nav>\r
<div id="search"></div>\r
<a id="down" href="#"></a>\r
<footer><!-- $credits --></footer>\r
</div>\r
+ <div id="searchHints"></div>\r
<div id="view"></div>\r
<div id="innerView"></div>\r
\r
\r
FluidbookBackground.prototype = {\r
init: function() {\r
- $("#main").append('<div id="background"></div>');\r
- \r
if (this.fluidbook.datas.links.background != undefined\r
&& this.fluidbook.datas.repeat != Fluidbook.REPEAT\r
&& this.fluidbook.datas.repeat != Fluidbook.STRETCH\r
} else if (this.fluidbook.datas.backgroundVAlign == Fluidbook.MIDDLE) {\r
top = (h - ih) / 2;\r
}\r
- \r
+\r
$("#background .links").css({\r
top: top,\r
left: left\r
$.each(hints, function(k, v) {\r
$("#searchHints").append('<a class="hint" term="' + v[0] + '" href="#/search/' + v[0] + '">' + v[0] + ' <em>(' + v[1] + ')</em></a>');\r
});\r
- $("#searchHints").show();\r
+ var qoffset = $("#q").offset();\r
+ var top = qoffset.top + $("#q").outerHeight() + 5;\r
+\r
+ var left = qoffset.left;\r
+ if (this.l10n.dir == 'rtl') {\r
+ left = -1 * ($(window).width() - left - $("#q").outerWidth());\r
+ }\r
+\r
+\r
+ $("#searchHints").css({top: top, left: left}).show();\r
},\r
killLastSearchHint: function() {\r
this.search.kill();\r
var res = '<form action="#" id="searchForm" method="post">';
res += '<input type="text" id="q" name="q" type="search" value="" placeholder="' + this.fluidbook.l10n.__('search') + '" autocorrect="off" autocomplete="off" autocapitalize="off" />';
res += this.getLink('interface-search', '#', 'submitSearch');
- res += '<div id="searchHints"></div>';
res += '</form>';
$("#search").append(res);
$("#submitSearch").click(function() {
\r
FluidbookResize.prototype = {\r
init: function() {\r
- $("#nav").transform({\r
- origin: ['0%', '0%']\r
+\r
+ var left = this.fluidbook.l10n.dir == 'ltr' ? '0%' : '100%';\r
+ var right = this.fluidbook.l10n.dir == 'ltr' ? '100%' : '0%';\r
+\r
+ $("#nav,#searchHints").transform({\r
+ origin: [left, '0%']\r
});\r
\r
$("#logo").transform({\r
- origin: ['100%', '0%']\r
+ origin: [right, '0%']\r
});\r
\r
$("#footer").transform({\r
- origin: ['100%', '100%']\r
+ origin: [right, '100%']\r
});\r
\r
$("#next").transform({\r
- origin: ['100%', '50%']\r
+ origin: [right, '50%']\r
});\r
\r
$("#previous").transform({\r
- origin: ['0%', '50%']\r
+ origin: [left, '50%']\r
});\r
},\r
resize: function(init) {\r
translateX: -40 * (1 - interfaceScale) + 'px'\r
})\r
\r
- $("#nav,#logo,footer").transform({\r
+ $("#nav,#logo,footer,#searchHints").transform({\r
scale: navScale\r
});\r
\r
}\r
\r
/* Header */\r
-header{position:relative;z-index: 1;}\r
+header{position:relative;}\r
\r
\r
#nav>a{\r
\r
#nav{\r
position:relative;\r
- z-index:12;\r
white-space: nowrap;\r
}\r
\r
height:22px;\r
width:140px;\r
margin:2px;\r
- background-color:#fff;\r
- color:#000;\r
display:block;\r
font-size:12px;\r
}\r
-.hint:hover{\r
- background-color:#000;\r
- color:#fff;\r
-}\r
\r
#searchHints{\r
- background:#fff;\r
border-radius:5px;\r
width:150px;\r
padding:5px;\r
display:none;\r
+ z-index: 25;\r
+ position:relative;\r
}\r
\r
#logo{\r