We Keep Coding

jQuery .scroll() trigger with window height

I'm trying to trigger a function when the mouse wheel is spun, however the div is the height of the window, therefor isn't scrollable and isn't triggering my function. This is the code I am using to test if it works;
jQuery(document).ready(function($) {
$( document ).scroll(function () {
console.log('it works!');
});
});
You can see the full fiddle here; https://jsfiddle.net/8wr8p4ub/1/
If I change the height to an exact value, it triggers, however how can I achieve this when the element isn't scrollable?

You have to check with mousewheel event here and not document scroll. Since in your case document is not scrolling.
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
console.log("scroll up");
}
else {
// scroll down
console.log("scroll down");
}
});
* {
padding: 0;
margin: 0;
}
.hi {
height: 100vh; // Change to 1200px and see the output in the console.
width: auto;
background: #222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hi"></div>

You don't need to bother yourself about the scroll once the page content is not so long to bring it out. But from what i saw there, your code is fine, and it will work whenever the content exceeds the minimum page scroll
Better still, you can make use of the mousewheel event in JS

You need to use mousewheel event handler:
$('div').on('mousewheel', function(event){
if(event.originalEvent.wheelDelta / 120 > 0) {
console.log('scrolled up');
} else {
console.log('scrolled down');
}
});

How to remove hover function from mobile responsive screen

I am using hover function when window normal screen
jQuery(".main-menu ul li").hover(
function() {
jQuery(this).children("ul").slideToggle(1000);
}
But I want when screen will be 768px for mobile responsive this hover function don't work and click function will active. I have used this function
jQuery(window).resize(function() {
var screenWidth = jQuery(window).width();
if(screenWidth <= 768){
jQuery(".main-menu ul li").click(function() {
jQuery(this).children("ul").slideToggle(1000);
});
}
});
But Its don't work.

Try after resize window unbind previous click event :
jQuery(window).resize(function() {
$( ".main-menu ul li").unbind();
var screenWidth = jQuery(window).width();
if(screenWidth <= 768){
jQuery(".main-menu ul li").click(function() {
jQuery(this).children("ul").slideToggle(1000);
});
}
});

How to start plugin FullPage.js when browser window is resized from mobile to tablet and up?

Using fullPage.js, I disabled the plugin when window size is lower then 767px with the code below. It works, but when I resize it back from below 767px to something like 960px, the plugin doesn't work. Can anyone help restart the plugin after resizing?
JS:
function fullPageScroll() {
$('#main').fullpage({
navigation: true
});
}
var $win = $(window).width();
if ( $win > 767 ) {
fullPageScroll();
} else {
fullPageScroll();
$.fn.fullpage.destroy('all');
}

Because you also need to apply that on the resize event:
//first call when loading the site
doneResizing()
var resizeId;
//calling the function again on resize so we can get the new width
$(window).resize(function () {
//in order to call the functions only when the resize is finished
clearTimeout(resizeId);
resizeId = setTimeout(doneResizing, 500);
});
//your original code
function doneResizing() {
var $win = $(window).width();
if ($win > 767) {
fullPageScroll();
} else {
fullPageScroll();
$.fn.fullpage.destroy('all');
}
}

just use this
#media (max-width:767px){
#scroll-section{
transform: translate3d(0px, 0px, 0px) !important;
}
body {
overflow: auto !important;
}
}

jQuery window.width 'if' 'else if' 'else' statment not working

function changeDrop() {
var windowSize = $(window).width();
if (windowSize > 450) {
$('.menu-361').hover(
function() {
$('.menu-361 ul').show();
},
function() {
$('.menu-361 ul').hide();
});
console.log("screen width is greater than 450px");
}
else if (windowSize <= 450) {
$('.menu-361').on('hover', function () {
//mousehover
} , function(){
//mouseout
} );
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
console.log("screen width is less than 450px");
}
else {}
}
changeDrop();
$(window).resize(changeDrop);
After the if statment is true the bit of code is loaded in the memory i think. And when the window.width is <= 450 the code from the if statment or > 450 still runs. Any idea how to make this work?
http://tidalbania.com/tidnew/
The link in witch the demo is on the real site!
If you need a fiddle i can update the question.

As others have mentioned, you should not bind event handlers on every change. This should suffice:
$('.menu-361').hover(hoverInOut);
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
function hoverInOut(event) {
var windowSize = $(window).width();
if (windowSize > 450) {
if(event.type == "mouseenter")
$('.menu-361 ul').show();
else
$('.menu-361 ul').hide();
}
}

Well for starters, your code is essentially if A, else if not A, else which is redundant. Just if A, else is fine.
That aside, you are attaching a new event handler for every single time your code runs. That's a lot of event handlers! You are also never detaching your handlers, instead trying to re-add blank ones.
Take a moment to learn how event handlers work ^_^

function changeDrop() {
var windowSize = $(window).width();
if (windowSize > 450) {
$('.menu-361').hover(
function() {
$('.menu-361 ul').show();
},
function() {
$('.menu-361 ul').hide();
});
console.log("screen width is greater than 450px");
}
else {
$('.menu-361').unbind('mouseenter mouseleave');
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
console.log("screen width is less than 450px");
}
}
changeDrop();
$(window).resize(changeDrop);
I think i fixed the issue adding the unbind ('mouseenter mouseleave') when width is less than 450px by removing the binded hover function.
Is this the way it should be done?

Remove JS function at certain screen width

I am trying to remove certain functionality when the screen is at certain widths. I was wondering if you could tell me why this doesn't work?
http://jsbin.com/ALAYOru/1/edit
I remove the 'has-sub-menu' class when the screen goes below 700px but it still executes the mouseover event.
Thanks!

Or this.
function isWindowSmall()
{
if(window.innerWidth < 700px) return true;
else return false;
}
$(".some-btn").on('click',function()
{
if(isWindowSmall()){
//do something for small windows
}
else{
//do something else for big windows
}
});

That is becauase what this is doing is.
$(".has-sub-menu").mouseenter(function(){
$(this).css('background-color','red');
}).mouseleave(function(){
$(this).css('background-color','transparent');
});
This goes and finds all of the elements with the class of .has-sub-menu and then it attaches the event listener, so this listener will be applied forever, what you could do is something like this.
$("body").on({
mouseenter: function(){
$(this).css('background-color','red');
},
mouseleave: function(){
$(this).css('background-color','transparent');
}
}, '.has-sub-menu');
This will check to see if the element has the class every time it is clicked
Demo: http://jsbin.com/ALAYOru/6/edit
Note: in the demo, you might have to make the output window bigger than 720px and then refresh to see the proper effect.

You can add a function to check the screen size and remove the onmouseover event listener.
function check_screen() {
if(window.innerWidth < 700px)
{
whateveryourelementiscalled.removeEventListner('onmouseover', //whatever your mouseover function was);
}
}

try this.
window.onresize = function () {
if(window.innerWidth < 700) {
// your code here
}
}