Jquery functions in responsive

Hi,

I am building a responsive site and have a series of Jquery functions that I run to slideToggle content when the page is in 'mobile' view. However, I want these disabled when the viewport is min-width=640px.
Is there a way I can unbind these onclick functions if the page is being viewed on a desktop?

Thanks
Al4ddin2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Just add some conditionals into your javascript files

if (screen.width < 640) {
    $('#someElement').click(function() {
        $('#whatever).slideToggle();
    })
}

Open in new window

If you specifically need to remove an event then:

$('#someElement').unbind('click');

Open in new window

0
Al4ddin2Author Commented:
Hi,

Thanks for the response,

I'm still struggling though...


function checkWidth() {
	var windowsize = $window.width();
	if (windowsize < 640) {
		$(nav).hide();
		toggleFilterSort(param1, param2, param3);
		
		$('.last').waypoint(function(direction){
			if (direction === "down") {
				waypointMsg();
			}
		}, {
			offset: 'bottom-in-view'
		});
	} else {
		$('nav').show();
		$(param1).unbind('click');
	}
}

checkWidth();

$(window).resize(checkWidth);

Open in new window

0
Chris StanyonWebDevCommented:
Second line doesn;t need the $ or the brackets:

var windowsize = window.width;
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Al4ddin2Author Commented:
That has actually made it worse?! :-S
0
Chris StanyonWebDevCommented:
Sorry, should have been innerWidth, but you'd be better off using jQuery. Wouldn't have actually made it worse though - broken code is broken code ;)

var windowsize = $(window).width();

There's also few things wrong with your code though. Firstly, how are you calling this code. You don't seem to have a document ready block. Secondly, you are using variables in your code that don't seem to be set anywhere (param1, param2, param3), Thirdly, you are missing quotes around the first nav selector -  $(nav).hide();

If I where you I would strip everything out until you know the 'responsive' part is working:

$(document).ready(function() {
    $(window).resize(checkWidth);
    checkWidth();
});

function checkWidth() {
   var windowsize = $(window).width();
   if (windowsize < 640) {
      $('nav').hide();
   } else {
      $('nav').show();
   };
}

Open in new window

Once that works, built it back up
0
Al4ddin2Author Commented:
Hi Chris,
I do have it inside a document ready block but just didn't include it in my snippet.
I'll strip it down and see how I get on.
Thanks
0
Chris StanyonWebDevCommented:
Just a thought thought. Calling the hide() and show() functions on your nav seems a little redundant. Surely this would be better achieved by using the media queries in CSS to set the display property accordingly (display:block / display:none; )
0
Al4ddin2Author Commented:
OK, so I have the document ready calls as you have, then I have created the checkWidth function and it seems to be working OK. I can hide and show the nav as expected and run the waypoint script.


function checkWidth() {
		   var windowsize = $(window).width();
		   if (windowsize < 640) {
			   $('nav ul.navigation').hide();
                           //toggleMoreInfo('p.more','.extra-info');
			   // Waypoint script that enables us to paginate using the scroll of the screen
				$('.last').waypoint(function(direction){
					if (direction === "down") {
						waypointMsg();
					}
				}, {
					offset: 'bottom-in-view',
					triggerOnce: 'true'
				});
		   	} else
			$('nav ul.navigation').show();
		}

Open in new window


However, it appears to fall over when I add any of my toggle function calls - these seem to persist between both screen sizes < and > than 640. All the function does is apply an onclick event to an element on the page which then toggles another element and hide/shows various parts. These are the parts of the script that are currently being applied regardless of the window width.

Thanks
0
Al4ddin2Author Commented:
Hi,
I do have the media queries to set this as display:none & display:block but when it is in 'mobile' view I have some JQuery to display the menu when you click the button so to make sure this gets hidden again when the view changes I use JQuery too.
0
Chris StanyonWebDevCommented:
Not sure exactly what your problem is. You say it seems to fall over: either it does or it doesn't. If it does, how? Any error messages?

You say the toggle calls persist between sizes. You haven't shown your toggleMoreInfo() function but assuming it binds a click event, then as soon as it's called that click event is bound to the element - changing the browser size won't unbind it automatically - for that you'd need to use the unbind() function as previous shown:

$('#someElement').unbind('click')
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Al4ddin2Author Commented:
Ok, well it's not working then.

Here is my script in full:

$(document).ready(function () {
     $(window).resize(checkWidth);
     checkWidth();
});

function checkWidth() {
		   var windowsize = $(window).width();
		   if (windowsize < 640) {
			   	//console.log(windowsize);
				$('nav ul.navigation').hide();
				toggleFilterSort('.tour-filter-open','.filters-form','.tour-filter-open .arrow','#sort-options','.tour-sort .arrow');
			   // Waypoint script that enables us to paginate using the scroll of the screen
				$('.last').waypoint(function(direction){
					if (direction === "down") {
						waypointMsg();
					}
				}, {
					offset: 'bottom-in-view',
					triggerOnce: 'true'
				});
		   	} else
			//console.log(windowsize);
			$('nav ul.navigation').show();
			$('.tour-filter-open').unbind('click');
		}


function toggleFilterSort(activator, toggle, arrow, hide, other) {
			$(activator).on('click', function(e) {
				$(toggle).slideToggle(500, function(){
					if($(this).is(':visible')){
						$(arrow).css("background-image", "url(img/mobile-less-arrow.png)");
						$(hide).hide();
						$(other).css("background-image", "url(img/mobile-more-arrow.png)");
					} else {
						$(arrow).css("background-image", "url(img/mobile-more-arrow.png)");
					}
				});
				return false;
			});
		}

Open in new window


However that onclick event doesn't seen to get bound to that element so nothing happens.

Thanks
0
Al4ddin2Author Commented:
Hi sorry,

I've noticed an issue with my script in the else missing the {} brackets.
Think I have it sussed now, thanks for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.