Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations sizbut on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE Filters and Page Navigation 2

Status
Not open for further replies.
JavaStripped

JavaStripped

Programmer
Dec 18, 2002
84
CA
Is it possible to use IE filter transitions in hyperlinks to animate page transitions? All of the examples and tutorials I can find use transitions specifically for showing and hiding objects on the same page, and my experimentation is getting me nowhere.
[curse][hairpull3]

Thanks for any assistance!
[blues]

JavaStripped
"I did *not* escape. They gave me a day pass."
 
Sort by date Sort by votes
You can only get page transitions through meta tags like so:

<META HTTP-EQUIV="Site-Enter" content="RevealTrans(Duration=3,Transition=23)">

 
Upvote 0 Downvote
So the transition animation happens upon opening of the page, regardless of how it opens? That works actually better than any other mechanism, seeing as one can't include JavaScript in CSS class descriptions.

Thanks!
[2thumbsup]

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
New question about this: I know how to use transitions to handle page changes (thanks to those who replied), but what I want to be able to do now is use a double transition, so that I can specify a page-enter and page-exit transition separately for each page and have them both play, ideally with a plain black screen between them; is this possible?

Something like:
[tt]
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=5,Transition=2)">
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=5,Transition=3)">
[/tt]
on every page, so that it does an iris-close effect to black, then an iris-open effect to the new page. But how do I specify the plain black screen in between?

Thanks!

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
I mean, I know I can create a simple blank HTML page with the background-color property of the <body> tag set to #000000, but how do I tell the page I'm leaving to go to that page, then to the specific page being linked to?

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
See faq216-5442.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
Okay, I've figured out how your demo works (the personalized greeting), but I'm not getting how to use the <a> tag attributes.

From the FAQ:

If the next page is accessed through a link, then the <a> tag can be used alone.
[tt]
<a href="redirect.html?page=1">Page 1</a>
<a href="redirect.html?page=2">Page 2</a>
<a href="redirect.html?page=3">Page 3</a>
[/tt]
etc.

From my "intermission" page:
[tt]
<body style="background-color: #000000;">
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2,Transition=2)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=2,Transition=3)">
</body>
[/tt]
This part works, but how do I retrieve the "page" value and use it to specify the following page?

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
Code: 
<html>
<head>
<title></title>    
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2,Transition=2)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=2,Transition=3)">
<script type="text/javascript">
<!--

function getValue(varname)
{
  // First, we load the URL into a variable
  var url = window.location.href;

  // Next, split the url by the ?
  var qparts = url.split("?");

  // Check that there is a querystring, return "" if not
  if (qparts.length == 0)
  {
    return "";
  }

  // Then find the querystring, everything after the ?
  var query = qparts[1];

  // Split the query string into variables (separates by &s)
  var vars = query.split("&");

  // Initialize the value with "" as default
  var value = "";

  // Iterate through vars, checking each one for varname
  for (i=0;i<vars.length;i++)
  {
    // Split the variable by =, which splits name and value
    var parts = vars[i].split("=");
    
    // Check if the correct variable
    if (parts[0] == varname)
    {
      // Load value into variable
      value = parts[1];

      // End the loop
      break;
    }
  }
  
  // Convert escape code
  value = unescape(value);

  // Convert "+"s to " "s
  value.replace(/\+/g," ");

  // Return the value
  return value;
}

// -->
</script>
</head>
<body [red]onload="window.location=(var url = getValue('page'))?url:'notfound.html';"[/red]>
</body>
</html>
This page shows the beginning transition, and if there is a page specified loads it, otherwise loads "notfound.html". It then shows the end transition.

