Link to home
Start Free TrialLog in
Avatar of Al4ddin2
Al4ddin2

asked on

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
SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Al4ddin2
Al4ddin2

ASKER

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

Second line doesn;t need the $ or the brackets:

var windowsize = window.width;
That has actually made it worse?! :-S
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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; )
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
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.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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.