We Keep Coding

Best syntactique javascript for max-width detect / function

Today I have a question for the best syntax on Js :
Here is the usual version
function resize() {
if ($(window).width() < 960) {
$('. slect span').click(function () {
$('.home-footer').toggleClass('open-in-mob');
});
} else {
$('.home-footer').removeClass('open-in-mob');
$('. slect span').click(function () {
$('.home-footer').toggleClass('open-in-mob');
});
}
}
$(document).ready(function () {
$(window).resize(resize);
resize();
});
And here here is an other version that works, but, I would have your opinion:
if (matchMedia('only screen and (max-width:959px)').matches) {
$(".slect span").click(function(event) {
$(this).parents(".home-footer").addClass("open-in-mob");
});
}
If you think that an other syntax is better, please share :)
thanks

This may be easier/simplified by using CSS media queries. Adding JS into the mix to control page layouts should be used as a last resort. The more times you have a DOM reflow the slower your page speed.
Example with CSS:
#media (max-width: 960px) {
// Your code here
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

changing the width of the element according to screen size

I have provided a defined width for the parent here i.e '30%' and that parent is a sidenav of a jquery library. I want to change its width according to the screen size of device with onClick event using javascript like '100%' on less than 600px width and '30%' on above 600px width. I already tried using css media query but the css property are overridden by javascript. Please help how to do it.
$('.menu-list a').click(function (e) {
e.preventDefault();
var hide = $(this).data("hide");
if (hide == true) {
$(this).parent().parent().animate({
width: '30%'
}, 800);
$('#mobile li').css('display', 'none');
$('#mobile .close').css('display', 'block');
$('#mobile .user-logo').css('display', 'none');
} else {
$(this).parent().parent().animate({
width: '30%'
}, 800);
$('#mobile li').css('display', 'none');
$('#mobile .close').css('display', 'block');
$('#mobile .user-logo').css('display', 'block');
$('#mobile .user-logo #edit-btn').css('display', 'inline-block');
}
var url = $(this).attr('href');
$.ajax({
url: url,
beforeSend: function (data) {
$('#content-here').html(loader);
},
dataType: 'html',
success: function (data) {
setTimeout(function () {
$('#content-here').html(data);
}, 1000);
}
});
$('#mobile #content-here').css('display', 'block');
});

CSS media queries would be an easier solution there.
element{
width:30%;
}
#media (max-width: 600px) {
element {
width:100%
}
}
If you still want to use the jQuery:
$("yourElement").css({"width":"30%"});
if(screen.width<"600") $("yourElement").css({"width":"100%"});

Simply you can find windows width by using this jquery function:
$(window).width();
and your code be like:
if($(window).width() > 600){
//make sidenav 30%
}
if($(window).width() < 600){
//make sidenav 100%
}
and simply you can paste this code inside click event. first you have to cache the width inside click event,so that width will be calculated each time you click the button.
Hope you understand the logic.

jQuery Overflow: Hidden on Parent, Detect if Child is Actually On Visible

I'm having an issue with this jQuery that is blowing my mind. I've tried three different JS and jQuery functions people suggested online for accomplishing this and can't seem to get anything to work.
I'm trying to hide the class .arrow-up when .first is actually visible on the screen and hide the class .arrow-down when .last is visible on the screen.
Sounds simple enough, right?
Well the parent element has overflow: hidden on it (like most carousels–they really are from hell). Anyone know how to do this? I'd really appreciate any help, JS really isn't my strongest by any means...
Here's my current jQuery–
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=300"
}, 300);
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=300"
}, 300);
});
});
In this, .vid-list-container is the parent with overflow: hidden on it and .first and .last are both inside the container. The arrow classes are both outside of the container.
Built this pen for anyone who wants to play around with it.
http://codepen.io/seancrater/pen/waPNEW
Thanks!

This should work. Notice however that I used opacity:0, so the arrow can still be clicked. You need to change that!
function checkDownArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() != 0){
$('.arrow-up').css('opacity',1);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) >= $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',0);
}
},350);
}
function checkUpArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() == 0){
$('.arrow-up').css('opacity',0);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) < $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',1);
}
},350);
}
checkDownArrow();
checkUpArrow();
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=173"
}, 300);
checkDownArrow();
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=173"
}, 300);
checkUpArrow();
});
});

EDIT
Okay, I see you have a different problem... may I suggest using a different approach? Something like this.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="vid-item">
...
</div>
<div class="vid-item">
...
</div>
</div>
</div>
CSS:
.outer-wrapper {width:200px; height:150px; overflow:hidden;}
.inner-wrapper {height:auto; margin-top:0;}
.vid-item {width:200px; height:150px;}
JS:
var itemHeight = $('.vid-item').first().height();
var wrapperHeight = $('.inner-container').height();
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(itemHeight - margin > wrapperHeight) {
$('.inner-container').css('margin-top', (itemHeight-wrapperHeight) + 'px');
$('.arrow-down').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin-itemHeight) + 'px');
}
$('.arrow-up').removeClass('hidden');
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(margin + itemHeight >= 0) {
$('.inner-container').css('margin-top', '0');
$('.arrow-up').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin+itemHeight) + 'px');
}
$('.arrow-down').removeClass('hidden');
});

Navigation menu fade in on scroll

I'm designing a website and I'd like the navigation menu to fade in once I scroll down >50px. I'm using the following JavaScript with JQuery library:
(function ($) {
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(500);
} else {
$('.menu').fadeOut(500);
}
});
});
})(jQuery);
The class .menu is set on {display: none;}.

This should work
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('nav').fadeIn(500);
}
else {
$('nav').fadeOut(500);
}
});
});
Codepen Demo

It's working for me.
Your .menu is probably at the top of a page and when you scroll you can't see it.
Add to test:
.menu {
position: fixed;
z-index: 10000; //just to check if it is behind the content
}
DEMO

Try this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(1000);
} else {
$('.menu').fadeOut(1000);
}
});
});
Just corrected your code! It works fine!

backtotop.js bug: box is always visible in Firefox 29

// JavaScript Document
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
This should hide the box until you have scrolled to about 100px from the top. It does work in every browser until the latest Firefox update came out. Any suggestions why that is?
Check the box on the lower left corner on this site: http://lightningsoul.com

Problem had nothing to do with FF29 but with the implementation of the JavaScript.
I had to add a leading / in order to implement it for pages like http://lightningsoul.com/media/vid/1934 etc.