thr3ads.net - Rails spinoffs - Getting a dynamically generated elements dimensions [Apr 2007]

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

sliver

2007-Apr-06 12:57 UTC

Getting a dynamically generated elements dimensions

Ive posted this before, but unfortunately I still have yet to resolve
it after numerous attempts...

Here is the overview: populate a container element with some new html
using Element.update and then retrieve the new dimensions of the
containig element.

Here is a bit of code snippet that I would think should work.. but
doesn''t:

==== start snippet ===<style>
.bigBox {
        height: 100px;
        width: 200px;
}

</style>

<script>
var content = ''<span class="bigbox">hello
world</span>'';
$(''debug'').update(content);
var dim = $(''debug'').getDimensions();
$(''debugLog'').update(''height: '' + dim.height
+ '' width: '' +
dim.width);
</script>
</head>
<body>
<span id="debugLog"></span>
<span id="debug"></span>

==== end snippet ===
The results returned are consistently:

mac firefox: height: 14 width: 0
mac safari: height: 17 width: 0

Ive tried setting a timeout by suggestion, which had no effect...
anyone have any ideas?


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

sliver

2007-Apr-06 13:31 UTC

head link

Re: Getting a dynamically generated elements dimensions

As an update... i added a lil bit of code to check the inner elements
dimensoins using:

$(''debug'').immediateDescendants().each( function(el) {
	var dimE = el.getDimensions();
	$(''debugLog'').update($(''debugLog'').innerHTML
+ ''<br>height: '' +
dimE.height + '' width: '' + dimE.width);
});

and it accurately returns the size of those elements... is it
something do to with css?

On Apr 6, 8:57 am, "sliver"
<sliver2...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Ive posted this before, but unfortunately I still have yet to resolve
> it after numerous attempts...
>
> Here is the overview: populate a container element with some new html
> using Element.update and then retrieve the new dimensions of the
> containig element.
>
> Here is a bit of code snippet that I would think should work.. but
> doesn''t:
>
> ==== start snippet ===> <style>
> .bigBox {
>         height: 100px;
>         width: 200px;
>
> }
>
> </style>
>
> <script>
> var content = ''<span class="bigbox">hello
world</span>'';
> $(''debug'').update(content);
> var dim = $(''debug'').getDimensions();
> $(''debugLog'').update(''height: '' +
dim.height + '' width: '' +
> dim.width);
> </script>
> </head>
> <body>
> <span id="debugLog"></span>
> <span id="debug"></span>
>
> ==== end snippet ===>
> The results returned are consistently:
>
> mac firefox: height: 14 width: 0
> mac safari: height: 17 width: 0
>
> Ive tried setting a timeout by suggestion, which had no effect...
> anyone have any ideas?

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

sliver

2007-Apr-06 13:50 UTC

head link

Re: Getting a dynamically generated elements dimensions

noticed a couple typos in the old snippets i pasted... i put working
code in a pastie here:
http://pastie.caboo.se/52199


On Apr 6, 9:31 am, "sliver"
<sliver2...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> As an update... i added a lil bit of code to check the inner elements
> dimensoins using:
>
> $(''debug'').immediateDescendants().each( function(el) {
>         var dimE = el.getDimensions();
>        
$(''debugLog'').update($(''debugLog'').innerHTML
+ ''<br>height: '' +
> dimE.height + '' width: '' + dimE.width);
>
> });
>
> and it accurately returns the size of those elements... is it
> something do to with css?
>
> On Apr 6, 8:57 am, "sliver"
<sliver2...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Ive posted this before, but unfortunately I still have yet to resolve
> > it after numerous attempts...
>
> > Here is the overview: populate a container element with some new html
> > using Element.update and then retrieve the new dimensions of the
> > containig element.
>
> > Here is a bit of code snippet that I would think should work.. but
> > doesn''t:
>
> > ==== start snippet ===> > <style>
> > .bigBox {
> >         height: 100px;
> >         width: 200px;
>
> > }
>
> > </style>
>
> > <script>
> > var content = ''<span class="bigbox">hello
world</span>'';
> > $(''debug'').update(content);
> > var dim = $(''debug'').getDimensions();
> > $(''debugLog'').update(''height: '' +
dim.height + '' width: '' +
> > dim.width);
> > </script>
> > </head>
> > <body>
> > <span id="debugLog"></span>
> > <span id="debug"></span>
>
> > ==== end snippet ===>
> > The results returned are consistently:
>
> > mac firefox: height: 14 width: 0
> > mac safari: height: 17 width: 0
>
> > Ive tried setting a timeout by suggestion, which had no effect...
> > anyone have any ideas?

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

Ken Snyder

2007-Apr-06 14:04 UTC

head link

