We Keep Coding

I am not able to add and remove the classes

My Code:
window.addEventListener('scroll', scrollWhere);
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
var idScroll = $('.me').offset().top;
var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
I want to add a class when the scroll is past a certain point and remove it when is smaller than that certain point.

Get your idScroll value outside scrollWhere function as because it re-initiate calculation again and again and returns different values each time as because it has a fixed position. check below snippet for reference.
window.addEventListener('scroll', scrollWhere);
var idScroll = $('.me').offset().top;
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
//var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
.container {
height: 300vh;
width: 100%;
background-color: grey;
padding: 0;
margin: 0;
}
.content {
height: 100px;
width: 100%;
background-color: cyan;
}
.me {
height: 50px;
width: 100%;
background-color: red;
}
.me-fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content"></div>
<div class="me"></div>
</div>

Here's a simple example to add a class when scroll passing a certain point. Hope you can get an idea. >>> JSFiddle
$(window).scroll(function(){
var winH = $(window).scrollTop();
var ruler = $('.ruler').position().top;
if(ruler < winH){
$('.nav').addClass('me-fixed');
}
else{
$('.nav').removeClass('me-fixed');
}
});
body{
height: 1500px;
}
.nav{
height: 50px;
background: #a1bfbe;
color: #000;
width: 100%;
position: relative;
top: 250px;
text-align: center;
}
.nav.me-fixed{
background: #c2debf;
}
p{
font-size: 20px;
display: none;
}
.me-fixed p{
display: block;
}
.ruler{
position: fixed;
top: 150px;
border-bottom: 1px solid red;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<p>
Fixed
</p>
</div>
<div class="ruler">
</div>
Also if you can provide the html and css structure, it will be easy to identify the issue.

jQuery hamburger menu - multiple events called

$( document ).on( "vclick", '#icon', function() {
$("#navigation").animate({height: 'toggle'}, 600, "linear");
});
Hello,
I currently have a hamburger menu that works perfectly except for one thing. If I click the #icon 10 times, it will execute the code 10 times, I wonder if its possible to make it only clickable when its finished and remove the whole queue system.
Thanks in advance.

You could probably do something in the lines of this:
JavaScript
var animating = false;
$(document).on( "vclick", '#icon', function() {
if(!animating) {
animating = true;
$("#navigation").animate({height: 'toggle'}, 600, "linear", function() {
animating = false;
});
}
});

You could use a workaround by hidding the #icon until the animation done then show it again :
$( document ).on( "vclick", '#icon', function() {
var _this = $(this);
//Hide the icon
$(this).hide();
$("#navigation").animate({height: 'toggle'}, 600, "linear", function() {
//Show the icon after animation
_this.show();
});
});
Hope this helps.

Using Arg0n's answer as inspiration, I have created a jQuery plugin.
The plugin used closure which means that the function returns another function so that variables are scoped inside, rather than outside; in the global scope.
(function($) {
$.fn.collapser = function(targetSelector, ms, type) {
this.on('click', function() {
var animating = false;
return (function() {
if (!animating) {
animating = true;
$(targetSelector).animate({
height: 'toggle'
}, ms, type, function() {
animating = false;
});
}
}());
});
}
}(jQuery))
$('#icon').collapser('#navigation', 600, 'linear');
body {
background: #222;
}
#page {
background: #DDD;
}
#icon {
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
margin-bottom: 1em;
background: #446;
color: #FFF;
font-weight: bold;
cursor: pointer;
border: thin solid #AAD;
}
ul#navigation {
list-style-type: none;
margin: 0;
padding: 0.25em;
background: #E7E7F7;
}
ul#navigation li {
display: inline-block;
width: 6em;
height: 2.5em;
line-height: 2.5em;
margin: 0;
padding: 0;
text-align: center;
background: #F7F7FF;
}
#content {
background: #FFF;
padding: 1em;
height: 50vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div id="icon">Icon</div>
<ul id="navigation">
<li>Home</li>
<li>Articles</li>
<li>Historic</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="content">
Hello World
</div>
</div>
You could also unbind and re-bind the event. This way you don't have to create any state variables. This may be the best way to handle this.
(function($) {
$.fn.collapser = function(targetSelector, ms, type) {
var eventName = 'click';
var fn = function(source) {
$(source).unbind(eventName, fn);
$(targetSelector).animate({
height: 'toggle'
}, ms, type, function() {
$(source).bind(eventName, fn);
});
};
this.on(eventName, function() {
fn.call(this);
});
}
}(jQuery))
$('#icon').collapser('#navigation', 1600, 'linear');
body {
background: #222;
}
#page {
background: #DDD;
}
#icon {
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
margin-bottom: 1em;
background: #446;
color: #FFF;
font-weight: bold;
cursor: pointer;
border: thin solid #AAD;
}
ul#navigation {
list-style-type: none;
margin: 0;
padding: 0.25em;
background: #E7E7F7;
}
ul#navigation li {
display: inline-block;
width: 6em;
height: 2.5em;
line-height: 2.5em;
margin: 0;
padding: 0;
text-align: center;
background: #F7F7FF;
}
#content {
background: #FFF;
padding: 1em;
height: 50vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div id="icon">Icon</div>
<ul id="navigation">
<li>Home</li>
<li>Articles</li>
<li>Historic</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="content">
Hello World
</div>
</div>

