Adding divs manually not lining up

[sethen]

Hello,

I am working on a mobile project and came across this plugin. Good work. Looks straight forward enough.

Upon playing with the demos (namely the dom-paging-x.html demo) I came across this code:

var size = 400;
var frag = document.createDocumentFragment();
for (var cell=0, cl=content.clientWidth/size; cell<cl; cell++) {
    elem = document.createElement("div");
    elem.className = "cell";
    elem.style.backgroundColor = cell%2 > 0 ? "#ddd" : "";
    elem.innerHTML = cell;
    frag.appendChild(elem);
}
content.appendChild(frag);

Which is easy enough to understand on how it generates the divs for the content. When deleting this loop and adding your own divs into the content div with the same class name, the scrolling effect from page to page will be off.

For instance, if I were to add 4 divs with the class name of cell with a width of 400 and the content div width is at 1600, scrolling from cell to cell shows a bit of margin to the left after the second div and on. It doesn't add up exactly right except if it's generated with the above code that was in the demo.

I am curious to what's going on here. The class used in the CSS is exactly the same and the for loop is not adding anything different to the divs. What's going on here?

[saschagoebel]

Hi,

the number of the divs is dynamically calculated based on the browser width. Without further knowledge of your use case, I'd guess the scroller initialization might mismatch the actual content you're trying to scroll.

Also keep in mind that scroller only performs the math required for the scroling and the actual element transitions have to be performed by your code.

[sethen]

What's baffling to me is that the for loop provided generates the divs. Upon looking at the code in firebug, taking out the for loop, and putting those divs in the content div with everything that was dynamically generated doesn't exactly add up. That's what's puzzling. Same exact markup, different results.

[saschagoebel]

Could you please add a screenshot or short video of what "doesn't exactly add up" means?

[sethen]

This isn't necessary.

Download the code straight from the repo in a zip (as I did), open up the demo, delete the for loop code I posted inside one of the paging examples, add in the markup that was generated by the for loop and try it.

My results were the scroller didn't sit flush with the container when I tried scrolling it with my mouse. I was curious if I was using the plugin wrong or this was a bug in the code.

I have since found another plugin that doesn't have as many features as this may have, but does the job well. I just thought I would post this up here in case there is a bug.

Cheers.

[saschagoebel]

Hi,

I did exactly as you described. Removed the loop

/*  var frag = document.createDocumentFragment();
    for (var cell=0, cl=content.clientWidth/size; cell<cl; cell++) {
        elem = document.createElement("div");
        elem.className = "cell";
        elem.style.backgroundColor = cell%2 > 0 ? "#ddd" : "";
        elem.innerHTML = cell;
        frag.appendChild(elem);
    }
    content.appendChild(frag);*/

and added the elements directly into the content div

        <div id="content">
            <div class="cell" style="">0</div>
            <div class="cell" style="background-color: rgb(221, 221, 221);">1</div>
            <div class="cell" style="">2</div>
            <div class="cell" style="background-color: rgb(221, 221, 221);">3</div>
            <div class="cell" style="">4</div>
            <div class="cell" style="background-color: rgb(221, 221, 221);">5</div>
            <div class="cell" style="">6</div>
            <div class="cell" style="background-color: rgb(221, 221, 221);">7</div>
            <div class="cell" style="">8</div>
            <div class="cell" style="background-color: rgb(221, 221, 221);">9</div>
            <div class="cell" style="">10</div>
            <div class="cell" style="background-color: rgb(221, 221, 221);">11</div>
        </div>

and all elements are in the right order, scroll correctly and align correctly. I checked this in Chrome.

What environment are you testing in?

[sethen]

Sorry it's been a while. Here's a demo: http://wearelaunchbox.com/scroller/demo/dom-paging-x.html

This is not using the for loop that comes with the demo. I took the HTML from what you provided above and pasted it in. Get the same results across the board in Chrome, Safari and Firefox. If you swipe over, you will see that there is space that keeps piling up on the left.

This is not working correctly without the loop that's generating the content. I am not sure if this has something to do with the document fragment or not.

[saschagoebel]

Oh, the wonders of HTML. There's actually a small gap between the single boxes. You can see this by adding
outline: 1px solid red; to the .cell css rule.

Now to the fun part ... the gap is caused by whitespace in the html document. If you just write all divs on one line, everything works as expected.

Cheers,
Sascha

[sethen]

Hmm... That's very interesting. Why do you suppose the divs all have to be written on one line??

[saschagoebel]

Because the browsers renders a small gap between them if they are on separate lines, because there is a \r\n and some spaces.

I don't suppose, by the way, I changed it and the offset disappeared.

When you create the nodes programatically, there is no whitespace added, so the problem does not occur.

[sethen]

Interesting. I have never ran into this issue before creating content with for loops until trying to work with this. I'm not sure what differs in this case, but I have never seen a browser render some sort of break.

[saschagoebel]

I've seen this a thousand times in the old days of table driven web design. Apparently it's not completely solved yet :-D