Trying to get z-index to work - CSS styling with RJS

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

 page[k].set_style :'font-size' => font_sz
 page[k].set_style :color => col
 page[k].set_style :position => 'absolute'
 page[k].set_style :left => 40 + (horz)
 horz = horz + spacing + (w.length * mult)
  page[k].set_style :top => (tidx * 100) + 70
  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

On May 31, 2011, at 6:22 PM, Jedrin wrote:

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.

Walter

Hi Jedrin,

On Tue, May 31, 2011 at 5:22 PM, Jedrin [email protected] wrote:

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.

HTH,
Bill

On May 31, 2011, at 6:32 PM, Bill W. wrote:

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.

Walter

On May 31, 2011, at 6:58 PM, Jedrin wrote:

irb(main):001:0>

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, … }

Walter

I tried this which doesn’t seem to do anything either:
page[k].set_style :z_index => 20

I believe that the following syntax is valid:
page[k].set_style :‘z-index’ => 20

I tried this:

C:\Users\Laurence>irb
irb(main):001:0>
irb(main):002:0*
irb(main):003:0* x = :‘z-index’
=> :“z-index”
irb(main):004:0> x.class
=> Symbol
irb(main):005:0>
irb(main):009:0> x
=> :“z-index”
irb(main):010:0>

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.

Walter

On Tue, May 31, 2011 at 5:48 PM, Walter D. [email protected]
wrote:

On May 31, 2011, at 6:32 PM, Bill W. wrote:

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 stand corrected. Thanks.

Best regards,
Bill

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:

page[k].set_style {:position => ‘absolute’, :left => (pidx * 300),
:top => (1 * (topidx * 200) + 80),
:‘z-index’ => 10}

I wonder if something has changed with prototype ? I’m not sure how I
can view the generated javascript for this ?

thanks

On Tue, May 31, 2011 at 6:25 PM, Jedrin [email protected] wrote:

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.

Best regards,
Bill

I did the following which seems to fix the problem, note the last two
set_style calls take a string rather than a hash:

page[k].set_style({:‘font-size’ => font_sz, :color => col,
:position => ‘absolute’, :left => (40

  • (horz)), :top => ((tidx * 100) + 70)
    #:‘z-index’ => 20
    })
    page[k].set_style ‘z-index: 20’
    page[k].set_style 'font-size: ’ + font_sz.to_s

================================================

I found this on the web:

http://groups.google.com/group/prototype-core/msg/48ce0bd3949ff222

where it seems to say:

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:

$(“header”).setStyle({ fontSize: “12px” });
$(“header”).setStyle(“font-size: 12px”);

This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs