Hide or Show <Input type="image" src="next || back.gif"> javascript wanted

Posted on 2004-11-11
Last Modified: 2008-01-09

I've been trying to find a good example of hiding the <Input type="image" src="back.gif" title="Go back to previous page..."> in a table cell using CSS visibility and some sort of checking on the browser's window.history.length property, but I've had no luck.  At this point I give up, so 500 points to the first person to successfully writes a short simple javascript that uses history.back() and history.forward() and checks if they exist before the button is written out. In other words, if there is no forward page to jump to, the forward button should not appear at all (same applies for the back page/back button). I'd like to use the <input type="image" src="back.gif"> model if possible, design preference.

Thanks, and looking forward to a speedy reply as I'm stuck. :(

Question by:cyberystic
    LVL 1

    Expert Comment


      While I don't think it's possible to check whether there are any forward entries, you have a few options for the back button:

    You can either create your button normally and then hide it if there are no back entries:

    <INPUT ID="Back" TYPE="image" SRC="back.gif" onClick="window.history.back;">

    <SCRIPT TYPE="text/javascript">

       if (window.history.length == 0) document.getElementById('Back').style.visibility = 'hidden';


    Or you can simply only write the button if entries exist:

    <SCRIPT TYPE="text/javascript">

       if (window.history.length > 0) document.write('<INPUT ID="Back" TYPE="image" SRC="back.gif" onClick="window.history.back;">');


    Let me know if these don't work for you!

    Author Comment


    No Luck, Because when I tried your second example, if window.history.length > 0, I get a true result if there is a forward page or a back page.  I really want to check both forward and back and mirror the buttons in the browser exactly.  So I think I need an array that shows the position of the current window in relation to the stack and what's ahead and behind, returning a either prev, next, or both, either, or none.  Can you or someone please help solve this problem?

    Thanks in advance...
    LVL 30

    Expert Comment

    i don't think you can determine if you can go forward or backward. all we know is the length of the history.
    LVL 1

    Accepted Solution


    Unfortunately, I was doing my testing in Opera, which is why this worked for me. It seems that Opera will only return the length of items in the back direction, whereas Internet Explorer and Firefox count both the back and forward entries.

    Anyways, the history object only has the following properties and methods:

    current - The current document URL.
    length - The number of entries in the history object.
    next - The URL of the next document in the history object.
    previous - The URL of the last document in the history object.

    So it doesn't sound like what you want is possible. Sorry!

    LVL 31

    Expert Comment

    this is not going to happen cross browser with any effectiveness. If it is for site navigation either put a flag in the first and last pages or put the names of the first and last in a .js that is included in all site pages. document.referrrer will give you the last page if the page is reached from a link in another page but the problem of forward is going to happen.


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
    In Part 1 ( we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now