How to create a slideshow timer and add functioning tabs

I've tried various different things to implement this but nothing seems to work for me i am trying to make the current progress bar have functionality e.g goes according to when each slide changes, and also add tabs that will allow a user to jump to a slide on click.
Demo Fiddle
Html
<div class="omega_player">
<ul class="omega_slides">
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
<ul class="omega_controls">
<div class="omega_timer"><div class="progress"></div></div>
<div class="omega_set">
<a onclick="return false" class="control_prev"><i class="fa fa-angle-left"></i></a>
<a onclick="return false" class="control_play"><i class="fa fa-play"></i></a>
<a onclick="return false" class="control_pause"><i class="fa fa-pause"></i></a>
<a onclick="return false" class="control_next"><i class="fa fa-angle-right"></i></a>
</div>
</ul>
</div>
JS
jQuery(document).ready(function ($) {
timer = setInterval(function () {
moveRight();
}, 8000);
var slideCount = $('.omega_player>.omega_slides>li').length;
var slideWidth = $('.omega_player>.omega_slides>li').width();
var slideHeight = $('.omega_player>.omega_slides>li').height();
var sliderUlWidth = slideCount * slideWidth;
$('.omega_player').css({ width: slideWidth, height: slideHeight });
$('.omega_player>.omega_slides').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides');
function moveLeft() {
$('.omega_player>.omega_slides').animate({
left: + slideWidth
}, 200, function () {
$('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides');
$('.omega_player>.omega_slides').css('left', '');
});
};
function moveRight() {
$('.omega_player>.omega_slides').animate({
left: - slideWidth
}, 200, function () {
$('.omega_player>.omega_slides>li:first-child').appendTo('.omega_player>.omega_slides');
$('.omega_player>.omega_slides').css('left', '');
});
};
$('.omega_player>.omega_controls>.omega_set>.control_prev').click(function () {
clearInterval(timer);
$('.omega_player>.omega_controls>.omega_set>.control_play').show();
$('.omega_player>.omega_controls>.omega_set>.control_pause').hide();
moveLeft();
});
$('.omega_player>.omega_controls>.omega_set>.control_next').click(function () {
clearInterval(timer);
$('.omega_player>.omega_controls>.omega_set>.control_play').show();
$('.omega_player>.omega_controls>.omega_set>.control_pause').hide();
moveRight();
});
$('.omega_player>.omega_controls>.omega_set>.control_play').click(function () {
$('.omega_player>.omega_controls>.omega_set>.control_play').hide();
$('.omega_player>.omega_controls>.omega_set>.control_pause').show();
moveRight();
timer = setInterval(function () {
moveRight();
}, 8000);
});
$('.omega_player>.omega_controls>.omega_set>.control_pause').click(function () {
clearInterval(timer);
$('.omega_player>.omega_controls>.omega_set>.control_play').show();
$('.omega_player>.omega_controls>.omega_set>.control_pause').hide()
});
return timer;
});
CSS
.omega_player {
position: relative;
overflow: hidden;
margin: 0 auto;
width: 950px;
border-radius: 4px;
}
.omega_player>.omega_slides {
position: relative;
margin: 0;
padding: 0;
height: 450px;
list-style: none;
}
.omega_player>.omega_slides>li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 950px;
height: 450px;
background: #ccc;
text-align: center;
line-height: 300px;
}
.omega_player>.omega_controls {
bottom: 0;
left: 0;
right: 0;
height: 50px;
margin: 0;
padding: 0;
background: #333;
background: rgba(51,51,51,.8);
position: absolute;
z-index: 2;
width: 100%;
}
.omega_player>.omega_controls>.omega_set {
position: absolute;
right: 20px;
}
.omega_player>.omega_controls>li>.control_prev,
.omega_player>.omega_controls>li>.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
.omega_player>.omega_controls>li>.control_prev:hover,
.omega_player>.omega_controls>li>.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
.omega_player>.omega_controls>li>.control_prev {
border-radius: 0 2px 2px 0;
}
.omega_player>.omega_controls>li>.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.omega_player>.omega_controls>li>.control_play,
.omega_player>.omega_controls>li>.control_pause {
background-color: green;
color: #fff;
padding: 10px;
}
.omega_player>.omega_controls>li>.control_play {
display: none!important;
}
.omega_player>.omega_controls>.omega_set>a {
color: #FFF;
color: rgba(250,250,250,.95);
font-size: 20px;
vertical-align: middle;
padding: 10px;
display: inline-block;
cursor: pointer;
}
.omega_player>.omega_controls>.omega_set>:hover {
background: rgba(0,0,0,0.2);
color: #FFF;
}
.omega_player>.omega_controls>.omega_set>.control_prev,
.omega_player>.omega_controls>.omega_set>.control_next,
.omega_player>.omega_controls>.omega_set>.control_play,
.omega_player>.omega_controls>.omega_set>.control_pause {
font-size: 45px;
line-height: 0;
margin: 0;
height: 50px;
width: 50px;
padding: 0;
text-align: center;
transition: .1s ease-in-out;
border: 1px solid #FFF;
border-color: rgba(250,250,250,0.65);
border-top: 0;
border-bottom: 0;
float: left;
}
.omega_player>.omega_controls>.omega_set>.control_play,
.omega_player>.omega_controls>.omega_set>.control_pause {
border:0;
font-size: 25px;
line-height: 48px;
}
.omega_player>.omega_controls>.omega_set>.control_play {
display:none;
}
.omega_player>.omega_controls>.omega_timer {
background: #333;
background: rgba(51,51,51,.9);
height: 4px;
top: -4px;
position: absolute;
left: 0;
right: 0;
width: 100%;
}
.omega_player>.omega_controls>.omega_timer>.progress {
height: 4px;
display: inline-block;
background-color: #EB0000;
background: rgba(235, 0, 0, 0.86);
position: absolute;
width: 60%;
z-index: 999;
}
html,
body {margin:0;padding:0;font-family: sans-serif;font-size: 14px;}
Hope you can help thanks in advance!

