How to set the scrollTop value for a textarea? - javascript

I am facing a problem when I try to set the scrollTop value for a textarea. My JavaScript code is as follows -
var element = document.getElementById("messageTextArea");
console.log("scrollTop = "+element.scrollTop);
console.log("scrollHeight = "+element.scrollHeight);
element.scrollTop = element.scrollHeight; // doesn't work!
console.log("The value is-->"+element.scrollTop); // no change!
element = document.getElementById("messageTextArea");
console.log("Now scrollTop = "+element.scrollTop); // no change!
console.log("Now scrollHeight = "+element.scrollHeight);
The Firefox console log gives the following -
scrollTop = 0
scrollHeight = 86
The value is-->0
Now scrollTop = 0
Now scrollHeight = 86
What I really want to do is to make the textarea somehow automatically be scrolled down to the maximum when the text does not fit in the actual width and height and the scroll bar gets activated.
Here's are two screenshots explaining the problem -
This is what I have currently -
And this is what I would like to have -
Please help!

Ok, sorry guys. The problem was that I was getting the wrong text area. This is so embarrassing! Now it works.
var element = document.getElementById("chatTextArea"); // <-- this is where I was making a mistake in my code. So embarrassing!

Also had issues with using scrollTop in firefox with textarea, especially if textarea value is set with AJAX.
This worked for me:
<script>
function scroll_bottom(elm){
var elm = document.getElementById(elm);
var bottom = function() {
elm.scrollTop = elm.scrollHeight;
};
setTimeout(bottom, 0);
}
</script>
Then to use it, for example:
<textarea id="log" style="width:100%;height:100%;resize:none;"></textarea>
<script>
$(document).ready(function(){
scroll_bottom('log');
});
</script>

I believe that setting the scrollTop in FF does not work when overflow of the element is visible. It works if the overflow is hidden

Related

2 Lines Causing thousands of Java Script Errors

On this page: https://www.airsyspro.com There is a script for a stick header that seems to have an infinite loop that is causing thousands of errors in the console. Any ideas on how to fix this issue?
You'll see in the console that it appears on lines 2216 and 2245. JS is not my expertise, thanks in advance.
if ($('.hpg-sticky-bar').length) {
$('.hpg-sticky-bar').addClass('original').clone().insertAfter('.hpg-sticky-bar').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
}
It can be as simple as the example here above
I think that the problem is this:
var orgElementPos = $('.original1').offset();
There is not a single element with class 'original'.
The var orgElementPos is null.
Also check this:
$('.msb-sticky-bar').addClass('original1')
the class msb-sticky-bar is misssing.

Jquery horizontal slide based on div width

I have jquery script where you can click a left and right button and it will scroll horizontally to show more content.
The content that needs to be scrolled are in a div with a width of 1296px, but i want to set my jquery code to automatically get the width of the div and when you press on one of the left or right scroll button it will scroll exactly 1296px.
I want to do it this way because I need to later on optimize the design for all screen size and this would be the easier way.
My code:
var $item2 = $('div.group'), //Cache your DOM selector
visible2 = 1, //Set the number of items that will be visible
index2 = 0, //Starting index
endIndex2 = ( $item.length ); //End index
$('#arrowR').click(function(){
index2++;
$item2.animate({'left':'-=1296px'});
});
$('#arrowL').click(function(){
if(index2 > 0){
index2--;
$item2.animate({'left':'+=18.5%'});
}
});
This Javascript should work:
var $item2 = $('div.group'), //Cache your DOM selector
visible2 = 1, //Set the number of items that will be visible
index2 = 0, //Starting index
endIndex2 = ( $item2.length ); //End index
var w = $("#group").width();
$('#arrowR').click(function(){
index2++;
$item2.animate({'left':'-=' + w + 'px'});
});
$('#arrowL').click(function(){
if(index2 > 0){
index2--;
$item2.animate({'left':'+=' + w + 'px'});
}
});
Check this fiddle. Basically we calculate the width initially to not do the same thing repeatedly and the reuse it whenever we need it.
Why not get the width of the visible container first, and then use that value later? Quick example:
var width = $('container').width();
And then during animations:
var left = $item2.css('left') + width;
$item.animate({'left',left});
As a note, innerWidth and outerWidth may be more beneficial than just width depending on how you've set everything up, so if values aren't quite right take a look at those documents.
I've created a fiddle that I think solves your problem:
http://jsfiddle.net/77bvnw3n/
What I did was to create another variable (called width) which on page load, dynamically gets the width of the container.
var width = $('.group-container').width(); //Container Width
This variable is also reset whenever the Next or Previous buttons are pressed (in case the window has been resized since the page loaded).
$('#arrowR').click(function(){
index2++;
//recheck container width
width = $('.group-container').width();
$item2.animate({'left':'-=' + width + 'px'});
});
Take a look and let me know if it helps.
Note: I replaced the 'Next' and 'Previous' images with coloured boxes in my Fiddle and I think you also had a typo in your code, should
endIndex2 = ( $item.length )
be changed to:
endIndex2 = ( $item2.length )

