Develop Reference

jQuery: Scroll to bottom on element not working after certain overflow height

I'm attempting to code a live chat based off jQuery and PHP, where (when the user sends a message) their chat is automatically scrolled to the bottom to show the latest message.
When a message is sent or received, I use jQuery's append function to add a new div to the containing element, which contains every chat message in a separate div.
Initially, this works. When I send a message, the chat is scrolled to the bottom of the element (otherwise it would need to be scrolled down manually). After quite a few messages, however, it begins scrolling to the middle/upper section of the chat, rather than the bottom.
This is the jQuery that scrolls the chat down:
$('.live--chat--box--body').scrollTop($('.live--chat--box--body')[0].scrollHeight);
This is the HTML code of the element containing the chat:
<div class="live--chat--box--body">
<div class="live--chat--top"></div>
<div class="chat--message--container chat--message--container--self">
<div class="chat--message chat--message--self">
<span> Message 1 </span>
</div>
</div>
</div>
The third-nested div, chat--message--container, is repeated for each message sent.
This is the CSS for the live--chat--box--body element:
float: left;
width: 100%;
max-height: 245px;
height: 245px;
padding: 7px;
box-sizing: border-box;
background-color: #fafafa;
border: 1px solid #d7d7d7;
border-top: none;
border-radius: 1px 1px 0 0;
overflow-y: auto;
position: relative;
My theory is that, once the chat reaches a certain height, it begins to use the maximum height in the CSS rather than the actual height of the element, meaning it would only take you to the bottom of the maximum height - rather than the whole height. Though, this happens AFTER the user is allowed to scroll, suggesting that it's already exceeded the maximum height allowed before overflowing.
If anybody knows why this is happening, I'm fascinated to know.

Facebook Send button - manipulating the popunder div

I am positioning the facebook 'send' button at the right edge of my page.
Therefore, when clicking it, and opening the underlying div (where the details of the send information are being filled) it opens to the left, extruding from the page width.
This is why I am trying to move this div to the left when it is opened.
Unfortunately I dont see a way to this without moving also the button since both of these elements are loaded in a cross-domain Iframe (from facebook).
Is there any way to position the popunder div separately from the button?
Will CORS help me achieve this goal?
Many thanks,
junkycoder

Yes, it's possible, you could style it like this:
.fb_iframe_widget_lift {
overflow: visible !important;
width: 475px !important;
margin-top: 0px;
margin-left: -475px !important;
border:20px solid black;
padding: 10px;
height: 225px !important; /* Edit if you want to restore native border */
}
.fb-send{
float:right;
}
You can check it in here: http://codepen.io/anon/pen/GekKs
It's not perfect, but it does the job.

How to make lightbox scroll the lightbox and not the page

I am using the lightbox_me jquery plugin to open a lightbox when a user clicks on a product. Often the lightbox content stretches below the fold, and at the moment the right scrollbar moves the entire page when you scroll down.
I'd like it to work like the pinterest lightbox, whereby the right scrollbar only scrolls the lightbox, and the rest of the page stays fixed. I've seen a few posts on this, but nothing seems to work for me.
jQuery(function(){
$('.productBoxLink').click(function(e) {
var box = $(this).siblings(".productLightboxContent").html();
$('.lightBox').lightbox_me({
centered: false,
modalCSS: {top: '50px'},
onLoad: function() {
$('.productLightbox').html(box);
$('.productUpdateInner').show();
},
onClose: function() {
$('.productUpdateInner').hide();
}
});
return false;
});
});
.lightBox {
width: 450px;
background-color: #fff;
top: 400px;
position: fixed;
padding: 30px;
text-align: center;
display: none;
clear: both;
-moz-box-shadow: 0 0 5px #5C5C5C;
-webkit-box-shadow: 0 0 5px #5C5C5C;
box-shadow: 0 0 5px #5C5C5C;
border-radius: 5px;
}
I've read that this can be done with a few changes to my CSS. Does anyone know how I can achieve this with the code shown? Thanks!