Code with 4 Slides and Full Screen DEMO
Code with 8 Slides and Full Screen DEMO
Here you go. I have just written a function which will calculate progressbar's width based on number of elements present and active slide. Below is how the function looks like:
function progress(){
var activeElement=$('li:nth-child(2)').attr('data-slide');
//get the activeElement which will be always as 2nd child as per your code
var width=(increment*activeElement)+'%';
//increment variable will be based on `100/numberofslidespresent`
//each li should have a data-* property, say data-slide here, which will actually
//contain number in incremental order. Now multiply increment and activeElement
//and add % so that it will become something like 25%, 50% everytime.
$('.progress').animate({
'width':width //animate width of progressbar
},300);
}
Here is the complete code:
Html
<div class="omega_player">
<ul class="omega_slides">
<li data-slide="1">SLIDE 1</li>
<li data-slide="2" style="background: #aaa;">SLIDE 2</li>
<li data-slide="3">SLIDE 3</li>
<li data-slide="4" style="background: #aaa;">SLIDE 4</li>
<!--extra property added to each li which data-slide with incremental number-->
</ul>
<ul class="omega_controls">
<div class="omega_timer"><div class="progress"></div></div>
<div class="omega_set">
<a onclick="return false" class="control_prev"><i class="fa fa-angle-left"></i></a>
<a onclick="return false" class="control_play"><i class="fa fa-play"></i></a>
<a onclick="return false" class="control_pause"><i class="fa fa-pause"></i></a>
<a onclick="return false" class="control_next"><i class="fa fa-angle-right"></i></a>
</div>
</ul>
</div>
JS
var increment; // a global variable
jQuery(document).ready(function ($) {
timer = setInterval(function () {
moveRight();
}, 8000);
var slideCount = $('.omega_player>.omega_slides>li').length;
increment=100/slideCount; //get how much to increment parts should be
var slideWidth = $('.omega_player>.omega_slides>li').width();
var slideHeight = $('.omega_player>.omega_slides>li').height();
var sliderUlWidth = slideCount * slideWidth;
$('.omega_player').css({ width: slideWidth, height: slideHeight });
$('.omega_player>.omega_slides').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides');
progress();//call this function once prepended on page load
function moveLeft() {
$('.omega_player>.omega_slides').animate({
left: + slideWidth
}, 200, function () {
$('.omega_player>.omega_slides>li:last-child').prependTo('.omega_player>.omega_slides').addClass('active');
progress(); //after prepending call it once again
$('.omega_player>.omega_slides').css('left', '');
});
};
function moveRight() {
$('.omega_player>.omega_slides>li').removeClass('active')
$('.omega_player>.omega_slides').animate({
left: - slideWidth
}, 200, function () {
$('.omega_player>.omega_slides>li:first-child').appendTo('.omega_player>.omega_slides');
progress(); //after appending call it once again
$('.omega_player>.omega_slides').css('left', '');
});
};
//Your other functions here remains as it is so I haven't attached them
});
function progress(){
var activeElement=$('li:nth-child(2)').attr('data-slide');
var width=(increment*activeElement)+'%';
$('.progress').animate({
'width':width
},300);
}
CSS
On CSS part I just changed width mentioned for progressbar from 60% to
0%

