Develop Reference

jQuery Disable SlideToggle in desktop resolution

I have a sidebar with 3 sections:
In mobile resolutions, these sections appear like accordion tabs with only the header being visible, clicking on the anchor inside the header element triggers slideToggle which shows/hides rest of the content in that section. This works.
In desktop resolutions, the 3 sections and it's entire content are always visible, so basically clicking on the header shouldn't do anything. When I load/refresh the page in desktop resolution, clicking the header anchor element doesn't do anything (which is great) but if I switch to mobile resolution and then switch back to desktop resolution then clicking on the header anchor element toggles the contents, so please let me know, how to stop this slideToggle effect in desktop.
jQuery Code:
$(window).on('load resize', function(){
if ($('#page-content').width() < 991 ) {
$('#primary-sidebar header > a').click(function(e) {
e.preventDefault();
$(this).parent('header').siblings('.widget').slideToggle();
});
} else if ($('#page-content').width() > 992 ) {
$('#primary-sidebar header > a').click(function(e) {
return false;
});
}
});
Thanks!!!

Although unbinding the click event worked, the $(window).on('load resize', function(){ was creating issues, on resizing window, the slideToggle effect would run multiple times on single click. There is no need for the window resize/load line of code. The following is the code that works perfectly for me.
$('#primary-sidebar header > a').on('click', function(e) {
e.preventDefault();
var width = $('#page-content').width();
if (width <= 991) {
$(this).parent('header').siblings('.widget').slideToggle();
$(this).find('.fa.fa-chevron-left').toggleClass('fa-chevron-down');
}
});

Content is overlapping with Menu

Create a html page for mobile some part of content is showing on Menu bar.
Only the bottom content is showing on menu bar how to avoid it ?
and also I want to disable scroll-bar when menu button is clicked & enable when content is touched using Mobile.
I tried below code but its disabliling but not enabling scrollbar when content screen is clicked on mobile :(
My Javascript :
$(document).ready(function() {
scrollTopPos = $( document ).scrollTop();
allowScrolling = true;
$(document).scroll(function() {
if(allowScrolling === false) {
$( document ).scrollTop( scrollTopPos );
} else {
}
});
$( "#mobile-toggle" ).click(function() {
$('body,html').css('overflow', 'hidden');
$("#divCls").css('display','None')
});
$(document).on('touchmove', function(e) {
e.preventDefault();
showDiv()
});
});
function showDiv() {
document.getElementById('divCls').style.display = "block";
}

It's hard to tell without the full code, but in terms of keeping the menu at the front you can just use CSS to se the Z-index of the DIV. In terms of the scroll, add a CSS rule trigger within your JavaScript to set Overflow to Hidden then set it back to scroll when you click the close button.
Also, if only parts are spilling over then be weary of the page size, if you're using a slide in menu that is hidden to the side then slides the whole page over, then mobile users can swipe it shut but the open button will not work unless you use the jquery swipe functionality so again, the z index and a bit of doodling with the script to make the menu sit over the page would fix this. Again, more script would be handy :P

Change position of tooltip on window resize

I'm using jQuery UI to create a tooltip for a search input field. I then want to position the tooltip according to the size of the browser window (top if less than 768px, left if more).
I initialise the tooltip with:
$('#search').tooltip({'placement':'top'});
Then I have this function to change the placement depending on the window size:
$(window).on('resize', function() {
if ($(window).width < 768) {
$("#damSearch").tooltip({'placement':'top'});
} else {
$("#damSearch").tooltip({'placement':'left'});
}
}).trigger('resize');
For some reason it's not working. The tooltip initialises fine but when I resize the browser above 768px it still appears positioned to the top.
[EDIT]
I've been away for a few days and have just come back to try and resolve this problem.
I've installed Modernizr because I intend using it elsewhere on the site and so I thought I'd use Modernizr.mq to detect the window resizing. I also read elsewhere that the code to reposition the tooltip should be in its own self contained function, so this is the function:
function positionTooltip() {
if (Modernizr.mq('(min-width: 768px)')) {
$("#damSearch").tooltip({'placement':'left'});
} else {
$("#damSearch").tooltip({'placement':'bottom'});
}
}
This is then followed in my Javascript file with:
$(document).ready(function() {
positionTooltip();
// Fire the function on page load
$(window).resize(positionTooltip);
// Fire function on window resize event
Unfortunately it's still not working correctly.
The tooltip appears correctly positioned when the page is first loaded, but if I then resize the browser the position is not updated. If I reload the page however the tooltip's position is changed accordingly.
It's as if the resize event is not triggering the function.
[/EDIT]
As ever all help and advice is greatly appreciated.
Tony.

you need to call the width function
if ($(window).width() < 768) {
notice the parentheses ()

JavaScript Toggle Show/Hide Responsive Menu

I've been stuck on this particular problem. I would like to use a toggle menu for mobile widths on a website that I'm working on. Basically, it works nicely as I can show you on this CodePen.
The code for showing/hiding the menu via a toggle button with JavaScript works below.
$(document).ready(function() {
//Menu Open Seasame Action
$('.site-nav-btn').click(function() {
$('.site-nav ul').slideToggle('fast');
$(this).find('span:hidden').show().siblings().hide();
});
//Hide site-nav content.
$(".site-nav ul").hide();
});
My problem is that I would like to hide the toggle button and the toggle function when the width exceeds say, 480 pixels wide but keep the site-nav ul visible. I've been trying to do this via this code combined with the one above, and somehow it just doesn't work.
$(function() {
if ($(window).width() > 480) {
$('.site-nav-btn').css('display','none');
$('.site-nav ul').show();
}
else {
$('.site-nav-btn').css('display','block');
$('.site-nav ul').hide();
}
});
I'm not really that proficient in JavaScript so if anyone could point out why it didn't work alongside the solutions that would really be helpful.

Attach your checking function to $(window).resize() and fix the selectors. See this fork of your CodePen.

Responsive JavaScript: "Refresh" page depending on screen width?

i've made a responsive website with a horizontal menu. I wanted to make the menu a toggle drop down when a lower screen resolution is reached. The JQuery-Toggle works fine and i tried this to "make it responsive":
if (document.documentElement.clientWidth < 768) {
$(document).ready(function(e){
$('#menubutton').on('click',function(){
$('#main-nav').slideToggle();
});
})
}
This works also fine but not by changing the windowsize directly in the browser – i have to resfresh the page manually to load the Script!
Is there a way to "refresh" the page when the needed screen width is reached (768 px)? …and vise versa!
thanx,
Jochen

maybe instead of refreshing the page on every resize, you can do:
var mainNavActivated = false;
$(document).ready(function(e){
$('#menubutton').on('click',function(){
if(mainNavActivated || document.documentElement.clientWidth < 768){
window.mainNavActivated=true;
$('#main-nav').slideToggle();
}
});
})
which is binding click anyway and making it work when the window is "narrow"

You can use $(window).resize(). It will call your function every time the window is resized by the user.

You can use the resize event.
$(window).resize(function() {
// here your code
});