Develop Reference

My jQuery code isn't working with WebStorm, but it is working with CodePen

I'm trying to make it so when I click a button it autoscrolls down using jQuery. It would look a lot better than a regular html jump. However, the code is only working on my CodePen/its exports, but not from anything through my WebStorm.
I've made sure to add the library for jQuery and added the script call. I know the library is added because it doesn't show squiggly's under the $ anymore, but the code still isn't functioning correctly. The script call is there -- definitely, because it works with CodePen using the exact same (copied and pasted) code.
HTML:
<script
src="http://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<script> src="js/main.js>" </script>
JS:
//Animate Smooth Scroll
$('#view-work').on('click',function() {
const images = $('#images').position().top;
$('html, body').animate({
scrollTop: images
},
900
);
});
Full: https://codepen.io/at-lowdesu/pen/LKJKLr
I'm expecting it autoscroll like it does on CodePen, but through my WebStorm IDE and its exports.

Solved. I wasn't using the script call correctly. <script> src="js/main.js>" </script> should be <script src="js/main.js"> </script>

Twig (or Symfony?) doesn't run my jQuery script

I currently am trying to create a website using Symfony 4. The issue is that one of my pages is in need of a jQuery script to work, part of it is working but functions like these aren't called, why ?
Example of code not being called :
$(document).ready(function(){
$(".someClass").click(function (event) {
event.preventDefault();
$(".active.focused").toggleClass("active");
$(".focused").toggleClass("focused");
$(this).toggleClass("active");
$(this).toggleClass("focused");
refresh_contents(); //this is another external function that I don't
//manage to call, even when called in the
//executed part
});
});
I am sure it doesn't come from my javascript as I tested it "off-symfony".
Thanks in advance, Crikripex

Alright, so after hours trying to figure out what and where the issue is, I came to the conclusion (thanks to #fyrye) that there might be compatibility issues between jQuery and Symfony4 or Webpack Encore.
I then decided to "translate" my code from jQuery to Javascript without any library and it worked fine.
To summarize, I went from :
$(document).ready(function(){
$(".someClass").click(function (event) {
event.preventDefault();
$(".active.focused").toggleClass("active");
$(".focused").toggleClass("focused");
$(this).toggleClass("active");
$(this).toggleClass("focused");
refresh_contents();
});
});
to :
for(i=0;i<maxId;i++){
document.getElementById("contain_" + i).onclick = function(event){
event.preventDefault();
document.getElementsByClassName("focused")[0].classList.remove("active");
document.getElementsByClassName("focused")[0].classList.remove("focused");
document.getElementById(this.id).classList.add("active");
document.getElementById(this.id).classList.add("focused");
refresh_contents();
}
}
I know it doesn't look as fancy, it's not as easy to code as jQuery, but so far that's the only solution I found that actually works.
Thanks for your help everybody.

Using JavaScript to shrink navbar

I tried to use this example to add a shrink-on-scroll navbar to a webpage, but when I copied their Javascript and CSS rules across to my document, it no longer worked. The shrink class is not added to my <nav> elements like it is on their demo. When I downloaded their demo code, it didn't work either, despite working in the online example.
This is the JavaScript I've used:
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
});
I have also tried using this script with the first (and last) lines removed, as is shown elsewhere in the example.
The only answer I can think of is that Chrome refuses to execute JavaScript on local files. Is this the case, or have I missed something?

make sure you include jquery into your html BEFORE your external js file , ex:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Though seems you have already figured out the problem - just a small suggestion is to try writing your code like this - it will look much better :)
$(window).scroll(function(){
var liveview = $(document).scrollTop();
if (liveview > 120) {
$("nav").addClass("shrink");
} else {
$("nav").removeClass("shrink");
}
});

Going to a page anchor after load adding transition

I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.

According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()

jQuery in WordPress - Font Awesome Invert on mouseenter and mouseleave events

I'm trying to add a very basic little jQuery script to a WordPress site which adds the fa-invert Font Awesome class to an icon on event mouseenter and then removes the class on mouseleave.
Here is my little script:
//Jquery Script to invert colour of icons on hover
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-invert");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-invert");
});
};
I've added this script to my function.php file as follows and it appears to be running fine when I load the page:
//include IconHover.js script
wp_enqueue_script('IconHover', get_bloginfo('template_url').'/js/IconHover.js', array('jquery'));
Now I've added the id of IconHover to my fa-twitter-square icon in the footer of the page but it doesn't seem to be inverting the colours on mouseenter.
Does anyone have any thought on why this may be? I've been looking at as many resources and examples of people doing similar things and I think that I am implementing the little bit of jQuery correctly within WordPress.
The site can be viewed here: http://dariusdevas.com/wp/?page_id=2
Any thoughts are greatly appreciated! :-D

its fa-inverse
that is it, following is working code
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-inverse");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-inverse");
});
});

There are two errors in your code one is due to deprecation, the other is a typo.
This is what it looks like:
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-invert");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-invert");
});
};
This is what it should look like:
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-invert");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-invert");
});
});
Also other than your bit of supplied code in your jquery there is a line of code that is deprecated this is:
event.returnValue
This needs to be changed to:
event.preventDefault