homepage Welcome to WebmasterWorld Guest from 54.197.130.16
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

This 31 message thread spans 2 pages: 31 ( [1] 2 > >     
handy, generic javascript coding
back button, popups, etc.
rcjordan




msg:1475938
 2:55 pm on Apr 30, 2001 (gmt 0)

We're getting some good js routines scattered all over. I thought we'd try collecting a few of them here as a reference.

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]

 

Xoc




msg:1475939
 4:18 pm on Apr 30, 2001 (gmt 0)

Or a technique I just learned...you can make a hyperlink do any JavaScript you want. Such as the last piece of code:


<a href="javascript:history.back()">back</a>

NFFC




msg:1475940
 4:22 pm on Apr 30, 2001 (gmt 0)

Or even stick an image in there:

<A href="javascript:history.back();"><IMG src="back.gif" width="208" height="25"border=0 alt="Back"></A>

tedster




msg:1475941
 5:58 pm on Apr 30, 2001 (gmt 0)

CUSTOM SIZE POPUP WINDOWS:

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]

austtr




msg:1475942
 12:48 am on May 2, 2001 (gmt 0)

Hello Tedster...

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>

tedster




msg:1475943
 4:15 am on May 2, 2001 (gmt 0)

Unfortunately Netscape and IE use differently named parameters for window positioning, so you have to include both sets. Also, the results may be inconsistent from version to version, I've found. That being said, here's what you need. Change the function declaration in the HEAD or external js file to this:

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.

austtr




msg:1475944
 4:31 am on May 2, 2001 (gmt 0)

Thanks Tedster....

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.

Froggyman




msg:1475945
 7:12 pm on May 14, 2001 (gmt 0)

<A HREF="javascript:history.go(x)">Forward x amount of pages</A>
<A HREF="javascript:history.go(-x)">Back x amount of pages</A>

mivox




msg:1475946
 9:00 pm on May 14, 2001 (gmt 0)

You can also use javascript:history.back()

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...

Froggyman




msg:1475947
 10:04 pm on May 14, 2001 (gmt 0)

<SCRIPT TYPE="text/javascript">
<!--
top.location=history.go(-1);
//-->
</SCRIPT>

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.

Froggyman




msg:1475948
 10:20 pm on May 14, 2001 (gmt 0)

<script type="text/javascript">
version=parseInt(navigator.appVersion);
if (navigator.appVersion.indexOf('5.')>-1){version=5}; browser='OTHER';
if (navigator.appName=='Netscape'){browser='NS'+version;}
if (navigator.appName=='Microsoft Internet Explorer'){browser='MSIE'+version;}
if (navigator.appVersion.indexOf('MSIE 3')>0) {browser='MSIE3';}
if (browser=='NS3') {window.location='http://www.yourdomain.com/somepage.html'}
if (browser=='NS4') {window.location='http://www.yourdomain.com/somepage.html'}
if (browser=='NS5') {window.location='http://www.yourdomain.com/somepage.html'}
if (browser=='MSIE3') {window.location='http://www.yourdomain.com/somepage.html'}
if (browser=='MSIE4') {window.location='http://www.yourdomain.com/somepage.html'}
if (browser=='MSIE5') {window.location='http://www.yourdomain.com/somepage.html'}
</script>

I'm in the giving mood. This script will redirect based on browser version.

Everyman




msg:1475949
 11:54 pm on May 14, 2001 (gmt 0)

Another trick is to use a lurker window. A lurker window is opened off-screen and minimized so that it is invisible on the screen except in the task bar. An "onfocus" event handler is also installed in the window that does a blur. These tricks make it very hard to see what is going on. A lurker window can run for hours without anyone noticing.

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.

spencer




msg:1475950
 10:47 am on May 15, 2001 (gmt 0)

Hi There
I have used code below.
Works perfectly on IE but screws up in Netscape
Any Ideas
Spencer

<SCRIPT TYPE="text/javascript">
<!--
setTimeout("self.location=history.go(-1)",5000);
//-->
</SCRIPT>

tedster




msg:1475951
 1:19 am on May 16, 2001 (gmt 0)

Spencer, welcome to Webmaster World.

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.

toolman




msg:1475952
 7:27 pm on May 19, 2001 (gmt 0)

