views:

42

answers:

1

Hi,

I have a function which will resize the image background when the page is loaded,

$(document).ready(function(){
loadBackground();
});

and I want to 'unload' or 'remove' this loaded function when I click on a button so that I can load this function anew instead of loading it on top of the page,

$('.get-image').click(function(){
        $(window).unbind("resize",loadBackground);
        loadBackground();
 return false;
 });

but I can't make it work! any ideas please?

thanks, Lau

A: 

Based on your comments, I don't think you need to unbind at all:

You first want to load the background when the page is loaded, and then you want to load the background when a click happens.

What happens to the background when the image is resized should be another separate function that is bound to $(window).resize()... so the whole thing will look like this:

( $(function() { ... }); means the same as $(document).ready(function() { ... }) it's just faster to write:

$(function() { 
      // Define load BG
    function loadBackground() {
        /// ...
    }

      // Define what happens to the BG image on resize
      // this doesn't have to change. It should refer
      // to the generic `background-image`
    $(window).resize(function() { 
        // ...
    });

      // load BG when page is ready:
    loadBackground();

      // load another BG if there's a click:
      // This will effectively cancel the previous load bg
    $('.get-image').click(function() { 
        loadBackground();
        return false;
    });    
});

// I'm assuming you're somehow changing which BG image is loaded
// something like loadBackground(image)... and you could initially 
// load a default image, and then, if there's a click, you could
// determine what image should be based on what was clicked.
Peter Ajtai
thanks. just tried it but it still doest work... the image won't resize anymore with this $(window).resize(loadBackground); the loadBackground function has to be inside $(document).ready(function(){loadBackground();});
lauthiamkok
@lauthiamkok - That's because you have to create a reference to your function, like this: `var loadBackground = function() { ... }`... take a look at how the code looks in the [jsFiddle](http://jsfiddle.net/xTfCX/)
Peter Ajtai
@lauthimakok - And all of the code in my answer is inside `$(document).ready(function() { ... });`
Peter Ajtai
ops sorry for not reading your code carefully earlier on... thanks will give it a go again. thanks.
lauthiamkok
tried it and yes managed to remove the loadBackground function. but I think the problem is not from this function itself, it could be other reasons which i dont understand! sorry, I think I should explain the problem with the link below,http://nano-visions.net/dump/htmlbut it is fine when you first load the page, the problem occurs when I load the all the content through ajax.you will see the background images are acting strange when you click on the links at the right top, for instance if you click on 'Asia Chic', the images when black on and off...thanks!
lauthiamkok
@lauthiamkok - Looking at the site, you don't need unbind I believe. I've edited my answer. I'm not sure how you pick which bg image you load, but you could use an argument for `loadBG()` such as `loadBG(image)` and retrieve which image is loaded based on what is clicked.
Peter Ajtai
thanks Peter! i got it sorted now! thanks so much! :-)
lauthiamkok
@lauthiamkok - Nice. You're welcome ;)
Peter Ajtai