Why is my JQuery running slow?

I am extremely new to JQuery, I just started looking into it today. I have searched all around for what might be causing this bit of code to not work. When you scroll down, I want the h1 to move to the side and a menu button to appear. That works, but when I scroll back up again, it takes an extremely long time to reverse itself. I have tried to fine anything that might be causing it like a delay or something, but as far as I can see, there isn't any problems.
Link to website: http://www.dragonmath.net/rockets
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<title>Rockets</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<header>
<img id="menu" src="images/menu1.png" />
<div id="headerdiv">
<h1>Rockets</h1>
<img id="logo" src="images/logo1.png" />
</div>
</header>
<nav>
<ul>
<li>
<a>Space Race</a>
</li>
<li>
<a>SpaceX</a>
</li>
</ul>
</nav>
<script>
$( document ).ready(function() {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
$(window).on('scroll', function () {
if ($(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.delay(800).slideDown(800);
$nav.addClass('testnav');
}
if ($(window).scrollTop() < 40) {
$menu.slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
}
});
});
</script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
color: #00AAFF;
font-family: Arial;
}
body {
height: 800px;
}
header {
position: fixed;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: #333;
z-index: 1;
}
div#headerdiv {
display: inline;
transition: all 1s;
}
h1 {
display: inline;
margin-left: 40px;
font-size: 40px;
}
header > img#menu {
position: fixed;
top: 20px;
left: 40px;
width: 40px;
height: 40px;
display: none;
}
header > div > img#logo {
display: inline;
width: 60px;
height: 60px;
position: relative;
top: 18px;
left: 20px;
transition: height 1s, width 1s;
}
nav {
position: relative;
top: 100px;
height: 40px;
width: 100%;
background-color: #333;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
height: 40px;
width: 200px;
text-align: center;
border-right: 1px solid #00AAFF;
}
nav > ul > li > a {
position: relative;
top: 6px;
}
.testheaderdiv {
margin-left: 80px;
transition: all 1s;
}
.testnav {
display: none;
}

