Databases
StackOverflow2013
Postsdbo
PODifferent Browser problems, jQuery or css error
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODifferent Browser problems, jQuery or css error
    text
    copied!<blockquote> <p><strong>Possible Duplicate:</strong><br> <a href="https://stackoverflow.com/questions/12685327/jquery-positioning-porblem">jQuery positioning porblem</a> </p> </blockquote> <p>Okey guys if you see the link on FF 15 it's good.</p> <p><a href="http://www.mbu.mn/test/" rel="nofollow noreferrer">http://www.mbu.mn/test/</a></p> <p>and the other browsers it will break. Break means it's not overlaying the exact size. it goes more to the left so it looks bad. My english is very bad so please understand my problem :P</p> <p>Please help on this one. </p> <p>Ok the Html is like </p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;Nofu Entertaiment&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="css/jquery.pageslide.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;&lt;a href="javascript:$.pageslide.close()"&gt;Close&lt;/a&gt;&lt;/p&gt; &lt;div id="main"&gt; &lt;div id="content"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#modal" class="second"&gt;Click This ..&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#modal1" class="second"&gt;Click This ..&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div id="modal"&gt; &lt;h2&gt;Modal&lt;/h2&gt; &lt;p&gt;This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call &lt;code&gt;$.pageslide.close()&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;&lt;a href="javascript:$.pageslide.close()"&gt;Close&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div id="modal1"&gt; &lt;h2&gt;testing 1 2 3&lt;/h2&gt; &lt;p&gt;test test &lt;code&gt;$.pageslide.close()&lt;/code&gt;.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt; &lt;script src="js/jquery.pageslide.min.js"&gt;&lt;/script&gt; &lt;script&gt; /* Default pageslide, moves to the right */ $(".first").pageslide(); /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */ $(".second").pageslide({ direction: "left", modal: true }); &lt;/script&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>and The css is </p> <pre><code>body { margin: 0 auto; } #main { margin: 0 auto; width: 600px; } #content { width: 600px; margin: 0 auto; background: #999999; } #content h1 { color: #333; line-height: 1em; } #content ul { padding-left: 0; list-style: none; } #content ul li { margin-bottom: 20px; } #modal { display: none; } #modal a { background: #CCC; color: #333; font-weight: bold; padding: 5px 10px; border: none; float: left; } #modal a:hover { background: #aaa; } #modal1 { display: none; } #modal1 a { background: #CCC; color: #333; font-weight: bold; padding: 5px 10px; border: none; } #modal1 a:hover { background: #aaa; } #pageslide { /* These styles MUST be included. Do not change. */ display: block; margin: 0 auto; position: fixed; top: 0; height: 100%; z-index: 999999; /* Specify the width of your pageslide here */ width: 600px; /* These styles are optional, and describe how the pageslide will look */ background-color: #333; color: #FFF; -webkit-box-shadow: inset 0 0 5px 5px #222; -moz-shadow: inset 0 0 5px 5px #222; box-shadow: inset 0 0 5px 5px #222; position: absolute; overflow: hidden; } </code></pre> <p>And the jquery is </p> <pre><code>/* * jQuery pageSlide * Version 2.0 * http://srobbin.com/jquery-pageslide/ * * jQuery Javascript plugin which slides a webpage over to reveal an additional interaction pane. * * Copyright (c) 2011 Scott Robbin (srobbin.com) * Dual licensed under the MIT and GPL licenses. */ ;(function(b){function j(e,a){if(0===e.indexOf("#"))b(e).clone(!0).appendTo(c.empty()).show();else{if(a){var d=b("&lt;iframe /&gt;").attr({src:e,frameborder:0,hspace:0}).css({width:"100%",height:"100%"});c.html(d)}else c.load(e);c.data("localEl",!1)}}function k(b,a){var d=c.outerWidth(!0),f={},g={};if(!c.is(":visible")&amp;&amp;!h){h=!0;switch(b){case "left":c.css({margin:"0 0 0 600px"});f["margin"]="0 auto"+d;g.right="+="+d;break;default:c.css({left:"-"+d+"px"}),f["margin"]="0 auto"+d,g.left="+="+d}l.animate(f,a);c.show().animate(g,a,function(){h=!1})}}var l=b("#main"),c=b("#pageslide"),h=!1,m;0==c.length&amp;&amp;(c=b("&lt;div /&gt;").attr("id","pageslide").css("display","none").appendTo(b("#main")));b.fn.pageslide=function(e){this.click(function(a){var d=b(this),f=b.extend({href:d.attr("href")},e);a.preventDefault();a.stopPropagation();c.is(":visible")&amp;&amp;d[0]==m?b.pageslide.close():(b.pageslide(f),m=d[0])})};b.fn.pageslide.defaults={speed:500,direction:"right",modal:!1,iframe:!0,href:null};b.pageslide=function(e){var a=b.extend({},b.fn.pageslide.defaults,e);c.is(":visible")&amp;&amp;c.data("direction")!=a.direction?b.pageslide.close(function(){j(a.href,a.iframe);k(a.direction,a.speed)}):(j(a.href,a.iframe),c.is(":hidden")&amp;&amp;k(a.direction,a.speed));c.data(a)};b.pageslide.close=function(c){var a=b("#pageslide"),d=a.outerWidth(!0),f=a.data("speed"),g={},i={};if(!a.is(":hidden")&amp;&amp;!h){h=!0;switch(a.data("direction")){case "left":g["margin"]="0 auto"+d;i.right="-="+d;break;default:g["margin"]="0 auto"+d,i.left="-="+d}a.animate(i,f);l.animate(g,f,function(){a.hide();h=!1;"undefined"!=typeof c&amp;&amp;c()})}};c.click(function(b){b.stopPropagation()});b(document).bind("click keyup",function(e){"keyup"==e.type&amp;&amp;27!=e.keyCode||c.is(":visible")&amp;&amp;!c.data("modal")&amp;&amp;b.pageslide.close()})})(jQuery); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload