We Keep Coding

How to scroll to element after click event and new page load with Vanilla JavaScript

I will try to summarize this in a Requirements fashioned way, I hope this simplifies the question.
When clicking on an anchor tag, the web page navigates the user to a new page, where upon page load, the page is scrolled to the element which corresponds to the aforementioned anchor tag, which was previously clicked.
As you will see in the code I am trying to make use of the CSS scroll-behaviour property.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
So far I have tried out the code bellow, however when I run it I get an error message in the developer console stating:
TypeError: Cannot read property 'offsetTop' of undefined
Hence, I surmise that the window.onload function is not really fired on the page which I would like to load but the very same page on which I am located when clicking the anchor tag. How can I change the code so it would count for page intended.
HTML of Page A (where the anchor tag is located):
<a id="ship-it" href="services.html" class="services">
<div id="image-container_4">
<div id="image_4">
<div id="overlay_4"></div>
<h2 class="h2">We pack it and ship it</h2>
<img id=imageB src="/images/shipping.jpg" alt="">
</div>
</div>
</a>
HTML of Page B (where the target element is located):
<section id="manufacturing-section" class="section">
<img src="/images/manufacturingMelting2.jpg" alt="Magnetic Particle Inspection">
<div id="manufacturing-container">
<h2> <span>Manufacturing</span> <br> We provide high quality, low cost solutions to meet your requirements.</h2>
<p>
soemthing something something, DarkSide...
</p>
</div>
</section>
JS / CSS:
function scrollIt(element) {
window.scrollTo({
'behavior': 'smooth',
'left': 0,
'top': element.offsetTop
});
}
const serviceAnchor = document.querySelectorAll('.services');
//'serviceAnchor' is located on page A
const sections = document.querySelectorAll('.section');
// 'sections' is located on page B and represents the element the page should scroll to when the page has loaded after the corresponding anchor tag was clicked
serviceAnchor[0].addEventListener('click', () => {
window.onload = scrollIt(sections[0]);
});
serviceAnchor[1].addEventListener('click', () => {
window.onload = scrollIt(sections[1]);
});
serviceAnchor[2].addEventListener('click', () => {
window.onload = scrollIt(sections[2]);
});
serviceAnchor[3].addEventListener('click', () => {
window.onload = scrollIt(sections[3]);
});

The reason you're getting the error is it's impossible to run javascript across page loads. Assuming you're using a traditional site and not a single-page app, when the browser loads a new page, all javascript on the current page is stopped.
Browsers already support jumping to an element on page load using the www.site.com#myElementId syntax. If you want smooth scrolling, you'll need to pass the id of element to scroll in the url, or some other way like caching its id in localstorage, then run your smooth scrolling js on the pageload of the other page.