The main problem I could see with the code is how scroll is handled, for every scroll event you are adding delay to the menu element.
So try
$(document).ready(function () {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
var flag;
$(window).on('scroll', function () {
if (flag !== 1 && $(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.stop(true, true).delay(800).slideDown(800);
$nav.addClass('testnav');
flag = 1;
}
if (flag !== 2 && $(window).scrollTop() < 40) {
$menu.stop(true, true).slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
flag = 2;
}
});
});

Create a simple jQuery content slider

Im trying to create a simple content slider with jQuery and css.
The slider has two columns :
the right one acts as a slider pager
the left one contains current content
I've managed to create html, css and jQuery function which changes active tab and related content. but I want function to repeat itslef and by hovering to pagers slider stop paging, then by mouseout slider continue.
HTML
<div id="slider">
<div id="rightcol">
<div class="content" id="content1">
</div>
<div class="content" id="content2">
</div>
<div class="content" id="content3">
</div>
</div>
<div id="leftcol">
<ul>
<li id="1" class="active">a</li>
<li id="2">b</li>
<li id="3">c</li>
</ul>
</div>
</div>
CSS
#slider
{
width: 600px;
height: 300px;
}
#leftcol
{
width: 300px;
height: 300px;
float: left;
}
#rightcol
{
width: 300px;
height: 300px;
float: right;
background-color: #F0F0F0;
}
#leftcol ul li
{
width: 300px;
height: 100px;
}
#leftcol ul li.active
{
background-color: #F0F0F0;
}
.content
{
width: 300px;
height: 300px;
display: none;
}
jQuery
$(document).ready(function () {
sd(3);
});
function sd(currentId) {
var currentcontent = "content";
s = "#" + String(currentcontent) + String(currentId);
$("#leftcol ul li").removeClass("active");
$(".content").hide();
$("#" + String(currentId)).addClass("active");
$(s).show();
}
What should be added to js?
jsfiddle demo

I have tried in simple jQuery content slider in the below way & its working even in responsive.
Demo link: jsfiddle.net/b54c38hj/1/
<div class="container">
<div class="slider">
<ul>
<li>Slider-1</li>
<li>Slider-2</li>
<li>Slider-3</li>
</ul>
</div>
<a class="prev" href="javascript:void(0)">Prev</a>
<a class="next" href="javascript:void(0)">Next</a>
body{
margin:0;
padding:0;
}
.container{
width: 100%;
height: 300px;
background: rgba(0,0,0,.45);
margin: 0 auto;
}
.container .slider{
overflow: hidden;
height: 300px;
}
.container .slider ul{
position: relative;
padding:0;
margin:0;
list-style-type: none;
height: 300px;
}
.container .slider ul li{
background: #efefef;
float: left;
color: #000;
font-size: 22px;
text-align: center;
height: 300px;
line-height: 300px;
}
.container a{
text-decoration: none;
position: absolute;
}
.container a.prev{
left: 0;
}
.container a.next{
right: 0;
}
var Slider = {};
Slider = {
_globalvar: function(){
var self = this;
self.Ele = $('.slider');
self.EleList = this.Ele.find('li');
self.Elelength = this.EleList.length;
self.Elewidth = this.Ele.outerWidth(true);
self.EleSetUl = this.Elelength * this.Elewidth;
self.current = 0;
},
_assignvar: function(){
Slider.Ele.find('ul').width(Slider.EleSetUl);
Slider.EleList.width(Slider.Elewidth);
Slider.Ele.find('li:first-child').addClass('active');
},
_prev: function(){
var prevlength = Slider.Ele.find('li.active').prev().length;
console.log(prevlength)
if(prevlength != 1){
Slider.current = null;
}
else{
Slider.Ele.find('li.active').removeClass('active').prev().addClass('active');
Slider.current = "+="+Slider.Elewidth;
}
Slider.Ele.find('ul').animate({
left: Slider.current
});
return false;
},
_next: function(){
var nextlength = Slider.Ele.find('li.active').next().length;
if(nextlength){
Slider.Ele.find('li.active').removeClass('active').next().addClass('active');
Slider.current = "-="+Slider.Elewidth;
}
else{
Slider.current = null;
Slider.Ele.find('li.active').removeClass('active').parent().find('li:first-child').addClass('active');
}
Slider.Ele.find('ul').animate({
left: Slider.current
});
return false;
},
_bind: function(){
$('.prev').on('click', function(){
Slider._prev();
});
$('.next').on('click', function(){
Slider._next();
});
},
_init: function(){
var self = this;
self._globalvar();
self._assignvar();
self._bind();
}
};
$(document).ready(function(){
Slider._init();
});
https://jsfiddle.net/b54c38hj/1/

To make it to reapeat you can use the setTimeout() and to make it stop whenever your mouse goes over the content you can use the hover() jquery event! Here's a Demo