We Keep Coding

Put focus on an element on the middle of a screen not working

I have a function that checks if user input is correct and if it is not I want the page to scroll to focus on that particular input field. I use the following code:
$("#myElementID").focus();
This works as expected, the page immediately jumps to that input field and puts it right on top of the page without any padding. This makes it hard to see so I want to instead focus it on the center of the screen. I found this answer on SO which shows the following code:
$("#myElementID").focus(function () {
var center = $(window).height() / 2;
var top = $(this).offset().top;
if (top > center) {
$('html, body').animate({ scrollTop: top - center }, 'fast');
}
});
Now it doesn't focus at all, I tried alert and it doesn't seem to be going into the function at all.
How can I make the input focus centered on screen?

This code binds an handler to the focus event :
$("#myElementID").focus(function(){...});
It is equivalent to :
$("#myElementID").on("focus", function(){...});
You are supposed to run this code once :
$("#myElementID").focus(function () {
var center = $(window).height() / 2;
var top = $(this).offset().top;
if (top > center) {
$('html, body').animate({ scrollTop: top - center }, 'fast');
}
});
And then use $("#myElementID").focus(); to trigger the focus event on your input field.

Slide in from the left

This is basically my current website:
https://jsfiddle.net/s0wgnvk2/
And now I have the problem in the #About section when I click right it goes to #right section and, you can't see it in fiddle but in my webpage the transition is really smooth and I like it how it is, but I just don't know how to make it work for the left side since it is positioned left:-100%.
$(function() {
$('#About a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
I know about the fullPage.js plugin but I'd like to have my own solution and web layout even thought fullPage is probably a lot better.
I would appreciate if you could help me out
EDIT
Fiddle corrected: https://jsfiddle.net/s0wgnvk2/1/

scrollLeft denotes the scroll bar position from the left, see ref here. So it cannot be negative (the left most position is 0).
What you need might be marginLeft, try:
$('html, body').animate({ marginLeft: '100%' });
Here is a working jsfiddle example. Note that I have make the header position: fix, so that it knows where to anchor and how to width itself when the left margin of the element changes.

Use animation not scroll
see what issue you face when you use scroll https://jsfiddle.net/kevalbhatt18/s0wgnvk2/4/
And as you said in your site animation is working smoothly and not in fiddle
that is because you haven't selected jauery from droupdown which is
present in left side of fiddle editor so your animation is not working so if you see your console it will give you Uncaught ReferenceError: $ is not defined in your example https://jsfiddle.net/s0wgnvk2/
Left right animation Example: https://jsfiddle.net/kevalbhatt18/vunL9ec2/
$('#About a').bind('click', function (event) {
var $anchor = $(this);
if ($anchor.context.innerHTML === "RIGHT" ) {
$($anchor.attr('href')).stop().animate({
left: '-=100%'
}, 1000);
} else if ($anchor.context.innerHTML === "LEFT") {
$($anchor.attr('href')).stop().animate({
left: '+=100%'
}, 1000);
} else {
console.log($(this).context.offsetParent.id )
$('#'+$(this).context.offsetParent.id ).stop().animate({
left: $(this).context.offsetParent.id ==='right'?'+=100%':'-=100%'
}, 1000);
}

Scroll to specific div from another page minus X distance

I'm using the following script to perform the action described in my title.
<script type="text/javascript">
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
},1000,function()
{
location.hash = target;
});
}
$('html, body').hide();
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show();
jump();
}, 0);
}else{
$('html, body').show();
}
});
</script>
It works perfectly fine. However I have a fixed header which covers up the div once it's scrolled to. I'd like to minus 80px from the desired scroll target. How can I modify the code to do this?
Here's a live version.
robertkoh.net/Electrotemp/index.html
Click on 'ducted vacuum systems'. It takes you to the products and services page and scrolls to the appropriate section. As you can see the fixed header covers part of it.

