Develop Reference

Why does this jQuery code works only once?

I have this short jQuery code to make the picture disappear when the window is resized. For some reason, after it disappears, it doesn't appear again.
Here is the code:
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").css("display","none");
} else if($(window).width() >= 700){
$("#side-pic").css("display","show");
}
});
});
Also if by any chance you know if there is a way to make picture move under a certain div in my code, I'll be glad to hear it! Thank you guys in advance!

There is no display property such as display: show. Try using $("#side-pic").css("display","block"); instead.
Another Alternative would be hide/show:
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").hide();
}
else if($(window).width() >= 700) {
$("#side-pic").show();
}
});
});

That's because the "show" is not a valid display value. https://developer.mozilla.org/en-US/docs/Web/CSS/display
Also, why the else if, isn't an else good enough?
Or rather a reusable CSS class and jQuery's toggleClass() Method:
jQuery( $ => {
$(window).on('resize', function() {
$("#side-pic").toggleClass("is-hidden", $(this).width() < 700);
});
});
.is-hidden {display: none;}
<div id="side-pic">SIDE PIC</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

You can also write a code Like following
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").hide();
} else if($(window).width() >= 700){
$("#side-pic").show();
}
});
});

Responsive menu not closing on item selection

EDIT: I'm not trying to be pushy but if someone knows how to help me with this, I'd really appreciate it.
www.kwpei.com is the site I'm working on, the issue I'm having is with the responsive menu not closing after a menu or submenu item is chosen. Ive been told the place to make the change needed is in global.js which I've included here in its current state. Could someone show me how to fix the issue?
jQuery(function( $ ){
$('.site-header').addClass('front-page-header');
$('.footer-widgets').prop('id', 'footer-widgets');
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');
$(".responsive-menu-icon").click(function(){
$(this).next(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 800) {
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});
$(".responsive-menu > .menu-item").click(function(event){
if (event.target !== this)
return;
$(this).find(".sub-menu:first").slideToggle(function() {
$(this).parent().toggleClass("menu-open");
});
});
// Local Scroll Speed
$.localScroll({
duration: 750
});
// Sticky Navigation
var headerHeight = $('.site-header').innerHeight();
var beforeheaderHeight = $('.before-header').outerHeight();
var abovenavHeight = headerHeight + beforeheaderHeight - 1;
$(window).scroll(function(){
if ($(document).scrollTop() > abovenavHeight){
$('.nav-primary').addClass('fixed');
} else {
$('.nav-primary').removeClass('fixed');
}
});
});

You can slide up the menu again on clicking any of the menu items. Try adding this bit of jquery:
$('.menu-item a').click(function () {
$('.responsive-menu').stop(true, true).slideUp();
});
EDIT:
$('.menu-item a').click(function () {
if ($(window).width() < 800) {
$('.sub-menu').stop(true, true).slideUp();
$('.responsive-menu').stop(true, true).slideUp();
$('.menu-item').removeClass('menu-open');
}
});
If 800px is your breakpoint in the media query

Scroll-down to the search result page in mobile

I started learning JavaScript a few days ago and I'm enjoying it so far.
Today I've been given a task where I need to add a scroll down function to an element when a button is clicked, but only if the screen width is less than or equal to 699 pixel. I've finished a webpage, and I just need to add the JavaScript for it.
This is the script snippet I have at the moment:
$(document).ready(function (){
$("#button").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#searchResult").offset().top
}, 2000);
//});
});
});
And I need to add this:
if (screen.width <= 699)
How do I add the if statement to the script above? Also is there an easier way of doing this?
Thank you very much for your time,

$(document).ready(function (){
var screenWidth = $(window).width();
$("#button").click(function (){
if (screenWidth <= 699){
$('html, body').animate({
scrollTop: $("#searchResult").offset().top
}, 2000);
}
//other stuff your button does on all views
});
});
I recommend setting mobile to 480px and tablet to 768px.

Use this
var width = $(window).width();
if(width < 699) {
//your script
}

How to call a predefined functions in multiple scenerio?

I am completely new to jquery, here is the code for toggling to collaspe the sidebar.
//define script for sidebar toggling
function togglesidebar() {
$('#sidebar').toggleClass('column-collapse');
}
$(document).ready(function(){
$(function() {
$('[data-toggle=offcanvas]').click(togglesidebar);
});
It works just fine. But when I add the following code to make it also collapse when screen size is < 768, it stops working.
//define script for sidebar toggling
function togglesidebar() {
$('#sidebar').toggleClass('column-collapse');
}
$(document).ready(function(){
$(function() {
$('[data-toggle=offcanvas]').click(togglesidebar);
});
$(window).resize(function(){
windowsize = $(window).width();
if(windowsize < 768) {
$('[data-toggle=offcanvas]').click(togglesidebar);
});
});
I wonder where the problem is and i will be grateful if someone can help me with it.
EDIT:
Here is the website:
http://wileyphp.no-ip.biz/tagees/testing.html#
I want to collapse the sidebar when it is windowsize <768px
and
there is a button to toggle collapse/expand in the sidebar. I want it to work at all screen size.

You are missing '}' at the end of if condition.
$(document).ready(function(){
$('[data-toggle=offcanvas]').click(togglesidebar);
$(window).resize(function(){
windowsize = $(window).width();
if(windowsize < 768) {
$('[data-toggle=offcanvas]').click(togglesidebar);
} /**/ '}' missing here**
});
});

jQuery/Javascript if width issue

I can't seem to get my if statement working. I know that everything inside the if statement works, so would appreciate some help.
$(document).ready(function () {
if(screen.width > 350) {
$('#search').hide();
$('.trigger').click(function () {
$('#search').slideToggle("500");
});
}
});

try using:
if ($(window).width() > 350) {
or
if ($(document).width() > 350) {
i hope it helps.

This returns width of browser viewport:
$(window).width();
This returns width of HTML document:
$(document).width();