Develop Reference

Fixed div on scroll and change state using CSS and sticky.js

I'm currently using sticky.js to fix a div to the top of my screen when I scroll. This works perfectly and I wouldn't want to change it but I would like to apply some css to the div to effect some change when it sticks.
I have tried implementing some JavaScript to the sticky script but it's still not working.
This is what I have now:
HTML
<div class="header"><div class="small_logo"><img src=""></div></div>
JavaScript
$(document).ready(function(){
$(".header").sticky({
topSpacing: 0,
success: function() {
$('.header').addClass("wide");
$('.small_logo').fadeIn("slow");
}
});
});
I'm sure it's just a simple javascript format issue but I just can't seem to find the right syntax.

Further to #Alex's point, the documentation does not describe any success option that you have used in your code.
The correct way would be to use the events that have been described in the documentation on github
I've given an example below.
$(document).ready(function(){
$(".header").sticky({topSpacing: 0});
$('.header').on('sticky-start', function() {
$(".small_logo img").fadeIn("slow");
});
$('.header').on('sticky-end', function() {
$(".small_logo img").fadeOut("slow");
});
});
.header {
background: #EEE;
height: 100px;
}
.small_logo img{
height: 100px;
display: none;
}
.body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>
<div class="header">
<div class="small_logo">
<!-- <a href="/"> -->
<img src="https://i.ytimg.com/vi/YCaGYUIfdy4/maxresdefault.jpg">
<!-- </a> -->
</div>
</div>
<div class="body"></div>

Did you see the brief documentation on GitHub?
According to the section about events you will need to do the following:
$('.header').on('sticky-start', function() { // your code });

You can use this simple example. Or this code:
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
$('.header').css({top: '0px'});
} else {
$('.header').css({top: '-50px'});
}
prevScrollpos = currentScrollPos;
}
</script>

Try this
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
$(window).scroll(function() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
})
.sticky {
position: fixed;
top: 0;
width: 100%
}
apply css to sticky class for effect

Hide sidebar when viewport is too small

I'm hidding the sidebar with a button.
But when the view get's under 991px I want to hide the sidebar to have more space for my site.
How can i do this? If I put the code inside the if it will always be toggling. If the size is bigger than 991px it should show the sidebar again
$('#sidebar-btn').click(function () {
$('#sidebar').toggle('visible');
$('.content-wrapper, .full-page-wrapper').toggleClass('content-wrapper full-page-wrapper');
});
//toggle sidebar when width is too small
var browserWidth = $(window).width();
if(browserWidth <= 991 ) {
}

You can use plain CSS for that (EDIT: if you want to toogle classes you need JS).
if(!($(window).width() <= 911)) {
$('.content-wrapper').toggleClass('content-wrapper');
$('.full-page-wrapper').toggleClass('full-page-wrapper');
}
#media screen and (max-width: 911px) {
#sidebar {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="sidebar" class="content-wrapper full-page-wrapper">AAAAAAAAAA</section>

You could try with css as follow :
#media (min-width:991px) {
//Do your css things
}
Else you can catch resize event

Use jQuery to get the width of the window.
if ($(window).width() < 960) { alert('Less than 960'); } else { alert('More than 960'); }

Hide DOM elements which do not have a specific attribute

