We Keep Coding

Bind function blocking click function from working?

I have a few click functions in my code that aren't working since I added the .bind() function. I don't know if that's actually the problem, but I can't think of anything else it would be.
The way the code is supposed to work is:
load data from xlsx file
load content from a different html file
runData()
proceed as normal (click functions as needed)
Here's the JS:
oReq.onload = function(e)
{
// doing something... //
$(document).trigger('complete');
}
jQuery(document).ready(function()
{
$('#videoButton').click(function()
{
$('html, body').animate(
{
scrollTop: $("#video").offset().top - 225
}, 1000);
});
// BACK TO TOP
$('#toTop').click(function()
{
$('html, body').animate(
{
scrollTop: $("#about").offset().top
}, 1000);
});
});
$(document).bind('complete', function()
{
console.log(jobs); //global variable
console.log(sponsors); //global variable
setTimeout(function()
{
runData(jobs);
}, 0);
});

The .bind() was not the issue, it was because the button was added dynamically. I was able to fix it by changing
$('#videoButton').click(function()
to:
$(document).on('click', '#videoButton', function()

smoothState.js conflicting with other plugins

I have managed to implement the smoothState.js plugin on my website and it works nicely, but my other very simple jQuery plugin will not work, wich starts with:
$(document).ready()
I need to refresh the page in order for it to work again.
I've read the smoothState documentation and it says I should wrap your plugin initializations in a function that we call on both $.fn.ready() and onAfter — but I'm farely new to programming, so I'm asking for your help.
How can I make my jQuery plugins work with smoothState?

You need to wrap scripts that are initiated with $(document).ready() in a function, and then call that function when you need it.
For example, let’s say this is your current script:
$(document).ready(function() {
$('.btn--homepage').click(function(e) {
e.preventDefault();
var goTo = $(this).attr('href');
$('#page').addClass('is-exiting');
$(this).addClass('exit-btn');
setTimeout(function() {
window.location = goTo;
}, 260);
});
});
It’ll work fine when the page loads as it’s wrapped in $(document).ready(function()), but as the page won’t be reloading when using Smoothstate, we need a way to call the snippet both when the page originally loads and when smoothstate loads content. To do this we’ll turn the above snippet in to a function like this:
(function($) {
$.fn.onPageLoad = function() {
$('.btn--homepage').click(function(e) {
e.preventDefault();
var goTo = $(this).attr('href');
$('#page').addClass('is-exiting');
$(this).addClass('exit-btn');
setTimeout(function() {
window.location = goTo;
}, 260);
});
};
}(jQuery));
As you can see, we’ve swapped $(document).ready(function()) with the function wrapper, everything else stays the same.
So now we’ve got a function all we need to do is call it when the page loads and in Smoothstate.
To call it when a page loads all we need to do is this:
$(document).ready(function() {
$('body').onPageLoad();
});
And to trigger it in Smoothstate we need to call it in the InAfter callback like this:
onAfter: function($container) {
$container.onPageLoad();
}
And here's an example Smoothstate script showing where to put the onAfter callback:
$(function() {
var $page = $('#main');
var options = {
prefetch : true,
pageCacheSize: 4,
forms: 'form',
scroll: false,
onStart: {
duration: 1200,
render: function($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
$('html, body').scrollTop(0);
}
},
onAfter: function($container) {
$container.onPageLoad();
}
};
var smoothState = $('#main').smoothState(options).data('smoothState');
});
Happy to provide further assistance if needed.

Start scrolling on mouseover jquery jcarousel

I need to start scroll when user hover. I take a function reference from the question this and this. I notice that even the callback function is not working with initCallback option. Am I missing something or I forgot something to put in the code. Here is example of code fiddle
function mycarousel_initCallback(carousel)
{
carousel.clip.hover(function() {
carousel.startAuto();
}, function() {
carousel.stopAuto();
});
};

You should use jcarouselAutoscroll plugin for that
Check this updated fiddle
INIT CODE
A(".example").jcarousel({
auto: 1,
wrap: "last"
}).jcarouselAutoscroll({
interval: 1000,
target: '+=1',
autostart: false
});
Code for hovering
$(".example li").hover(function () {
$(".example").jcarouselAutoscroll('start');
},function () {
$(".example").jcarouselAutoscroll('stop');
})

Spritely div .click not working

I am using the JS plugin called "Spritely" to animate background images. Everything works (backgrounds are moving). But I can't get a function to be active when clicked on a div(sprite).
(I have the script.js, jquery and spritely included in the ).
HTML is just 2 divs (#container and #hills)
css
#container
{
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
background-image:url(clouds.jpg);
background-repeat:repeat-x;
z-index:-3;
position:absolute;
}
#hills
{
width:100%;
height:250px;
background-image:url(hills.png);
background-repeat:repeat-x;
background-position:bottom;
z-index:1;
position:absolute;
bottom:0px;
}
javascript
$(document).ready(function() {
$(hills).click(function(){
alert("hey");
});
});
var hills;
$(document).ready(function(){
var hills = document.getElementById('hills');
$(hills).pan({fps: 30, speed: 2, dir: 'left'});
});

Looks like you are attempting using hills without first adding the element to it, try this:
$(document).ready(function() {
var $hills = $('#hills');
$hills.pan({fps: 30, speed: 2, dir: 'left'});
$hills.click(function(){
alert("hey");
});
});
I also cleaned up your code a bit with this. There is no need to have two separate ready()s here. I'm using a jQuery selector for #hills since you are using jquery functions on it anyway. I also cache that object so that we don't have to wrap the same jquery object twice.

You have a variable scope issue (see the comments I added):
$(document).ready(function () {
$(hills).click(function () {
alert("hey");
});
});
var hills; // Your click handler uses this variable, which is never set
$(document).ready(function () {
//this "hills" variable, since you prefaced with "var",
// is local to this anonymous function,
// meaning the click handler can't see it.
var hills = document.getElementById('hills');
$(hills).pan({
fps: 30,
speed: 2,
dir: 'left'
});
});
Why have two DOM ready handlers? Why not combine them like this:
$(document).ready(function () {
var hills = document.getElementById('hills');
$(hills).pan({
fps: 30,
speed: 2,
dir: 'left'
});
$(hills).click(function () {
alert("hey");
});
});
Another option is to have the second DOM ready handler use the global variable by removing the var keyword:
$(document).ready(function () {
$(hills).click(function () {
alert("hey");
});
});
var hills;
$(document).ready(function () {
hills = document.getElementById('hills');
$(hills).pan({
fps: 30,
speed: 2,
dir: 'left'
});
});
Or simply remove the global variable altogether. These snippets only execute once, so there's not much to gain by caching the DOM element:
$(document).ready(function () {
$('#hills').click(function () {
alert("hey");
});
});
$(document).ready(function () {
$('#hills').pan({
fps: 30,
speed: 2,
dir: 'left'
});
});

How to revert the pixastic effect?

<script type="text/javascript">
$(function() {
jQuery(".attachment-thumbnail")
.pixastic("desaturate")
.pixastic("sepia")
});
</script>
I got this pixastic script working, now I need to revert the effects on rollover. I don't really know how to do that though.
The link is here if you want to take a look, http://mentor.com.tr/wp/?page_id=218

jQuery(".attachment-thumbnail").live({
mouseenter: function() {
Pixastic.revert(this);
},
mouseleave: function() {
jQuery(this).pixastic("desaturate");
}
});
Note that sepia won't do anything combined with desaturate
The plugin is not very well documented, so in the future I suggest taking a look into the source code, in this example line 403 shows
revert : function(img) {

$(window).load(function () {
$(".thumb").pixastic('desaturate');
$(".thumb").live({
mouseenter: function() {
Pixastic.revert(this);
},
mouseleave: function() {
$(this).pixastic("desaturate");
}
});
})

Hi guys everything said above works great if you're directly setting hover events on the image.
Whereas in my situation I wanted the the image to blur if I hover on the image container (which contains other divs too, not just the image).
Here is my code in case anyone else is dealing with something similar:
$(function () {
$('.col1.w1').mouseenter(function () {
var origImg = ($(this).find('.imageUrl'));
if (origImg.is('img')) {
Pixastic.process(origImg[0], 'blurfast', { amount: 2 });
}
});
$('.col1.w1').mouseout(function () {
var origImg = ($(this).find('.imageUrl'));
Pixastic.revert($(this).find('.imageUrl')[0]);
});
});