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;
Related
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
I've been given the task to try and fix an issue on this site:
[redacted]
When you tap below the bottom half of the screen on an iPhone 5, taps aren't registering and so links can't be clicked, etc.
I tried debugging by alerting what element is tapped, and nothing is registering below the halfway point. If you scroll down the page so the link you want to click is above the top half, it works perfectly fine.
I've searched around and there seems to be some issues with iPhone 5 apps (as far as I can tell, I'm not an app developer!) but I can't seem to find anyone having the same error on a responsive website.
What's going on - is it something to do with the viewport?
It looks like in your DOM you have an <iframe "id=FirebugUI"> that sits right below your element. It has some inline styles that include visibility:hidden; and a z-index of a super large number which means it's a hidden element that is on top of everything. You have some options:
1 - Get rid of it if you're familiar with what firebugUI is and can comfortably remove it all together. then you're good to go. It's probably being injected with some javascript.
2 - display none - you can add this css to remove it:
#FirebugUI {
display: none !important;
}
You'll need to add the important to the value so it overrides the inline styles. This may render the FirebugUI useless though.
3 - z index - you can update the z-index by setting it to like 0. But that will probably render this thing useless. so you might as well just remove this plugin if you're going to do that. You'll also need to use the !important value to override the inline styles.
I coded a website, and am currently in the process of re-coding it. On my contact page, I have a form for questions, comments, etc. On the original website, the page works fine - however on the recode, the form breaks the page. I was wondering if someone could help me figure out why.
Original page found here: http://path-to-truth.org/contact/
Recode found here: http://path-to-truth.org/Recode/contact/
ul#nav has a margin-right of 7% in your style.css file. When I remove that, it looks normal. The margin is added to the right of the navigation. Because that make the block too large for the header, it moves down. Because you have float:right on that element also, it is put to the right of the h1.
Another option would be to remove the float: right on the navigation and put float: left on the image (or the a tag). At the bottom of your div#header, insert (inside the div) a new div with clear: both to pull the header region down.
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/
I am able to put a Facebook like button on my website, but how do I make it to be right-aligned within the div/iframe it is in?
I tried applying various CSS properties, but I could not get anything to move in the iframe.
I think this link could help too:
http://shades-of-orange.com/post/2011/01/09/Embed-Facebook-Like-Button-e28093-Right-Align-with-css-and-Settings.aspx
It says to set the width to "0". Then the box will be autoresize by Facebook and you can apply a float right to that box.
iframe is an inline element, you can use
text-align: right
for a div that contains that iframe, or float the iframe to the right, but just make sure to clear the float afterwards.
sample: http://jsfiddle.net/Mujj6/3/
and: http://jsfiddle.net/Mujj6/5/
Seems as though there are many ways to achieve this that work in different situations.
None of the above seemed to make any difference to the position of my 'like' button, however a little trial and error with a "margin-left" tag and I got it in the right place.
Thanks for everyone's input. The position relative trick doesn't always do it for me:
div.around-fb-like{
position:relative;
float:right;
}
So far this has been more dependable:
#fb-root{
position:absolute;
left:-1000%;
}
What is described in Embed Facebook Like button – Right align with CSS and settings works. However, in my website, I had to change the style to
position:relative; right:-130px;
the 'like' social plug-in seems to have changed styles within the iframe. what's the best way to prevent the 'like' from flowing right, on the following page?
[http://www.biographile.com/the-righteousness-and-ruin-of-science-on-this-week-in-history/16573/][1]
With DIV it's easy:
.fb-like{ vertical-align:top;}
posted also on SimpleMediaCode.info ( http://e-art.lv/x/fbas )