Unbind/remove Jquery function in responsive

I am currently developing a responsive site and would like to use this responsive slider - http://responsiveslides.com/ but only when the viewport is less 640px wide.
I have a window size check that works and if you start in desktop view it doesn't initiate the slider function using
$(function() {
	$(".rslides").responsiveSlides();
});

Open in new window

But when I resize from mobile to desktop the slider function is still used.

Is there a way to unbind/cancel the rslides function when resizing to a desktop view?

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.

Alexandre SimõesManager / Technology SpecialistCommented:
Wouldn't it be enough if you just pause the sliding feature and start it again if the user moves back to a lower size?

I mean, you can play with ti but in real life I don't think the website will have many different sizes, specially if it started on a mobile device. On a phone or on a tablet you can't just resize the window so this will never be an issue.

On the desktop, if for some reason the user was on a lower size, went to a bigger one and you just want to hide that slider, just hide it and pause the functionality using the "pause" option you can see on the documentation.
If the user comes back to a lower size, show it and resume.
0
Al4ddin2Author Commented:
Want I would like is for it to behave differently on a desktop window than a mobile.
ie. I only want a carousel on the mobile view, then on desktop I want them to be thumbnail display inline so pausing it would only show the one image and not all of them no?
0
Alexandre SimõesManager / Technology SpecialistCommented:
Ah, but that is a different thing :)

I had a quick look at the code ResponsiveSlides code and I couldn't see any "destroy" method. This means that it won't be easy for you to "unplug" the functionality from your <ul>.

If the html is not that much I think a good option is to just duplicate it.
Have 2 separate <ul> lists, one for the slider and another for the desktop and show the appropriate depending on the size.
This way you isolate the behaviors and are sure that CSS changes on the desktop won't affect the mobile slider.
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

COBOLdinosaurCommented:
The correct way would be to use separate pages.  Overdoing the whole "responsive" page thing just creates maintenance issues that will waste more of your effort over time then it takes to create a new second page.

If you feel you would rather create a monster, then you can probably hack it using AJAX to bringing alternate pieces and then just butcher what is there and fill in the holes with new content; and hope the next version of one of the devices you are supporting does not get crashed by the hack.

Cd&
0
GaryCommented:
Just hide/show the container with your media queries - forget about trying to bind/unbind/rebind every time someone resizes their browser.

@media only screen and (min-width : 640px)  {
 #slideshow-container {display:none}
}
0
Alexandre SimõesManager / Technology SpecialistCommented:
Yeah, hiding is the best but pausing the plug-in will also avoid background work.
0
GaryCommented:
Would hardly make any difference and how many stay on the home page for very long.
0
Al4ddin2Author Commented:
Thanks for all your input.
I think i'll go for the hiding option, also as its not using the auto scrolling there shouldn't be any background working happening so it sounds like the best approach.

Thanks
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.