You can't navigate to a different page and then ask the browser to launch a piece of JavaScript. That would be a huge security issue, since I could make you click into a link to, let's say, my-bank.com then do a bit of JavaScript do access your secret cookies or local storage and hack into your account.
The only thing you can do is link to anchors inside the linked page, and the default scroll behavior (no smooth scrolling, for most browsers, since it's the least computationally and resources intensive) will be used:
<!-- not possible -->
<a onclick="navigateThenDoSomething()">Some link</a>
<!-- possible -->
Some link
If you own the target page, however, you can hide a target section in the query string then do a bit of magic in the target page's onload to smoothly scroll to your section:
<!-- source-page.html -->
Some link
// script running at target-page.html
const url = new URL(window.location);
const section = url.searchParams.get('section');
if (section) {
// scroll smoothly to `section` using
}

Since .scrollTo JS method with options has the same browser compatibility as scroll-behavior CSS property, and you're OK with that, you might get rid of your JS code and set:
html, body, .or-other-scrolling-container {scroll-behavior:smooth}
and use anchor links.
So HTML of Page A would be e.g.:
<a id="ship-it" href="services.html#manufacturing" class="services">
<div id="image-container_4">
<div id="image_4">
<div id="overlay_4"></div>
<h2 class="h2">We pack it and ship it</h2>
<img id=imageB src="/images/shipping.jpg" alt="">
</div>
</div>
</a>
And HTML of Page B (please note <a name="#manufacturing"> tag):
<a name="manufacturing"></a>
<section id="manufacturing-section" class="section">
<img src="/images/manufacturingMelting2.jpg" alt="Magnetic Particle Inspection">
<div id="manufacturing-container">
<h2>
<span>Manufacturing</span><br>
We provide high quality, low cost solutions to meet your requirements.
</h2>
<p>something something something, DarkSide...</p>
</div>
</section>
Working example:
html {scroll-behavior:smooth}
.long {height:100vh; background:#efc}
<a id="ship-it" href="#manufacturing" class="services">
<div id="image-container_4">
<div id="image_4">
<div id="overlay_4"></div>
<h2 class="h2">We pack it and ship it</h2>
<img id=imageB src="https://picsum.photos/50/50" alt="">
</div>
</div>
</a>
<section class="long">Placeholder to enable scroll</section>
<a name="manufacturing"></a>
<section id="manufacturing-section" class="section">
<img src="https://picsum.photos/400/220" alt="Magnetic Particle Inspection">
<div id="manufacturing-container">
<h2>
<span>Manufacturing</span><br>
We provide high quality, low cost solutions to meet your requirements.
</h2>
<p>something something something, DarkSide...</p>
</div>
</section>
Hope it helps.

Hidden elements still animating while display none is applied

So I'm using the Prinzhorn skrollr to create a site that has text and images roll in with the scrolling or swiping of the page. Everything works fine but I think I found a performance bug. The way skrollr works is by using data attributes with numbers as names and the number is the point at which the animation is supposed to happen. The values of the data attributes are css rules.
I have to use display:none on a few code blocks that are hidden or visible depending on screen size. This is b/c the number in the data attribute is sometimes too large for mobile screens and the animation happens at the wrong time.
Anyways, the problem is the css in the code blocks that are hidden is calculating even while the block is set to display:none.
In the code below, you can see the opacity for the mobile nav block recalculating in Chrome's dev tools while at desktop widths.
<nav>
<!-- === Desktop and tablet === -->
<div class="hide-for-small">
<a id="menu-btn" href="#">
<img src="/assets/img/menu-btn.png" alt="Menu" data-600="opacity:1" data-620="opacity:0" />
<img src="/assets/img/menu-btn-alt.png" alt="Menu" data-600="opacity:0" data-620="opacity:1 />
</a>
</div>
<!-- === End Desktop and tablet === -->
<!-- === Mobile === -->
<div class="show-for-small">
<a id="menu-btn" href="#">
<img src="/assets/img/menu-btn.png" alt="Menu" data-560="opacity:1" data-580="opacity:0" />
<img src="/assets/img/menu-btn-alt.png" alt="Menu" data-560="opacity:0" data-580="opacity:1" />
</a>
</div>
<!-- === End Mobile === -->
Any thoughts on how to prevent this? Like I said, everything looks and works fine but I'm noticing some minor lag on mobile and I'm betting it's b/c the device is having to do the same calculations twice.

Jumpy Tweet Button & Like Button - hide until full load?

http://screencast.com/t/qDxr1p7bFp
Social buttons jump around until full load.
This movie clip shows the jumpy behavior of the social buttons as they load. This happens on Chrome, Firefox and IE, latest builds. Using Twitter bootstrap css via bootstrap-sass gem.
Is there anyway to hide them until they finish loading?
<div class="social-bar">
<div class="container">
<ul class="social-buttons">
<li class="fb-button">
<fb:like send="false" layout="button_count" width="450" show_faces="false"></fb:like>
</li>
<li class="tw-button">
Tweet
</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_GB/all.js#xfbml=1"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Try to hide them in CSS, (.social-buttons { opacity: 0; }), and add this:
$(document).load(function() {
$(".social-buttons").css("opacity", "1");
});
It will wait untill all elements will load and display the social buttons again. You may also try fiddling with display: none; in CSS and show() in jQuery, though the second way may cause your page layout to change after executing the function.

YUI menu change page content not whole page

I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?

The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>

This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/

Full Screen image slider with jquery

I have to make a demo website somewhat similar to http://issuu.com/eb_magazine/docs/ebmag_31/1. The website is coded in flash but I want to do it using javascript and jQuery.
I think I need to do this in two parts, first is a simple image slider to slides between images. I think I can use any jQuery Image slider plugin for that.
The second part where we click on the image and it opens in full screen image slider with a zoom option. I don't know which plugin can be used for that. Is that even possible to do with jQuery? Please suggest any plugins for that

I think http://www.turnjs.com/ is the best solution for your query.
Turn.js is a JavaScript library that will make your content look like
a real book or magazine using all the advantages of HTML5. The web is
getting beautiful with new user interfaces based in HTML5; turn.js is
the best fit for a magazine, book or catalog based in HTML5.
Here's a sample code:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>