CODEWITHSUNDEEP
html
Tom Swirly
Tom Swirly

Reputation: 2790

Seamless FRAME/IFRAMEs (with reasonable scrollbars)?

Summary:

I'd like to display a shopping cart from another domain underneath my fixed content in my page - and have the scrollbars come out properly.

Details:

I need to display a shopping cart from a vendor within a page on "my" site with "my" header on top. (Eventually the shopping will all be in a subdomain but not now, sigh.) The header is a fixed height. The shopping cart pages vary in height as you navigate within that frame.

I've tried frames and iframes and had cross-browser issues with the iframes. I'm only testing four configurations, Windows/IE, Windows/Firefox, Mac/Safari and Mac/Firefox.

Right now I am using a frameset with two frames, one containing my fixed-height header page, the other containing the external page. This does work - the one issue is that when a scrollbar appears it (of course) only appears on the bottom frame.

This will do and the client isn't very sophisticated but it bugs me.

If I use IFRAMES, I find I need to sprinkle height: 100% and overflow-y: auto in various places - and yet I still cannot avoid either one of two unacceptable issues that appear in at least one of the browser/OS combinations...

  1. The combined content is larger than the window, but no scrollbar appears.
  2. An inner scrollbar and an outer scrollbar both appear.

Any hints appreciated!

EDIT:

Thanks for the work - but I don't think I conveyed the issue correctly.

I'm not using frames for layout - I wish simply to make a page framing something on another site (that hosts the shopping cart and whose URL should not be exposed).

Frames "work" - BUT having an interior scrollbar on the second frame and no scrollbar on the whole page is definitely wrong behavior. My client won't know this but it'll look amateurish to people seeing the page.

I don't see quite how a server-side include or CSS would do it and I know both fairly well. If I used the server side include, how would links internal to the shopping cart work? I'd leave my site, correct?

Summary: A shopping cart hosted on another site, embedded on my content page.

Upvotes: 2

Views: 579

Answers (1)

Tarun
Tarun

Reputation: 5524

Don't use frames, if the user does command + click then the product will open in new window and your frame will disappear.

One feasible solution I see here is with Javascript:

  1. Load the page via $.ajax

  2. redirect all clicks so that it loads in ajax window by

    $('iframe a').on('click',function(){

    // load the product via AJAX

});
    1. make sure height of Div is not fixed so that it expands automatically and scrollbars are there only on window.

This is best way I could think of keeping the integration seamless while hiding the url

Upvotes: 1

Related Questions