Getting a dynamically generated elements dimensions

sliver wrote:> ...
> .bigBox {
>         height: 100px;
>         width: 200px;
> }
> ...
> var content = ''<span class="bigbox">hello
world</span>'';
> ...In this posted example, "bigBox" is different than "bigbox".
Could that
be it?

-- Ken  Snyder

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

sliver

2007-Apr-06 14:31 UTC

head link

Re: Getting a dynamically generated elements dimensions

@Colin, ive tried both divs and spans... the numbers do change for the
container... but they are not correct.

@Ken, I noticed some typos in the code i attached as snippets (it was
written on the fly in the window) so I made a pastie with working code
here:
http://pastie.caboo.se/52199

Ken Snyder wrote:> sliver wrote:
> > ...
> > .bigBox {
> >         height: 100px;
> >         width: 200px;
> > }
> > ...
> > var content = ''<span class="bigbox">hello
world</span>'';
> > ...
> In this posted example, "bigBox" is different than
"bigbox". Could that
> be it?
>
> -- Ken  Snyder

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

Colin Mollenhour

2007-Apr-06 14:59 UTC

head link

Re: Getting a dynamically generated elements dimensions

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
I''m not sure that function works correctly with span elements, have you
tried using it on a div?<br>
<br>
Colin<br>
<br>
sliver wrote:
<blockquote
 cite="mid:1175867405.885080.295600-vNUVgl6VddeDHtGwHsbpY2B/v6IoIuQBVpNB7YpNyf8@public.gmane.org"
 type="cite">
  <pre wrap="">noticed a couple typos in the old snippets i
pasted... i put working
code in a pastie here:
<a class="moz-txt-link-freetext"
href="http://pastie.caboo.se/52199">http://pastie.caboo.se/52199</a>


On Apr 6, 9:31 am, "sliver" <a
class="moz-txt-link-rfc2396E"
href="mailto:sliver2...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org">&lt;sliver2...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org&gt;</a>
wrote:
  </pre>
  <blockquote type="cite">
    <pre wrap="">As an update... i added a lil bit of code to
check the inner elements
dimensoins using:

$(''debug'').immediateDescendants().each( function(el) {
        var dimE = el.getDimensions();
       
$(''debugLog'').update($(''debugLog'').innerHTML
+ ''&lt;br&gt;height: '' +
dimE.height + '' width: '' + dimE.width);

});

and it accurately returns the size of those elements... is it
something do to with css?

On Apr 6, 8:57 am, "sliver" <a
class="moz-txt-link-rfc2396E"
href="mailto:sliver2...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org">&lt;sliver2...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org&gt;</a>
wrote:

    </pre>
    <blockquote type="cite">
      <pre wrap="">Ive posted this before, but unfortunately I
still have yet to resolve
it after numerous attempts...
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">Here is the overview: populate a container
element with some new html
using Element.update and then retrieve the new dimensions of the
containig element.
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">Here is a bit of code snippet that I would
think should work.. but
doesn''t:
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">==== start snippet ===&lt;style&gt;
.bigBox {
        height: 100px;
        width: 200px;
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">}
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">&lt;/style&gt;
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">&lt;script&gt;
var content = ''&lt;span class="bigbox"&gt;hello
world&lt;/span&gt;'';
$(''debug'').update(content);
var dim = $(''debug'').getDimensions();
$(''debugLog'').update(''height: '' + dim.height
+ '' width: '' +
dim.width);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id="debugLog"&gt;&lt;/span&gt;
&lt;span id="debug"&gt;&lt;/span&gt;
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">==== end snippet ===      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">The results returned are consistently:
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">mac firefox: height: 14 width: 0
mac safari: height: 17 width: 0
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">Ive tried setting a timeout by suggestion,
which had no effect...
anyone have any ideas?
      </pre>
    </blockquote>
  </blockquote>
  <pre wrap=""><!---->



  </pre>
</blockquote>
<br>
--~--~---------~--~----~------------~-------~--~----~<br>
You received this message because you are subscribed to the Google Groups
&quot;Ruby on Rails: Spinoffs&quot; group. <br> To post to this
group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org <br> To
unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
<br> For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en <br>
-~----------~----~----~----~------~----~------~--~---<br>
</body>
</html>

<br>

Possibly Parallel Threads

Search for more seemingly similar threads

Rails spinoffs - Apr 2007 - Getting a dynamically generated elements dimensions

Getting a dynamically generated elements dimensions

Re: Getting a dynamically generated elements dimensions

Re: Getting a dynamically generated elements dimensions

Getting a dynamically generated elements dimensions

Re: Getting a dynamically generated elements dimensions

Re: Getting a dynamically generated elements dimensions

Possibly Parallel Threads