AJAX/CSS issue (more UI focused)


#1

All,

This isn’t strictly a problem or issue with RoR but I wondered if
someone might have some insight.

I have a DIV on a page which I am using to “preview” the contents of a
URL provided by the user. Basically, when the user clicks on a link, I
do an AJAX call to an action which uses Net::HTTP to request the URL in
question and then update the DIVs innerHTML attribute (standard AJAX-101
stuff).

Depending on the page, it appears that if the page is controlled by a
stylesheet, then that stylesheet can cause changes in the width of the
content area.

(As a side note, it appears that for the same page, IE can’t handle the
embedded stylesheet and Firefox can).

Am I stuck with this behavior because of the cascade, or is there a way
that I can at least force the sizing of my content area to be the same?
I actually don’t mind most of the stylesheet since the preview looks
like it should look, but I don’t want my content well to be distorted.

Any help would be appreciated.

Wes


#2

You could make your div have the owerflow: hidden; attribute to hide
what goes over your div size. Other thing that might be even cooler is
to develop something to take a screenshot of the page in question much
like they do in ma.gnolia.com. Just bigger.

On 3/28/06, Wes G. removed_email_address@domain.invalid wrote:

like it should look, but I don’t want my content well to be distorted.
http://lists.rubyonrails.org/mailman/listinfo/rails


#3

Wes G. napisaÅ?(a):

All,

Any help would be appreciated.

Wes

I would suggest setting the innerHTML to an iframe with an url. This
should solve the problem.


#4

On 3/28/06, Wes G. removed_email_address@domain.invalid wrote:

(As a side note, it appears that for the same page, IE can’t handle the
embedded stylesheet and Firefox can).

I noticed the other night too. Neither IE nor Opera would pick up the
embedded stylesheet for me. I had generated a DIV from an AJAX call
with an embedded … tag.

I’m certain that I had read about this before, but I couldn’t find a
source to corroborate this behavior.

In the end, I ended, as part of the RJS return, inserting a CSS link
into the head of the document via DOM.