I am trying to achieve the same effect facebook has with wrapping your status if it's too long.
Try to set your status to something like 300 "A" characters with a webkit user agent. How do they do that?
Yes... I know you can use:
word-wrap: break-word
I googled alot and all these tricks only work if you can set the width in advance, which I cannot.
My width is adjusting to 100% screen size to allow stretching when resizing (landscape).
So to sum this up, how can I achieve text wrap without giving a specific width to the element or a parent element, without using JS, under webkit only browser?
I could notice that FB use this property on the parent container:
-webkit-box-sizing: content-box
But I was not able to apply this to my case...
I would assume it's done this way with a server side language before given to the front-end. You typically want to stay away from content manipulation when you have such a large user base. There is a new CSS3 property that will do this for you, but it's not widely supported.
text-overflow:ellipsis;
More info can be found via Google
I think I know what you are looking for,
The trick is the combo of:
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
See this jsfiddle for a demonstration http://jsfiddle.net/bPsav/
Related
I know I can get the whole body of a document with context.document.body.getOoxml() and the current selection with context.document.getSelection(), however I can't find a way to establish what is currently on screen and what is not...
Is there a method in the Word Office JS api to retrieve only the content currently displayed on the screen?
There isn't a solution for this. The way some of the JavaScript libraries in web pages are able figure out this problem is through the view port.
Example here: https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery
See another helpful SO answer here: Get the browser viewport dimensions with JavaScript
Now - Word however uses HTML as a way of formatting - and not as a way of directly displaying things. So even if you could run the same library on the HTML - it wouldn't have the same context.
The best you could do is to get the height of the visible space (which should be the same height as your add-in frame) and attempt to do some mapping. You would have some weird edge cases though, like if the font-size is different, or you have a page-break in the view etc...
Got an issue I've been trying to solve without much luck for a while across various projects.
I've got some divs with text inside that is centered with CSS using display: block and line-height. I also tried with padding and a fixed height. Typically, these are setup as either just headers, or sometimes buttons.
Either way, I always seem to have an offset on the top from vertical center in the mobile safari browser that I don't get in ANY web browser (it's perfectly vertically aligned in a desktop browser). I can alter the setting to center in the mobile browser, but this throws out all the other browsers and this is a responsive design.
Has anyone experienced this issue?
I've got -webkit-text-size-adjust: 100%; but that doesn't seem to be related to this issue.
So far my hack work around is to have devices only css which sets a different line-height, but as you can imagine, that's a horrible solution.
This article has some great information on many different options for centering content when you don't know anything about the widths and heights:
http://css-tricks.com/centering-in-the-unknown/
It builds on from user1002464's answer quite well.
you can use display:table-cell and vertical-align:middle for the div containing the text
I've done the prerequisite searching of stackoverflow and looking on the internet. I suspect that the answer is ' This can't be done. ' but I'm hoping someone here might have a solution.
My page loads fine, but many of my YUI components don't fully load before being displayed. For example, my DataTable will resize itself when displaying or my buttons will appear in their native form and then get YUI-fied.
Is there a way to delay the displaying of the page until all the Javascript is finished (i.e. all my YUI components are finished rendering)? I don't know how this would happen, as a lot of the JS depends on the DOM being present to manipulate it.
Is there a way to delay the displaying
of the page
If I understand correctly you would like to hide it until it's done?
If that's the case I have an idea:
add a wrapper around the element you
want to hide (or use
position:absolute to cover it)
give that div a background which use
the color of the surrounding with a
positive z-index
when all your javascript has loaded remove the
z-index or change the color of the background to transparent
Your javascript code would look like this:
do 1. and 2.
load your js
do 3.
Of course it needs to be synchrone.
As an alternative you could use visibility:hidden / visible on the element itself but I dunno for sure if it's well supported.
Try putting your Javascript in the head section of the page, as if it's near the end of the page, it'll load later (making the first elements load faster). OR, better yet, serve up your Javascript compressed and via a CDN, such as Amazon CloudFront so that it loads quickly.
Is there a ready similar input like the status input in Facebook?
I mean, they use a contenteditable div, and they've wrapped it all pretty good. They can resize it (on focus/blur), an it continues word-wrapping and expanding, and when you type a really long word in their input, which can't be wrapped, it stays inside the div and doesn't overlap other elements near it..
Please help me doing those two things on a contenteditable div, or if you know of a ready one, please share.
Thanks.
P.S. I did try doing it myself an not just being lazy. I almost succeeded in stopping the overlap, but didn't manage to make the div stay contenteditable(word-wrap, expandable) after a height resize. I also thought of trying to understand how Facebook do it by myself, but it's pretty hard for a newbie to understand their code as it's all minified and gzipped and whatnot.
They (Facebook) seem to be using this CSS
overflow-x: hidden;
overflow-y: auto;
Is it possible to create a sticky header or footer such that no matter where you scroll the header/footer stays put? I'm looking for a HTML/css/javascript solution for iPhone/webkit.
You'd need to do this with JavaScript, as MobileSafari deliberately leaves out support for CSS's position: fixed. You should be able to detect the current viewport and absolutely position an element in the right spot, and update its location when the viewport changes.
Answering my own question: best resource I've found so far is this one: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
However, I think I'm going to end up using Titanium from Appcelerator instead of just html/css.
There is also another attempt to emulate position: fixed :
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
But it's hacky, and not very performant too.
You are right, Titanium or phonegap do the job well...