Can I initiate loading of frame B from frame A? - html

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.

Related

Browser tab not showing full URL?

I'm having a odd issue with this site I'm building:
http://limetreeyoga.uk
If you click on "about" it takes you to the "about" page but if you refresh the page it takes you back to the home page?
Same with the other pages, its also not showing the "title" tag in the browser? I have no idea why, can anyone help?
Cheers
T
This website uses FRAMES - extremely old (i.e. outdated) technology....
The outer frame always stays the same, that's the reason for the reload problem. Only the inner frames change when you click the menu.
ADDITION: In fact, it seems you have a complete regular (useable) document structure inside the first frame. Try to erase all HTML outside the first <frame> element - that might even work... (although I didn't look into it in detail)

Frameset Alternative HTML5 to change certain div content

I couple of years ago I paid a simple HTML pages with a side bar and a 'main frame'. The Main Frame would auto refresh into another page using: meta http-equiv="refresh" content="5; URL='/target.html'"
Now I want to update it to HTML5. I still want the sidebar to stay 24/7 in place and the main frame content to refresh or change into another page/content (being it videos, paragraphs of text or images).
I found out that framesets don't work anymore. Cause I had it set up to: Sidebar = a frame and Main Frame = a frame and just refresh the source of the main frame into the next page of content.
Any alternatives?
The kind of solution you are looking for, was described here by the author himself.
He needed a sidebar fixed, while changing the content fo the main screen.
He used before the framesets, then he found the solution described, in order to be able do not use them, but HTML5.
HTML5 alternative for frames with 1 fixed (menu) column
The modern way to do this would be with AJAX. See the answer to this question:
How to fire AJAX request Periodically?

Stop refreshing a specific div when browsing

I'm working on my website where I have a music player. The annoying part is that when I browse to another page the player stops and starts from begining...
What I want is to have a persistent music player. So how can I make the div that contains the music player to be static when browsing to another page?
The website: demo(dot)zdringhi-art(dot)com
Thanks!
WEB is stateless.
So if you move to another page there is no way for a div to remain the same.
Although what you can do is that... Hmm as follows.
Have a single page and have your div in there.
Then the other part of the page is loaded via ajax.
also when a link is clicked only parts of pages will be loaded.
Seems too much of coding , but is the only feasible option.
For eg take facebook
Gurav shah is correct, the web is stateless so if you are changing pages you only have a few options for this.
Frames, yes before anyone shouts this is what they were designed for. You could have the music player in one HTML frame and the rest of the page in another so when you move around you are only updating the main content frame.
Or do as gurav suggests and make your whole site one page and update the content with Ajax, so the music Div does not change.
Pass the current position of the player to the next page when you click a link.
to another page
Where getseconds() returns the current position of the music player and passes it to the next page then when that page is loaded you read in the variable from the URL and start the player from there.
Using frames is one solution but since you are using JQuery on your site you should check out .load (http://api.jquery.com/load/). It allows you to load the content of another page and put it somewhere in the current page. Something like this:
$(function () {
$("a").click(function (e) {
e.preventDefault(); // don't follow the link
$("#ja-container").load($(this).attr("href") + " #ja-container");
/* Load the new page using ajax request, take the content in #ja-container from that new page and put it in the current page's #ja-container */
});
});
This is not a complete solution: when someone clicks Concerts -> Agenda you should keep Agenda visible.
Personally, instead of forced background music I'd rather like to see a page with Youtube videos of the people playing the music.
Well, yes HTTP is stateless. what you can do is create a cookie, and update it with current location/time value of the player, constantly. This way, when you go to any other page you can read time/location from cookie.
otherwise, in a cookie less approach, sending AJAXed location/time data back-forth server-client will be too much network.
If I was doing this, I would have gone cookie way.

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.

html multiple frames navigation

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)