html multiple frames navigation - html

Folks, I want to create a webpage with three panes (frameLeft, frameMiddle, frameRight)
The content on leftmost pane is a list from file list.html
Upon clicking on an item in the leftmost pane, it loads the corresponding html file (call it listLvl2.html) in the middle pane. This is also a list.
Clicking further on an item in the middle pane should load the corresponding html file in the third frame (lets call it content.html)
I have made an index.html file with three frames. frameLeft loads list.html. I have coded list.html so that every link opens in the target="frameMiddle" . This works well
The issue is opening content.html in frameRight. What should I put as the target in my listLvl2.html links so that they open in frameRight? I tried putting it as frameRight, but instead, it opens in a new window. I guess that is because for listLvl2.html , frameRight is not defined.

I would highly advise against this. Using Framesets kills bookmarking abilities and causes all kinds of other issues.
Create a single page, that uses common code fragments to display the top and left column content instead.
At first framesets seem like a great idea - only load stuff in the frames as you need it... but then other issues arise. Each frame needs to load its own copy of CSS and JavaScript resources, users can't bookmark a sub page, the title never updates to the correct page, nor does the URL.
Later if you envision a dropdown cascading menu over one frame from another you quickly learn that it isn't possible - period.
No. of HTTP Requests for a typical page:
HTML
CSS
JS
No. of HTTP Requests for a typical frameset (top, left, right)
HTML (of frameset)
HTML (of top)
CSS (of top)
JS (of top)
HTML (of left)
CSS (of left)
JS (of left)
HTML (of right)
CSS (of right)
JS (of right)

Related

Why am I getting a doubled menu when I click the link for my main page?

Whenever I click the "Home" option on my menu (left hand side, frames), a second copy of the menu page appears on the left side of the main window. The html of this link is identical to the other links, which work fine. As I'm just developing the site at the moment, the HTML of all the links is also identical. There is no code difference between this link and the others in any way, only the behavior.
The doubled copy of the menu is a phantom. It will not double itself again, and goes away when any other link, other than the home page, is navigated to. I'm currently in school and this is my first ground-up project, so I'm sure it's something stupid and simple.
Well Aarron, your problem is indeed quite obvious. After looking for hours, the solution the whole time is that your "Home" link is pointed at Index.aspx, which is the page with your frames, instead of Main.aspx. You were thinking of Index as your home page, which it is, but linking there in this context gave you frames within frames, instead of the default opening display page you were aiming for.

Displaying address of the current frame in the address bar

I am using three frames in my html page. The top most frame gives the logos which is always constant. The bottom left frame contain links(more like an index) to different jsp pages. The links clicked in this frame are to be displayed in the bottom right frame. I want the address of the current webpage in the bottom right frame to be displayed on the address bar.
How can that be done?
You could use a pile of JavaScript with pushState (note limited browser support) but it would be clunky at best.
I'd recommend scrapping the frames and using JSP to template the shared content into standalone pages.

Loading a framed page with specific pages in each frame

I'm trying to create a link to a page with frames. The page has 2 frames - left side for menu and right side for content.
Linking to the URL brings up the index, but I want a specific sub-page on the site.
Is there any way to link to the sub-page while still keeping the format of the frames?
thanks
Set your link HREF value to the specific "sub-page" URL and set the TARGET property to the specific frame you want it to display within.

Can I initiate loading of frame B from frame A?

On my web page I plan to have a "header" containing links to different parts of my site. The same "header" will be present on every page. My header also contain an image.
I started to implement this idea and start to think about frames. I though that my be I should put my header in a frame and the main content will be displayed in another frame. I though that in this way I can avoid reloading of the header. It is always present and only content of the second frame is reloaded (as result of clicking links in the header). Can it be done in this way. Or, in other words, can I initiate reloading of frame B by clicking links in frame A (without reloading of frame A)?
sure, use the target attribute:
<a href="whatever.html" target="another-frame-name">
But please consider not using frames, as usually it creates horrible user experience.
Yes, you can. That's what A's target attribute is for.
Say that you have two frames, top one is named header, main one is called content.
Then, in your header, add target="content" to your links. This will tell browser to load whatever href you specified in links inside of a named frame.
One note, though. You would want to create site without frames these days.

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...
The combined content is larger than the window, but no scrollbar appears.
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.
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:
Load the page via $.ajax
redirect all clicks so that it loads in ajax window by
$('iframe a').on('click',function(){
// load the product via AJAX
});
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