We Keep Coding

Smooth scrolling to anchor on another page

After combing the forums and how-to guides, I have found a solution to a Smooth Scrolling problem that I had, but I'd like to ask some kind folks if the solution below will work for me before I try it, or if I'm missing something important.
I'm working on a live site and I don't want to create problems or break anything, so I'd like to be sure before I add the code below. I also know nothing about java or coding, so please forgive me if I don't use the right terms.
I want to enable smooth scrolling to an anchor on another page.
e.g. from my home page "domain.com/home", click the link, then
load the new page, e.g. "domain.com/contact"
and on loading the new page, smoothly scroll to the anchor, "domain.com/contact#section1".
Currently, it simply jumps, and I'd like to know if the steps below will enable the smooth scrolling.
I'm planning to:
Add the following codes to the website template's '' section (in the Joomla admin panel):
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I'm unsure whether this is necessary because I already use jQuery with some components, is it unnecessary to load jQuery again? Or will it not hurt to add this code regardless?
Then add this code to the same section in the template:
<script type="text/javascript" >
$('html').css({
display: 'none'
});
$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
display: 'block'
});
}
});
function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
}
</script>
As far as I know, this will enable the smooth scrolling, but I haven't added anything like 'smoothscroll.js' (which I've read a lot about) -- will that also need adding in the '' (after I upload it to the server), or is that included in the jQuery library?
I'm sorry if this seems very naive, I'm learning as I go. Thank you very much in advance to anyone who provides some feedback on this, I am truly grateful for your time and patience.
Best,
Ben

Firstly, Joomla already loads jQuery, so you do not need to load it again. I would either use a Joomla extension (there is a free one here) or use a smooth scroll library (like this one). Assuming you choose to do the latter, you just need to put the link in your Joomla template to the JS file and initialise it (this is all explained on the Github project page).
Both options are simple but if you don't have much experience in coding then the extension is probably the best way to go.
EDIT: To use smoothscroll on page load with the GitHub library, you will need to change your last function to:
function smoothScrollTo(anchor) {
var scroll = new SmoothScroll();
scroll.animateScroll(anchor);
}

How to use window onload in a single page application?

I'm using node.js in order to build a single page application.
At the top of the homepage I used a 100vh css style to show some color in full screen, and then after page loads, I created a transition to load an image.
I used this code:
JS
$('body').addClass('is-loading');
$(window).on('load', function() {
$('body').removeClass('is-loading');
});
However, single page application doesn´t need to load again after it loads. So, my question is how can I achieve this transition using node.js? Is there an alternative?

Window onload would works fine in a static web page. In a single page application you can use setTimeout (as one possible solution) to removeClass.
For what I understand you want transition works any time in your app:
This code works fine (is already tested):
if ( ! $('body').is('.is-loading') ) {
$('body').addClass('is-loading');
}
setTimeout(function () {
$('body').removeClass('is-loading');
}, 1000)
I hope it works in your code. Would be great to see some example of your css code. For now, you can achieve transition with the example written above.
Change time parameter according to your needs.

You can use localStorage.
Using a native js approach
localStorage.setItem('myToggle', isLoaded);
and then you retrieve from the same local storage using getItem and then specifying the name of the created localStorage item.
var isItAlreadyLoaded = localStorage.getItem('myToggle');
So
window.onload = function(){
var isItAlreadyLoaded = localStorage.getItem('myToggle');
if(isItAlreadyLoaded == 'true'){
console.log('already loaded');
}
else{
//load image here
//.....
var isLoaded = 'true';
localStorage.setItem('myToggle', isLoaded);
console.log('saved!');
}
}
This works like magic. localStorage is some sort of browser mini-storage, each storage variable can hold upto 5~10mb depending on the browser. It works well in most modern browsers.
All I did was put a boolean variable to check if the image was already loaded, or just check for the existence of the localStorage.

jQuery JavaScript not working on Wordpress, confused about no-conflict mode syntax

I am trying to get this codepen http://codepen.io/eternalminerals/pen/qdGvMo working on my wordpress page at http://eternalminerals.com/test/
I know that since Wordpress is in no-conflict mode, I have to change the $ to jQuery, but I did that and made sure the script was in the header as well (using this JS adder plugin css-javascript-toolbox) but it still isn't working like the codepen. I tested the codepen without the javascript and it behaves like the wordpress page, so I know the issue must be in the javascript.
<script type='text/javascript'>
StarWars = (function() {
/*
* Constructor
*/
function StarWars(args) {
// Context wrapper
this.el = jQuery(args.el);
// Audio to play the opening crawl
this.audio = this.el.find('audio').get(0);
// Start the animation
this.start = this.el.find('.start');
// The animation wrapper
this.animation = this.el.find('.animation');
// Remove animation and shows the start screen
this.reset();
// Start the animation on click
this.start.bind('click', jQuery.proxy(function() {
this.start.hide();
this.audio.play();
this.el.append(this.animation);
}, this));
// Reset the animation and shows the start screen
jQuery(this.audio).bind('ended', jQuery.proxy(function() {
this.audio.currentTime = 0;
this.reset();
}, this));
}
/*
* Resets the animation and shows the start screen.
*/
StarWars.prototype.reset = function() {
this.start.show();
this.cloned = this.animation.clone(true);
this.animation.remove();
this.animation = this.cloned;
};
return StarWars;
})();
new StarWars({
el : '.starwars'
});
</script>
There are no javascript console errors on my website page but it behaves as if there is no javascript controlling the html like in the codepen. Any help would be greatly appreciated. Thank you!

