jQuery Forum

I am testing a simple code using arrays and for loop, but it is returning 'undefined'. Here is the code:

1. tbk = ['txtbasic', 'textposition', 'textshaww'];
2. tbo = ['innerbgtxbox1', 'innerbgtxbox2', 'innerbgtxbox3'];
3. for (var h = 0; h < tbk.length; h++) {
4. $('#'+tbk[h]).click(function(){
5. alert(tbo[h]);
6. });
7. }

JSFIDDLE

May be somebody know what causing it and how to make it returning the value inside tbo variable, instead of 'undefined'.

I am trying to set css of an element using variable containing css properties and values generated from some Arrays. But I couldn't pass it into .css({}); function.

Here is my codes:

1. $('#button_style').on('change', function () {
2. var button_style = $("#button_style option:selected").text();
3. var opz = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
4. var prp = ['font-family', 'font-size', 'width', 'height', 'line-height', ['border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'], 'background', 'box-shadow'];
5. var inv = ['button_font_family', 'button_text_size', 'button_width', 'button_height', 'button_line_height', ['innertopleft', 'innertopright', 'innerbottomleft', 'innerbottomright'], ['bg_color_gradient1', 'bg_color_gradient2'], ['boxshadw_h_position', 'boxshadw_v_position', 'boxshadw_blur', 'boxshadw_spread', 'boxshadw_color']];
6. var vals = [ /*0*/ ['Helvetica', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', ], /*1*/ ['18', '15', '12', '12', '14', '17', '14', '14', '23', '17', '14'], /*2*/ ['72', '72', '72', '72', '72', '72', '72', '72', '72', '72', '72'], /*3*/ ['68', '40', '36', '36', '72', '83', '36', '36', '72', '36', '36'], /*4*/ ['68', '40', '36', '45', '108', '82', '36', '33', '72', '36', '36'], /*5*/ [['38', '38', '38', '38'], ['10', '10', '10', '10'], ['0', '0', '0', '0'], ['34', '34', '0', '0'], ['72', '0', '0', '0'], ['91', '0', '72', '72'], ['82', '82', '82', '82'], ['82', '37', '36', '36'], ['82', '82', '82', '82'], ['82', '36', '36', '82'], ['82', '0', '36', '36']], /*6*/ [['#f9f9f9', '#d9d3d3'], ['#f2f1f1', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#fbfdff', '#31b2d4'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0']], /*7*/ [['0', '-6', '4', '0', '#d9d6d6'], ['0', '-2', '2', '0', '#989797'], ['0', '1', '1', '0', '#000'], ['0', '1', '1', '0', '#000'], ['0', '1', '1', '0', '#000'], ['0', '1', '38', '0', '#f0f9fb'], ['0', '0', '5', '0', '#000'], ['0', '0', '1', '0', '#000'], ['0', '1', '1', '0', '#000'], ['0', '1', '1', '0', '#000'], ['0', '-1', '1', '0', '#000']]];
7. for (a = 0; a < opz.length; a++) {
8. if (button_style == opz[a]) {
9. var vcss = '';
10. for (c = 0; c < inv.length; c++) {
11. if (c <= 4) {
12. $('#' + inv[c]).val(vals[c][a]);
13. if (c < 1) {
14. vcss += '"' + prp[c] + '"' + ' : ' + '"' + $('#' + inv[c]).val() + '",\n';
15. } else if (c >= 1 && c <= 3) {
16. vcss += '"' + prp[c] + '"' + ' : ' + '"' + $('#' + inv[c]).val() + 'px",\n';
17. } else {
18. vcss += '"' + prp[c] + '"' + ' : ' + '"' + $('#' + inv[c]).val() + 'px"\n';
19. }
20. }
21. }
22. var ish = vcss;
23. $('.preview').css(ish);
24. alert(ish);
25. }
26. }
27. });

And this is what I tried to set css to the element :

1.  var ish = vcss; $('.preview').css(ish);

Could someone show me the correct way to do it?

Thanks in advance..

I get a strange behaviour of jquery ui slider range. Each time I increasing the value, its value is always decreased by 10 before increased.

How to fix it?

EDIT

Here is the fiddle:
http://jsfiddle.net/74PMq/

I had fix it by adding this code to jquery ui css file:

1. .ui-slider-horizontal .ui-state-default {
2.   width: 10px;
3.   margin-left: -5px;
4.   background-color: white;
5.   background-repeat: no-repeat;
6.   border: 0;
7. }

Fiddle
http://jsfiddle.net/pVrRc/

But, may be there is a better way!