We Keep Coding

Script (window.innerHeight) not working in IE

Hi all the following script was working fine on chrome and firefox but not in IE11. Any solutions please
window.onscroll = function (i)
{
window.innerHeight + window.scrollY >= document.body.offsetHeight ?
$("#str").removeClass("str_one") : $("#str").addClass("str_one")
};

window.getWindowSize= function(){
if(window.innerWidth!= undefined){
return [window.innerWidth, window.innerHeight];
}
else{
var docBody= document.body,
docEle= document.documentElement;
return [Math.max(docEle.clientWidth, docBody.clientWidth),
Math.max(docEle.clientHeight, docBody.clientHeight)];
}
}

javascript not working on IE10 / No errors. Works fine on other normal browsers

var depth = 0;
var moving = false;
var answers = new Array();
var qNo = 0;
var rangeCarousel;
var productCarousel;
var ih, iw, orient;
var sidebarOpen = false;
var focused = "range";
var currentRange = 0;
$(document).ready(function () {
document.getElementById('intro').addEventListener('click', clickHandler);
document.getElementById('q1').addEventListener('click', clickHandler);
document.getElementById('q2').addEventListener('click', clickHandler);
document.getElementById('q3').addEventListener('click', clickHandler);
document.getElementById('q4').addEventListener('click', clickHandler);
document.getElementById('intro').addEventListener('webkitTransitionEnd', transitionEnd);
document.getElementById('intro').addEventListener('transitionend', transitionEnd);
document.getElementById('intro').addEventListener('transition', transitionEnd);
});
function clickHandler(e) {
if ((qNo < 4) && (e.target.id != 'intro')) {
qNo++;
if (!moving) {
depth -= 100;
document.getElementById('intro').style.top = (depth + '%');
document.getElementById('q1').style.top = (depth + '%');
document.getElementById('q2').style.top = (depth + '%');
document.getElementById('q3').style.top = (depth + '%');
document.getElementById('q4').style.top = (depth + '%');
moving = true;
}
} else if (qNo == 4) {
var c = e.target.parentNode.classList[0];
switch (c) {
case 'one':
window.open("test.html","_self");
break;
case 'two':
window.open("test.html","_self");
break;
case 'three':
window.open("test.html","_self");
break;
case 'four':
window.open("test.html","_self");
break;
}
}
}
function transitionEnd() {
moving = false;
}
i m trying to create a quiz where users clicks on the images then loads the answer. It works fine on ie11 but i also need to make it work on ie10. I cant see any errors or anything to show me whats wrong
Any help or suggestion will be great

Some old IE does not support target property. You can use e.srcElement which is an alias of target as an alias of target
((e.target || e.srcElement).id) === "intro"
& also use it to find the parentNode
Side Note :As mentioned in comment section you can use jquery as which will also reduce the number of lines in your code beside efficiently handling events
You can also use jquery multiple selector instead of writing same lines of code for attaching event to every selector.
$('sel1 ,selector2 , selector 3 ...').click(function(event){.. rest of code})

JavaScript code don't work in Safari

I have a code which works in Chrome and Firefox but does not in Safari.
Here is a code:
var menu = document.getElementById("navigation1");
var already_moved = 0;
menu.onmouseover = function moveNavigation(menu) {
if (already_moved == 0) {
document.getElementById("navigation1").style.marginLeft = "0px";
already_moved = 1;
}
};
menu.onmouseleave = function moveBackNavigation(menu) {
if (already_moved == 1) {
//document.getElementById("navigation1").style.marginLeft = "-341px";
closeMenu();
already_moved = 0;
}
};
function closeMenu(){
setTimeout(function f(){
document.getElementById("navigation1").style.marginLeft = "-341px";
already_moved = 0;
}, 2000);
};
This code moves menu to left and back.
Thanks for any ideas - how to make it works in Safari.

I would like to clarify that you did actually enable JavaScript within Safari, right? As shown here.

Set caret to end of textbox on focus

