Develop Reference

How to make page scroll to back top when new content loads in an SPA?

I'm using octoberCMS with Single Page Application Plugin. I've added smooth-scrollbar.js.
Everything works perfectly, except that I can't get smooth-scrollbar to scroll back to the top when a new page is loaded.
Here's the API documentation at Github
<div id="my-scrollbar" data-scrollbar>
<div id="content">
<div id="spa-page-content">
{% page %}
</div>
</div>
</div>
Please bear with me, as I'm new to this and learning :)
Thanks a lot, You'll make my day!

You can create an observer that reacts to content change. I used this nifty library, scrollTo.js for nice scrolling control. Here is an example on one of my projects. Using Jquery on method with a parent element on my page I then watch for content change.
$('#{$section}').on('DOMSubtreeModified', function(){
let postTitle = $('#postTitle');
if (postTitle.length > 0) {
$('body').scrollTo('#bms-blog', {offset: -115});
}
});

Link from one page to drop down in page two

I'm trying to create an <a> link in html page 1 that takes the user to html page 2. After html page 2 loads, I want a drop down function to execute. Essentially it is a link from html page 1 to drop down in html2.
I am not very good with javascript, but I've tried anything I could find so far and nothing works. The link between the pages works, but I cannot get the drop down function to execute on load of html page 2.
Any help would be greatly appreciated
HTML Page 1
<a class="link2index" href="index2.html#test" onclick ="f();return false;">Read more about technology hubs in South Africa</a>
<script>
function f(){
testwindow = window.load("index2.html#test"); //this is working to load but not to load the dropdown
//testwindow.addEventListener('click', myFunction38()); not working
//window.onload = myFunction38 ()
//testwindow.addEventListener('load', myFunction38()){
//document.getElementById("myDropdown38").classList.toggle("show");}; not working
//window.open('index2.html');
//window.somefunction = myFunction38(){
//document.getElementById("myDropdown38").classList.toggle("show");} not working
}
</script>
HTML Page 2 to where I'm targeting
<div class="dropdown">
<button id="test" onclick="myFunction38()" class="dropbtn">Cape Town</button>
<div id="myDropdown38" class="dropdown-content">
<a href="#">
<img src="media/capetown.jpg" alt="South Africa">
Cape Town-based Labsorganises digital and entrepreneurship bootcamps, and provides an investment of up to $20,000 for every social enterprise developed through their program.
</a>
</div>
</div>
<script>
function myFunction38() {
document.getElementById("myDropdown38").classList.toggle("show");
}
</script>

Basically you can use the window.onload function to run some JavaScript to dynamically add html to your body and show a "drop-down".
But since html2 can be reached in other ways(like bookmark or copy/paste into browser) and not just through hyperlink inside html1, you could also append some query string or fragment in html2 when it is loaded from html1 (append it to the href of a tag). Inside the onload function you can then check if the same exists and decide whether or not to show drop-down.
I will not be giving a code since the functionality is vaguely defined in the question. But this should help you solve it on your own.

How to show a HTML page at the bottom right corner instead of in a div?