This code will scrub those annoying outlines around your mouseover images in IE

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:

  • It cuts down the character count on the page before reaching the "meat" of the body text. In other words it pushes the real content up higher on the page to aid in indexing by the se's
  • It helps keep the spiders from ingesting the javascript and possibly parsing it as well. For instance if you're using a js redirect in an external file none of the engines will know this if it is external...right now anyway. If it is on the page as a redirect you stand a greater chance of it being discovered and being penalized for it.
  • Brett_Tabke




    msg:1475953
     7:44 am on Jul 10, 2001 (gmt 0)

    Some of the side discussions, moved over here:
    [webmasterworld.com...]

    tedster




    msg:1475954
     6:47 am on Aug 16, 2001 (gmt 0)

    CHANGING TWO FRAMES
    from one link

    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]

    tedster




    msg:1475955
     7:04 am on Aug 16, 2001 (gmt 0)

    BROWSER SNIFFING
    identifies Opera, even if it's spoofing

    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]

    tedster




    msg:1475956
     8:54 am on Oct 25, 2001 (gmt 0)

    POP-UP FUNCTION
    with a 'vanilla' link for spiders

    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]

    rcjordan




    msg:1475957
     5:26 pm on Oct 29, 2001 (gmt 0)

    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>

    ===============

    tedster




    msg:1475958
     10:04 pm on Nov 13, 2001 (gmt 0)

    FORCE MANY PAGES INTO FRAMES
    with one simple 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]

    keyplyr




    msg:1475959
     12:52 am on Nov 14, 2001 (gmt 0)

    Breaking your page free from another site's frames

    <SCRIPT language="JavaScript"><!--
    if (parent.frames.length > 0) {
    parent.location.href = location.href;
    }
    // --></SCRIPT>

    tedster




    msg:1475960
     8:24 pm on Dec 6, 2001 (gmt 0)

    PRE-LOADING IMAGES

    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)
    image02=new Image(www,hhh)

    image01.src="fatone.gif"
    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]

    rcjordan




    msg:1475961
     2:59 pm on Dec 19, 2001 (gmt 0)

    Persistent hourglass bug fix:
    In some browsers, clicking a link that calls a js function will change the cursor into an hourglass and it won't change back into the pointer until the mouse is moved. Very annoying, it makes the user feel like the page is in a loop or stalled. Kill the hourglass by adding onClick to return something.

    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()
    {
    }

    kapow




    msg:1475962
     11:22 am on Jan 16, 2002 (gmt 0)

    Get rid of that nasty dotted line around link buttons on IE.

    <a href="page.htm" onFocus="if(this.blur)this.blur()"><img src="mybutton.gif"></a>

    joshie76




    msg:1475963
     11:36 am on Jan 16, 2002 (gmt 0)

    another way of getting rid of that nasty dotted line around links in IE
    <a href="page.htm" hidefocus="true">link or image or whatever</a>

    pageoneresults




    msg:1475964
     7:11 am on Feb 27, 2002 (gmt 0)

    I'm going to keep it simple...

    <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+.

    rcjordan




    msg:1475965
     2:10 am on Mar 13, 2002 (gmt 0)

    Resize image based on resolution

    <script type="text/javascript" language="JavaScript1.2">
    <!--
    var resWidth = window.screen.width;
    if(resWidth > 1024) {
    image1_width = 440;
    }
    else if(resWidth == 1024) {
    image1_width = 380;
    }
    else if(resWidth == 800) {
    image1_width = 320;
    }
    else if(resWidth < 800) {
    image1_width = 260;
    }
    else {
    image1_width = 260;
    }
    var image1 = '<img src="logo.gif" width="' + image1_width + '">';
    document.write(image1);

    // -->
    </script>

    [edited by: tedster at 2:40 am (utc) on May 31, 2011]

    rcjordan




    msg:1475966
     2:24 am on Mar 13, 2002 (gmt 0)

    Change stylesheet based on resolution

    <noscript>
    <link media="screen" href="sheetA.css" type="text/css" rel="stylesheet">
    </noscript>

    <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>

    tedster




    msg:1475967
     8:10 pm on Aug 6, 2002 (gmt 0)

    Dropdown Menu or Jump Menu

    <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

    This 31 message thread spans 2 pages: 31 ( [1] 2 > >
    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved