1

I have a jQuery-based Style Switcher. Actually it's more like a "Width Switcher" since it only changes width.

I'm trying to modify it from here: http://bleachindonesia.com/forum/html/stylesw/style-switch.js You could see it working in here: http://bleachindonesia.com/forum/ (it's my website).

It is working fine in the original version. In this modified version I'm trying to add a "Reset" button (it is named as "Default") so the width will be changed to its default version.

<---->

It works when I use it to reset width to default and to change it to 90%. The problem appears when I try to change the width to 100% or 840px. It will always animate to those respective width at first, but then it would change to 90%.

Is there any solution?

deathlock
  • 2,756
  • 5
  • 27
  • 48

1 Answers1

0

It looks as if your JQuery is appending the CSS file....is it loading underneath a default file that you hard-coded in? The browser perhaps is seeing one file, rendering the page, then changing the width once it reads the 2nd CSS file.

huzzah
  • 1,793
  • 2
  • 22
  • 40
  • I have updated the question, actually I'm trying to modify a script. Regarding the CSS file, the `#ipbwrapper` is set by a main stylesheet (it's not mentioned here). The jQuery mentioned here is trying to set the width through another stylesheet (which only has `#ipbwrapper { width:XXX }` property). – deathlock Mar 19 '12 at 16:42
  • So from what I am seeing, your default width is 90%, correct? – huzzah Mar 19 '12 at 16:52
  • Well... perhaps, yes and no. Because the website actually has its own built-in skin changer/style switcher (you could see it in the bottom of the page). It has different width depends on the skin/style. Meanwhile the jQuery script I'm mentioning here is only a width-changer. I want user to have flexibility to choose their own width via this width-changer. To answer your question, in this case the default width is 90%. But it may vary depending on which skin/style is chosen. – deathlock Mar 19 '12 at 16:58
  • Welllllll....I am for certain not a JQuery/Javascript/logic expert, but it seems to me that in your setStyle() function the first statement is causing it to execute the first elseif and then it breaks. I'm not sure this is the problem but if in this instance, default and 90% are both the same, and your first elseif is to execute the 90% css file, and your .defa class contains no stated width, maybe it goes to the first elseif, executes 90% width, and then breaks. – huzzah Mar 19 '12 at 17:08
  • Hmmm... okay, after some searching and trial-and-errors, the problem is solved. I replace `if (! style_width) {` with `if (style_width != undefined) {`. This is a problem with Javascript detecting undefined/null variable. I'm still learning though so I cannot explain it in the best terms. if you're interested (just in case), you may look at it here > http://stackoverflow.com/questions/27509/detecting-an-undefined-object-property-in-javascript Thanks for trying to help :) – deathlock Mar 19 '12 at 17:53
  • Hey, it's a learning process for us all! I've run into that != problem in PHP too, the language is always picky about HOW you say NOT. Good luck, and BTW, the effect is gorgeous! – huzzah Mar 19 '12 at 18:17
  • Haha, yeap, it could be annoying, often. Thanks! :) – deathlock Mar 19 '12 at 19:03