The Question:
When a certain textbox receives focus, set the caret to the end of the textbox. The solution needs to work with IE7, Opera, Chrome and Firefox.
To make things a bit easier, this behavior is only needed when the current value of the textbox is a fixed value. (Say 'INIT')
Incomplete Solutions:
One would expect this to be pretty simple but I couldn't find an answer on SO that works on all browsers. The following answers do NOT work:
$("#test").focus(function() {
// This works for Opera only
// Also tested with $(this).val($(this).val());
if (this.value == "INIT") {
this.value = "";
this.value = "INIT";
}
});
$("#test").focus(function() {
// This works for IE and for Opera
if (this.value == "INIT") {
setCaretPosition(this, 4);
}
});
I got the setCaretPosition function from SO questions and saw it on different blogs aswell:
function setCaretPosition(ctrl, pos) {
if (ctrl.setSelectionRange) {
//ctrl.focus(); // can't focus since we call this from focus()
// IE only
ctrl.setSelectionRange(pos, pos);
}
else if (ctrl.createTextRange) {
// Chrome, FF and Opera
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos); // Also tested with this
range.moveStart('character', pos); // and this line in comment
range.select();
}
}
Fiddle
I've setup a jsFiddle.

Try this:
$("input").on("focus", function() {
if (this.value === "INIT") {
var input = this;
setTimeout(function() {
if (input.createTextRange) {
var r = input.createTextRange();
r.collapse(true);
r.moveEnd("character", input.value.length);
r.moveStart("character", input.value.length);
r.select();
}
else {
input.selectionStart = input.selectionEnd = input.value.length;
}
}, 13);
}
});
http://jsfiddle.net/azBxU/4/

This should work:
$("#test").focus(function() {
var $this = $(this);
var value = $this.val();
if (value === "INIT") {
setTimeout(function() {
$this.val(value);
}, 0);
}
});

I found a jQuery plugin that's been working for me for a long time. Can't remember where though.
(function($)
{
jQuery.fn.putCursorAtEnd = function() {
return this.each(function() {
$(this).focus()
// If this function exists...
if (this.setSelectionRange) {
// ... then use it
// (Doesn't work in IE)
// Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
var len = $(this).val().length * 2;
this.setSelectionRange(len, len);
} else {
// ... otherwise replace the contents with itself
// (Doesn't work in Google Chrome)
$(this).val($(this).val());
}
// Scroll to the bottom, in case we're in a tall textarea
// (Necessary for Firefox and Google Chrome)
this.scrollTop = 999999;
});
};
})(jQuery);

How to make this (scrollable div) work without jquery?

I've been making a webpage and I have one feature (making fixed divs scrollable) that requires some javascript, I've found a way to make it work with jquery but can't get it to work without it. Any help would be appreciated. Here's the code:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
// A globar variable to save to last element that the following class was applied to
var Last;
// This adds the class "ttth" so that tt the class "tt" will be displayed.
$(".tttw").live('touchstart', function() {
if (Last) Last.removeClass('ttth');
$(this).addClass("ttth");
Last=$(this);
});
// Test if we have a touchdevice.
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
// This function makes a fixed div on touch devices scrollable.
function touchScroll(selector) {
if (isTouchDevice()) {
var scrollStartPosY=0;
var scrollStartPosX=0;
$('body').delegate(selector, 'touchstart', function(e) {
scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY;
scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX;
});
$('body').delegate(selector, 'touchmove', function(e) {
if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) ||
(this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5))
e.preventDefault();
if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) ||
(this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5))
e.preventDefault();
this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY;
this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX;
});
}
}
// Touch is being initialised.
$(document).ready(function(){
touchScroll('.tt');
});
</script>
This code is already working but to reduce the loading time I want to get rid of jQuery. How to do that? For example - how can I select all classes "tttw" and add an eventlistener?
Any help, rough direction, etc. would be great!

Okay - found the answer myself. I did it like this:
function touchScrolli(selector) {
if (isTouchDevice()) {
var scrollStartPosY=0;
var scrollStartPosX=0;
var list = document.querySelectorAll(selector);
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('touchstart', function (e) {
scrollStartPosY=this.scrollTop+e.touches[0].pageY;
scrollStartPosX=this.scrollLeft+e.touches[0].pageX;
e.preventDefault();
}, false);
list[i].addEventListener('touchmove', function (e) {
if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
vthis.scrollTop+e.touches[0].pageY < scrollStartPosY-5) ||
(this.scrollTop != 0 && this.scrollTop+e.touches[0].pageY > scrollStartPosY+5))
e.preventDefault();
if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
this.scrollLeft+e.touches[0].pageX < scrollStartPosX-5) ||
(this.scrollLeft != 0 && this.scrollLeft+e.touches[0].pageX > scrollStartPosX+5))
e.preventDefault();
this.scrollTop=scrollStartPosY-e.touches[0].pageY;
this.scrollLeft=scrollStartPosX-e.touches[0].pageX;
});
}
}
}
Just needed to know how to select all classes without jQuery.