This will not be non-JS compliant. Don't use a page like this if you expect users who have javascript disabled. Your site will be inaccessible.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
However, while the window-focus thing works fine, I'm having trouble getting this to work. When I activate the link, I get a syntax error in the red-hilited line in your code above (specifically, in the "window.location" object reference); I have triple-checked my filenames and have no problems there, and the JavaScript Bible isn't helping me out much.

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
Try
Code: 
<body onload="var url=getValue('page');window.location.replace((url == '')?url:'notfound.html';">

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
Okay, now the first transition works... but it isn't going to the transition page (the one with the black body background-color); I'm getting a standard "Page not found" error, not even my custom one. I'll play with it a bit more; this should be something simple that I've missed. Thanx for all the help!

:-D

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
Can you give the entire code of the three pages? Or give a link?

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
Page 1 is just a basic link-test page. The links are intended to go to pages titled Page1.html, Page2.html, and Page3.html, all of which are identical and consist solely of a <h1> header and a simple <p> paragraph of meaningless text.
[tt]
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=2,Transition=2)">
</head>
<body>
<a href="PageTrans.html?page=1">Page 1</a>
<a href="PageTrans.html?page=2">Page 2</a>
<a href="PageTrans.html?page=3">Page 3</a>
</body>
</html>
[/tt]

Page 2 is the page with the transition code you (chessbot) provided above; here's what's different:
[tt]
<body style="background-color: #000000;" onload="var url='Page'+getValue('page')+'.html';window.location.replace(url == '')?url:'NotFound.html';">
</body>
[/tt]

Page 3 is the customized error reporting page (notfound.html); I had some fun with the wording, but I'm not seeing it in my testing.
[tt]
<html>
<head>
<title>Page Not Found</title>
</head>
<body>
<h1>404 &ndash; Page Not Found</h1>
<h4 style="margin-left: 20%; margin-right: 20%;">The page you requested is not available. It may have moved, or it is possible that quantum fluctuations have cast its bits off into the electronic ether (or cyberspace, if you will). Please try again.</h4>
</body>
</html>
[/tt]

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
Clarifications:

I guess I should have referred to the pages described above as pages A, B, and C. They are not the same as the pages 1, 2, and 3 that the hyperlinks go to.

The intended effect is for the link on the first page to trigger a transition (iris-open, in this case) to the second page, which is all-black, then for the browser to automatically redirect to the actual destination of the clicked hyperlink with a second transition (iris-close) from the black screen to the new page.

Right now, all it's doing is activating the first transition and going to a standard "404" page, as I noted earlier. I'm pretty sure the problem is with how I'm handling the destination page identifiers, but I'm at a loss as to exactly what's wrong.

Thanx again for the assistance!

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
The additions look fine.
What is the url in the location bar when you get to the 404 page?

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
(drive path to folder containing all demo files)[tt]\false[/tt]

As soon as I noticed that, I realized that there must be something weird going on. I was reading my copy of "Inside JavaScript" earlier today and I was wondering about using the [tt]document.activeElement[/tt] property to retrieve the target of the clicked hyperlink... I haven't played with it yet, though. I'm not sure if that will work without cross-referencing it to the appropriate entry in the [tt]document.links[/tt] collection. Your thoughts?

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
Clarification:
The drive path thing was expected; I'm not working through a live path at this point, because I'm still building my Web server physically. It's just the [tt]\false[/tt] at the end that seems weird at this point.

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
1. I see why the page is not working. I don't think that it makes sense, but I see why:
Code: 
window.location.replace((url == '')?url:'notfound.html');

For some reason, this returns the value of (url == ''), which is false. One workaround:
Code: 
function findURL()
{
  var temp = getValue("page");
  if (temp == "") return "notfound.html";
  return "page" + temp + ".html";
}
// .......
<body onload="window.location.replace(findURL());">

2. I don't think this would be necessary, unless you want to do it some other way.


--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
I'll try this out; thanks for the quick reply!

JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
No problem; post back if it works.

P.S. Semicolons galore!

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
607
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
665
AbidingDude
AbidingDude
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
248
penguinspeaks
penguinspeaks
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
201
ggriffit
ggriffit
chillay
  • Locked
  • Question
Add Control + F feature to a Web Page
Replies
3
Views
233
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top