I want to hide all images which have no data-web-src attribute on 767px. I tried the following but I failed; how can I do that?
$('#homepage-carousel .lazy_res').each(function(index, value) {
var ws = $(window).width();
var large = 1024;
var medium = 767;
var small = 0;
if (ws <= medium) {
$(this).not('[data-web-src]').hide();
} else {
$(this).not('[data-web-src]').show();
}
});
img {
width: 500px;
float: left;
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-carousel">
<img class="lazy_res" src="http://pre07.deviantart.net/338a/th/pre/i/2012/007/f/7/mapa_mundi_com_bandeiras___preto_by_plamber-d4leocd.jpg" alt="" />
<img class="lazy_res" src="http://img05.deviantart.net/a6be/i/2013/099/8/9/helena_harper_by_plamber-d6125tx.jpg">
</div>
Codepen Demo

This should be done with CSS Media Queries. No JavaScript required.
/* Set page default styles and styles that should only
be in effect for viewports under 767px wide here. */
img {
width: 500px;
float: left;
margin-right: 10px;
}
/* Apply the following CSS only to viewports wider than 767px */
#media (min-width: 767px) {
/* Select all images except those with an attribute of: dat-web-src */
img:not([data-web-src]) {
display: none; /* Hide the matching elements */
}
/* Make any other CSS changes you like here */
/* This class will only be applied to images when the media query
is in effect. */
img.someNewClass {
/* Whatever you need here */
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-carousel">
<img class="lazy_res" src="http://localhost:82/works/anitur/img/slider/1.jpg" alt="" />
<img class="lazy_res" src="http://localhost:82/works/anitur/img/assets/mice-1.jpg">
</div>

You need to set your code within a function and then it can be called onload and also onresize to test it:
see https://api.jquery.com/on/
Description: Attach an event handler function for one or more events to the selected elements.
function testit() {
$("#homepage-carousel .lazy_res").each(function(index, value) {
var ws = $(window).width();
var large = 1024;
var medium = 767;
var small = 0;
if (ws <= medium) {
$(this).not('[data-web-src]').hide();
} else {
$(this).not('[data-web-src]').show();
}
});
}
$(window).on('resize load', testit );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
below 767px wide, you'll see nothing else here :), use the full page mode to test the snippet. then resize the window
<div id="homepage-carousel">
<img class="lazy_res" src="http://pre07.deviantart.net/338a/th/pre/i/2012/007/f/7/mapa_mundi_com_bandeiras___preto_by_plamber-d4leocd.jpg" alt="" />
<img class="lazy_res" src="http://img05.deviantart.net/a6be/i/2013/099/8/9/helena_harper_by_plamber-d6125tx.jpg">
</div>
https://codepen.io/gc-nomade/pen/EXLZEN

Loading javascript file depending on window size

I have this code:
$(window).scroll(function() {
if ($(this).scrollTop()>275)
{
$('.navbar-left').fadeIn();
}
else
{
$('.navbar-left').fadeOut();
}
});
to show my logo on my navbar when scrolled down. The problem is I want to disable this script when the window size is at 768px. I understand I could use:
if ( $(window).width() > 768) {
//Add your javascript for large screens here
}
else {
//Add your javascript for small screens here
}
However, I do not program javascript so this is very difficult for me to integrate into my existing code. Could someone kindly help?
I have attempted so I do not get MARKED DOWN.
if ( $(window).width() > 768) {
if ($(this).scrollTop()>275)
{
$('.navbar-left').fadeIn();
}
else
{
$('.navbar-left').fadeOut();
}
});
}

Here you go.
(function(){
$(window).scroll(()=>{
if(window.innerWidth <= 768){
if($(window).scrollTop() > 10){ //<- set to number you need
$('.navbar-left').fadeOut();
}
else{
$('.navbar-left').fadeIn();
}
}
});
}())
.wrapper{ height: 100px; } /* you may need this to prevent jankiness */
.navbar-left{
height: 100px;
background-color: #f00;
}
.push {
height: 1000px; /* just to test scrolling with no content */
}
<div class="wrapper">
<div class="navbar-left">navbar left</div>
</div>
<div class="push"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

jquery animate: two divs, one move out of screen, the other one move in

I want to implement an animation, image there are two divs
D1 | D2
At first D2 is in screen(with 100% width), D1 is invisible(outside of screen).
I want an animation that, D2 moves out to right, outside of screen.
D1 moves from left to right, finally occupies the screen(replace D1).
If you saw how Groupon animate when register user, you may understand what I mean...
Thanks.

