JS/CSS: Fixed background image issue on Opera 10.50

The BG image would disappear when there is an HTML element with a
negative positioning. Replaced the negative positioning with a
display: hidden.

2 files changed, 26 insertions, 25 deletions

diff --git a/data/script.js b/data/script.js
index f12e9481..521c30df 100644
--- a/data/script.js
+++ b/data/script.js
@@ -189,7 +189,7 @@ function ivInit() {
       l[i].onclick = ivView;
     }
   if(init && !byId('iv_view')) {
-    addBody(tag('div', {id: 'iv_view'},
+    addBody(tag('div', {id: 'iv_view','class':'hidden'},
       tag('b', {id:'ivimg'}, ''),
       tag('br', null),
       tag('a', {href:'#', id:'ivfull'}, ''),
@@ -197,7 +197,7 @@ function ivInit() {
       tag('a', {href:'#', onclick: ivView, id:'ivprev'}, '« '+mt('_js_iv_prev')),
       tag('a', {href:'#', onclick: ivView, id:'ivnext'}, mt('_js_iv_next')+' »')
     ));
-    addBody(tag('b', {id:'ivimgload'}, mt('_js_loading')));
+    addBody(tag('b', {id:'ivimgload','class':'hidden'}, mt('_js_loading')));
   }
 }
 
@@ -253,9 +253,9 @@ function ivView(what) {
   dw = dw < 200 ? 200 : dw;
 
   // update document
-  view.style.display = 'block';
+  setClass(view, 'hidden', false);
   setContent(byId('ivimg'), tag('img', {src:u, onclick:ivClose,
-    onload: function() { byId('ivimgload').style.top='-400px'; },
+    onload: function() { setClass(byId('ivimgload'), 'hidden', true); },
     style: 'width: '+w+'px; height: '+h+'px'
   }));
   view.style.width = dw+'px';
@@ -264,13 +264,13 @@ function ivView(what) {
   view.style.top = ((wh - dh) / 2 + st - 20)+'px';
   byId('ivimgload').style.left = ((ww - 100) / 2 - 10)+'px';
   byId('ivimgload').style.top = ((wh - 20) / 2 + st)+'px';
+  setClass(byId('ivimgload'), 'hidden', false);
   return false;
 }
 
 function ivClose() {
-  byId('iv_view').style.display = 'none';
-  byId('iv_view').style.top = '-5000px';
-  byId('ivimgload').style.top = '-400px';
+  setClass(byId('iv_view'), 'hidden', true);
+  setClass(byId('ivimgload'), 'hidden', true);
   setText(byId('ivimg'), '');
   return false;
 }
@@ -288,13 +288,13 @@ function ddInit(obj, align, contents) {
   document.onmousemove = ddMouseMove;
   document.onscroll = ddHide;
   if(!byId('dd_box'))
-    addBody(tag('div', {id:'dd_box', dd_used: false}));
+    addBody(tag('div', {id:'dd_box', 'class':'hidden', dd_used: false}));
 }
 
 function ddHide() {
   var box = byId('dd_box');
   setText(box, '');
-  box.style.left = '-500px';
+  setClass(box, 'hidden', true);
   box.dd_used = false;
   box.dd_lnk = null;
 }
@@ -333,6 +333,7 @@ function ddRefresh() {
   if(content == null)
     return false;
   setContent(box, content);
+  setClass(box, 'hidden', false);
 
   var o = lnk;
   ddx = ddy = 0;
@@ -606,7 +607,7 @@ function dateSerialize(div) {
 function dsInit(obj, url, trfunc, serfunc, retfunc, parfunc) {
   obj.setAttribute('autocomplete', 'off');
   obj.onkeydown = dsKeyDown;
-  obj.onblur = function() { setTimeout(function () { byId('ds_box').style.top = '-500px'; }, 500) };
+  obj.onblur = function() { setTimeout(function () { setClass(byId('ds_box'), 'hidden', true) }, 500) };
   obj.ds_returnFunc = retfunc;
   obj.ds_trFunc = trfunc;
   obj.ds_serFunc = serfunc;
@@ -615,7 +616,7 @@ function dsInit(obj, url, trfunc, serfunc, retfunc, parfunc) {
   obj.ds_selectedId = 0;
   obj.ds_dosearch = null;
   if(!byId('ds_box'))
-    addBody(tag('div', {id: 'ds_box'}, tag('b', mt('_js_loading'))));
+    addBody(tag('div', {id: 'ds_box', 'class':'hidden'}, tag('b', mt('_js_loading'))));
 }
 
 function dsKeyDown(ev) {
@@ -641,7 +642,7 @@ function dsKeyDown(ev) {
     if(obj.ds_returnFunc)
       obj.ds_returnFunc();
 
-    byId('ds_box').style.top = '-500px';
+    setClass(byId('ds_box'), 'hidden', true);
     setContent(byId('ds_box'), tag('b', mt('_js_loading')));
     obj.ds_selectedId = 0;
     if(obj.ds_dosearch) {
@@ -701,7 +702,7 @@ function dsSearch(obj) {
 
   // hide the ds_box div
   if(val.length < 2) {
-    box.style.top = '-500px';
+    setClass(box, 'hidden', true);
     setContent(box, tag('b', mt('_js_loading')));
     obj.ds_selectedId = 0;
     return;
@@ -720,6 +721,7 @@ function dsSearch(obj) {
   box.style.left = ddx+'px';
   box.style.top = ddy+'px';
   box.style.width = obj.offsetWidth+'px';
+  setClass(box, 'hidden', false);
 
   // perform search
   ajax(obj.ds_searchURL + encodeURIComponent(val), function(hr) {
@@ -752,7 +754,7 @@ function dsResults(hr, obj) {
       obj.value = obj.ds_serFunc(this.ds_itemData, obj);
       if(obj.ds_returnFunc)
         obj.ds_returnFunc();
-      box.style.top = '-500px';
+      setClass(box, 'hidden', true);
       obj.ds_selectedId = 0;
     };
 
diff --git a/data/style.css b/data/style.css
index 50f50689..191ea231 100644
--- a/data/style.css
+++ b/data/style.css
@@ -102,7 +102,7 @@ b.todo { font-weight: normal; color: $statnok$ }
   height: 0;
 }
 .hidden {
-  display: none
+  display: none!important
 }
 
 b.spoiler, b.spoiler a {
@@ -120,7 +120,7 @@ b.spoiler_shown { font-weight: normal }
   text-align: left;
 }
 .linethrough { text-decoration: line-through }
- pre {
+pre {
   padding:1px 5px;
   margin: 5px 15px;
   border: 1px dotted $border$;
@@ -700,7 +700,7 @@ a.addnew {
 #screenshots p.nsfwtoggle { float: right; margin: 0; }
 
 
-#dd_box { position: absolute; left: -500px; border: 1px solid $border$; background-color: $secbg$; }
+#dd_box { position: absolute; left: 0px; border: 1px solid $border$; background-color: $secbg$; }
 #dd_box ul { list-style-type: none; margin: 0; padding: 0 }
 #dd_box li b { display: block; font-weight: normal; padding-left: 5px; }
 #dd_box li i { display: block; font-style: normal; padding-left: 10px; padding-right: 5px }
@@ -749,7 +749,7 @@ b.datepart b { font-weight: normal }
 
 #ds_box {
   position: absolute;
-  top: -500px;
+  top: 0;
   border: 1px solid $border$;
   border-top: none;
   background-color: $secbg$;
@@ -778,7 +778,7 @@ b.datepart b { font-weight: normal }
 #scr_table td { height: 108px; border-top: 1px solid #258; padding: 0; padding-right: 5px }
 #scr_table td.thumb { width: 136px; vertical-align: middle }
 #scr_table select { width: 400px; }
-div.scr_uploader { visibility: hidden; overflow: hidden; width: 1px; height: 1px; position: absolute; left: -500px; top: -500px; }
+div.scr_uploader { visibility: hidden; overflow: hidden; width: 1px; height: 1px; position: absolute; display: none; left: 0; top: 0; }
 
 
 
@@ -1112,9 +1112,8 @@ div.revision .item {
 
 div#iv_view {
   position: absolute;
-  display: none;
-  top: -5000px;
-  left: -5000px;
+  top: 0px;
+  left: 0px;
   background: url($_boxbg$) repeat;
   border: 1px solid $border$;
   padding: 5px;
@@ -1127,10 +1126,10 @@ div#iv_view {
 #ivprev { padding-right: 5px; }
 #ivfull { float: left; padding-right: 10px; }
 #ivimgload {
-  display: block;
   position: absolute;
-  left: -500px;
-  top: -50px;
+  display: block;
+  left: 0;
+  top: 0;
   width: 100px;
   padding: 3px;
   background-color: #f5f5f5; /* no real need to skin this */