I'm building a website and I'm using media queries to make the website responsive for mobile devices. On the desktop version of my website, I'm using the following Javascript to make 2 divs fade in/out once 100px have been scrolled down.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('#firstHeadingLeft, #firstHeadingRight').fadeIn(3000);
} else {
$('#firstHeadingLeft, #firstHeadingRight').fadeOut();
}
});
Now the problem is, I don't want this javascript to be active on my mobile device, I want the 2 divs to be always present. I done some searching and found this
How to disable JavaScript in media query
One of the suggestions was to add an event listener using this code
window.addEventListener('resize', function(){
if(window.innerWidth > 568){
...execute script
}
});
However because I'm not fluent in javascript I'm unsure how to correctly wrap my code into the event listener code.
If someone could give me a hand that would be appreciated! -- Thank you!
This should work but I have no way to test it. Tell me what happens :)
window.addEventListener('resize', function(){
disableScript();
});
window.addEventListener('load',function(){
disableScript();
});
function disableScript(){
if(screen.width > 568){
//...execute script
}
}
Related
I created a menu that shows its sub-menu on hover using some CSS and jquery. Thing is, it acts a bit funny in case user hovers lots of times on the menu item. This is the URL: http://91.202.168.37/~ibi/, and this is the jquery code (inside document ready):
if ($(window).width()>991) //menu script desktop or laptop
{
$('#mob-main-menu > li.menu-item-has-children').hover(function(event){
event.preventDefault();
$(this).children('a').toggleClass('bold600');
$(this).children('a').siblings('.sub-menu').slideToggle();
});
}
else // menu script touch device
{
$('#mob-main-menu > li.menu-item-has-children').click(function(event){
if ($(this).children('a').siblings('.sub-menu').css('display') == 'none')
{
event.preventDefault();
console.log('hidden');
}
$(this).children('a').toggleClass('bold600');
$(this).children('a').siblings('.sub-menu').slideToggle();
});
}
I tried to use setTimeout() function but couldn't get it to work. can I limit the code to queue no more than 2 times, no matter how many hovers it counted? and than after x time to set it back to zero? any other idea to make it work better will be happily accepted.
try make animation with .stop() function it clears the animation queue so it should work correctly
$(this).children('a').siblings('.sub-menu').stop().slideToggle();
i have a phone number div.when it is clicked, it will trigger a call,so i want to display this div only on mobile devices.for that i have assigned display none to the div initially and i am trying to show the div on mobile devices using jQuery like below
$(document).ready(function () {
if($(window).width() <= 480) {
$('#phone-number').show();
}
});
But it doesn't work.i didn't know what is wrong with this ,please someone help me in this issue
Can you also put your code in $(window).resize handler like below:
$(window).resize(function() {
if($(window).width() <= 480){
$('#phone-number').show();
}
});
Also make sure that you are giving correct id #phone-number
I'm designing a responsive website and am using media queries to handle the responsiveness. However along with the CSS I want to disable certain jQuery click functions at a certain window width.
Right now I can do this successfully on page load but I want to also be able to do it assuming the user resized the window.
(paragraph 3) So for example if the user starts off with a really big window on his/her computer and he/she resizes it to be a very small window he/she should not be able to activate the click functions anymore. Conversely if a user starts off with a very small window on his/her computer and resizes it to be very big he/she should be able to activate the click functions.
I have tried multiple solutions but none seem to work.
Basically I want to make some clickable objects not clickable anymore or at least have them click and do nothing at a certain window width.
Simply checking at page load and no other time makes it so that what should happen in paragraph 3 doesn't happen.
$(document).ready(function(){
if($(window).width() > 992){
$('#portclick').click(function(){
$('#pagecont').slideToggle(500);
$('#icons').slideToggle(500);
})}})
$(document).ready(function(){
if($(window).width() > 992){
$('#name').click(function(){
$('#projects').slideToggle(500);
})}})
I tried remove the id attribute that I'm using to call the function on at certain window widths and readd them at the width but this doesn't seem to work either. Removing the id doesn't seem to disable to click function at all.
And my most recent solution which comes the closest is just to bind the click function to window resize. So far this works but it is extremely buggy so when you get to a width where the click function works and you try clicking it will do the toggle function about 100 times before it stops. But it does sustain the condition described in paragraph 3.
$(document).ready(function() {
$(window).resize();
});
$(window).resize(function(){
if($(window).width() > 992){
$('#portclick').click(function(){
$('#pagecont').slideToggle(500);
$('#icons').slideToggle(500);
})}
else return})
$(window).resize(function(){
if($(window).width() > 992){
$('#name').click(function(){
$('#projects').slideToggle(500);
})}
else return})
Does anybody have an idea for a working solution that would work flawlessly like css media queries do? I don't think this is that complicated of a problem to work around so I'm hoping for some good answers! Thank you guys so much in advance!
Several problems here. First, resize fires almost constantly while the window is moving, so don't actually trigger anything on that. Second, you should only bind your event handlers once (or if you must bind more than once, make sure you clear out the old ones.) You can simplify thusly:
$(document).ready(function() {
var isLargeWindow;
$(window).on('resize', function() {
isLargeWindow = $(this).width() > 992;
});
$('#whatever').on('click', function(e) {
if (isLargeWindow)
// do large window stuff
else
// do small window stuff
});
});
My simplest way of doing that is not using the resize event at all just attach
the click event and add an early return term if the window size doesn't suite your needs.
Example code:
$('#portclick').click(function(){
winWidth = $(window).width();
/* You can add an height value too */
winHeight = $(window).height();
if ( winWidth < 992 ) return;
/* Youe Code Executes */
});
If you want the if statement to be called after the resize has happened then do something like this:
http://jsfiddle.net/sLk5ro6c/1/
$(window).resize(function (e) {
window.resizeEvt;
$(window).resize(function () {
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function () {
doneresizing();
}, 250);
});
});
function doneresizing() {
if ($(window).width() > 500) {
// DO SOMETHING HERE
alert('example');
}
}
This way the code won't be called every time during the resizing of the window
Got stuck with some trouble.
I got a page, where I use #media to create mobile and tablet version separatly. In mobile version I use mmenu jquery plugin, to make a sliding menu. In tablet version I do not want to use this menu, but still planning to use it's html. So I decided to remove id, that shows mmenu plugin where it need to make sliding menu. But for some reason juery's removeAttr does not work as I expected.
Ps: I'm pretty new to js, so I might not know about thihgs related to browser workings.
I got this code (html is pretty simple - nav, that wraps a bunch of ul's) :
var func = function() {
var width = $(window).width();
var menu = $(".menu");
/*if it is tablet*/
if (width > 401) {
menu.removeAttr("id");
}
/*loading mmenu*/
$(function() {
$('#my-menu').mmenu({
slidingSubmenus: false,
zposition: "next"
});
});
};
$(document).ready = func();
I'll be very happy if someone clarifies where is my mistake.
You're binding document.ready incorrectly. It should be
$(document).ready(func);
You don't set the property, and you don't call your function.
Instead of removing the ID from #my-menu, you could move the function to create the menu inside the width-checking function. That way, the menu is only created if the width is wider than 401. Otherwise it's skipped altogether.
if (width > 401) {
$(function(){
$('#my-menu').mmenu(...);
});
}
Hello Stackoverflow bootstrappers!
I don't see that this question has been asked before, and I am really interested to see the outcome.
How to duplicate the bug:
Open the page: (my current url testing this bug) http://dnwebdev.com/dev/
Resize the page down to a tablet
Use the navbar
(notice that the url has changed to include #section) this only occurs if you resize the browser. This causes the spying/scrolling to be off.
NOTE: if you open it on a mobile device the problem does not occur so a client won't face it, it was just bugging me.
Thank you, looking forward to your responses.
Edit: When clicking on the title brand the url adds #section-1 without the need to resize, which is also throwing me off. At this point I am thinking it is a bootstrap thing.
The only Javascript I have on my page is the following:
function close_toggle()
{
if ($(window).width() <= 768)
{
$('.nav a').on('click', function() {
$(".navbar-toggle").click();
});
}
else
{
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
The code above closes the toggle after a selection is made in mobile.
if ($(window).width() <= 768)
{
var offset = 75;
}
else
{
var offset = 90;
}
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
The code above (based on screensize) will offset the scrollspy
Edit #2
The only reason I need any offset is due to fixed-top which causes scrollspy to freak out.
Help is much appreciated.
Fixed-top seems to carry the bug with scroll spy leaving me no choice but to use javascript.
To handle navigation correct highlighting, you have to consider, that all the calculations made by scrollSpy are being performed when scrollTop value is equal to zero.
So the solution looks like this:
var refreshScrollSpy = function (element, navElement, offset) {
// cache current scroll position to come back after refreshing
var cacheScrolltop = $(element).scrollTop();
$(element)
.scrollTop(0)
.scrollspy(‘refresh’)
.scrollTop(cacheScrolltop);
};