Solution 1: Subtract 80 pixels and do not re-set location.hash
You only have to change this block:
$('html,body').animate({
scrollTop: $(target).offset().top
}, 1000, function() {
location.hash = target;
});
Into the following code:
$('html,body').animate({
scrollTop: $(target).offset().top - 80
}, 1000);
The added - 80 will subtract those 80 pixels, so the scrolling will stop earlier.
Removing location.hash = target; (that was called after the scroll animation was finished) fixes the problem of jumping back to the old position. This code was re-setting the hash tag which caused the browser to scroll back again. But be aware that clicking site internal hash links would not update the hash in the URL bar any more.
Solution 2: Move your page contents into a separate scrollable <div>
Create a new <div id="container"> that starts after <!--end slideMenu--> and ends before </body>.
Change the line $('html,body').animate({ into $('#container').animate({.
Remove margin-top: 70px; from .titlebar.
Add this CSS for the #container element:
#container {
position: fixed;
top: 70px;
bottom: 0;
left: 0;
overflow: auto; /* enable scrolling */
}
Doing it this way has some advantages:
You do not have to add - 80.
You do not have to remove location.hash = target;.
A browser without JavaScript enabled jumps to the right position.

scrollTop when offset changes

I want to scroll to a specific target in my application - something like this:
var editor = self.$el.find(".editorWrapper[data-containerid=" + containerId + "]").closest('.containerWrapper');
$('html, body').animate({
scrollTop: editor.position().top-5
}, 1000);
The problem is, that there are elements which render while scrolling down -> e.g. an image or iframe gets rendered while it scrolls down.I don't know the height of that new rendered element (would be tough to get the height - but not impossible so) the scroll stops at a wrong position. Is there an easy way to scroll smoothly to an element while the offset/height changes other then saving the height of each "new rendered" element?

I would just scroll down until it actually finds the specific point. Example:
function ScrollTo(el) {
if ($('html').scrollTop() < (el.position().top - 5)) {
$('html').animate({
scrollTop: $('html').scrollTop() + 1
}, 1, 'swing', function() {
ScrollTo(el);
});
}
}
ScrollTo($('#scrollTo'));
div {
width:400px;
}
#large {
height:400px;
background:red;
}
#scrollTo {
height:400px;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="large"></div>
<div id="scrollTo"></div>
You could play around with the settings to make it scroll at a decent speed for you, etc.

You want your page to be fully loaded you can call you script in :
$(document).load(function () {
var editor = self.$el.find(".editorWrapper[data-containerid=" + containerId + "]").closest('.containerWrapper');
$('html, body').animate({
scrollTop: editor.position().top-5
}, 1000);
});
https://api.jquery.com/load-event/

The scroll position is probably going to change everytime an image/iframe gets rendered, so the best way is binding load events to such elements (image/iframe) that updates the scrollTop position.

How do I make a scroll to top button appear when a pre-determined part of the page appears?

I've got a scroll to top button I implemented via code that I got from one of the numerous examples out there. It works great. I changed the timing function for its appearance so that instead of appearing after 100 pixels it appears after 1340. I did this because there's some boxes on the right and I don't want the button to appear until they've been scrolled by and empty space thus appears for the button to fade in. The timing looked perfect -- the button appeared after what I figured was 1340 pixels from the top of the page.
However, I noticed that on a different (larger) screen the button didn't appear at the right time, but later. What I realized (if I gather correctly) was that the 1340 specification wasn't an absolute number of pixels from the top of the page, but was how many pixels had been scrolled through from the bottom of the browser window. For example, if I re-size the height of my browser window from, say, 1000 pixels to 400 pixels and reload the page, the button will appear 600 pixels too soon.
So my question is, is there a way to change my code so that the button appears only once a certain part of the page, measured from the top of the window, appears on screen?
Here's the javascript I'm currently using:
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1340) {
$('#scrollup').fadeIn();
} else {
$('#scrollup').fadeOut();
}
});
$('#scrollup').click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
Thanks for any help.

Try this one--
<script type="text/javascript">
$(document).ready(function () {
ToggleScrollUp();
$(window).scroll(function () {
ToggleScrollUp();
});
$('#scrollup').click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
function ToggleScrollUp() {
if ($(".yourbox").offset().top < $(window).scrollTop() + $(window).height()) {
$('#scrollup').fadeIn();
} else {
$('#scrollup').fadeOut();
}
}
</script>

Check out this fiddle: http://jsfiddle.net/ro39dkaL/2/
Instead of using 1340 calculate the position of the bottom of the boxes instead, you can calculate the position on the fly so it's always accurate to the situation:
$(document).ready(function () {
var elem = $('#weblinks');
var bottom = $(elem).position().top+$(elem).outerHeight(true)
$(window).scroll(function () {
if ($(this).scrollTop() > bottom) {
$('#scrollup').fadeIn();
} else {
$('#scrollup').fadeOut();
}
});
$('#scrollup').click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});

the 1340 specified is hard coded which wont be accurate in all cases.
A better solution is to find the height of the element w.r.t the browser window.
the jquery .offset() can be used.
var offset = $("#child").offset();
var fromTop = offset.top - $(window).scrollTop();

I made this fiddle and I use another way: as you can see, I placed a div with id scroll_toggle. When the user reaches this div (obviously you can remove the text, this is just a demonstration).
This is the fiddle: http://jsfiddle.net/afilini/7633pr0r/