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

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/

Related

CSS hexagon rendering issue in ff/ie

I have a hexagon menu on this site which is correctly working in chrome but it has rendering issues in FF and IE.
http://wrausch.de.w013b68e.kasserver.com/
When you hover the hexagon menu in FF/IE you can see 2 blue lines which are not fully covered by the hovereffect.
Since I just got the site from a colleague who left I don't know where to begin.
Any help would be appreciated.
Thanks
Transformed elements - like the skewed elements you used to create the hexagons - end up in positions that are measured in fractions of a pixel, and so the browser has to make a judgment about how to display elements on a screen where mathematically perfect shapes need to be represented in a grid of blocky pixels.
Two transparent elements are next to each other and are slightly overlapping due to this rounding. Since the elements are slightly transparent, any overlapping would show up as a dark line.
Mathmatically, the elements are not touching, but due to the expression and simplifications of the browser, they are now slightly overlapping.
On Firefox the lines appear only when the transition is complete. This occurs because the rendering engine behaves differently during an animation than when it is complete.
To fix this I would try using fully opaque background colors when the user hovers. That way even dramatic overlapping would not cause a change in color.

Make text auto scale to parent container

I hope I do a good job explaining this.
I am making a Tumblr theme, and am setting up the post titles in a way that text won't overflow unto a second line if it is to long. I want to make the text grow smaller as it reaches the edge of the parent instead of dropping into a new line or getting cut off.
I tried fittext.js and bigtext.js, but I couldn't get either to work. And I do not think they would work for what I want, as fittext.js seems to be more responsive text, and bigtext.js always makes the text the same width as the parent which wouldn't work with what I want.
Does anyone know I can accomplish this? I'm a noob when it comes to Javascript, so keep that in mind when responding. ;D
The first step is to stop lines from breaking:
white-space:nowrap;
Then, you need to allow scrolling:
overflow:hidden;
Now you have access to scrollWidth. If it is bigger than offsetWidth, then the text is too big.
You can shrink the text one unit of font-size at a time (be it 0.1em, 1px, 1pt... whatever you want). Repeat this step until scrollWidth is less than or equal to offsetWidth. Ta-da!

Clipped Text & Shadows

I'm trying to get the text in this example to display properly, but I keeps clipping text & shadows in various letters and I can't figure out why and how to fix it.
Here's a jsfiddle (Removed), so you can understand it fully. Please refresh the jsfiddle once it loads, as the first letter clipping doesn't appear like it does on a regular published page.
The problem is on load (after you refresh) the 'F' & it's shadow will be clipped. Then, mouseover the text - 'Second' will appear, then mouseout and first word will appear again, but then 't' shadow is clipped.
Can't figure out how to fix these. Could someone please help me clear these clipping bugs.
Thanks, Bill
UPDATE: I figured out the 'F' letter clipping problem (updated jsfiddle) - I will need help w/ the 't' clipping - Thanks, Bill
BUMP - Someone? Pretty Please - Bill
This problem has to do with the way fonts are rendered. Certain fonts (like the one you're embedding) have serifs which extend beyond the "box" of the letter itself. In typical typography, this is handled by allowing the render area to extend beyond the box itself - because most applications don't make a box around each letter.
I think the issue you're having stems from the fact that each letter is actually a <span>, which means that it does, in fact, have a box. Your JS is then messing with opacity, overflow and positioning, which causes the CSS rendering to box off each individual <span> as it is being rendered.
My suggestion would be to avoid using the explicit widths / overflows that you're applying to the spans, and instead let them auto-size, and control absolute positioning.
If each span has the same z-index, and they are spaced correctly, this should give you what you're looking for, without causing clipping.
UPDATE:
The issue is that the font renders in a fashion which overlaps letters (as many script-style fonts do). As a result, you -must- render this font in such a way that it extends beyond the bounds of it's box.
However, when CSS from the plugin turns the individual letters partially transparent, transparent items can't extend beyond the outsides of their boxes... so the clipping occurs.
The solution is to increase the size of the box sufficiently that the clipping doesn't occur, and allow the boxes to overlap.
In other words, the trick is to provide padding-right and padding-left which give the font letters enough space to fully express, then adjust with negative margin-left, to move the letters back together.
For this font, at this size, the style which makes it work is:
.lslide_wrap a span span.sl-w1 {
...
/* Add the following 2 lines: */
padding: 0 100px 0 22px;
margin-left: -22px;
}
An updated version of the original jsFiddle can be found here.

Is there a CSS-only (no JavaScript) solution to fit variable content to a vertical grid?

I've got a small issue with a website I'm currently working on, that doesn't bother me too much, but would be nice to fix. We've designed the site (along with the rest of the advertising for this event) to be based on a strict square grid. Everything is working just fine, except for one little problem:
At the bottom of the page, we have a few paragraphs of body copy that are throwing off the page by a third of a grid square. (We have the line-height of the text to be a third of a grid square) Short of Javascript calculations, is there any way we can add some sort of "smart" padding to the bottom of these paragraphs to re-align the next elements to the grid?
is there any way we can add some sort of "smart" padding to the bottom
of these paragraphs to re-align the next elements to the grid?
I don't think there's a pure CSS fix, particularly when you take into account the fact that different browsers/operating systems might render the text with slightly different height.
The only other thing I can add to my answer is a JavaScript fix, which you don't want:
document.body.style.height = Math.round(document.body.offsetHeight/72)*72 + "px";
At least it's short.

Text being different sizes in different browsers

I'm sure someone's had this problem before but I can't figure it out because I guess I just don't know enough.
I have a form. One of the inputs has some JS attached so that as the user types (keyup), a div elsewhere on the page updates with what they're typing. e.g. They type "hello" and it appears in a div below.
I don't want the div which updates to get any bigger than 900px wide and only one text line high.
At the minute I have the div with overflow hidden so any extra text just disappears, also I have the maxlength of the input set so it can't get too big. However, since different browsers space text differently, in some browsers it'll allow (for example) 10 words, in others it'll allow 11.
I have done the css reset thing which is meant to get all browsers acting the same but the spacing of text doesn't seem too affected.
Is my only option trying to use css to make the spacing between characters the same accross browsers?
Can anyone suggest any alternatives?
EDIT
here's the css reset I'm using:
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}
The font I'm using is Arial 32px
Your CSS reset is a pretty poor one. It fixes a lot of display problems but down not address text sizing at all, so it's useless for this issue. You can find a more comprehensive one here, but changing your reset page may have unintended effects. I'll suggest using some inspection tools to check if you have padding or margin shrinking the available size to write text in, and if not then setting all aspects of the text so that it is rendered consistently.

Categories