EDIT Ok.. I wanted to make a general solution (by animating the wrapper margin). Clearer code and more customizable => http://jsfiddle.net/steweb/rWbFw/
markup:
<div id="mask">
<div id="wrapper">
<div class="full" id="div1">hey there I'm the first div</div>
<div class="full" id="div2">hey there I'm the second div</div>
<div class="full" id="div3">hey there I'm the third div</div>
<!-- add as many 'full' divs as you want -->
</div>
</div>
css:
#mask{
width:100%;
overflow:hidden;
position:relative;
}
#wrapper{
width:100%;
height:300px; /* optional! */
}
.full{
float:left;
height:300px; /* optional! */
}
#div1{
background:green;
}
#div2{
background:white;
}
#div3{
background:red;
}
js:
var utils = {
maskWidth : $('#mask').width(),
currIndex : 0,
setWidths : function(){
//setting maskWidth
utils.maskWidth = $('#mask').width();
//setting wrapper width
$('#wrapper').css('width',$('.full').length * utils.maskWidth);
//setting 'full div' width
$('.full').each(function(index){
$(this).css('width',utils.maskWidth);
});
//setting curr wrapper margin (for window resize)
$('#wrapper').css('margin-left',-(utils.currIndex*utils.maskWidth));
}
}
$('.full').click(function(){
utils.currIndex = $(this).index()+1; //current elem index (for margin calc)
if($(this).next().size() == 0){//if is the last, reset
utils.currIndex = 0;
$('#wrapper').animate({'margin-left':0});
}else{ //animation, negative margin of the wrapper
$('#wrapper').animate({'margin-left':-(utils.currIndex*utils.maskWidth)});
}
});
$(window).resize(function() { //on resize, reset widths and margins
utils.setWidths();
});
utils.setWidths(); //first time, set everything
-- OLD --
You could start with something like this: http://jsfiddle.net/steweb/dsHyf/
markup:
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
css:
#wrapper{
width:100%;
overflow:hidden;
position:relative;
height:300px;
}
.full{
position:absolute;
width:100%;
height:300px;
}
#div1{
background:#FF0000;
left:0px;
}
#div2{
display:none;
background:#FFFF00;
}
js:
$('#div2').css('left',-$('#wrapper').width()).show();
$('#div1').click(function(){
$(this).animate({'left':$('#wrapper').width()});
$('#div2').animate({'left':0});
});
$('#div2').click(function(){
$(this).animate({'left':-$('#wrapper').width()});
$('#div1').animate({'left':0});
});

I have tried this with jQuery timer plugin & it is working very well with localhost.
You need to import : jQuery & jQuery Timer Plugin
And then just implement this :
<script type="text/javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" src="jquery.timers-1.2.js"></script>
<script type="text/javascript">
var i=0,j=100;
$('#1').css('width',"0%");
$('#2').css('width',"100%");
l2r();
function l2r(){
var i=0,j=100;
$(document).everyTime(2, function() {
i+=0.10;
$('#1').css('width',i+"%");
j -= 0.10;
$('#2').css('width',j+"%");
}, 1000);
setTimeout("r2l()", 4000);
}
function r2l(){
var i=100,j=0;
$(document).everyTime(2, function() {
i-=0.10;
$('#1').css('width',i+"%");
j += 0.10;
$('#2').css('width',j+"%");
}, 1000);
setTimeout("l2r()", 4000);
}
And your HTML will be :
<div style='width:100%;'>
<div id='1' style='background-color:#333333; height: 100px; float: left;'></div>
<div id='2' style='background-color:#CCCCCC; height: 100px; float: right;'></div>
</div>
Enjoy & correct me if I am wrong.
EDIT : It seems the problem is still with Different browser ! The timeout should be 4000 (as it is set) for Chrome & 10000 for Fire Fox. Let me edit code to recognize browser & set Time Out later, very soon.