We Keep Coding

Accessibility of html elements that change innerHTML using Javascript

I have this number credibility counter on my site that as the user scrolls, the headings with numbers count upwards from zero to the final total. I think it's an eye-catching way of showing off credibility, but as far as accessibility goes, I don't know if dynamically changing the numbers with JavaScript will confuse people who use screen readers. I thought about adding an "aria-labeledby" attribute to the heading so that the screen reader will read that instead of the dynamically changing text, but all of my google searches say that headings don't need aria labels, because screen readers will read the text inside the heading tags.
My question is if I add an "aria-labeledby" attribute to the heading, will that mess up how screen readers read the element?

You normally don't need to do anything special.
Given that JavaScript is supported in the user's browser, the text of the heading will also change dynamically for screen readers, too.
That dynamic change in content may be problematic for screen readers if it isn't reasonably expected.
More especially, for example, when something currently being read is suddenly replaced by something else or completely deleted without user intervention.
A common case of this is a carousel with content that changes every few seconds. Such carousels are usually bad for accessibility if they can't be easily stopped because of this reason among others.
However, in your case, for a simple counter, it's probably all right. There probably won't have much harm.
Attributes aria-label and aria-labelledby can only be used reliably with interactive elements that can be focusable.
ON non-interactive elements, it isn't guaranteed to have them read on all platforms/browsers/screen readers.
So, it's anyway not a good solution here.

Manipulating Inline Text with JQuery or CSS3 Transitions (or both)

Over the last two days I've been working on manipulating inline text that sits between <span> tags.
For something close to the effect I'm looking for, check this out:
http://jsfiddle.net/6uf96/5/
On JSFiddle, in the "Result" box, hover over the yellow "Activate Div". If you're on Chrome, the pink text rolls up as if it is a tape measure retracting, and the green text rolls out as if it is a tape measure being pulled out. That kind of sliding "appearing" and "disappearing" is the effect I'm going for.
To achieve this I'm using CSS transitions between letter spacing values (see "deletion" and "insertion" classes). The pink highlighted text transitions from normal spacing to highly negative spacing (to go from visible to invisible), and the green highlighted text transitions between highly negative spacing to normal spacing (to go from invisible to visible).
The issue is that this method really trips out the browsers. It works ok on Chrome (although it's quite jittery and there is sometimes trouble with the unhighlighted text). It doesn't seem to work on Safaari at all - the pink and green sections just disappear and appear respectively.
I've tried to achieve the effect using <div> tags with "overflow" and JQuery's .animate() (animating between high width and low width divs and hiding the overflow text that spills out of the low width div). This works really well until you have text that breaks the line - it doesn't work at all then, so this method seems to be out of the question (unless someone knows something that I don't).
So, the million dollar question: does anyone know of a plugin or another technique to do this kind of inline text manipulation, even across line breaks?

To get it working in Safari you need to use the prefixed version of transtions. Which means you need to add -webkit-transition to the regular transition.
I updated your jsFiddle accordingly: http://jsfiddle.net/6uf96/7/

Scale height of div with jquery - How will google react (SEO)?

Suppose I have a big div including much text. I want to show my readers only the first few text-lines. So I thought about scaling down the height of the div with javascript/jquery and add a "Read more" button.
Like that:
$('#content').height(20);
Here's a complete example: http://jsfiddle.net/zvQsX/1/
I guess google will index all the content, but will google interpret this as spam?
Thanks for your help!
Best
Andi

I'm not sure, but I think Google interprets a bit of CSS and display:none and simply would consider a hidden content as non-existent or at-least as less relevant than what you display directly.
Your technique is different and I honestly don't know how Google would interpret it. If we consider the law's intent, you are actually giving your users the whole thing (they can read it if they want and it's on the same page), and it shouldn't be considered as black hat thingy.
That said, why do you want to use scaling of div instead of display:none or text-indent:-9999px ?

Set DIV height so text is not cut or sliced horizontally

Is there any JS/CSS/jQuery magic I can work to identify whether the last visible bit of content in a div is being cut off, and slightly increase/decrease the DIV's height to prevent the cut off text?
Our system allows the user to enter "elements" containing XHTML (using a Telerik Edit control). We have an ElementList page, where we show all the user-entered elements. However, since the user-entered XHTML can be very large, on the list page we only want to show the first 3 lines of each. So I set the DIV containing the XHTML to a specific height equal to 3 rows of text, and set overflow: hidden. So far, so good.
However, since the user can enter XHTML, they can create tables with padding (or otherwise diverge from standard text height). The text within those cells appears to be sliced off horizontally, due to the combination of height and overflow: hidden. Our requirements person doesn't like the look of this; but of course we cannot restrict the XHTML editable by the end user.
Here is a JSFiddle example of the issue.
This question is not a duplicate of:
"Stopping cut off text in variable height div..." as that question involves "webkit-line-clamp" which is irrelevant to my situation. (and in any case, that question was never answered)
"Cut text by height, no truncate" as that question is about a DIV containing pure text; my DIV contains XHTML. You'll note in the JSFiddle that I'm already sizing the DIV height using the em measurement.
This issue has me completely baffled - I'm hoping the SO community can come to my rescue!
UPDATE:
Ultimately, I suspect this cannot be resolved using HTML/JS/jQuery. In fact, you can craft a table (or series of DIVs) with gradually increasing top-margins, such that there's no way to avoid slicing at least one of them.
Thanks to all for their responses. I'm marking one as an answer, because in my opinion, it's a particularly simple/elegant workaround.

This is not the solution you were looking for, but it might be a good design workaround.
I put a white gradient in the bottom of the div, so that it creates sort of a "visual ellipsis"
Take a look: http://jsfiddle.net/robertofrega/LkYjs/3/
It is not as ugly as when the text is simply cut.

Your trouble is coming from overflow:hidden;. This line is doing exactly what you tell it to do, namely hiding the overflow. Can you use overflow-y: auto or something like that? That along with a grippy (like SO uses on its text areas), should help you out.

Instead of having overflow:hidden, you could set it to auto and then check for the presence of a scrollbar upon submission of the content. See this thread:
detect elements overflow using jquery

Try CSS3 property: text-overflow and set it to ellipsis, the default value is clip

Blur all the objects(Images,div,text..) that comes behind a div tag

Need your help.
I created a static semi-opaque banner which stays at the top of a website. When a user scrolls the website the entire container objects goes underneath the banner. I want all the objects (images, text..etc) getting blury effect as it goes underneath the banner.
Thanks

The only way you're going to be able to do this is by getting fancy with some CSS and javascript. CSS doesn't support blur directly, but you can emulate it with text-shadow. Images can also be blurred with a little jquery/css/javascript magic, but will be problematic because you can't partially blur an image (what happens when only part of the image is under the banner?). It could probably be done by layering your images and keeping track of their position on screen, but all of this seems like a lot of work for a very small return.
So, assuming you've decided to give all of this a shot, you're going to have to use javascript to determine which parts of the page have passed under the banner and apply the style to those parts. The difficulty of this task will scale with the complexity of your page layout. In a best case scenario, your banner and content container are both 100% the width of the html body. At this point, it would be fairly trivial to write some kind of scanner that traverses the dom every time you page scroll to find elements that the blur should be applied to. However, best-case-scenario is rarely the case at hand, at which point I'd recommend abandoning the effort to pursue something with a greater ROI.

This isn't possible with CSS nor jQuery. You might be able to do something with IE's filters, however that's IE only (of course), and will invalidate your CSS.
Currently, there is no way to do this, although something might come along in CSS 4 or something.
The Chrome nightly builds support some filters, however there isn't an alpha blur filter (yet, at least).