Question

I’m currently making a jQuery Plugin for a Redirect Timer and it is really bugging out.

The part that isn’t working is that this is also suppose to style the whole thing so you can customize the timer. The time works fine but not the other stuff for some reason.

I wan’t to use defaults for the style, the number of seconds, and the redirect URL like this:

$('#redirect').redirect({
            'Seconds': '15',
            'Redirect_URL': 'http://google.com',
            'Button_Value': 'Hi',
            'Button_Position': 'right',
            'Number_Color': 'red',
            'Number_Size': '35',
            'Redirect_Box_Padding': '23',
            'Redirect_Box_Radius': '10',
            'Button_Border_Width': '1',
            'Button_Border_Line_Type': 'solid',
            'Button_Padding': '12',
            'Button_Radius': '13',            
            'Loading_IMG' : 'http://moviereviews.com/images/loading_button3.gif'
       },500);
    });

I will give you a link to the JS Fiddle Code editor which personally I think it is easier for you guys to get to know the code and find a problem. If you got a answer that will fix this problem thanks! and I will totally Select it as a Best Answer:

http://jsfiddle.net/gWNSj/

Note: Please don’t rearrange the whole entire code, because then I wont be able to read it.

Thanks,
Shawn

Answer 1

You have a few issues with your code most of which are unfortunately below the //Do not edit beyond this point line. The one that is most directly causing your problem is the fact that your global variables don’t get initialized until you click on the button, but they get used to build the HTML/stylesheet when the DOM is ready. If you use Chrome debugger or Firebug, you can see that the stylesheet has a number of undefined values. The button you also clicked is called “undefined” because the variable has not been set yet.

You probably want to just add the html when $(foo).redirect() gets called, in the plugin itself and use the specified options to style it. You should also put the actual redirect function inside the plugin, instead of adding a separate click handler to perform the countdown.