SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    INPUT TYPE="image" ONCLICK="history.go(-1)"

    Iím having trouble with a back button, instead of going back itís adding something like ď?x=27&y=11Ē on the end of the url.

    Iíve used this code, what is wrong with it?

    Code:
    <FORM>
    <INPUT TYPE="image" ONCLICK="history.go(-1)" SRC="back.gif">
    </FORM>

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive never used hitory.go for some strange reason but try this:

    <form>
    <input type="image" onclick="history.back()" src="back.gif">
    </form>

    that usually works fine for me

    Edit:

    Now thats really weird .... its doing the same thing for me! I get the page's url plus ?x=20&y=8 which is the corrdinates of the mouse click! HMM, thats very strange ..... maybe it has something to do with the image as an input (another thing I NEVER do)

  3. #3
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still not working... here's a link

    EDIT: Sorry, I didnt see your edit. I reckon you're right about it being something to do with using an image. I noticed though, it did work when I accidently dint close the previous form tag. So I'm thinking it is possible...

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's submitting the form when you click. The ?x20&y=8 are the co-ordinates of the position you clicked on the image. Assuming you don't want the form to submit, try:
    Code:
    <FORM>
      <INPUT TYPE="image" ONCLICK="history.go(-1); return false;" SRC="back.gif">
      </FORM>

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blufive
    It's submitting the form when you click. The ?x20&y=8 are the co-ordinates of the position you clicked on the image.
    Ya know he's right ..... man am I an idiot! (burnt from this last week) Yeah its submitting but also passing along the coordinates of the click..... bet ya you put a real action in the form tag it works!

  6. #6
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, that works just fine.

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I would use:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <style type="text/css">
          a img { border: none; }
        </style>
      </head>
      <body>
        <div id="goBack">
          <script type="text/javascript">
    //<![CDATA[
    if (!document.createElement) { // Browser doesn't support DOM scripting.
    	document.write('<a href="javascript:history.go(-1);" title="Go back one page">');
    	document.write('<img alt="go back" src="back.png">');
    	document.write('<\/a>');
    } else {
    	var goBack = document.getElementById("goBack");
    	if (document.createElementNS && document.getElementsByTagName("html")[0].tagName == 'html') { // XHTML
    		var goBackA = document.createElementNS("http://www.w3.org/1999/xhtml","a");
    		var goBackImg = document.createElementNS("http://www.w3.org/1999/xhtml","img");
    	} else { // HTML
    		var goBackA = document.createElement("a");
    		var goBackImg = document.createElement("img");
    	}
    	goBackA.setAttribute("href","javascript:history.go(-1);");
    	goBackA.setAttribute("title","Go back one page");
    	goBack.appendChild(goBackA);
    	goBackImg.setAttribute("alt","go back");
    	goBackImg.setAttribute("src","back.png");
    	goBackA.appendChild(goBackImg);
    }
    //]]>
          </script>
        </div>
      </body>
    </html>
    It should work both when you serve text/html, and when you serve application/xhtml+xml. It should also work older browsers such as NN4. When images are not supported or are disabled, you get the alternate text "go back". Also, it is device independent, so you can follow the link with a keyboard aswell. When JavaScript is disabled or not supported you get nothing.
    Simon Pieters

  8. #8
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thatís a lot of code for a back button. I donít really understand it, but it looks like it uses an anchor. I wanted to avoid using an anchor, for styling reasons. Thatís why I went with a form button.

  9. #9
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although I don't see any styling advantages with a button, here it is:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>Test</title>
      </head>
      <body>
        <div id="goBack">
          <script type="text/javascript">
    //<![CDATA[
    if (!document.createElement) { // Browser doesn't support DOM scripting.
    	document.write('<form action="#" onsubmit="history.go(-1); return false;">');
    	document.write('<p><input type="image" alt="go back" src="back.png" title="Go back one page"><\/p>');
    	document.write('<\/form>');
    } else {
    	var goBack = document.getElementById("goBack");
    	if (document.createElementNS && document.getElementsByTagName("html")[0].tagName == 'html') { // XHTML
    		var goBackForm = document.createElementNS("http://www.w3.org/1999/xhtml","form");
    		var goBackP = document.createElementNS("http://www.w3.org/1999/xhtml","p");
    		var goBackInput = document.createElementNS("http://www.w3.org/1999/xhtml","input");
    	} else { // HTML
    		var goBackForm = document.createElement("form");
    		var goBackP = document.createElement("p");
    		var goBackInput = document.createElement("input");
    	}
    	goBackForm.setAttribute("action","#");
    	goBackForm.setAttribute("onsubmit","history.go(-1); return false;");
    	goBack.appendChild(goBackForm);
    	goBackForm.appendChild(goBackP);
    	goBackInput.setAttribute("type","image");
    	goBackInput.setAttribute("alt","go back");
    	goBackInput.setAttribute("src","back.png");
    	goBackInput.setAttribute("title","Go back one page");
    	goBackP.appendChild(goBackInput);
    }
    //]]>
          </script>
        </div>
      </body>
    </html>
    It can seem like a lot of code, but I think it is required if you want to be "future proof" and also have an accessible back button. You don't want your users to click on a non-working button just because they have disabled JavaScript, do you?
    Simon Pieters

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not this?

    Code:
    <img src="back.gif" alt="Go Back" onclick="history.back();" />
    It's a good point about accessibility. And styling is only a problem for people who don't know CSS very well.

    Code:
    <a href="javascript:history.back();" 
    style="border:0 none;"><img src="back.gif" 
    alt="Go Back" style="border:0 none;" /></a>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not this?
    Code:
    <img src="back.gif" alt="Go Back" onclick="history.back();" />
    That has two problems:
    1. You have to use a mouse
    2. If JavaScript is disabled you get a dummy button that doesn't work
    Your second code snippet does only suffer from the "JavaScript disabled" issue.

    However, if you don't use XHTML anyway, and don't care about older browsers you can do it a bit shorter.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        <title>Test</title>
      </head>
      <body>
        <div id="goBack">
          <script type="text/javascript">
    
    var goBack = document.getElementById("goBack"),
        goBackForm = document.createElement("form"),
        goBackP = document.createElement("p"),
        goBackInput = document.createElement("input");
    goBackForm.setAttribute("action","#");
    goBackForm.setAttribute("onsubmit","history.go(-1); return false;");
    goBack.appendChild(goBackForm);
    goBackForm.appendChild(goBackP);
    goBackInput.setAttribute("type","image");
    goBackInput.setAttribute("alt","go back");
    goBackInput.setAttribute("src","back.png");
    goBackInput.setAttribute("title","Go back one page");
    goBackP.appendChild(goBackInput);
    
          </script>
        </div>
      </body>
    </html>
    Simon Pieters

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I'm fully aware it requires JavaScript. Your method does to. Why don't you just use document.write()?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but the difference is that when JavaScript is disabled, you won't get a button at all. A button that's not functioning is confusing for the user.

    I think that document.write is evil, and it will fall apart once you switch to XHTML. The DOM offers a lot more power than document.write.
    Simon Pieters

  14. #14
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    Yes, but the difference is that when JavaScript is disabled, you won't get a button at all. A button that's not functioning is confusing for the user.
    True.

    Quote Originally Posted by zcorpan
    I think that document.write is evil,
    It's just overused and often times misunderstood.

    Quote Originally Posted by zcorpan
    and it will fall apart once you switch to XHTML.
    How so?

    Quote Originally Posted by zcorpan
    The DOM offers a lot more power than document.write.
    True, but it usually requires a lot more code and it won't work in NS4 and IE4.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  15. #15
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://ln.hixie.ch/?start=1091626816&count=1

    Also, my script could be easily moved to an external file.
    Simon Pieters

  16. #16
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I donít think there are any styling advantages with a form button per se, and granted I am still learning CSS, but my thinking was that I have some buttons that are styled by the anchor, and I have several forms, with buttons that have their own look, the back button is to look the same as the form buttons, so it stood to reason (in my mind) to make the back button a form.

    zcorpan, I tried your second code, but in IE was just getting the co-ordinates again.

  17. #17
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    Code:
    <a href="javascript:history.back();" 
     style="border:0 none;"><img src="back.gif" 
     alt="Go Back" style="border:0 none;" /></a>
    JavaScript should never appear in the href of a link. It's a usability (and accessability) pain. Having it as an onclick of the image would probably be much better.


    Another thought: It's not perfect, but perhaps an accessibile alternative when JS is not available, is to generate the target of this 'button' server-side? HTTP REFERRER could be used as a next-best-guess for where the button should go?
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  18. #18
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fatnewt
    JavaScript should never appear in the href of a link. It's a usability (and accessability) pain. Having it as an onclick of the image would probably be much better.
    How does it make useability a pain? It shows a user that they need JavaScript enabled for it to work.

    Images can't receive focus, so having it as onclick on the image is not very accessible

    Quote Originally Posted by fatnewt
    Another thought: It's not perfect, but perhaps an accessibile alternative when JS is not available, is to generate the target of this 'button' server-side? HTTP REFERRER could be used as a next-best-guess for where the button should go?
    HTTP_REFERER is not totally reliable, however, many people, including myself, use it anyway.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  19. #19
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right... eather it IE doesn't add the onsubmit attribute to the form, or it doesn't obey the "return false". However, you can do this instead:
    Code:
    var goBack = document.getElementById("goBack"),
        goBackForm = document.createElement("form"),
        goBackP = document.createElement("p"),
        goBackInput = document.createElement("input");
    goBackForm.setAttribute("action","javascript:history.go(-1);");
    goBack.appendChild(goBackForm);
    goBackForm.appendChild(goBackP);
    goBackInput.setAttribute("type","image");
    goBackInput.setAttribute("alt","go back");
    goBackInput.setAttribute("src","goback.png");
    goBackInput.setAttribute("title","Go back one page");
    goBackP.appendChild(goBackInput);
    And if JavaScript is not supported... Why fall back on a server script?

    Guys, all browsers have a back button. You don't need to add one to your page in the first place...
    Simon Pieters

  20. #20
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. That seems to work. Iíll have to take your word for it that itís better than the previous way though.

    Cheers

  21. #21
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    How does it make useability a pain? It shows a user that they need JavaScript enabled for it to work.
    Does the user necessarily know what JavaScript is? Will this clearly tell them what they need to use the page?

    And if JavaScript is enabled, javascript: in the HREF doesn't behave like a normal link. Things like opening in a new window or tab don't always work as expected, for example.


    Quote Originally Posted by Kravvitz
    Images can't receive focus, so having it as onclick on the image is not very accessible
    I suppose I'd say that an <input /> is better, then.


    Quote Originally Posted by Kravvitz
    HTTP_REFERER is not totally reliable, however, many people, including myself, use it anyway.
    No it's not (hence - it isn't perfect)... but if JavaScript isn't available, HTTP_REFERRER as a "best guess" is better than having a non-functional button. IMO, at least.
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  22. #22
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    Guys, all browsers have a back button. You don't need to add one to your page in the first place...
    Agreed... I'd say a server script is better than a non-functional button... but if the button won't display at all without JS, that's probably best.
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  23. #23
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If they don't know what JavaScript is then they should look it up on Google. How useful is the internet to someone who can't even use a search engine like Google?

    The thing is with usign an <input />in XHTML is that you have to put it inside of a block level element like <p> or <div> inside of the form. I'm just saying that it's a lot of code.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  24. #24
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If they don't know what JavaScript is then they should look it up on Google. How useful is the internet to someone who can't even use a search engine like Google?
    Why should they? Is it nessasary for all internet users to know what JavaScript is? What if they don't even want to know about it... man, some internet users don't know what a browser is.
    The thing is with usign an <input />in XHTML is that you have to put it inside of a block level element like <p> or <div> inside of the form. I'm just saying that it's a lot of code.
    That's only true for XHTML 1.0 Strict (and 1.1 or course). If you use transitional it is allowed to put inline elements inside a FORM.

    Besides, the same rules applies to HTML4.
    Simon Pieters

  25. #25
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    If they don't know what JavaScript is then they should look it up on Google. How useful is the internet to someone who can't even use a search engine like Google?
    They shouldn't have to know. As a casual browser, or consumer, I shouldn't have to know about HTML, XHTML, JavaScript, ASP, PHP, Flash... anything! I should be able to comfortably use a page knowning only that it's a Web page, and that it's fulfilling my needs.

    And as a user who doesn't care about JavaScript, why would I use Google to learn about it? Another site is offering the same thing as you... and I want it fast. I'll go back to Google, alright. And I'll be looking for your competition.

    Now, at some points a user may need to be informed that they need cookies enabled, JavaScript enabled or Flash installed... but still, these occurances should be minimized. Whenever possible, these 'optional' technologies shouldn't be depended on -- at least not for a public site with a wide audience. If your site is about JavaScript, or something equally technical, you can make certain assumptions about your audience. But for a general site, it shouldn't matter.

    A system should be designed to withstand the worst possible set of occurances. If a user doesn't have JavaScript, and has no idea what JS is, the system should degrade gracefully, allowing alternative means of use.

    Quote Originally Posted by Kravvitz
    The thing is with usign an <input />in XHTML is that you have to put it inside of a block level element like <p> or <div> inside of the form. I'm just saying that it's a lot of code.
    Links should be inside a block level element... it doesn't really need to be very different. And besides, the amount of code doesn't really matter - what matters is the user experience. The difference in code isn't enough to hurt that... the difference in the end result could improve on it dramatically for some users.
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •