Develop Reference

sticky navbar jQuery not working in js file

I have a sticky navbar using jQuery and it works perfectly fine on CodePen. However I'm now adding it to my html/js files and its not longer working properly. The only difference I have between my CodePen and my files is that I have Particleground in my first section(as shown on CodePen). So my javascript file looks like this:
// particleground
document.addEventListener('DOMContentLoaded', function () {
particleground(document.getElementById('particles'), {
dotColor: '#E5E8E8',
lineColor: '#E5E8E8',
density: 5500
});
var intro = document.getElementById('intro');
intro.style.marginTop = - intro.offsetHeight / 2 + 'px';
}, false);
//sticky navbar
(function($) {
"use strict";
var $navbar = $("#navbar"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > y_pos + height) {
$navbar.addClass("navbar-fixed").animate({
top: 0
});
} else if (scrollTop <= y_pos) {
$navbar.removeClass("navbar-fixed").clearQueue().animate({
top: "-48px"
}, 0);
}
});
})(jQuery, undefined);
My HTML header is in this order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.particleground.min.js"></script>
<script src="js/jquery.particleground.js"></script>
When I run the page, the Particleground is working fine but the scroll bar doesn't move anymore like the one in my CodePen. Is the issue because I have particleground and the stick navbar in my js file? I'm not sure what the problem is and how would I fix this?

Script not firing properly after preloader script

Very limited script experience.
I am attempting to get a preloader to cover my images loading in a bootstrap carousel before a second script cycles through them.
This script is as far as I can get.
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(50).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(50).css({'overflow':'visible'});
})
//]]>
</script>
and
<!-- Script to Activate the Carousel -->
<script type="text/javascript">
$('#preloader').delay(50).fadeOut('slow', function(){
$('.carousel').carousel({
pause: "none",
interval: 500
});
});
</script>
The sequence I need is loading animation div covering images loading in "#myCarousel" > images have loaded > covering div fades out > fade out calls:
$('.carousel').carousel({
interval: 500, //changes the speed
pause: "none",
})
Images flick through and stops on final slide.
In the example above, it seems to work – the preloader works, the carousel works too but not at the expected speed; "500" is meant to be half a second. It also seems to break the pause function to, the fact pause is set to "none" seems to be ignored.
After some help from #Shikkediel the script now reads:
<script type="text/javascript">
$(window).on('load', function() {
$('#status').fadeOut()
.queue(function() {
$('#preloader').delay(50).fadeOut('slow', function() {
$('#myCarousel').attr('data-ride', 'carousel');
$('.item').first().addClass( 'active' );
$('body').delay(50).css({'overflow':'visible'});
$('.carousel').carousel({
});
});
$(this).dequeue();
});
});
</script>
– the speed and pause are now set in the data attributes, which is great to have them set in there out of the way.
However, the preloader still does not pre load the images!
This is the test I have running: http://maxsendak.com/test/pu_v2/max_page.html

This was the first draft, a bit of optimised script :
$(window).on('load', function() {
$('#status').fadeOut()
.queue(function() {
$('#preloader').delay(50).fadeOut('slow', function() {
$('#myCarousel').attr('data-ride', 'carousel');
$('.item').first().addClass('active');
$('body').delay(50).css({'overflow':'visible'});
$('.carousel').carousel({
interval: 500,
pause: 'none'
});
});
$(this).dequeue();
});
});
But it didn't quite have the expected result - the images are set as background and not detected by the onload event. I would propose preloading, appending to the document and hiding. This should cache them for the slider. Doing an Ajax call doesn't seem to fit well here :
$(document).ready(function() {
var path = 'http://www.maxsendak.com/test/pu_v2/img/people/max/';
for (var i = 1; i <= 5; i++) {
$('<img class="preload" src="' + path + i + '.jpg" alt=""/>').appendTo('body');
}
$('.preload').each(function() {
$(this).one('load', function() {
$(this).hide();
});
});
$(window).on('load', function() {
$('#status').fadeOut()
.queue(function() {
$('#preloader').delay(50).fadeOut('slow', function() {
$('#myCarousel').attr('data-ride', 'carousel');
$('.item').first().addClass('active');
$('body').delay(2500).css({'overflow':'visible'}); // after slider finishes
$('.carousel').carousel();
});
$(this).dequeue();
});
});
});
That bit of script could be left out of course if the images weren't background, the onload event should then be enough and prevent the flashing in between slides.
Minor update - according to this article Firefox can have some issues (version 37 on Windows 7 desktop at least) with the style of the preloaded images not matching that of the targeted background images. So I've added the relevant style I can see on the slider here which should be enough (also made appending the images a bit more readable) :
for (var i = 1; i <= 5; i++) {
$('<img class="preload" alt=""/>')
.attr('src', path + i + '.jpg')
.css({'height': '100%', 'position': 'relative', 'left': 0})
.appendTo('body');
}
Hope that's the final detail for a smooth cross browser functionality.

How to implement lazy loading on Horizontal scroll Jquery

Trying to implement a lazy load on horizontal scroll. Have gone through plugins of jquery but every one are providing on vertical scroll.
Initially need to show 4 items once i do horizontal scroll, need to load 4 more items.
have tried this:
$(document).ready(function() {
$('div').mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
Fiddle:
Demo URL

Try something like this jsFiddle, I hope this is what you're looking for:
$(document).ready(function() {
$('ul').scroll(function(event) {
if (this.scrollWidth - this.clientWidth - this.scrollLeft < 50) {
$(this).append('<li>1</li><li>2</li><li>3</li><li>4</li>')
}
});
});

jQuery "$(...).effect is not a function"

I searched through the forum already but I can't find any way to fix the problem I have with the "effect" function in jQuery.
I get exactly the error TypeError: $(...).effect is not a function in the code :
$('div.step').removeClass('active');
$("div.step").effect('slide', {direction: 'right', mode: 'hide'}, 500);
$('#step' + step + '').addClass('active');
$('#step' + step + '').effect('slide', {direction: 'right', mode: 'show'}, 500);
I included both jQuery and jQuery UI like this in <head></head> :
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
But in vain, do you have any idea? Thank you

You need to put your custom script after your jQuery and jQuery UI declarations, and wrap it within a document ready() function:
<body>
...
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
...
});
</script>
</body>

I do not know if the problem was solved but I found a way to replicate the shake function with the animation function and it works like a charm:
function shake() {
var div = document.getElementById('yourElementID');
var interval = 100;
var distance = 10;
var times = 4;
$(div).css('position', 'relative');
for (var iter = 0; iter < (times + 1) ; iter++) {
$(div).animate({
left: ((iter % 2 == 0 ? distance : distance * -1))
}, interval);
}
$(div).animate({ left: 0 }, interval);
}
This solution belongs to thisSite, all credits to them.
I hope this will be useful to someone in the future, if so please mark it as solution, greetings.

Add jQueryUI not just jQuery. jQuery doesn't contain the effect() function:
https://code.jquery.com/ui

Try to use
$(document).ready(function () {
$('div.step').removeClass('active');
$("div.step").effect('slide', {direction: 'right', mode: 'hide'}, 500);
$('#step' + step + '').addClass('active');
$('#step' + step + '').effect('slide', {direction: 'right', mode: 'show'}, 500);
}

For me, it turned out that my project was using a "Custom download" version of Jquery-UI which had been set to exclude the effects plugin. Replacing my version of Jquery UI with a full version fixed my issue.

trying to make carousel animation slider

i am trying to creat a carousel animation that take 3 pics and slide the to the left and bring new 3 images, i don't think i'm in the right direction need help
here is the fiddle link: http://jsfiddle.net/G5cKK/11/
setInterval(function () {
$('img:first').animate({
'left': -$('.box').width() + 'px'
},1000, function () {
$(this).remove().appendTo('.all')
});
}, 5000);

You can animate width instead of position:
JavaScript
setInterval(function() {
var $img = $('img:first');
var $imgClone = $img.clone().width(0).appendTo('.all');
$img.animate({'width': 0},1000, function(){$img.remove()});
$imgClone.animate({'width': 65},1000);
}, 5000)
Demo: http://jsfiddle.net/G5cKK/12/