If you want to quickly update your jQuery call and pass in jQuery to it's own function then you can do so as shown below:
jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});
Additionally, and I've executed this methodology myself below, you can pass jQuery in as the dollar sign. NOTE: All jQuery code that uses "$.apis()" instead of "jQuery.apis()" must be within this code snippet which you may also load from an external script if necessary.
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
You can find the link to examples with more detail here: (https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/)
This solution is designed for wordpress, but I was using in a CMS-serving engine that rendered all the JS files on the backend and only sent out a view. In that scenario I could never use the dollar sign declaration in a typical document.ready function as you are trying so our issue is identical, just with a different engine behind it. This should help, cheers and happy coding!

Ok, thanks to Wordpress embedded javascript on page doesn't work it seems like all I had to do was surround the script with a jQuery ready function:
jQuery(function() {
/* your code here */
)};
http://eternalminerals.com/test/ works now woohoo!

Remove rel attribute using jquery based on screensize?

I am using lightbox for a group of images on 3 seperate pages. I have just made the website responsive for mobile but need to disable the lightbox on mobile.
I believe the best way for this is to remove the rel attribute for smaller screens.
The rel attribute is: rel="lightbox[page-name]" and these are in the anchors within unordered lists with classes of brandingsamples, marketingsamples and webdesignsamples.
I havent got a clue where to start with this so any help appreciated.

Instead of removing the attribute I would rather execute the lightbox script (and load all necessary assets) only if your page is not viewed on a mobile context. This would allows you to save precious bandwidth and make your page faster to load.
You could use a light script/assets loader like yepnope that loads the lightbox assets only if a given condition is satisfied (e.g. you may look at screen resolution, or your screen dpi value)
A simple example could be
<script src="/assets/yepnope.min.js"></script>
<script>
yepnope([{
test: (screen.width > 1024), // if we're on a large screen
yep: ["/css/lighbox.css", "/assets/lightbox.js"]
}]);
</script>

to simply remove an attribute you can try this:
$('selecter').attr('attrname', 'valueifany');
In your case it would be:
$('body').attr('rel[lightbox]', '');
Or a simple one:
$('body').removeAttr('rel[lightbox]');
To give the condition you can apply the screen-width condition as:
if($(window).width() >= 'value' && $(window).height() >= 'value') {
// write the code here..
}
http://api.jquery.com/removeattr/

Detect mobile device and then remove attribute in it.Use:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('selector').removeAttr('rel');
}

You could try
<script type="text/javascript>
$(document).ready(function(){
if(screen.width<600){
$('a').removeAttr('rel[lightbox]');
}
});
</script>

Uncaught ReferenceError: $ is not defined? Jsfiddle

I'm a beginner at javascript and i have used jsfiddle to create a navigation bar which appears when the user has scrolled down.
When i copy the code to dreamweaver it no longer works?
I have researched and it said something about adding the jquery framework or something?
Or is there a way to do this without the framework?
Link to jsfiddle for full code: http://jsfiddle.net/fNn7K/270/
javascript :
$(window).on('scroll', function () {
console.log($(this).scrollTop());
if ($(this).scrollTop() > 50) {
$('.nav').addClass('visible');
}else if ($(this).scrollTop() <= 50 && $('.nav').hasClass('visible')) {
$('.nav').removeClass('visible');
}
});

Without jQuery you can do :
window.onscroll = function() {
var display = document.body.scrollTop > 150 ? 'inline' : 'none',
elems = document.getElementsByTagName('nav');
for (var i=0; i<elems.length; i++) {
elems[i].style.display = display;
}
}
FIDDLE

When i copy the code to dreamweaver it no longer works?
JS Fiddle assembles a page based on several pieces of user entered data. One of those pieces of data is the selection of a library.
You have to copy the code to the right places in the document and include the same libraries.
Even then, the preview modes of Dreamweaver might not show it up, because they are (or at least were) entirely awful. Do you testing in a real browser.
I have researched and it said something about adding the jquery framework or something?
You need the jQuery library to use jQuery methods, yes.
Or is there a way to do this without the framework?
jQuery is just some JavaScript written by other people. You can reproduce anything it does. A line by line rewrite of your code to not use jQuery would be out of scope for a stackoverflow answer though.

you need to add jquery.js file in your code (dreamweaver)..
add this in between <head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
in the fiddle you provided, the jquery is already loaded..so you didn't get that error.
and don't forget to wrap your code inside document.ready function (which is again, already added in fiddle)..
$(function(){
$(window).on('scroll', function () {
.....
});
});