Javascript help: Question about Array and Loops

[sneezemonkey]

Never mind ppl I solved it by building my own loop.

 

---------------------------------------------------------------------------------------------

 

Hi guys I know this isn't gaming but I'd like a little help pls,

I'm the guy currently maintaining the Fluid Mode + version of Manga OnlineViewer, a script used to autoload manga pages on various sites. (credits to Doonge for the added features and Tago for original script.)

Now I've been playing around with it with my limited knowledge, tweaking it here and there and now I've hit a bit of a problem.

My original intent was to fix a problem where the zoom indicator text in the top corner can be obscured by the loaded content depending on the theme selected. My solution was to use the <mark> tag on the text and then use the existing loop that dictates the theme colours to change the css values so that it doesn't look out of place.

var themes = [ //   body       text       border     painel     dark1      dark2
                ["Dark", "#0f0f0f", "#ffffff", "#666666", "#333333", "#111111", "#282828"],
                ["Light", "#eeeeec", "#2e3436", "#888a85", "#babdb6", "#c8cec2", "#d3d7cf"],
                ["Clear", "#ffffff", "#2e3436", "#888a85", "#eeeeec", "#c8cec2", "#d3d7cf"],
                ["Dark_Blue", "#0f0f0f", "#91a0b0", "#586980", "#3e4b5b", "#161c24", "#222c3b"],
                ["Tango_Blue", "#0f0f0f", "#82a0bf", "#3d669b", "#304c77", "#081425", "#102747"],
                ["Lime", "#0f0f0f", "#8abd59", "#608d34", "#38531f", "#233413", "#293e17"],
                ["Plum", "#0f0f0f", "#ad7fa8", "#75507b", "#49324d", "#1d1020", "#311b37"],
                ["Light_Plum", "#eeeeec", "#5c3566", "#9b71a2", "#ad7fa8", "#d2b8ce", "#c4a3c0"],
                ["Alpha_Blue", "#0f0f0f", "#82a0bf", "rgba(56,109,164,0.9)", "#304c77", "#081425", "rgba(18,41,75,0.8)"]
            ];
            for (var i = 0; i < themes.length; i++) {
                css += '.' + themes[i][0] + ' .controlLable, .' + themes[i][0] + ' .ViewerTitle, .' + themes[i][0] + '{color: ' + themes[i][2] + ';}';
                css += '.' + themes[i][0] + ' {background: none repeat scroll 0 0 ' + themes[i][1] + ';}';
                css += '.' + themes[i][0] + ' #ImageOptions #menu .menuOuterArrow {border-left:10px solid ' + themes[i][4] + ';}';
                css += '.' + themes[i][0] + ' #ImageOptions #menu .menuInnerArrow {border-left:5px solid ' + themes[i][1] + ';}';
                css += '.' + themes[i][0] + ' .PageFunctions a.visible, .' + themes[i][0] + ' a, .' + themes[i][0] + ' a:link, .' + themes[i][0] + ' a:visited, .' + themes[i][0] + ' a:active, .' + themes[i][0] + ' a:focus{ text-decoration:none; color: ' + themes[i][2] + ';}';
                css += '.' + themes[i][0] + ' .PageFunctions { border: 1px solid ' + themes[i][3] + '; border-bottom: medium none;    border-left: medium none;    border-right: medium none;}';
                css += '.' + themes[i][0] + ' .PageFunctions > span, .' + themes[i][0] + ' .ThumbNail span {background: none repeat scroll 0 0 ' + themes[i][4] + '; color: ' + themes[i][2] + ';}';
                css += '.' + themes[i][0] + ' .painel {background: none repeat scroll 0 0 ' + themes[i][4] + '; color: ' + themes[i][2] + ';border: thin solid ' + themes[i][3] + ';}';
                css += '.' + themes[i][0] + ' .PageContent, .' + themes[i][0] + ' .ThumbNail img { outline: 2px solid ' + themes[i][6] + '; background: none repeat scroll 0 0 ' + themes[i][5] + ';}';
                css += '.' + themes[i][0] + ' .ChapterControl a { border: 1px solid ' + themes[i][3] + '; background: -moz-linear-gradient(left top , ' + themes[i][6] + ', ' + themes[i][4] + ') repeat scroll 0 0 transparent; background: -webkit-linear-gradient(left , ' + themes[i][6] + ' 41%, ' + themes[i][4] + ' 71%) repeat scroll 0 0 transparent; }';
				$("#ThemeSelector").append("<option value='" + themes[i][0] + "' " + (settings.Theme == themes[i][0] ? "selected" : "") + ">" + themes[i][0].replace("_", " ") + "</option>");
            }

Two solutions I tried (separately):

$("mark").css({"background-color": themes[i][1], "color": themes[i][2],});

css += 'mark {background-color: ' + themes[i][1] + '; color: ' + themes[i][2] + ';}';

The problem is while all the original stuff works fine, for some reason the values returned for my lines always correspond to the "Dark blue" theme. "i" seems to always = 3.

Is It something I'm doing wrong? Or is it something inherent with the <mark> tag?

PLS Note: My knowledge is VERY limited. (Fluid Mode was something I requested from Doonge while searching for a script that suits my needs. I would have made it instead if I could.)

 

Thanks in advance

Edited August 23, 2015 by sneezemonkey