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
something different in RJS or CSS is needed or what else I can try to
page[k].set_style :‘z-index’ => 20
page[k].visual_effect effect, {:queue=> {:position =>
‘end’, :scope => scope}, :duration => 1}
some of the dynamic css generated:
Free
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.
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
Another possibility, if Walter’s suggestion doesn’t lead to a
solution, is that the different behavior you’re seeing now vs. then
has to do with browser ‘maturation.’ I believe most current browsers
will give precedence to the stylesheet over inline styling.
I believe most current browsers
will give precedence to the stylesheet over inline styling.
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, … }
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.
I believe most current browsers
will give precedence to the stylesheet over inline styling.
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.
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:
I tried this and I seem to still have the same exact problem:
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.
Note that for performance reasons, we’ve deprecated the use of *
uncamelized* style property names when setting styles using a hash. So If
you have code that looks like this:
$(“header”).setStyle({ “font-size”: “12px” });
You need to replace it with either of the following: