We Keep Coding

Disqus comments are overlapping my footer

I have spent 10 hours on this issue but I am still unable to solve it. I am using bootstrap 3 with disqus comments. Somehow disqus comments are overlapping my footer. See following picture.
I have tried many tricks but none of them worked.
Following is my HTML code:
<div class="wrapper">
<div class="sections">
<div class="row">
.... truncated unnecessary code
<div id="comments">
<div id="disqus_thread"></div>
</div>
</div>
</div>
</div>
<footer>
.....
</footer>
CSS
.wrapper {
width:100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
.sections {
width: 100%;
padding-top: 20px;
border-bottom: #d8d8d8 solid 1px;
height: auto !important;
}
#comments {
width: 100%;
min-height: 350px;
height: auto !important;
}
Here is what I have done so far:
Changed iframe size using js but it does not work
setInterval(function() {
$('#comments').css({
'height': $('#disqus_thread').height() + 'px'
});
}, 1000);
Changed disqus_thread height to 400px but it does not change the height when new comments are posted
Used disqus onReady event to change the height of iframe but this one is also not working. Perhaps, disqus comments are loading after calling onReady event?
JS Code
this.callbacks.onReady = [function() {
resizeIframeWidth($('#disqus_thread iframe'));
}];
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}

You can handle the loaded events like this
// called by disqus
function disqus_config() {
this.callbacks.onReady = [function() {
// if your code respond to this event to resize the sidebar
$(window).trigger('resize');
}]; }

There are a heap of things it could be and you'd need to provide a link to your site where this occurs to diagnose properly. A code sample just isn't enough as the problem will becoming from your site's CSS (most likely).
Probably culprits:
no "clear:both" property on or between the comments and your footer.
alternatively, try clear:both; to #comments
the footer element has some crazy negative top margin, or has position: absolute.
I understand that it's jQuery that is causing a dynamically loaded object to break things. But the solution will actually be bullet proof CSS in my opinion.
Ensure that the following CSS properties:
clear:both;
width: 100%;
display:block;
float: none;
Are applied to the footer & comments ID's/elements or alternatively, that you have a full width block clearing element between the main area and the comments AND the comments and the footer. Alternatively, you might just get away with applying these to the #comments div (ie: just making it self clear, regardless of how high it goes).
If this STILL isn't working, put overflow:hidden on your #comments. It won't be wonderful, but at least it will stop the behaviour you describe :)

I solved this problem by removing position:relative from .sections css rule.

CodeMirror . Disabling Vertical scroll bar

I am currently using CodeMirror to edit CODE in text area in browser. If i have more than 20 lines of code, it is adding a vertical scroll bar to right. But i do not need this scroll bar. Instead i need the editor size to grow vertically.
Can anyone help ?

In CodeMirror 3, there is an option to disable the scrollbars : scrollbarStyle: "null"
From the documentation :
scrollbarStyle: string
Chooses a scrollbar implementation. The default is "native", showing native scrollbars. The core library also provides the "null" style, which completely hides the scrollbars. Addons can implement additional scrollbar models.
Combining this with :
automatic height: height: auto & viewportMargin: Infinity (Example: http://codemirror.net/demo/resize.html)
wrapping lines: lineWrapping: true
And then controlling the height/width of the parent div works well

The CodeMirror doco talks about a style CodeMirror-scroll which controls whether a scrollbar appears, and whether the textarea expands to fit the content. Specifically it says:
CodeMirror-scroll
Whether the editor scrolls (overflow: auto + fixed height). By default, it does. Setting the CodeMirror class to have height: auto and giving this class overflow-x: auto; overflow-y: hidden; will cause the editor to resize to fit its content.
Thus the idea is to add to your own CSS something like:
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
.CodeMirror-scroll {
overflow-y: hidden;
overflow-x: auto;
}
as illustrated here in the official demo that accompanies the documentation on the style CodeMirror-scroll.
What worked for me:
For my personal situation using CodeMirror 2.34 all I did was add the following style to my own stylesheet:
div.CodeMirror-scroll { height: auto!important; overflow: visible; }
CodeMirror 3:
In my brief initial testing of CodeMirror 3, both the above techniques didn't work and I still got the scrollbars. Interesting, since you'd think the official doco on subject would be valid - unless CodeMirror 3 has changed its styles a bit and the doco hasn't caught up yet...

For me wrapping codemirror textarea on an element with display:flex, fixed the unwanted horizontal scroll issue:
<div style='display: flex'>
<textarea></textarea>
</div>
<script>
//codemirror setup
</script>

javascript web print. print a logo in the header of every page

My trouble is I don't know how many pages it has when printing.
I have used the following CSS:
#media print {
.barcode{
position: fixed;
}
}
So that the image appears in each page when printing. but on the second page or third page the image will overlap the content of the page as the screenshot.

