I have a section of controller code that tries to style a page with
moving text and images.
This used to work a few years ago, but I have not had the site working
for awhile and I am trying to resurrect it.
Below is some of the RJS code. The z-index and font-size does not seem
to work as far as I can tell, though I am especially focused on z-
index not working. My moving text is supposed to be in front of the
images, but it is not.
If I do view generated source from web developer plugin, one of the
elements generated is shown below. I am not sure if my problem may be
something different in RJS or CSS is needed or what else I can try to
troubleshoot the problem ? I am using rails 3.0.5 at the moment ..
thanks
Which suggests that :'z-index' is being ignored. Are you sure that's the way to set this property (quoted symbol name)? Have you tried :z_index instead? (I have no idea, that's just a guess.) In vanilla JavaScript, any of the attributes that have dashes in their name get interCapped, but that doesn't seem like it would work on the Ruby side of things.
Sorry, I disagree with this. The stylesheet is given the same priority as ever, in keeping with the idea of "weight" inherent to the cascade. The closer a declaration is to the thing that it governs, the more authoritative it is taken to be.
You can see this very easily in Safari's Web Inspector by using (Contextual Menu: Inspect Element) and look at the attributes declared on the local object versus those in the style sheet(s). The list in the sidebar will show various attributes grayed back and crossed out as those higher in the list contradict them. At the very top of the list is the Computed Style section (closed by default) which will show the result of all this cascading jujutsu.
If you make a little sample document, you can see this for yourself. Local (inline) attributes still trump all.
The only exception to this would be if you add the !important flag to the end of a rule. That will override even a locally-declared attribute, and didn't use to, and this may be the part you're remembering.
I agree, that does seem to work as expected. I'm not an expert on the RJS side of things, but I have used Prototype for many years, and $('foo').setStyle('z-index: 20') certainly works there. Maybe there's an alternative syntax you could use, where instead of pecking away with multiple calls to set_style, you could concatenate a hash and send the whole thing at once, maybe something like foo.set_style {:'z-index' => 20, :font_size => font_sz, ... }
I tried this and I seem to still have the same exact problem:
page[k].set_style({:position => 'absolute', :left => (pidx * 300),
:top => (1 * (topidx * 200) + 80),
:'z-index' => 10})
A side note, is that if I do the following without the parens, I get a
syntax error of some sort.
I was never really sure why that happens:
You can simply view source in a browser. Furthermore, Safari or Firefox (with Firebug) can show you endless detail about the script on your page. The shortcut is the same: Control (or right) click on the element, and "Inspect Element". That will show you the actual rendered properties, not what's hard-coded in the generated HTML.
Another resource that's incredibly helpful, in case you don't already
subscribe, is the css-discuss list. It's run by Eric Meyer and is a
how-do-i-do-or-fix-this-thing list. The name is a little misleading.
There's no opining. Post your objective, your code or a link to a
page with the problem, and you will get very specific instruction on
how to achieve your goal.
