Alternative to frames (or frames help)
- Started
- Last post
- 17 Responses
- Lets_not_pretend
Right, doing a quick website here and got a little stuck (I'm no coder so bear with me).
Basically this little 4 page site has a looping flash animation with sound at the top of the page. In order to not have this restart when navigating between pages I have put the nav and flash in a frame and the content in a frame underneath. Apart from obvious frame problems this works fine, however only my content frame has a scrollbar when I want the whole page to scroll if the content is too large to be displayed.
What Im asking is, is there a way to make the whole frameset scroll if one frame has too much content, and if not, is there another (easy) way I can code the page so as to not have the flash animation and sound restarting on every page click?
- zr0
looping animation with sound at the top of every page? ...really?
- If you're going to torment the user with that, might as well chuck in frames too + maybe a blink tag while you're at itzr
- Don't forget aliased silver-ish bullets, the <marquee> tag from IE3 and rainbow horizontal rules.Continuity
- Lets_not_pretend0
Yes, there are multiple images fading into each other, with a shitty soundtrack (FML). Trust me, I'm not proud!!!!!
- spraycan0
to not have the anim restarted every time you switch to a page can also be done with Ajax
- zr0
and you don't need frames - just set overflow:scroll or auto to get scrollbars
- zr0
It could make sense to load it all up at once and use something like serialscroll to navigate the content (rather than ajax):
http://flesler.blogspot.com/2008…
- Lets_not_pretend0
All Im trying to achieve is when you click a page the flash doesn't reload but continues to play.
- lose the soundtrack and let jquery take care of the fading imageshans_glib
- zr0
As already stated above, here are two of the ways you could do this:
- As spraycan says: Use AJAX to load content without a page refresh.
- Use jQuery or similar to emulate frame behaviour in an accessible way and also avoid page refresh. ^ serialscroll.- yep a little jquery script would do it, no really need of ajax :pspraycan
- taxiguerrilla0
You can use a little jQuery script to load you contents dynamically. I did something like this here (it's still in progress, images are random etc. etc.):
http://stage.simonelippolis.com/…
Click on one of the small images. If you need it, I can provide you the script.
- jazmine0
if the soundtrack is a requirement, just don't forget to have a mute button. be kind to your users.
- jazmine0
if the soundtrack is a requirement, just don't forget to have a mute button. be kind to your users.
- Lets_not_pretend0
Right, Ive got everything together and it does work in frames (apart from the scrolling issue), problem is, my knowledge is only very limited, so although I'm sure your solutions all work they don't really help me out.
Can someone explain (so it is understandable to an idiot) how I can best build this site so that the Flash does not reload. I can take care of css and divs and all that, but as soon as you mention scripts and ajax I'm totally lost!
Any help would be hugely appreciated!
- spraycan0
the only way right now if you have no knowledge of scripting is with a frame, i could help you with the script but if you know nothing about scripting i would certainly have to finish coding the whole site. lol
start having a look at jQuery and javascript
- ukit0
How about simply including a slightly different Flash movie on each page? The one on the homepage includes the animation, the others don't.
Quick and easy solution since you obviously aren't trying to win the website of the year contest with this.
- ukit0
Oh wait, you said you WANT the animation to keep playing. OK, second easy option, use this JQuery tabs widget and stick each "page" in a different tab.
http://jqueryui.com/demos/tabs/
It allows you to add Ajax loading and back button support if you need it.
- monNom0
Just use frames. all this jquery this, ajax that is horribly overthinking the problem, and actually worsening usability/accessibillity.
The easy solution to your initial question is to nest your frames.
frameset 1
|
+----frameset 2
........|
........+----- animation.htm
........+----- content.htmin frameset2, set content frame height to 100% no scroll, fix animation frame height to a pixel value, no scroll. Frameset 1 is just a wrapper set to scroll, that loads frameset 2.
...or something approximating the above.
- ETM0
If you know basic CSS and Javascript, its easy. You said its only 4 pages, so create a div for each 'page'. Set them all to hidden except the div containing the 'home page' content by default.
Then do a Google search for 'show/hide div' tutorials and you can just have the navigation change which div to show and which others to hide. Simple and no need for jquery etc.
