We Keep Coding

jQuery scrolling doesn't show up

I'm writting a dynamic page using jQuery and I have a problem. I'm for example adding to my html file div's using append() function like this:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'></div>");
I will be creating different amount of that div's base on datebase so that's why I use this variable i to assign different id's for each div.
My problem is that even if I'm creating that div's in body and when I look at code they are in it, if I check body's height it is 0 (width is ok, something like 1200).
Main problem with that is when there are too many div's they are beyond screen but there is no scroll bar. It's something like div's aren't in body although in code they are in.
Could you propose me any solution for that? Or what am I doing wrong? My line of thought is that I'm using $(document).ready so html file is creating a page, but see empty body so height = 0 and all my div's are beyond body. What do you think about that?

Take care of positioning; position:fixed removes your divs from normal flow ->
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
as W3C says

An empty <div> does not have a height. Thus you could add as many as you want to the page and it will never get any longer. For the scroll-bar to appear you need to either set a height to the <div> with CSS like this:
.diamond_div{
height:100px;
}
Or add some content to the <div> so you would have something like this instead:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'>hello</div>");
Then your <div> would have height and once there are enough on the page to go beyond the height of the browser, the scroll-bar will then appear.
Following on from your comments. Setting the position to "fixed" removes the element from the workflow and thus will not extend the length of the page in the normal way.

Javascript: Visibility

Been working on the same problem and am now trying to use a different solution using visibility:hidden; visibility:visible; . The issue I am having is not making something visible or hidden, but rather combining two elements to play off each other. For example here is what I have:
<div id="external"></div>
<div>
<img src="../../images/labortab.png" style="float:left; width:38px; height:125px;" id="labor" onmousedown="document.external.visibility='false';document.external.visibility='true';"/>
<img src="../../images/odctab.png" style="float:left; width:38px; height:125px;" id="odc" onmousedown="document.external.visibility='true';document.external.visibility='false';"/>
</div>
When I click on the first image or button, I want the external div to switch from its current state of visible to off and replace that div with another element already in the div that is hidden, switching this element to true and holding it there.
Then I want the second image or button to do the exact opposite switching the states from off to visible of the first element and then turning the 2nd element off. I am not good at writing JavaScript code and reading some of the solutions online are Greek to me. So if anyone understands what I'm trying to do would be much appreciated.

It looks like you are trying to toggle the visibility of the div based on a click event to one of the images. Try using the event onclick instead, and correctly reference the div's DOM properties:
document.getElementById('external').style.visibility='hidden';
Here is an example.

You're probably better off using style.display='hidden' instead of the the visibility property. That would look something like this:
document.getElementById('id').style.display = 'hidden'
to hide
and
document.getElementById('id').style.display = 'block'
//or inline or inline-block as needed
to show again.

How to measure word/caret position in Google Docs?

For those who haven't worked with the Google Docs editor here's a short explanation of how it works:
Google Docs has no visible editable textarea or contentEditable elements.
Google Docs listens for keydown/press/up in a separate iFrame where they place the OS cursor for event listening.
When the iFrame catches an event Google handles it by performing the equivalent operations on the visible document.
The "caret" in Google Docs is a DIV that is styled and scripted to look and act like an OS cursor.
With that out of the way, here's my request:
I'm working on a plugin that interacts with the Google Doc and I need to be able to do two things:
Highlight words with an opaque overlay DIV.
Determine cursor position inside a word.
I've been exhausting a lot of ideas about just how to handle this, but so far I've only manage to get a buggy solution for the latter problem (I perform a backspace, determine where the text changed and undo the backspace).
I'm looking for all the best ideas you can come up with to solve these problems. They don't need to be cross browser, but they do need to be able to be turned into something robust that will also handle things such as font size changed mid line.
A little bit of extra info explaining what a Google Doc looks like in HTML:
<wrapper> // Simplified wrapper containing margins, pagination and similar
<div class="kix-paragraphrenderer"> // single DIV per page wrapping all content
// Multiple paragraphs separated by linebreak created by Enter key:
<div class="kix-paragraphrendeder">...</div>
<div class="kix-paragraphrendeder">...</div>
<div class="kix-paragraphrendeder">
// Multiple wrapper divs created by Google's word wrapping:
<div class="kix-lineview">...</div>
<div class="kix-lineview">...</div>
<div class="kix-lineview">
// Single inner wrapper, still full width of first wrapper paragraph:
<div class="kix-lineview-content">
// Single wrapper SPAN containing full text of the line, but not display:block
<span class="kix-lineview-text-block">
// Multiple spans, one per new font change such as normal/bold text,
// change in font size, indentation and similar:
<span>This is normal text</span>
<span style="font-size:40px; padding-left:4px;">This larger text.</span>
<span style="font-weight:bold; padding-left:10px;">This is bold text</span>
<span style="padding-left:4px;">More normal text</span>
</span>
</div>
</div>
</div>
</div>
</wrapper>

