We Keep Coding

JavaScript - mCustomScrollbar

(function (jQuery) {
jQuery(window).on("load", function () {
jQuery("#inf-scroll-gallery").mCustomScrollbar({
axis: "x",
theme: "light-3",
advanced: {
autoExpandHorizontalScroll: true
}
});
});
})(jQuery);
I'm using the above script for custom scrollbar. Here it's working perfectly when we scroll on the content and also when we drag the scroll bar. But what I want is I need to scroll the content only when the scroll bar is moving. I'm sharing some links here for more clarity.
http://manos.malihu.gr/jquery-custom-content-scroller/
Also see the horizontal scrollbar. Here the images should only scroll when we drag that scrollbar. Can we do that?
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

Library supports this kind a problem
You can add mouseWheel:{ enable: false } property to your script
(function (jQuery) {
jQuery(window).on("load", function () {
jQuery("#inf-scroll-gallery").mCustomScrollbar({
axis: "x",
theme: "light-3",
mouseWheel:{ enable: false }
advanced: {
autoExpandHorizontalScroll: true
}
});
});
})(jQuery);

Unbinding a Jquery plugin completely from DOM on viewport resize

I have a slick slider for my images:
// Slick slider - Responsive
$(window).on('resize', function() {
if ($(this).width() > 1600) {
$('.images').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 20, // Set at least half of all slides
centerMode: true,
initialSlide: 0, // Fix for centerMode with 1
variableWidth: true,
arrows: true,
draggable: true,
swipeToSlide: true,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 3000
});
}
else {
$('.images').unbind(slick());
};
});
$(document).ready(function() {
$(window).resize();
});
If I refresh the page with a viewport less than 1600px (big size only for demo purposes), the slider not become active, works great. However if I change my browser's width bigger than 1600px and change it back to less than 1600px, the slider's code stays. I used slick slider's built-in responsive flags and unslick feature, but the problem was the same just like here: not completely clearing up it's code.
How can I completely remove it's code without refresh, only with viewport size change?
Edit:
Strange, but looks like this unbinding completely:
else {
$('.images').slick('unslick');
};
However the documentation suggested way is not, just partly:
responsive: [
{
breakpoint: 1600,
settings: 'unslick'
}
Edit:
Although the documentation suggested way removing it too, but not re-binding when the browser's the viewport size reaching where it should be active.
EDIT2:
THiCE's solution modified that only use timer for resize event. This way I won't get any console error on load because of .slick('unslick'); hack:
$(document).ready(function() {
$(window).on('load', function() {
handleSlick();
console.log('handleSlick() fired on load...');
});
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleSlick();
console.log('handleSlick() fired on resize...');
}, 100);
//console.log('jquery on window resize');
});
//handleSlick();
});

Sometimes using a setTimeout does the trick: the resize event is fired lots of times during resizing.
If you use a timer inside the resize callback that resets and starts everytime the resize event fires, you prevent those 'double' fires.
An example, for your case:
// Slick slider - Responsive
function bindSlick() {
$('.images').slick({
dots: false,
infinite: true,
// etc...
});
}
function unbindSlick() {
$('.images').slick('unslick');
}
function handleSlick() {
if ($(window).width() > 1600) {
bindSlick();
} else {
unbindSlick();
}
}
$(document).ready(function() {
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleSlick();
}, 100);
});
handleSlick();
});

Unable to input text in an input field (in a fancy box popup)

for some reason I can't input text in my newsletter input field now that I display it in a fancybox popup window. Any idea what the issue is and how to fix this? See http://jsfiddle.net/6G8YR/
Many thanks,
function openFancybox() {
setTimeout( function() {$('#newspopup').trigger('click'); },1000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: 0.0001 });
$('#newspopup').fancybox({
helpers : {
overlay : {
css : {
'background' : 'rgba(58, 42, 45, 0.3)'
}
}
}
});
});
$(document).on('click', function(e) {
if(e.target === $('.visitwebsitebtn')[0]) {
$.fancybox.close();
}
});

