Databases
StackOverflow2013
Postsdbo
POjQuery custom content scroller plugin with iframe - probably CSS problems
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery custom content scroller plugin with iframe - probably CSS problems
    text
    copied!<p>I have been trying to use the <a href="http://manos.malihu.gr/jquery-custom-content-scroller/" rel="nofollow">Malihu jQuery custom content scroller plugin</a>. </p> <p>I've manage to get something working based off the demos provided with the plugin but when I try to adapt it to my existing code I run into problems. I think it has something to do the with the height, width and overflow attributes in the css. I've been playing around with them but am getting nowhere.</p> <p>If someone could help identify the differences between the working example and the broken one that'd be great.</p> <hr> <p>Working example: <a href="http://jsfiddle.net/XYd7G/" rel="nofollow">http://jsfiddle.net/XYd7G/</a></p> <p>Broken Example: <a href="http://jsfiddle.net/tKnz7/2/" rel="nofollow">http://jsfiddle.net/tKnz7/2/</a> - I can get it to replace the scrollbar but it doesn't seem to detect the overflow.</p> <p>Broken Example iFrame: <a href="http://fiddle.jshell.net/4gyDL/2/" rel="nofollow">http://fiddle.jshell.net/4gyDL/2/</a></p> <p><a href="http://jsfiddle.net/7NgG8/4/" rel="nofollow">http://jsfiddle.net/7NgG8/4/</a> - I'm trying create something exactly like this except replacing the content scrollbar.</p> <hr> <p>JS</p> <pre><code>$(".content").mCustomScrollbar({ autoHideScrollbar:true, theme:"light-thin" }); </code></pre> <hr> <p>HTML + CSS of Working Example:</p> <p>HTML</p> <pre><code>&lt;h1&gt;iframe demo&lt;/h1&gt; &lt;!-- content block --&gt; &lt;div class="content"&gt; &lt;iframe src="http://slipsum.com/" scrolling="no" width="100%" height="1000" frameborder="0"&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>body { margin:0; padding:0; color:#eee; background:#222; font-family:Verdana,Geneva,sans-serif; font-size:13px; line-height:20px; } .content{margin:40px; width:1040px; height:500px; overflow:auto;} </code></pre> <hr> <p>Relevant HTML + CSS of Broken Example:</p> <p>HTML</p> <pre><code>&lt;div id="sidebar" class="open"&gt; &lt;div class="nav"&gt; &lt;div class="tr"&gt; &lt;div class="top"&gt; &lt;ul&gt; &lt;li class="link"&gt;&lt;img src="_images/attributes/user.svg"&gt;&lt;/li&gt; &lt;li class="link"&gt;&lt;img src="_images/attributes/contribute.svg"&gt;&lt;/li&gt; &lt;li class="link"&gt;&lt;img src="_images/attributes/attribute2.svg"&gt;&lt;/li&gt; &lt;li class="link"&gt;&lt;img src="_images/attributes/attribute2.svg"&gt;&lt;/li&gt; &lt;li class="link"&gt;&lt;img src="_images/attributes/attribute2.svg"&gt;&lt;/li&gt; &lt;li class="link"&gt;&lt;img src="_images/attributes/attribute2.svg"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="tr"&gt; &lt;div class="middle"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="tr"&gt; &lt;div class="bottom"&gt; &lt;ul&gt; &lt;li class="link"&gt;&lt;img src="_images/attributes/attribute2.svg"&gt;&lt;/li&gt; &lt;li class="link"&gt;&lt;img src="_images/attributes/attribute2.svg"&gt;&lt;/li&gt; &lt;li class="link"&gt;&lt;img src="_images/attributes/attribute2.svg"&gt;&lt;/li&gt; &lt;li class="link"&gt;&lt;img src="_images/attributes/attribute2.svg"&gt;&lt;/li&gt; &lt;li class="current"&gt;&lt;img src="_images/attributes/attribute2.svg"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;iframe src="http://fiddle.jshell.net/4gyDL/2/show/" scrolling="no" frameborder="0"&gt;&lt;/iframe&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="dummy-column"&gt;&lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>html, body {height:100%; margin:0; padding:0;} #sidebar { position:fixed; top:0; bottom:0; overflow:auto; width: 20em; z-index:2; color: #ffffff; background-color: #303030; -moz-box-shadow: inset -30px 0 30px -10px #222; -webkit-box-shadow: inset -30px 0 30px -10px #222; box-shadow: inset -30px 0 30px -10px #222; -webkit-transition:margin 1s ease-in; -moz-transition:margin 1s ease-in; -ms-transition:margin 1s ease-in; transition:margin 1s ease-in; white-space: nowrap; } .nav{ display:table; height:100%; table-layout:fixed; width:3em; float: right; background-color: #2a2a2a; border-left: 2px groove #454545; -moz-box-shadow: inset -10px 0 10px -10px #000; -webkit-box-shadow: inset -10px 0 10px -10px #000; box-shadow: inset -10px 0 10px -10px #000; } /* iframe stuff is here */ .content { height:100%; position: fixed; width: 16.875em; float: right; display:inline-block; color:#eee; font-family: "Georgia", Sans-Serif; overflow-y: auto; overflow-x: hidden; } .content iframe{ width: 100%; height: 100%; } /* end of iframe stuff */ </code></pre> <hr> <p>iframe HTML:</p> <pre><code>&lt;div id="sidebar"&gt; &lt;div class="content"&gt; &lt;p class="title"&gt;MISSION CONTROL&lt;/p&gt; &lt;ul&gt; &lt;li class="heading"&gt;Recent Changes&lt;/li&gt; &lt;li class="sub-menu"&gt;&lt;ul&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;/ul&gt;&lt;/li&gt; &lt;li class="heading"&gt;Formatting&lt;/li&gt; &lt;li class="sub-menu"&gt;&lt;ul&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;/ul&gt;&lt;/li&gt; &lt;li class="heading"&gt;Categorise&lt;/li&gt; &lt;li class="sub-menu"&gt;&lt;ul&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;/ul&gt;&lt;/li&gt; &lt;li class="heading"&gt;Categorise&lt;/li&gt; &lt;li class="sub-menu"&gt;&lt;ul&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;li&gt;Content Sub-Menu&lt;/li&gt; &lt;/ul&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>iframe CSS:</p> <pre><code>html, body { margin:0; padding:0; height:100%} #sidebar { text-align: center; width: 16.875em; color: #ffffff; background-color: #333333; } .content { width: 16.875em; display:inline-block; color:#fff; } </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