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?
Related
I am new to accessibility of web pages. I have an application where the content of the body changes based on the header link clicks in an ajax call without page refresh. So the HTML content inside the body gets updated for each link click with different page content (table + button + information text).
My requirement here is the screen reader should announce the information text each time when the page gets loaded. Here the container is body (or an immediate div inside body) for all pages. So I have made it aria-live="polite", but every time page loads it is announcing the whole page content but I want to make it announce only the information text. Other elements of the page should be announced on focus/visit. I hope I can apply aria-live="off" for all other elements but I'm looking for any ideal solution for this. I cannot change the layout of the application.
Can some one help me on this. Thanks in advance.
SPA pattern best practices
You are essentially following a Single Page Application pattern. As such the method recommended for handling navigation is actually quite straight forward with two steps.
tell a user that navigation is about to occur (before navigation)
let a user know that loading is complete (after navigation).
before navigation (link click)
You need to signal to a user that a page is loading if you are using a SPA pattern (and therefore interrupting normal navigation). e.g. I click your link, you need to let me know that an action is being performed (loading.....) as you intercept the normal browser behaviour with e.preventDefault() or equivalent.
The simplest way is to use aria-live=assertive on a region that explains the page is loading. You can Google how to implement that correctly but essentially you would update the content of a hidden div (<div aria-live="assertive" class="visually-hidden">loading</div> with some loading message the second a link is clicked.
This should be done before any AJAX calls are made.
after navigation (new content loaded)
When the new page loads you need to manage focus.
The best way to do this is to add a level 1 heading (<h1>) to each page that has tabindex="-1". By using tabindex="-1" it means that the heading won't be focusable by anything other than your JavaScript so won't interfere with the normal document flow.
Once the page loads and the content has been populated fully the last action you perform in your JavaScript navigation function is to place the focus onto this heading.
This has two benefits:
it lets the user know where they are now
it also lets them know when the page load is complete (as AJAX navigation doesn't announce when the page is loaded in most screen readers).
At this point you may also want to clear the <div aria-live="assertive"> contents so that it is ready for further navigation.
Have you tried to wrap the "live zones" - where updates happen in div with aria-live="polite". Then screen reader will announces only these zones on updates.Don't wrap whole page or div in aria-live="polite".
<div aria-live="polite">
<p id="errorText">Announced on update</p>
</div>
<div>
other page sections..
</div>
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.
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.
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
i want to use page break in html that means the reader cannot scroll down further until he select a link for it.
<SPAN id=title><A name=BdToc_1 external=yes><h1 id="BookTitle" align="center"><font color="#B90000"><b>Choose Subject</b></font></h1>
</A>
</SPAN>
<p>
Contents....
</p>
I want a page break before and after this. Please help me
Forgive me for pointing out the obvious, but page breaks are used to separate distinct pages. Each HTML document is a distinct "page". "select[ing] a link" traditionally loads a new page. So.... why don't you just load the next page when they click on this link?
You can specify where page breaks occur using CSS properties page-break-after, page-break-before. Of course, this works only when printing the web page. As far as I know, these properties are correctly implemented in all major browsers including IE6+. Additionally, you can also state that page break should not occur inside an element using page-break-inside.
If you want paging per se, you need to have HTML for each page and interlink these pages. Or you can fetch contents of each page using AJAX dynamically, which of course involves scripting.
It's not quite possible in HTML. You could try makeing something in Javascript, but anyone can dissable javascript.
Why would you want something like this?
You can use onscroll in javascript to control the scrolling. The onscroll event can determine the current position and there is a function to scroll up if the user is too far down.
Then, when the user clicks the link, you set a flag (scrollok=1). The onscroll checks the flag and now permits scrolling.
If you want to defeat people who have deactivated javascript, just make the content invisible until they click using stylesheets: visibility=none.
Then, when they click the link, you enable scrolling via the flag, and make the content visible.
If you don't know how to do these things, just leave a comment and I can be more precise.