After more tinkering I came to the conclusion that it is extremely troublesome - if not impossible - to try and programmatically determine cursor position with regard to a letter inside a <span>, simply because the <span> is the smallest element that is measurable (correct me if I am wrong).
So how to solve the problem? Here's what I ended up doing:
I create an offscreen positioned <div>
I get the text of the current paragraph (<div class="kix-paragraphrenderer">) - I could get the entire text, but wanted to limit the computational load.
I extract each single character of the paragraph by looping through its children in the following way:
Loop through linveviews of the paragraph (<div class="kix-lineview">)
Get the lineview content (<div class="kix-lineview-content">)
Loop through text blocks of the lineview content (<span class="kix-lineview-text-block">)
Loop through <span>'s of the text block
Loop through innerText of the <span>
I append each character in my offscreen <div> with the currently applied style extracted from style.cssText of the current <span>
For each character appended I measure the width of the <div> and save this in an array. I now have a position of each single character.
I measure the position of the cursor relative to my widths and voila - I know where the cursor is positioned in the text.
This is obviously a bit simplied (I left out details about margins and paddings of the different elements), but it covers the idea behind how it's possible to get the cursor position.
It works quite well, but there are many pitfalls and a lot of measuring required. On top of that it's also required to post-parse the text if you want to use it for anything, since tabs, spaces and linebreaks aren't always included in innerText (depending on where these are in the text, Google may or may not make them through positioning of new elements).

I made something like Kix two years ago Google Docs. And for any HTML design and yes, for IE6 too :-) How? All we need is to compute letter absolute position. How? Replace textNode with inline element without layout, that's important, and then use Element.getClientRects I remember I also needed wrap just letter and compute its position via fast and reliable https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
The trick how to detect lines and wraps for home and end keys was based on some vertical heuristic letter position change. Something like if base line is different, than stop caret walking. It was pretty fast and with any markup and without any caching. Holy grail :)
The only not resolvable problem was justified text, because letters were distributed randomly and spaces between them was not computable.
That project is dead http://webeena.com now. Bad management killed it (and me almost too).

Browsers reformat my HTML which results in different look

EDIT: I found that the issue is actually that IE changes an HTML elements class text from:
"<img class="blah".." to "<img class=blah..".
This is only happening in IE for me. Note it doesn't remove the src quotation marks or the id quotation marks or others. This is sooo frustrating!
I am using JQuery to update a website visually, Inside my main div(updatableDiv) I change each updatable HTML element(for eg an p, i, b, etc.) into a textarea. The user makes their textual changes then I change the textareas back to a p, b etc. This is all done using JQuery.
My Problem: When I go to get the HTML from the div(with the id updatableDiv), my HTML is slightly different which results in the display of the HTML being slightly different. For example: if I have an image thats sits directly above a white box(not vertical gap in between), after I update the html, there is a vertical gap introduced in between the image & the white box.
So the before html was(this is an example from IE):
<img class="pageHeading" src="linksHeading.png" width="90%" alt=""/><div class="pageContent">
After getting the HTML using the call $("#updatableDiv").html() the html looks like this:
<IMG class=pageHeading alt="" src="linksHeading.png" width="90%">
<DIV class=pageContent>
So it results in a vertical gap.
So my main question is how can I keep all the formatting of the HTML so problems like this dont occur after I update the HTML & get the HTML from the element by JQuery's $("#updatableDiv").html()?

