We Keep Coding

Chrome DIV not fully painted

I am using Chrome version 41.0.2272.118.
There is a specific DIV on the page where if I change its contents by assigning its innerHTML or innerText then another DIV on the page is corrupted.
The result of the corruption is that the corrupted DIV's right padding is no longer drawn. However the DIV takes up the same space and it has the same width according to the developer tools. Additionally the corrupted DIV's bottom border is still drawn even though there is no div above it.
Oddly even though the div has the same width any text in the div is rewrapped and sentences in it take up more lines.
Changing the innerHTML or innerText of other DIVs on the page does not result in any corruption.
Sometime a later DOM modification can trigger fixing the corrupted DIV so that its right padding is again drawn and it is rewrapped the way it was before it was corrupted.
Here is a small example of the problem:
If an absolute div is within a table
If the content of the absolute div is changed using innerHTML in an asynchronous callback
And this was done before the asynchronous callback `document.body.style.cursor = "progress";
Then all cells in the first column of the table will be painted with the wrong width for the background
HTML:
<table>
<tr>
<td>
<div class="wrapper">
<div id="twoandthree">
<div id="two">two</div>
<div id="three">three</div>
</div>
</div>
</td>
</tr>
</table>
<button id="button">update two</button>
CSS:
#twoandthree {
position:relative;
min-width:80px;
overflow:hidden;
}
#two {
position: absolute;
white-space:nowrap;
display:inline-block;
}
#three {
float: right;
position:relative;
display:inline-block;
}
table {
border-spacing: 10px;
}
.wrapper {
background: lightblue;
}
JavaScript:
var two = document.getElementById("two");
var button = document.getElementById("button");
button.addEventListener('click', function () {
document.body.style.cursor = "progress";
setTimeout(function () {
document.body.style.cursor = "";
two.innerHTML = "aaa";
}, 500);
});
I would appreciate any help with this.
Thank you

Sometimes I notice weird rendering quirks with Chrome as well. Try applying -webkit-transform: translateZ(0) to your CSS force GPU acceleration.
Here is some more info about it: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

Print Window for every single record into new page [duplicate]

I have a dynamic table in my web page that sometimes contains lots of rows. I know there are page-break-before and page-break-after CSS properties.
Where do I put them in my code in order to force page breaking if needed?

You can use the following:
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
</style>
Refer the W3C's CSS Print Profile specification for details.
And also refer the Salesforce developer forums.

Wherever you want to apply a break, either a table or tr, you needs to give a class for ex. page-break with CSS as mentioned below:
/* class works for table row */
table tr.page-break{
page-break-after:always
}
<tr class="page-break">
/* class works for table */
table.page-break{
page-break-after:always
}
<table class="page-break">
and it will work as you required
Alternatively, you can also have div structure for same:
CSS:
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: always; }
}
Div:
<div class="page-break"></div>

I have looked around for a fix for this. I have a jquery mobile site that has a final print page and it combines dozens of pages. I tried all the fixes above but the only thing I could get to work is this:
<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div>
<div style="clear:both!important;"/> </div>

Unfortunately the examples above didn't work for me in Chrome.
I came up with the below solution where you can specify the max height in PXs of each page. This will then splits the table into separate tables when the rows equal that height.
$(document).ready(function(){
var MaxHeight = 200;
var RunningHeight = 0;
var PageNo = 1;
$('table.splitForPrint>tbody>tr').each(function () {
if (RunningHeight + $(this).height() > MaxHeight) {
RunningHeight = 0;
PageNo += 1;
}
RunningHeight += $(this).height();
$(this).attr("data-page-no", PageNo);
});
for(i = 1; i <= PageNo; i++){
$('table.splitForPrint').parent().append("<div class='tablePage'><hr /><table id='Table" + i + "'><tbody></tbody></table><hr /></div>");
var rows = $('table tr[data-page-no="' + i + '"]');
$('#Table' + i).find("tbody").append(rows);
}
$('table.splitForPrint').remove();
});
You will also need the below in your stylesheet
div.tablePage {
page-break-inside:avoid; page-break-after:always;
}

this is working for me:
<td>
<div class="avoid">
Cell content.
</div>
</td>
...
<style type="text/css">
.avoid {
page-break-inside: avoid !important;
margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */
}
</style>
From this thread: avoid page break inside row of table

When converting to PDF with SelectPdf I couldn't get a group of rows to stay together. Tried to put them in a <div style="break-inside: avoid;"> but that didn't work.
Nothing was working until I found this: https://stackoverflow.com/a/27209406/11747650
Which made me rethink my logic and place the things I didn't want to split inside a <tbody>.
<table>
<thead style="display: table-header-group;">
<tr>
<th></th>
</tr>
</thead>
-- Repeating content --
<tbody style="break-inside: avoid;">
-- First row from group --
<tr>
<td> Only shown once per group </td>
</tr>
-- Repeating rows --
<tr>
<td> Shown multiple times per group </td>
</tr>
</tbody>
This results in a table that has multiple <tbody> but that's something that is completely fine as many people use this exact pattern to group together rows.

If you know about how many you want on a page, you could always do this. It will start a new page after every 20th item.
.row-item:nth-child(20n) {
page-break-after: always;
page-break-inside: avoid;
}

I eventually realised that my bulk content that was overflowing the table and not breaking properly simply didn't even need to be inside a table.
While it's not a technical solution, it solved my problem to simply end the table when I no longer needed a table; then started a new one for the footer.
Hope it helps someone... good luck!

Here is an example:
Via css:
<style>
.my-table {
page-break-before: always;
page-break-after: always;
}
.my-table tr {
page-break-inside: avoid;
}
</style>
or directly on the element:
<table style="page-break-before: always; page-break-after: always;">
<tr style="page-break-inside: avoid;">
..
</tr>
</table>

We tried loads of different solutions mentioned here and elsewhere and nothing worked for us. However we eventually found a solution that worked for us and for us it seems to somehow be an Angular issue. I don't understand why this works, but for us it does and we didn't need any page break css in the end.
#media print {
ng-component {
float: left;
}
}
So just hoping this helps someone else as it took us days to fix.

You should use
<tbody>
<tr>
first page content here
</tr>
<tr>
..
</tr>
</tbody>
<tbody>
next page content...
</tbody>
And CSS:
tbody { display: block; page-break-before: avoid; }
tbody { display: block; page-break-after: always; }

jQuery slideDown() moves everything below downwards. How to prevent this?

I have a small problem with jQuery slideDown() animation. When this slideDown() is triggered, it moves all stuff below downwards too.
How do I make all the stuff below the <p> being slid down, remain stationary ?
Note:
I would prefer a solution where the change is done to the <p> element, or to the slideDown call or something. Because in my actual page, there is a lot of stuff below the <p> being slid down, so changing/re-arranging all of them will take much longer for me ~
Demo # JSFiddle: http://jsfiddle.net/ahmadka/A2mmP/24/
HTML Code:
<section class="subscribe">
<button id="submitBtn" type="submit">Subscribe</button>
<p></p>
</section>
<div style="padding-top: 30px;">
<table border="1">
<tr>
<td>This table moves</td>
<td>down when</td>
</tr>
<tr>
<td>slideDown()</td>
<td>is activated !</td>
</tr>
</table>
</div>
JavaScript:
$(function () {
$("#submitBtn").click(function (event) {
$(".subscribe p").html("Thanks for your interest!").slideDown();
});
});
CSS:
.subscribe p {
display: none;
}

You can position that element as absolute:
.subscribe p {
display: none;
position : absolute; // add this line
}
Demo: http://jsfiddle.net/A2mmP/25/
What's happening with your existing code is that the element starts out as display:none; so it doesn't take up any space at all until you slide it in and it is changed to display:block, hence the movement down of the following elements.
With position:absolute it doesn't take up space in that sense, it overlaps: in fact in my updated version of your fiddle you can see a slight overlap into the table underneath - you can obviously tweak margins on the table or whatever to make it fit the way you want.

All you need is to give a fixed height of your .subscribe.
.subscribe {
height: 50px;
}
.subscribe p {
margin: 0px;
display: none;
}
Here is the jsFiddle : http://jsfiddle.net/xL3R8/

Solution
We will put the sliding element in a div element with a fixed width, preventing the document flow from being affected by the slide event.
HTML
<section class="subscribe">
<button id="submitBtn" type="submit">Subscribe</button>
<!-- this is the modified part -->
<div><p></p></div>
</section>
CSS
.subscribe div
{
/* We force the width to stay a maximum of 22px */
height:22px;
max-height:22px;
overflow:hidden;
}
.subscribe div p {
display: none;
/* We reset the top margin so the element is shown correctly */
margin-top:0px;
}
Live Demo

The problem is your CSS, it will render as block and push the other elements down when it slides in. Set it to be absolutely positioned and change the z-index to be in front, or behind.
.subscribe p {
display: none;
position: absolute;
z-index: 100;
}
Fiddle

.subscribe p {
display: none;
margin :0px;
}

IMO a good UI practice would be to, remove the subscribe button, and instead show a message there like :
"Hurray! You have been subscribed"
e.g
http://jsfiddle.net/UvXkY/
$(function () {
$("#submitBtn").click(function (event) {
$("#submitBtn").slideToggle('slow', function(){
$(".subscribe p").html("Thanks for your interest!").slideDown();
});
});
});

The actual problem your facing is display:none which will remove the space for the element p
where as visiblity:hidden and showing will get ride of this problem
Even though it will not give the proper slideDown effects so you can use the position absolute and keep some spaces for the p element will solve your problem.
one of the solution
.subscribe p {
position:absolute;
display:none;
}
.subscribe
{
position:relative;
height:50px;
}
FIDDLE DEMO

using javascript to dynamically insert text with styles

I am working on a small little text box that will actively display different text without reloading the page. I use javascript to insert paragraphs of text based of which link the user clicks on. It works, however, i want to also insert style attributes to the dynamically inserted content. I want to do this because the background of the div is going to be black.
Here is my JS
function navClicked(x){
//alert("function activated");
//alert(x);
if (x == "aboutButton"){
//alert("About Button");
document.getElementById('information').innerHTML = "About Click";
}
else if(x == "faqButton"){
//alert("FAQ Button");
document.getElementById('information').innerHTML = "FAQ Click";
}
else if(x == "servicesButton"){
//alert("Services Button");
document.getElementById('information').innerHTML = "Services Click";
}
else{
//alert("Contact Button");
document.getElementById('information').innerHTML = "Contact Click";
}
}
Here is the html that goes with it
<body>
<div id="navigation">
<table cellpadding="5">
<tr>
<td>
<a onClick="navClicked('aboutButton');" style="cursor: pointer; cursor: hand;">ABOUT ATS</a>
</td>
</tr>
<tr>
<td>
<a onClick="navClicked('faqButton');" style="cursor: pointer; cursor: hand;">FAQ</a>
</td>
</tr>
<tr>
<td>
<a onClick="navClicked('servicesButton');" style="cursor: pointer; cursor: hand;">SERVICES</a>
</td>
</tr>
<tr>
<td>
<a onClick="navClicked('contactButton');" style="cursor: pointer; cursor: hand;">CONTACT</a>
</td>
</tr>
</table>
</div>
<div id="information">
<p>
content
</p>
</div>
</body>
and finally the CSS
<style>
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
p
{
color:white;
}
#navigation
{
height:145px;
float:left;
width:155px;
background:grey;
}
#navigation table
{
margin-left:auto;
margin-right:auto;
color:white;
}
#information
{
height:145px;
float:left;
width:290px;
background:black;
}
</style>
The final products works. However, whenever new text gets inserted to the box, it becomes black. And then you cannot read the text.
Here is a jsFiddle
http://jsfiddle.net/9xahg/
although it doesnt work in fiddle and im not sure why. But regardless, it works as intended in all browsers with the exception that you cannot read the new text.
How can I fix this?

Just add "color: white;" in #information CSS statement:
#information
{
height:145px;
float:left;
width:290px;
background:black;
color: white;
}
And it's work ;)

try adding
color: white;
to #information instead
it is because i have styled p elements with that and you dont print out a p element when you write the new text...
either that or you could also put a p element in when writing text:
document.getElementById('information').innerHTML = "<p>About Click</p>";

JQuery was made exactly for this so you could refer to HTML elements the same as you would in CSS. I'd highly advise you to use jQuery if you want to style elements using JavaScript. It'll pay off in the long run in time savings. Once you have it there is a specific .css() function to help you.

show / hide DOM elements in all browsers

I have something very simple but I can not make it work correctly in Webkit and Mozilla
This is my HTML
<li style="padding-bottom: 10px;" class='product'>
<span class ='handle' style="cursor:move; float:left; margin-top:40px; margin-right:8px; margin-bottom:30px; display:none;">
<%= image_tag "page/arrow.png"%>
</span>
<table >
<tr style="border:5px; solid: #444">
<td class="product_contents" style="vertical-align: top;" >
<div class="product_contents" style="width: 480px; font-size: 100%; font-weight: bold; color: #333; margin-bottom: 10px; word-wrap: break-word; overflow: auto;">
STUFF HERE
</div>
<p class="product_contents" style="width: 480px; font-size: 93%; line-height: 150%; word-wrap: break-word; overflow: auto;">
MORE STUFF HERE
</p>
</td>
</tr>
</table>
</li>
And this is my JQuery:
jQuery(function($) {
$(".product").mouseenter(
function () {
$(this).find(".handle").css('display', 'inline'); //show();
$(this).css('background-color','#fffdef');
$(this).find(".product_contents").css('width', '450px');
});
$(".product").mouseleave(
function () {
$(this).find(".handle").css('display', 'none'); //.hide();
$(this).css('background-color','#ffffff');
$(this).find(".product_contents").css('width', '480px');
});
});
Nothing fancy here at all and it works as I expect in Firefox. The image in handle appears on the left and it displaces the content to the right, the content also change colors and size to match the image. PErfect.
But in Webkit it changes the color and the size but there is no displacement. What I want to achieve is pretty basic, there is a better approach?
I can use Jquery but I can not use any plugin.

I'm not sure if I understood your problem right, but I would recommend to try jQuery's show/hide functions:
$(this).find(".handle").show();
$(this).find(".handle").hide();

This one works for me in Firefox, and fails for Conkeror (which was surprising), and fails for SRWare Iron (which is a Chrome-based browser).
The problem seems to be related to the fact that the table is inside a <li> element. For some reason, Firefox treats this table as an inline element, and the other browsers as a block element. Since it is a block element, the table is pushed to the next line, and is not displaced, because the handle is on the previous line. Changing the display style of the table to inline-table fixed the issue for me.

You can hide an element by using the CSS display property and setting it to none.
$("element").style.display = "none"; // hide element
$("element").style.display = "block"; // show element (or inline)