thr3ads.net - Rails - trying to get z-index to work

If this information is useful, please help other people find it:
Share via:

Jedrin

2011-May-31 22:22 UTC

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:

<span id="sp0_0" style="color: purple; position: absolute;
left: 40px;
top: 70px; overflow: visible;">Free</span>

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Walter Davis

2011-May-31 22:28 UTC

head link

Re: trying to get z-index to work - CSS styling with RJS

On May 31, 2011, at 6:22 PM, Jedrin wrote:
> 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:
>
> <span id="sp0_0" style="color: purple; position:
absolute; left: 40px;
> top: 70px; overflow: visible;">Free</span>
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

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Bill Walton

2011-May-31 22:32 UTC

head link

Re: trying to get z-index to work - CSS styling with RJS

Hi Jedrin,

On Tue, May 31, 2011 at 5:22 PM, Jedrin
<jrubiando-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>  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
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

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Walter Davis

2011-May-31 22:48 UTC

head link

Re: trying to get z-index to work - CSS styling with RJS

On May 31, 2011, at 6:32 PM, Bill Walton 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

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Jedrin

2011-May-31 22:58 UTC

head link

Re: trying to get z-index to work - CSS styling with RJS

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 received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Walter Davis

2011-May-31 23:07 UTC

head link

Re: Re: trying to get z-index to work - CSS styling with RJS

On May 31, 2011, at 6:58 PM, Jedrin wrote:
> 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>
>
>
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

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Jedrin

2011-May-31 23:25 UTC

head link

Re: trying to get z-index to work - CSS styling with RJS

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

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Walter Davis

2011-May-31 23:32 UTC

head link

Re: Re: trying to get z-index to work - CSS styling with RJS

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 May 31, 2011, at 7:25 PM, Jedrin wrote:
> I wonder if something has changed with prototype ? I''m not sure
how I
> can view the generated javascript for this ?
-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Bill Walton

2011-May-31 23:39 UTC

head link

Re: trying to get z-index to work - CSS styling with RJS

On Tue, May 31, 2011 at 5:48 PM, Walter Davis
<waltd-HQgmohHLjDZWk0Htik3J/w@public.gmane.org>
wrote:>
> On May 31, 2011, at 6:32 PM, Bill Walton 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

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Bill Walton

2011-May-31 23:48 UTC

head link

Re: Re: trying to get z-index to work - CSS styling with RJS

On Tue, May 31, 2011 at 6:25 PM, Jedrin
<jrubiando-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
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

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Jedrin

2011-Jun-01 07:22 UTC

head link

Re: trying to get z-index to work - CSS styling with RJS

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");
..> Both params "background-color" and "z-index"
won''t be set anymore
> using 1.6.0.rc0.
> The exact same code does it well by using 1.5.1.1.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

Rails - May 2011 - trying to get z-index to work - CSS styling with RJS

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

Re: trying to get z-index to work - CSS styling with RJS

Re: trying to get z-index to work - CSS styling with RJS

Re: trying to get z-index to work - CSS styling with RJS

Re: trying to get z-index to work - CSS styling with RJS

Re: Re: trying to get z-index to work - CSS styling with RJS

Re: trying to get z-index to work - CSS styling with RJS

Re: Re: trying to get z-index to work - CSS styling with RJS

Re: trying to get z-index to work - CSS styling with RJS

Re: Re: trying to get z-index to work - CSS styling with RJS

Re: trying to get z-index to work - CSS styling with RJS