We Keep Coding

can't change z index with javascript

I'm trying to change the Z index of an image according to the scroll position,currently in chrome (but it should be working on all broswers).
anyway, it's not working on chrome, unless I get into inspection mode and I don't understand why it's only working in inspection mode?
this is the script:
$( window ).scroll(function() {
var scrollTop = $(window).scrollTop();
if ($(this).scrollTop()>700) {
document.getElementById("back-ground-image").style.zIndex = "-9";
console.log("-9");
} else {
document.getElementById("back-ground-image").style.zIndex = "-19";
console.log("-19");
}
});

Problem
What you need is $(document) not $(window).
By default, you scroll the $(document), not the $(window).
However, when you open your Chrome DevTools, the $(window) is not being scrolled which is why your code works.
To fix the issue, change $(window).scroll() to $(document).scroll() and $(window).scrollTop() to $(document).scrollTop()
Improvements
1. Use jQuery functions
Also, if you're already using jQuery, why not use jQuery selectors and .css():
$("#back-ground-image").css('zIndex', '-9')
instead of
document.getElementById("back-ground-image").style.zIndex = "-9";
2. Use DRY code
(Don't Repeat Yourself)
If you follow recommendation #1, why not set $("#back-ground-image") to a variable instead of repeating it twice.
$(document).scroll(function() {
var scrollTop = $(document).scrollTop(),
$bkImg = $("#back-ground-image");
if ($(this).scrollTop() > 700) {
$bkImg.css('zIndex', '-9');
console.log("-9");
} else {
$bkImg.css('zIndex', '-19');
console.log("-19");
}
});
Otherwise, you could use:
$(document).scroll(function() {
var scrollTop = $(document).scrollTop(),
background = document.getElementById("back-ground-image");
if ($(this).scrollTop()>700) {
background.style.zIndex = "-9";
console.log("-9");
} else {
background.style.zIndex = "-19";
console.log("-19");
}
});

JQuery scrollTop - cross browser compatibility issues

Yesterday I had an issue with a JQuery scrolling script that worked in Chrome but not in IE and Firefox. I asked this query (JQuery scroll() / scrollTop() not working in IE or Firefox) yesterday which I marked as being the correct answer only to realise today that it doesn't work in Chrome anymore!
Can anyone help me get this working on all modern browsers?
HTML
<div id="dotted-line">
<div id="up-arrow">^up</div>
</div>
JQuery
//get window size values (cross browser compatible)
(function(undefined) {
var container = $("html,body");
$.windowScrollTop = function(newval) {
if( newval === undefined) {
return container.scrollTop();
}
else {
return container.scrollTop(newval);
}
}
})();
//draw dotted line on scroll
$(window).scroll(function(){
if ($.windowScrollTop() > 10) {
var pos = $.windowScrollTop();
$('#dashes').css('height',pos/4);
$('#footer-dot').css('top',pos/4);
} else {
$('#dashes').css('height','6px');
$('#footer-dot').css('top','-150px');
}
});

scrollTop() will return value of only first matched element in set
$('html,body'), that's why it no more works on chrome
I think your best bet would be to use:
var container = $(document.scrollingElement || "html");

How to set cursor position at the end of input text in Google Chrome

I'm trying to set the cursor in a text field with a focus function. I've made some research but none of the provided solutions seemed to work in Google Chrome. In Internet Explorer and Firefox this solution is working fine:
The js:
$('#Search').focus(function() {
var SearchInput = $('#Search');
var strLength= SearchInput.val().length;
SearchInput.focus();
SearchInput[0].setSelectionRange(strLength, strLength);
});
The HTML:
<input type="text" id="Search" value="Hello World" />
Here's the link to my jsfiddle.
Is there any way to make this work in Google Chrome too?

It seems like the focus event is fired before the cursor is placed when you focus an input, a hacky workaround would be to use a setTimeout like so:
$('#Search').focus(function() {
setTimeout((function(el) {
var strLength = el.value.length;
return function() {
if(el.setSelectionRange !== undefined) {
el.setSelectionRange(strLength, strLength);
} else {
$(el).val(el.value);
}
}}(this)), 0);
});
Try this fiddle: http://jsfiddle.net/esnvh/26/
Edited to 0ms timeout, as #SparK pointed out this is enough to push to end of execution queue.

Updated code
Reference: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
setSelectionRange is not supported on IE, Opera & Safari
I suggest you to make something like this (works on IE, Chrome, Safari, Firefox).
$('#Search').on('mouseup', function() {
var element = $(this)[0];
if (this.setSelectionRange) {
var len = $(this).val().length * 2;
element.setSelectionRange(len, len);
}
else {
$(this).val($(this).val());
$(this).focus();
}
element.scrollTop = 9999;
});
Try this: http://jsfiddle.net/r5UVW/4/

Use mouseup event for that:
$("#Search").mouseup(function () {
this.setSelectionRange(this.value.length, this.value.length);
});

Without jQuery :)
private focusOnLastInput(): void {
const items = this.fields.querySelectorAll('input');
const lastInput = items[items.length - 1];
const valueLength = lastInput.value.length;
lastInput.focus();
lastInput.setSelectionRange(valueLength, valueLength);
}

FYI, currently the number input doesn't support setSelectionRange(), so a quick solution is to simply select the text using .select(). On desktop browsers this highlights the text, on mobiles this moves the cursor straight to the end of the text.

jQuery toggleClass on IE8

I'm trying to change color to a header when it reaches a certain scroll. I use this script with jQuery:
var $document = jQuery(document),
$element = jQuery('#header'),
className = 'red';
$document.scroll(function() {
$element.toggleClass(className, $document.scrollTop() >= 400);
});
That works on every browser, except for IE8. Does IE8 does not support the toggleClass? How can I solve it?
Any help would be appreciated. Thanks
jsFiddle: http://jsfiddle.net/itzuki87/e4XTw/
in IE: http://jsfiddle.net/itzuki87/e4XTw/show/

The problem is $(document) is read different in IE. IE prefers you to use $(window). You'll find the following to be much more cross-browser compatible.
$(function() {
$(window).scroll(function(e) {
$("#header").toggleClass("red", $(this).scrollTop() >= 400);
});
})
Or using your variable type setup:
jQuery(function() {
var $window = jQuery(window),
$element = jQuery("#header"),
className = "red";
$window.scroll(function(e) {
$element.toggleClass(className, jQuery(this).scrollTop() >= 400);
});
})
See working in IE8! and more (Safari, FF, Chrome, Opera)!
Using my smaller HTML

How to set the scrollTop value for a textarea?

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