Develop Reference

jquery collapsible menu opens on scroll from mobile only

having an issue with a jquery function. I have a few resize events that collapses the navigation at certain widths. Works fine from desktop view but on the phone, the menu triggers open when I start to scroll down the page on first page load. Once I close it and scroll down the page again it's fine. Can't figure this out. Any help is much appreciated..
//---HIDE AND OPEN MENU ON BUTTON CLICK---//
$('#mobile_menu_btn').click(function () {
$('nav ul').slideToggle('fast', function () {
$(this).css('display') == 'none' ? $(this).removeClass('showNav').addClass('hideNav').removeAttr('style') : $(this).removeClass('hideNav').addClass('showNav').removeAttr('style');
});
})
//---TRIGGER AUTOMATIC MENU BUTTON CLICK AT SPECIFIED PAGE WIDTH---//
window.addEventListener('resize', resize);
function resize() {
if (window.innerWidth < 550) {
jQuery(function () {
jQuery('#mobile_menu_btn').click();
});
window.removeEventListener('resize', resize);
}
}
//---TRIGGER AUTOMATIC MENU BUTTON CLICK AT SPECIFIED PAGE WIDTH ON PAGE LOAD ONLY ---//
if (window.innerWidth < 550) {
jQuery(function () {
jQuery('#mobile_menu_btn').click();
});
}
JSFiddle

Responsive Mobile Menu

I have a function that applies a class to the html element and also detects if a drop down has been clicked below the width of 900px.
When I resize the browser from desktop view to below 900px I find occasionally that the dropdown class "active-hit" doesn't get applied - meaning that the menu won't open. Any ideas why this might be? I have to reload the page to make it work in mobile view.
// Add Mobile View Class to HTML ELEMENT below 900px
(function($) {
var $window = $(window),
$html = $('html');
$dropdown = $('.dropdown-nav > a');
function resize() {
if ($window.width() < 900) {
$dropdown.on('click', function(e){
$(this).parent().toggleClass('active-hit');
e.preventDefault();
e.stopPropagation();
});
return $html.addClass('mobile-view');
} else {
$html.removeClass('mobile-view');
$dropdown.parent().removeClass('active-hit');
}
}
$window
.resize(resize)
.trigger('resize');
})(jQuery);

As I mentioned in a comment, window resize will not trigger your function, but if You want to do so in testing purposes then you can try to use this:
$(window).resize(function() {
resize();
});
And here is working fiddle for you

Javascript Toggle open by width

i have actually an Simple/Standart Toggle System from Bootstrap, my Knowledge about Javascript is 0, what i want is following, if the width size min. 700px then everytime open else the standart system. I Need only the function if desktop/media width size min. 700px so stay it open.
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});

My Bad! Syntax error in my code before thats the right way
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
function resize() {
if ($(window).width() > 614) {
$('#wrapper').removeClass('toggled');
}
}
$(document).ready( function() {
$(window).resize(resize);
resize();
});
</script>

Responsive jQuery doesn't work: Click below 768px width and hover above 768px

I need a menu to open when I am hovering over an li when above 768px window width, and it to open when I click the same li when below 768px window width. I keep having problems where the click, or hover, carries over between the two screen sizes (0-768px and 769 and up).
function colorChangeTest(width){
if (width <= 767) {
$('li').click(function() {
$(this).toggleClass('colorChange');
});
} else {
$('li').hover(function() {
$(this).toggleClass('colorChange');
});
}
}
$(function () {
var onLoadWidth = $(window).width();
colorChangeTest(onLoadWidth);
$(window).resize(function () {
var resizeWidth = $(window).width();
colorChangeTest(resizeWidth);
});
})
jsfiddle example
What is the best way to do responsive jQuery that tell something it can be clicked, or hovered, depending on screen size, and determine this on page load and window resize?

FYI it is better to attach the same event listeners once in code to the same elements. In your case each time when window is resizing new event listeners (hover or click) are attached again and again.
Use unbind to aviod it. For example:
function colorChangeTest(width){
var $li= $('li');
$li.unbind();
if (width <= 767) {
$li.click(function() {
$(this).toggleClass('colorChange');
});
} else {
$li.hover(function() {
$(this).toggleClass('colorChange');
});
}
}

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**
});
});