Add this to .lightBox:
height:600px; /* You need to set a specific height - px or %*/
overflow-x:scroll; /* Tell the container to scroll if the content goes beyond bounds*/
Update
width:100%;
overflow-x:scroll;

If you want to let it size larger than the viewport, it's most likely because of your position: fixed line. Change it to position: absolute and you should be good.
Both fixed and absolute take the element out of the document flow, so there should be no net change in how it presents, but fixed fixes it to that specific position and forces it to not move ever.

I guess a general answer would be to make the background of the lighbox (i.e. the content before lightbox; the main content wrapper) position: fixed; and adjust its top value with javascript to a negative value corresponding to the position of user scroll in the moment of lightbox opening. Besides that, the lightbox would need to be position: absolute; with the same top / left values as if it was fixed.
When the user closes the lightbox, the previous values would need to be restored.

Add to html a class when lightbox is opening. For example:
.lightbox-active{overflow:hidden}
Also, your lightbox should have the next style:
.lightbox{overflow-x:hidden;overflow-y:scroll}
When you close the lightbox, you have remove the lightbox-active class from html.

How to create a scrollable textarea with scrolling background image?

I would like to add a background image to the textarea that scrolls along with the content. I'm programming in HTML/JavaScript/CSS specifically for mobile Safari.
I've attempted a variety of things but nothing seems to work.
I tried placing the textarea on top of the image and then scrolling the background image whenever the textarea is scrolled. It works more or less fine when I'm typing text, but the native scrollbars (which I don't want to get rid of) make it look a wreck on mobile Safari.
I tried using a contentEditable div container but that seemed to throw problems too (again with the scrolling).
Is it possible to have a textarea with native scrolling with a background image that scrolls?

A background image can be applied to an input or text element as shown:
check the fiddle jsfiddle
html
<div class="outer">
<textarea></textarea>
</div>
css
.outer { width: 310px; height: 250px; padding: 5px; border: 1px solid #666; -webikit-border-radius: 3px; -moz-border-radius: 3px; overflow:auto;overflow-x:hidden }
textarea{
background: #fff url('http://www.toddle.com/images/300_words_background.gif') 0 -220px no-repeat;
width: 302px;padding:5px; height:99em;
}
Note: The difference between the two is that the content within the div (assuming it's coded correctly) will be included as search engine usable text whereas the textarea content will not.

Puzzle: different domain iframe needs to dynamically "overlap" parent content

This should be a fun puzzle for you Stack Overflow geniuses:
I'm building a browser plugin that will inject a div, script, and iframe into the markup of whatever page the client is viewing. The purpose is to anchor a toolbar onto the bottom of every page (StumbleUpon does this for Chrome). Here's the code that is placed before </body>:
<div id="someID1" style="position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;">
<iframe id="someID2" src="http://www.example.com/iframeContent.html" frameBorder="0" scrolling="no" style="background-color: transparent; margin: 0px; height: 100%; width: 100%; padding: 0px;"/>
</div>
This toolbar (iframe) will be hosted on our server and has pop-out panels. When a user clicks to open a menu, the menu vertically extends the toolbar (e.g., toolbar height is 35px; with panel is 100px).
I can accomplish this in Safari, Firefox, and Chrome by having my toolbar sit on top of everything on a transparent background (i.e., height: 100% and background-color: transparent for both the div and iframe). But this doesn't work for IE7, IE8, IE9.
I've tried (1) doing background: blank.gif instead of background-color: transparent, and (2) injecting a script into the parent with a resizing function that I could call on with parent.resizeFunction(height) ("resource denied")
Any ideas on how to solve this?? Thanks so much!

I have to run so I can't test it, but IE seems to listen to the non-standard ALLOWTRANSPARENCY property.
When the property is set to false, the backgroundColor property of the object can only be that of the window. When the property is set to true, the backgroundColor property of the object can be set to any value, including the default value of transparent.