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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Second line doesn;t need the $ or the brackets:
var windowsize = window.width;
var windowsize = window.width;
ASKER
That has actually made it worse?! :-S
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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; )
ASKER
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.
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
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();
}
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
ASKER
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Ok, well it's not working then.
Here is my script in full:
However that onclick event doesn't seen to get bound to that element so nothing happens.
Thanks
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;
});
}
However that onclick event doesn't seen to get bound to that element so nothing happens.
Thanks
ASKER
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.
I've noticed an issue with my script in the else missing the {} brackets.
Think I have it sussed now, thanks for your help.
ASKER
Thanks for the response,
I'm still struggling though...
Open in new window