You can try something like this:
HTML
<div class='barcode'><!-- Barcode content --></div>
CSS
.barcode { display:none; }
#media print {
.barcode { display: block; position: fixed; top: -20px; height: 50px; }
}
The div needs to be positioned fixed in order to appear on every printed page. You can try adjusting the top property to position and move it above the content.

After reconsidering this, a much better solution would be to generate a PDF version of the page for printing. Then you'll have much more control. There are numerous PDF libraries out there for all server languages.

It's not possible to control this directly. What you can try to do is regularly force page breaks and apply a height to that spacer div. For example:
#media all
{
div.page-break { display:none; }
}
#media print
{
div.page-break { display:block; height: 100px; page-break-before:always; }
}
This will only work, though, if you place enough <div class="page-break"></div>s in your page such that one appears before every natural page break would occur.
Reference: http://davidwalsh.name/css-page-breaks

I don't speak english, sorry. I solved similar issue following instruction on this page : http://thewebthought.blogspot.com/2011/10/html-css-header-and-footer-elements-for.html

Auto fit CSS attribute to textarea

I am working on web application.
I wanted to apply auto height to textarea using CSS, dont want to use any script, jquery plugin and other stuff.
After applying class ( i.e. style property ) to textarea, it should automatically increase it's height not width as per content present it in.
In this case width should be fixed i.e. width: 98%; (In my case) only height needs to grow. So scroll bars should exist for text area.
I simply needed one CSS so that after applying to textarea, it should be auto grow like <DIV>.
Please folks do sugggest, is this possible using CSS. If this is not possible, then m okey if i get javascript statments to acheives my requirement.
Thanks,
Pravin

It's sort of semi-doable in html/CSS. There are, however, the usual caveats of browser support and, since it uses html5's contenteditable, it requires a fairly modern browser.
That said, the following works (in Chrome/Ubuntu 10.04):
<div id="wrap">
<div id="editThis" contenteditable>
</div>
</div>
With the following CSS:
div#editThis {
min-height: 4em;
height: auto;
width: 50%;
margin: 0 auto;
}
div#editThis:hover,
div#editThis:focus {
border: 1px solid #000;
}
Demo posted at jsbin

If you're only displaying text in a textarea and not using it to get more content input from the user then consider using a div and styling it to look like a textarea.
the other thing i have seen is an auto expanding textarea that grown in height as you type.
see here: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

This is not possible with pure CSS, you will need to use JavaScript

Adding a text footer to the bottom of every printed page when a web page is printed

Is there a technique for adding a text footer the bottom of each page when it is printed? For example "Copyright My Company 2010" - I know there is probably a way to do this with a background image using CSS, but I would really like to use text for this portion so the client can edit it. Any ideas?

CSS doesn't have any notion of page media, so it's going to be impossible to guarantee where the page breaks are going to occur naturally.
EDIT As pointed out below, CSS 2.1 did introduce #page as a way to deal with paged media, but it was never implemented across the common browsers. So, as I wrote above, it doesn't exist, although that's not technically true.
You can set hard page breaks, e.g. by placing a <div class="page-break"> at the approximate locations. You can then style it with page-break-before:always to ensure that a break happens there.
There's also a page-break-after property; but then you don't know how far down the page the element starts. So, when you need to position it, the only thing you can use is position:absolute;bottom:0 which wouldn't fix it to the page media, but to the bottom of the whole document.
If you use page-break-before then you know it always appears at the top of the page. Then, you can use position:absolute without giving a top or bottom, which results in only taking it out of the document flow. Then, giving it a height of 720pt (10 inches) means you have a bottom edge that you can position content against.
Here's how I would tackle it:
/* hide the page footer on screen display */
.page-break { display: none; }
#media print {
/* make a 10-inch high block that sits on top of the page content */
.page-break {
page-break-before: always;
display: block;
position: absolute;
height: 720pt;
}
/* stick the contents of .page-break to the bottom of the 10 inch block */
.page-break .copyright {
position: absolute;
bottom: 0px;
}
}
However, I have no idea how well browsers actually support this in reality. I remember playing with page breaks a while back, and ended up giving up because I couldn't get them to work reliably enough. I suspect it's still either impossible or very hackish and unreliable.

The W3C Working Draft for CSS Paged Media Module Level 3 contains a method to print in the margins.
Try this code, but it might not be widely supported yet.
#page {
margin: 2cm; 2cm; 2cm; 2cm;
#bottom-center { content: "Copyright My Company 2010" }
#top-right { content: counter(page) }
}