Make the img display: block.

When you get the innerHTML in some versions of IE, it will NOT give you back your original HTML. It will give you a generated version of the HTML that can be quite different from the original (though semantically identical to it).
I've seen some versions of IE:
Remove quote marks around attributes
Change the order of attributes
Change the case of attribute names
So, in a nutshell, all you can count on when you get the innerHTML of something in IE is that it will give you semantically the same HTML, but it may not be the same HTML as what was in the page originally. It appears that it doesn't save the original HTML, but instead generates it from the object attributes. Since there are many legal ways to express a given set of attributes, IE will not necessarily generate it the same way you originally specified it.
I don't believe there is anything you can do about this unless you want to reformat the generated HTML that IE gives you according to your own style rules (add quotes where you want them, put attributes in a specific order, change to a specific case, etc...).
If you run this jsFiddle in IE7, you will see it change all three items above from what was originally specified.
I specify this HTML in IE7:
<div id="test" data-item="test" style="background-color: red; height: 40px; width: 100px;">
When I request innerHTML, I get this back (different order, caps and quoting):
<DIV style="BACKGROUND-COLOR: red; WIDTH: 100px; HEIGHT: 40px" id=test data-item="test"></DIV>
I'd actually be surprised if the vertical gap you notice is because of the changed HTML. IE is notorious for putting extra space around images. For one, they are an inline item by default so it treats them as being part of a line and gives the line they are on the prevailing line height. This can add extra space around images in various ways. The work-arounds I've used in IE are to make the image display: block (if that's appropriate) or to set font-size: 0 on the container that the image is in so IE doesn't give the line any additional height. You should also make sure that you've specified a border for the image because older versions of IE like to give images a default border too.
This extra spacing around an image can be triggered by the existence of a space in a line that didn't previously exist. Other browsers consider that space only as a separator, but in older versions of IE, it triggers some extra line spacing.

White-space in the source shouldn't matter. You're not losing (or adding) some CSS class information during the transition are you?
img elements are inline by default, so normally they line up to the text baseline leaving a gap that is the extra space below the baseline for dangling letters like lowercase g. Block elements should line up with the bottom of the containing block.
Try setting some CSS:
img { display:block; }
// or possibly
img { vertical-align:bottom; }

CSS Page Layout w/ Breaks

I'm trying to make a webpage where it basically looks like a word document. There would be multiple boxes that would scroll down and the text would flow and page break from one page to the next.
Does anyone have any idea where I would even start? Thanks.
Edit: It should be right in the browser, looking similar to this:
(Ignore the columns)

CSS mostly applies styles to a full element due to its box model. Exceptions are pseudo elements. So to create an appropriate break after a fixed length you would have to separate your text into correctly sized different elements.
EDIT:
It would be possible using javascript. But even in the simplest case, where everything inside the pages delivered as just one text element with no sub elements (not even other text elements), the code will be a development nightmare and will run quite crappy. This is because there is no measure function in javascript. So you would be forced to do trail and error to find the correct position to break the element. Since the properties of the elements are live it means, that the viewer of the website will see a lot of flickering of your page just after loading. If you dare put other elements inside the html element to break into pages you get even more problems. More or less you get hundreds of special cases (break inside other elements, what if those elements are inside even other elements) to look out for.

Something like that sounds possible using javascript, but it depends a bit on the structure of your html and whether or not you want to break paragraphs or just move the next paragraph to the next page if it doesn´t fit
So the simplest example, not breaking paragraphs / html elements with a flat html structure (no nested divs, columns, etc) like:
<div class="document">
<h1>title</h1>
<p>texts</p>
<h2>subtitle</h2>
<p>texts</p>
...
<p>texts</p>
</div>
would be to do something like:
height = 0
loop through all direct child elements of .document
{
if ( (height + element_height) > page_height)
{
add page_break_element before current element
height = 0
}
height = height + element_height
}
I´d use jquery because it makes it easy to loop through the elements, measure heights, etc.
I guess breaking paragraphs would be possible as well, but a lot of extra work.

<p style="page-break-before: always">This would print on the next page</p>