Forum Moderators: open
Back Button:
<FORM>
<INPUT TYPE="button" VALUE="Go Back" onClick="history.back()">
</FORM>
<note: to keep this thread from gaining more side conversations, I'll keep it locked. Please share your javascript ideas by starting new threads, and I'll add to this thread based on usefulness and member response to the posts. ~tedster>
[edited by: tedster at 10:03 am (utc) on Aug. 10, 2002]
<a href="javascript:history.back()">back</a>
<A href="javascript:history.back();"><IMG src="back.gif" width="208" height="25"border=0 alt="Back"></A>
In the HEAD or External JS file:
function cPop(url, wide, high)
{window.open(url,"popup",'width=' + wide + ',height=' + high);
}
In the BODY:
<a href="javascript:cPop('page.html',300,500)">Click for popup window</a>
Here 300 and 500 are the width and height parameters. You can vary them for each popup link you want to create. Replace page.html with the actual name of the URL that you want to load in the popup window.
KEEP POPUP ON TOP
When you have an ordinary popup, visitors can unknowingly bury it beneath the main window. Then, if they click on a second popup, and that document loads in the buried window -- they don't see it, even though it is there.
To keep a popup window on top of the windows stack, in the code for the HTML page that loads in the popup, use this code in the body tag:
<BODY onBlur=self.focus()>
SEPARATE POPUP WINDOWS
Sometimes you want a brand new window for every popup, instead of loading a new document into the old window. To do this, we need to have a unique name for the popup window itself, not just a unique document to load into it.
In the HEAD or external JS file:
function cPop(url, windowname, wide, high)
{window.open(url,windowname,'width=' + wide + ',height=' + high);
}
In the BODY, the link to generate the the popup window will now pass four parameters, like this:
<a href="javascript:cPop('page.html','win001',300,500)">Click for popup window</a>
Here, win001 is the name of this particular window. For the next link to launch a popup, you would use win002 (or any set of unique names you want). This way, each HTML document also gets a unique window.
IMPORTANT: If you use this method, several different popups can be open at one time. DO NOT USE THE CODE THAT KEEPS ONE WINDOW ON TOP OF THE STACK! You will create an infinite loop as two windows both fight to stay on top. That's a recipe for crashing a browser.
CLOSING A POPUP FROM A LINK
You can offer a link to your visitors that will close the popup. Sometimes it's more elegant to do this, instead of requiring visitors to click on the "X".
Here's the code:
<a href="javascript:self.close()">Click Here to Close the Window</a>
If the popup contains an enlargement of a graphic, you can link that entire graphic so that a click anywhere in the window will close it.
If you include the self.close() method in a page that was not opened by javascript, then an alert box will be displayed, asking for the user's permission to close the window.
[edited by: tedster at 5:19 am (utc) on April 14, 2005]
Your following javascript was exactly what I was after... my earlier efforts were showing an error in IE4 but OK in IE5.
If I want the new window positioned 50 pixels in from left edge and 50 pixels down from top, what are the syntax changes?
Thanks
----------------------------------------------
In the HEAD or External JS file:
function cPop(url, wide, high)
{window.open(url,"popup",'width=' + wide + ',height=' + high);
}
In the BODY:
<a href="javascript:cPop('page.html',300,500)">Click for popup window</a>
function cPop(url, www, hhh) {window.open(url,"popup",'width=' + www + ',height=' + hhh + ',left=50,top=50,screenX=50,screenY=50');
}
No changes are needed in the BODY link.
It is a very rare occurrence to find help given so freely, so often and so graciously.
Sometimes we forget to expess our thanks as often as we should. You are to be complimented on the effort you put into helping us solve our problems, be they big or small.
If you leave the parens blank, it takes you back one page. If you wrote javascript:history.back(2), it would take you back two pages, etc...
You might be able to put the javascript command in a meta redirect tag, to send them back after 5 seconds:
<meta http-equiv="refresh" content="5;URL=javascript:history.back()">
Don't know if that would work though...
You could play with around with this. It will auto redirect. Replace "top" with self, top, parent, etc if you are using frames. Also some older browser versions have trouble with history.back and history.go. You need to check your Javascripts for this and offer versions for all.
I'm in the giving mood. This script will redirect based on browser version.
A lurker window is opened with this code:
littleWin = window.open{"lurker1.htm", "_blank",
"top=9999,left=9999,screenX=9999,screenY=9999,height=1,width=1,"+
"location=no,resizable=no,scrollbars=no,staus=no,toolbar=no"};
After you are done doing your dirty work in the lurker window, make a call to www.microsoft.com to overwrite the last label on the task bar. It'll look like it belongs down there, and no one will notice.
Works in html-enabled e-mail too!
Moral: Disable javascript unless you can't live without it.
<SCRIPT TYPE="text/javascript">
<!--
setTimeout("self.location=history.go(-1)",5000);
//-->
</SCRIPT>
Try this:
<SCRIPT TYPE="text/javascript">
<!--
setTimeout("history.go(-1)",5000)
//-->
</SCRIPT>
The history.go() method redirects the browser all on its own -- it's not a function that returns an URL. For security reasons, the actual URL associated with any position in the history list is not accessible.
onFocus="if(this.blur)this.blur()"
Just place it in the href tag.
Is there an advantage to doing this--making my javascripts
external?
Two advantages:
Assume you've named the frames to be changed frame1 and frame2 and the HTML files to be loaded into those frames are newpage1.html and newpage2.html.
1. FUNCTION definition
(this goes in the HEAD section or .js file for the HTML of the navigation frame)
function doTwo(pageA,pageB)
{
(parent.frame1.location=pageA);
(parent.frame2.location=pageB);
}
2. LINK
(code for the HTML page)
<a href="javascript:doTwo('newpage1.html','newpage2.html')">ONE LINK changes two frames</a>
3. WEIRD STUFF
The BACK button will only take the screen back one frame at a time, not both at once. If that's a problem, the only workaround I can think of is forgetting the Javascript and having the link load an entirely new frameset, with the individual frames holding the new HTML documents (and the old documents, for any frames that will remain the same)
[edited by: tedster at 5:21 am (utc) on April 14, 2005]
Thanks to member MikeFoster for this script. The secret, according to Mike? Always test for opera first.
function ClientSnifferJr()
{
this.ua = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
// DOM Support
if (document.addEventListener && document.removeEventListener) this.dom2events = true;
if (document.getElementById) this.dom1getbyid = true;
// Opera
this.opera = this.ua.indexOf('opera')!= -1;
if (this.opera) {
this.opera5 = (this.ua.indexOf("opera 5")!= -1 ¦¦ this.ua.indexOf("opera/5")!= -1);
return;
}
// MSIE
this.ie = this.ua.indexOf('msie')!= -1;
if (this.ie) {
this.ie3 = this.major < 4;
this.ie4 = (this.major == 4 && this.ua.indexOf('msie 5') == -1 && this.ua.indexOf('msie 6') == -1);
this.ie4up = this.major >= 4;
this.ie5 = (this.major == 4 && this.ua.indexOf('msie 5.0')!= -1);
this.ie5up =!this.ie3 &&!this.ie4;
this.ie6 = (this.major == 4 && this.ua.indexOf('msie 6.0')!= -1);
this.ie6up = (!this.ie3 &&!this.ie4 &&!this.ie5 && this.ua.indexOf("msie 5.5") == -1);
return;
}
// Misc.
this.hotjava = this.ua.indexOf('hotjava')!= -1;
this.webtv = this.ua.indexOf('webtv')!= -1;
this.aol = this.ua.indexOf('aol')!= -1;
if (this.hotjava ¦¦ this.webtv ¦¦ this.aol) return;
// Gecko, NN4+, and NS6
this.gecko = this.ua.indexOf('gecko')!= -1;
this.nav = (this.ua.indexOf('mozilla')!= -1 && this.ua.indexOf('spoofer') == -1 && this.ua.indexOf('compatible') == -1);
if (this.nav) {
this.nav4 = this.major == 4;
this.nav4up= this.major >= 4;
this.nav5up= this.major >= 5;
this.nav6 = this.major == 5;
this.nav6up= this.nav5up;
}
}
window.is = new ClientSnifferJr();
[edited by: tedster at 5:22 am (utc) on April 14, 2005]
Using the same custom pop-up function from above:
<a href="page.html" onClick="cPop('page.html','window1',www,hhh);return false">Link Text</a>
Spiders and visitors with JS turned off get a regular link to follow. JS users get the pop-up. The ;return false keeps the original page from changing when a visitor gets the pop-up.
[edited by: tedster at 5:23 am (utc) on April 14, 2005]
Thwarting spambot harvesters using javascript to "assemble" the mailto tag:
==============
<script language=javascript>
<!--
var visname = "Bob";
var recip01 = "admin";
var dom02 = "mydomain.com";
document.write("<a href=" + "mail" + "to:" + recip01 + "@" + dom02 + ">" + visname + "</a>")
//-->
</script>
===============
With search engines now indexing framed pages, lots of traffic is being sent straight to pure content pages, orphaned from their parent frameset. Building a separate frameset for each possible content page is one solution, but it can be a maintenance nightmare. This script handles the problem.
THE MAIN IDEA
You can add ANY page's name to the end of a URL [after a "?"] Then you only need ONE frameset page to catch an indefinite number of orphan pages and put them into their frameset. This method offer very easy maintenance, especially when there are lots and lots of possible orphans for one frameset.
THE CODE
Call this javascript code from the HEAD section of each child page. The code creates a variable from the URL of the page, and then passes that variable in the new location's URL. This means a "master" frameset can load this exact page in the content section:
passpage = document.URL
if (top.location == self.location)
top.location.href="master.html?" + passpage
Then create just one "master.html" page. It holds the JavaScript code to decipher whatever URL is passed after the "?" and it writes that page into the content frame:
<html>
<head>
<title>Master Frameset</title>
</head>
<script language="JavaScript" type="text/javascript">
origURL = parent.document.URL
contentURL = origURL.substring(origURL.indexOf('?')+1, origURL.length)
document.write('<frameset cols="20%,80%"><frame src="leftnav.html" name="nav"><frame src=\"' + contentURL + '\" name="content"><\/frameset>')
</script>
</html>
THE BACK BUTTON
With the basic code above, if someone comes to your page from a search engine, the redirect will place two pages in the browser's history, and this means that the Back Button, clicked once, will throw them into a loop.
But if you use the replace() method instead of simply reassigning the url, the Back Button issue is addressed. Only one page is placed in the browser history instead of two.
passpage = document.URL
if (top.location == self.location)
top.location.href="master.html?" + passpage
Becomes:
passpage = document.URL
if (top.location == self.location)
location.replace("master.html?" + passpage)
ROBOTS.TXT
The approach I explained here adds "duplicate urls" to your website. So to avoid potential search engine problems it's a good idea to use a robots.txt file that includes this rule:
Disallow: /master.html
<Back Button information added 2004/05/28
Robots.txt information added 2008/08/03
[edited by: tedster at 4:03 pm (utc) on Aug. 3, 2008]
<SCRIPT language="JavaScript"><!--
if (parent.frames.length > 0) {
parent.location.href = location.href;
}
// --></SCRIPT>
It's a nice usability enhancement. When you've got a very likely-to-be-clicked link to a page with a large graphic or graphics, you can pre-load the graphic while your visitor is reading the earlier page. Then it's already in the cache and loads instantly if they click through.
At the very bottom of the BODY section, so your script doesn't interfere with the page that's being rendered:
<script type="text/javascript" language="JavaScript"> image01=new Image(www,hhh) image01.src="fatone.gif" //-->
<!--
image02=new Image(www,hhh)
image02.src="biggie.jpg"
</script>
'www' and 'hhh' are the width and height that you want to display these images.
[edited by: tedster at 5:24 am (utc) on April 14, 2005]
Use
<A HREF="javascript:Dummy()" onClick="javascript:RealFunc(); return true;">
instead of
<A HREF="javascript:RealFunc()">
or
<A HREF="#" onClick="RealFunc()">
Dummy() does nothing:
function Dummy()
{
}
<a href="page.htm" onFocus="if(this.blur)this.blur()"><img src="mybutton.gif"></a>
<form>
<input type="Button" value="View Source Code" onclick='window.location="view-source:"+window.location.href'>
</form>
<form>
<input type="button" value="Close Window" onclick="window.close()">
</form>
<form>
<input type="button" value="Close Window 2" onclick="self.close()">
</form>
<form>
<input type="button" value="Click Here To E-Mail Me" onclick="parent.location='mailto:info@yourdomain.com'">
</form>
<form>
<input type="button" value="Print This Page" onclick="window.print()">
</form>
Note: All of these may not work on Opera and I know how you guys/gals are about this. I believe the print button and view source button are dysfunctional in Opera. They work fine in NN4+ and IE4+.
[edited by: tedster at 2:40 am (utc) on May 31, 2011]
<script type="text/javascript" language="JavaScript1.2">
<!--
var resWidth = window.screen.width;
if(resWidth > 800) {
document.write("<link media=\"screen\" href=\"sheetB.css\" type=\"text\/css\" rel=\"stylesheet\">");
}
else if(resWidth <= 800) {
document.write("<link media=\"screen\" href=\"sheetA.css\" type=\"text\/css\" rel=\"stylesheet\">");
}
//-->
</script>
<form method="post" action="" onsubmit="return false;">
<select class="select" onchange="location.href=this.value;">
<option value="page1.htm">Page One</option>
<option value="page2.htm">Page Two</option>
<option value="page3.htm">Page Three</option>
</select>
</form>
Thanksto Nick_W