Ok I figured out the problem, but only ran into other kinds of issues. The problem is that, there is an event that exists that causes your fancybox to refresh everytime someone happens to click on it.
This is why you are unable to write anything in the input. I have a temporary solution that is really ugly but it works.
$('#email').on('click', function(e){
e.stopPropagation();
});
Upon clicking the email input, your fancybox won't refersh. I tried applying this to your #newspopup but it blocs $('#newspopup').trigger('click'); so your fancybox never opens at the start.
Here is a Demo
Additional information:
I've worked with fancybox plugin before and I've never encountered this problem. You might want to think of adding options to your fancybox.. for example add this line :
'type':'iframe',
I would have tried on jsfiddle, but unfortunately they don't allow it, it seems.

You can optimize your code and get rid of unnecessary click events and triggers (so you won't need unnecessary e.stopPropagation() methods either) like :
function openFancybox() {
setTimeout(function () {
$.fancybox('#newspopup', {
modal: true, // this prevents fancybox to close unless close unless ".visitwebsitebtn" is clicked
helpers: {
overlay: {
css: {
'background': 'rgba(58, 42, 45, 0.3)'
}
}
},
afterShow: function () {
// enables a way to close fancybox
$(".visitwebsitebtn").on("click", function () {
$.fancybox.close()
});
}
});
}, 1000);
};
$(document).ready(function () {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', {
expires: 7
});
});
See JSFIDDLE

Draggable not disabling when I tell it to

JS:
function handDrag(dragHand)
{
if(dragHand ==true)
{
//live query to auto bind the drag function to all elements of the cardsHand class even auto generated ones
$('#playerHand')
.livequery('mouseenter', function(e){
$('img.playerCardsHand').draggable
({
zIndex: 1000,
revert: 'invalid',
stack: '.playerCardsHand',
selectedCard: 'widget',
addClasses: 'false',
disabled : false
});
});
}
else
{
$('img.playerCardsHand').draggable({ disabled: true });
}
}
function swapCards()
{
handDrag(true);
}
function ready()
{
handDrag(false);
}
Basically I call swapCards() I want to be able to drag my cards around the screen and drop them.
I then hit ready and it calls the ready() method.
I then want my cards to no longer be draggable.
However now it keeps them draggable. I have tried removing the disabled: false to the swapCards draggable initialization but when I do that when I try and re-enable the draggable using
handDrag(true);
it won't re-enable the dragging.
Any ideas?

The syntax appears to be as follows:
$('img.playerCardsHand').draggable( "disable" );
See http://api.jqueryui.com/draggable/#method-disable
You might also need to enable it the next time you call handDrag(true);
if(dragHand ==true)
{
$('img.playerCardsHand').draggable( "enable" );
// etc

Scrolling works in Chrome but not in Firefox or IE

I'm using the following code to scroll the window when a user clicks on a few different links:
$(document).ready(function(){
$("#footerlink").click(function(){
$("#slide1").slideto({});
});
$("#logo").click(function(){
$("#slide1").slideto({});
});
$("#home").click(function(){
$("#slide1").slideto({});
})
$("#others").click(function(){
$("#slide2").slideto({});
})
$("#me").click(function(){
$("#slide3").slideto({});
});
$("#laughs").click(function(){
$("#slide4").slideto({});
});
})
The slide functionality is coming from this script:
(function(b) {
b.fn.slideto = function(a) {
a = b.extend({
slide_duration: 1000,
highlight_duration: 3E3,
highlight: false,
highlight_color: "#FFFF99"
}, a);
return this.each(function() {
obj = b(this);
b("body").animate({
scrollTop: obj.offset().top
}, a.slide_duration, function() {
a.highlight && b.ui.version && obj.effect("highlight", {
color: a.highlight_color
}, a.highlight_duration)
})
})
}
})(jQuery);
My problem is the scrolling only works in Chrome and not Firefox or IE. FF and IE degrade nicely so the links still work, but I really like the scrolling animation.
FYI: I am calling Jquery with these two lines:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
Here is a Fiddle of my code: http://jsfiddle.net/LwXR3/
Can you help me track down my issue?

Okay this is too long to be in a comment. You should really avoid the copy paste mess in that code above. The code is almost exactly the same minus the ids. Use the href to get the location instead of hard coding it.
HTML
<a class="slideLinks" href="#foo">go to foo</a>
JavaScript
$(".slideLinks").on("click", function(e){
e.preventDefault(); //p[revent the click
$(this.hash).slideto({}); //call your slide to function with the hash value for the id
});