We Keep Coding

Treat div as a nonexistent element in HTML

Is adding a display:inline all that is needed for the browser display to treat the <div> as a nonexistent element (do want to consider everything inside the div though) in HTML?
I was thinking of having this div simply as a placeholder to put content into it from javascript and I was wondering whether it would be a good idea to make it display:inline
NOTE By nonexistent I mean that if the user says he wants to display the following on the page
<something here>
<something else here />
....
</something here>
Then the end result on the UI would be exactly what he wanted. Putting a div around it currently is adding a newline between this and other things.
I add this divs around something the user (the user being the programmer that is using the functionality I write) outputs in a function. I want to keep this divs completely invisible to the user. Currently there is a new line injected at times. For example there is a newline in between the two buttons
<div>
<button>Something</button>
<div>
<button>Else</button>
</div>
</div>

As long as you haven't styled the div with any width, height, margin, or padding you can leave it as is. No need to add "display: inline;". It's natural display: block; is just fine and won't take up any space as long as it is empty.
Then, if you inject content with, say, javascript the div will grow to fit the inside content.

Apparently a div has some display properties by default in the browser. Using a tag like <placeholder> seems like a good alternative that does not affect the UI at all.

add style's to the textarea 's specific line

I have html textarea dynamically it's content changing line by line. I want to add some styles to the updated or modified line content. Is there any windows selection, like properties, to do it??
What I want is make user feel, that the change has happen. Or any other way to achieve it?

There is no simple way to achieve it just by CSS with textarea, but the problem is solvable for sure :)
you can replace textarea with <div contenteditable><p></p></div>
you can set textarea CSS: background: transparent and manipulate some element below the textarea
you can modify this jQuery plugin: https://github.com/cotenoni/jquery-linedtextarea to manipulate specific lines (some CSS work required, cause by default you can manipulate just left column)
you can set custom background for textarea and move it up and down to specific line by background-position: 0 X

Cutting off a description if it's more than a set amount of words?

I'm curious, so I was on some sites specifically blogs. And I see their blog is like this:
CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE
CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE
CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE
but their description says something like
CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE
CONTENT HERE CONTENT...
I was wondering if I would have to use javascript or php to see if a div or <p> has too many words and cut it off accordingly? I'm not sure of the terminology for this. Anyways, I tried setting max height of a div, and it cuts off the content, but I wanted it to add like a ... or a read more-> after the part that was cut off. Could someone provide insight on how someone could achieve this? Thanks.

You can try this, but it lacks Firefox support:
text-overflow: ellipsis;
More info here: http://davidwalsh.name/css-ellipsis

theString = 'CONTENT HERE'; //can be dom element innerhtml/jQuery.html() as well
if(theString.length>100){
theString = theString.substr(0,100)+'...';
theString += '<div><a>Read More</a></div>'; //target area you need to place read more link
}
jQuery('.element').html(theString);
In this you replace everything after the amount to cut off with ...
If you want to also put the readmore in a seperate div/string you can target the new area with jquery pretty easily.

There's a jQuery plugin which allows to do just that. You can find it here: http://plugins.learningjquery.com/expander/
The overview from the website says the following:
The Expander Plugin hides (collapses) a portion of an element's content and adds a "read more" link so that the text can be viewed by the user if he or she wishes. By default, the expanded content is followed by a "read less" link that the user can click to re-collapse it. Expanded content can also be re-collapsed after a specified period of time.
Through CSS, I know you can use overflow: hidden, text-overflow: ellipsis and white-space: nowrap, but I believe that only works if it's only one line, so I'd suggest the jQuery approach if it's longer texts.

You could use this to trim your string, add ... and then replace it into the html.
Modify or write a wrapper for adding the ... as desired.
sDisplay = sFull.substr(0,50) + '...';

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; }

Using Javascript or CSS, how can I add additional space at the end of a block of text, but only if it does not start on a new line?

Let's say I have some text, with a (more)... link at the end of each paragraph. It ends up looking something like this:
This is just a test paragraph. Click on the more link for more info. (more...)
Now I'd like to add some space between the link and the paragraph text, so I wrap the link in a <span> tag and push it to the right with a margin-left: 10px:
This is just a test paragraph. Click on the more link for more info. (more...)
The problem here is, if the text wraps right on the more so that it shows up on a second line by itself, it will look indented:
This is just a test paragraph. Click on the more link for more info. Push it down!
(more...)
When the desired output should be:
This is just a test paragraph. Click on the more link for more info. Push it down!
(more...)
Is it possible to achieve this effect using either Javascript or CSS?
Side note: It is possible to achieve this effect by removing the <span> tag and using &nbspcharacters to push the more linke to the right with proper text wrapping, but this is a solution I'd like to avoid unless there is no other choice. Or I could use Javascript to insert the &nbsp's before the span, but that's not exactly a nice solution either.

You could set a width on the paragraph and then float the span to the right.
That way the (more...) remains on the the right always.
Not exactly what you are after but I think it looks decent.
Example: http://jsfiddle.net/WFuBd/1/

If you wrap the content before the link in a span and apply a margin-right to that, you'll get the desired effect. (Unfortunately, this, too, is not really a nice solution)

Why not use 2 div's. Div one floats left, div two floats right... Make sure overflow=hidden on div one, and (more...) is on div two.
[div 1 lots of text i.e.: 300px] [div 2(more...) i.e.: 40px]
It will look perfect every time. You'll have to play around with it to look right, but it'll work. You could then just do a little jQuery when you click more...to show the rest and hide 'more'.