Email conversation
| From | Ric Carr |
|---|
| To | Me |
|---|
| Subject | Your JavaScript Tutorial site is excellenet. Can you give me tips on how to ... |
|---|
| Date | 15 April 2004 06:24 |
|---|
Hello,
Thanks for your site; you have great examples and information. I'm an
experience developer (business client/server apps), but new to Java/JSP/Web
programming; I have my Tomcat server set up and running.
I would really like some advice on what technologies to use as outlined
below.
What I want to do is click a link on the main page, and the responding jsp
would come back on a (frame/layer/ilayer/iframe??) which would look like a
piece of paper (hence no borders/title bar) with content (text/img) on it,
and would slide down from top, sandwiched (z-order) between two
images/objects. Picture a clipboard as the main page and the responding
link would be a piece of paper sliding down from the top of the screen,
laying on top of the clipboard, but under the clip, like its "feeding" out
between the clip and the board. I would want to start the movement only
after the page has loaded; it would be not be seen while loading.
What would be the best technologies to use for this design idea? I've been
reading about CSS & DHTML and understand that it gives the ability for
positioning & zorder of content, but I don't know enough yet to know if CSS
be used to encompass a whole webpage as an object that can be controlled as
a single object. IE. moved around. Would I make the main link a HREF with a
"TARGET" to ... what?
I would like cross-browser compatibility, namely among the "big" brands, but
I'm not concerned with supporting really "old" versions.
I'm not looking for you to write my code, but I would like your opinion on
which technologies (frame/iframe/ilayer/CSS, etc) to use and perhaps some
howto/strategies for going about my design idea. Whatever you have time to
write would be appreciated.
Thanks for your time to read this far. Looking forward to your response.
Cheers,
Eric
Eric.
Sounds like a cool idea.
You will need to import the new page into the main page. The idea of using
an iframe is the easiest, but I am afraid there is a very annoying bug with
iframes that will make it impossible to animate the iframe. Almost all
browsers do not like to move iframes from their original positions. However,
from the point of view of loading the page, iframes are ideal. So I propose
a hybrid approach that will need some explaining.
Basically, it uses an iframe to load the new page. The page in the iframe
then passes its contents to the main page. The main page puts those
contents inside a virtual 'page' which is then animated using DHTML
(CSS+JavaScript).
1) use JavaScript and CSS to create and hide the iframe only if the browser
is DOM compliant (this covers Internet Explorer 5+, Mozilla/Netscape 6+,
Opera 7+ and Safari (as well as a few others) - all the major browsers.
Put this just before the </body> tag:
<script type="text/javascript"><!--
if( document.childNodes && document.createElement ) {
document.write(
'<div style="position:absolute;left:0px;top:0px;visibility:hidden">'+
'<iframe src="about:blank" height="100" width="100" name="loader">'+
'</iframe></div>'+
'<div id="output" style="left:300px;top:0px;position:absolute;"></div>'
);
}
//--></script>
2) write a script that receives the page data, puts it in the output div
and animates it using style.top. This script would normally be put in the
document head.
<script type="text/javascript"><!--
var theInterval;
function doAnimation(newData) {
if( theInterval ) { clearInterval(theInterval); }
var d = document.getElementById('output');
d.style.visibility = 'hidden';
d.innerHTML = newData;
theHeight = d.offsetHeight;
//the 100 is to allow for your 'clipboard clip'
d.style.top = ( 100 - theHeight ) + 'px';
theInterval = window.setInterval('animateSlide();',50);
d.style.visibility = 'visible';
}
function animateSlide() {
var d = document.getElementById('output');
var nowAt = parseInt(d.style.top);
//the 100s on the next two lines are to allow for your 'clipboard clip'
d.style.top = ( ( 100 - nowAt < 20 ) ? 100 : ( nowAt + 20 ) ) + 'px';
if( parseInt(d.style.top) == 100 ) { clearInterval(theInterval); }
}
//--></script>
3) Use CSS to style #output to make it look like a page. The HTML of the
new page will be embedded in it, so you will need to style that too.
Styles should go in the stylesheet of the _main page_ not the loaded page.
Use CSS to position your clip image over the top of where the virtual 'page'
will be. This should be an image in a <div> tag, and should be positioned
immediately before the </body> tag, _after_ the script in step 1. This will
ensure the correct z-index.
Give the div a background colour to obscure the virtual 'page' while it is
animating and make sure its width is at least as wide as the virtual 'page'.
4) Use regular links to load the page into the iframe:
<a href="newpage.html" target="loader">
<a href="anotherpage.html" target="loader">
5) When the pages load in the iframe, they should use the onload event to
pass their HTML into the main page.
<body onload="
if( window.parent && parent != window ) {
parent.doAnimation(document.body.innerHTML);
}
">
That's it. I have attached an example. Save the files to the same directory
and open clipboard.html.
Note that even though for your purposes, accessibility is unnecessary, this
is an accessible script, as in non DOM browsers,
it just opens the new page separately.
Sorry if I went a little overboard (eg. writing most of the script for you),
but I just love a challenge. :)
All of the styling is upto you. I have done something basic so that you can
see what I am doing.
enjoy.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Ric Carr |
|---|
| To | Me |
|---|
| Subject | Re: Your JavaScript Tutorial site is excellenet. Can you give me tips on how to ... |
|---|
| Date | 15 April 2004 21:38 |
|---|
Hi Mark,
Wonderful! Thank you. Great ideas and good learning/starting point for me.
I did a quick view of the attachments and it looks like the effect I want.
I really appreciate the effort you sent along and I'm looking forward to
working and building upon it.
Have a great day!
Cheers,
Eric