Detect the Body's Height

I have an Add More Attachments function. Every time I click the button, one more attachment shows up, which causes the page getting longer. I write a syntax to detect the body's height after the attachments show up, but somehow it doesn't work. Please help.
Live Code
HTML
<input type="file" /></div><button id="addNew">Add</button>
<div class="attachField"></div>
JS
var i=0;
$('#addNew').click(
function()
{
if( i < 10)
{
i++;
$('.attachField').append( '<div class="attachFile"><input type="file" /></div>' );
}
$('body').on('load', function()
{
var bodyAfterClick = $(this).contents().height();
alert(bodyAfterClick);
$('body').height(bodyAfterClick);
});
}); //end click
Is this what you wanted?
Body automatically gets longer when you add element to it. It's default behaviour when the element's height is not set.
I can't read the documentation right now but it's obvious that this works only on page load. Please read documentation more properly.
$('body').on('load', function())
as per you code i understand that you need to find the height of body when you append the input
Made some changes to your code
JS Fiddle
var i = 0;
$('#addNew').click(
function () {
if (i < 10) {
i++;
$('.attachField').append('<div class="attachFile"><input type="file" /></div>');
a = $('body').height()
console.log(a)
alert(a)
}
}); //end click
First of all why are you explicitly setting height to the body by $('body').height(bodyAfterClick);?
If you have to detect body height, you can try this -
$(document).height() - $('body').offset().top;
Reference link -
jQuery $("body").height() returns undefined

Div scrollTop with jQuery issues

I'm using jQuery scrollTop to toggle a div class. Please see the below code
$(".div-two").scroll(function() {
var useFixedDiv = $(".div-two").scrollTop(100);
$('.div-two').toggleClass('div-two-fixed', useFixedDiv);
});
This doesn't seems to work. Also i change the line
var useFixedDiv = $(".div-two").scrollTop(100);
to
var useFixedDiv = $(".div-two").scrollTop() > 100;
Still no results. Any advice will be appreciated.

Resizing font based on screen width

Can someone help me with JavaScript code that resizes a font in a div if the screen width is lower than 1100px
if (window.screen.width <= 1100) {
var item = document.getElementById("div1");
item.style.fontSize = "25px";
item.innerHTML = "String";
}
This is what I have so far. Can someone help me with what to do next?
Your code works for me in JS Fiddle. Perhaps you are not specifying the correct id for your div or something like that.
http://jsfiddle.net/trott/GqFPY/
If you are hoping the code will be triggered on a browser resize, you will need to bind it to an event. (See Michael's answer.)
You will need to bind the action to the window.onresize event:
var resizeFonts = function() {
var item = document.getElementById("div1");
if (window.screen.width <= 1100) {
item.style.fontSize = "25px";
item.innerHTML = "String";
}
// Otherwise set a larger font
else item.style.fontSize = "30px";
};
window.onload = resizeFonts;
window.onresize = resizeFonts;
I have an OLD blog in which I posted about changing the font size, but it was made to show how to use jQueryUI slider. Maybe you can use some of the logic there to create your own solution:
http://weblogs.asp.net/thiagosantos/archive/2009/03/21/my-first-time-with-jquery-ui.aspx

Categories