What I want to do is to show the content of a HTML page at the bottom right corner of a page through my js script like below
In order to accomplish this, I do not want to put a div in the page and then the page to be appeared in it, BUT with somehow to place it there alternatively.
The goal is to edit nothing from the page, all the magic must be done through the .js file.
So for now what I have is this :
<div id="topBar"> HOME </div>
<div id ="content"> </div>
<script>
function load_home()
{
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
</script>
but it loads the page where I place the div, not overlay.
How to do this?

If JQuery is ok with you, then you can have a look at the following options
http://www.erichynds.com/examples/jquery-notify/
http://notifyjs.com/ (This one has same effect like the one described in above image)
You can load the html page via AJAX and then render it into the DIVs created using any of the above plugin.
For cross domains, you may have to try out following approach
http://www.leggetter.co.uk/2010/03/12/making-cross-domain-javascript-requests-using-xmlhttprequest-or-xdomainrequest.html

Check referrer and find the href that leads to it, then trigger a click with javascript

I'm working on a WP single page portfolio that loads post content with AJAX. I read that WP doesn't need #! URLs to make it crawlable by Googlebot. If I understand it correctly, since Googlebot won't interpret ajax, it will just follow the link and index the article page.
So I removed #! from my URLs and when a post is opened I update them with .pushState.It's working fine, but if I hit F5 or if I try to load a specific URL (not the home) I fall into the page of the post (single.php).
To prevent it, I added a javascript redirection in single.php that leads users to the homepage. Then I need to open the content of the article on the homepage.
Here is the address of my site: http://www.youpiemonday.com/ (the redirection isn't online yet).
How can I tell the browser "if you're coming from this page (the referrer), trigger a click on the thumbnail which href is corresponding" (the click will load the content)?
I'm digging around this but I have no idea how to target the thumbnail correctly...
<script type="text/javascript">
$referer = document.referrer; // where we come from
$LinktoRef = $('.ProjectWrap').find("a").href; // the href in the thumbnail
console.debug($LinktoRef); // still undefined...
if ( $LinktoRef == $referer ){
find("a").trigger('click');
}
</script>
Here is what the html markup looks like:
<div id="portfolio-list">
<div class="ProjectWrap">
<?php the_post_thumbnail(); ?>
<a href="<?php the_permalink(); ?>">
<div class="contentProject">
<h4 class="ProjectTitle"><?php the_title(); ?></h4>
</div>
</a>
</div>
<div class="ProjectWrap">//same as above</div>
<div class="ProjectWrap">//same as above</div>
// and the list goes on...
</div>
I'm not really a programmer so any help would be very appreciated. And if you can comment your code, that would be invaluable to me.

Because you are probably trying to reference the element before it is rendered on the page. Use document ready or window onload and reference the link there.

Passing Javascript To a Redirected Web page

The code I want to run upon triggeting the redirect, is to go to another web page (or local html file, either is possible in this situation), however pass some javascript to run on that page, as that page works off embeding content in Iframes. This needs to be done to allow me to specify the content in the iframe upon redirect.
To put it simpler. How can I make it so when you go to website.com/about/, it redirects to website.com/ with the content for /about/ loaded in an iframe?
<head>
<title> CodeBundle </title>
<script>
function home() {document.getElementById("loadedpage").src="home.html";}
function about() {document.getElementById("loadedpage").src="about.html";}
function reviews() {document.getElementById("loadedpage").src="reviews.html";}
function tutorials() {document.getElementById("loadedpage").src="tutorials.html";}
function blog() {document.getElementById("loadedpage").src="blog.html";}
</script>
</head>
<body>
<header>
<br><hr><font size=27><a onClick="home();">Code Bundle</a></font><br><hr>
<div ALIGN=RIGHT>
<font size=6> | <a onClick="about();">About</a> | <a onClick="reviews();">Reviews</a> | <a onClick="tutorials();">Tutorials</a> | <a onClick="blog();">Blog<a> |</font> <hr>
</div>
<iframe id="loadedpage" src=home.html width=100% height=100% frameborder=0>Iframe Failed to Load</iframe>
</header>
</body>
</body>
this is my index.html for website.com/
I want to write a page so that when you go to website.com/about/ it redirects to website.com/ running the javascript function about(), so as to display the about page.

You will have to either pass some data using a query parameter or a fragment identifier.
See:
http://en.wikipedia.org/wiki/Query_string
http://en.wikipedia.org/wiki/Fragment_identifier
In either case you will have something present in the url and it will look like:
http://www.example.com/?page=about
or:
http://www.example.com/#about
or - this would be best:
http://www.example.com/#!/about
because it could let you make the website crawlable. See:
Making AJAX Applications Crawlable
Now after reading your comment to the answer by theredled that you "add new content regularly and loading that in embeded iframes is quicker than writing new html every time" I have to ask this: aren't you using a templating system in your website?
Keep in mind that making AJAX-loaded content and using fragment identifiers to display the right content is not done because the page creation is easier (it isn't) but because the user experience is faster and more responsive. See for example the website for the SoundJS library:
http://www.createjs.com/#!/SoundJS
When you click the link to PreloadJS at the top you go to:
http://www.createjs.com/#!/PreloadJS
The content is reloaded, the address bar changes, but the page is actually not reloaded. (You can see that it is properly crawlable because it shows in the results if you google for ReloadJS.)

Pass content by a user session ?
However, it's a quite dirty case, maybe you already know that :)