CODEWITHSUNDEEP
javascripthtmlios
John Lamos
John Lamos

Reputation: 19

Hiding Back Button in Web App

I'm creating an app for iPhone, which is a browser window within the app. Now, since there is no back button, I programmed the following to show one, which works fine:

<head>
...
<script>
function goBack() {
    window.history.back()
}
</script>
</head>
<body>
<body>
 <button onclick="goBack()">Go Back</button>
</body>

I would like to hide the button on the first page, as it messes up its design. Is there a way to do this, possibly by checking that there is no history or back page available.

I've looked into this question, but couldn't make it work.

Upvotes: 1

Views: 258

Answers (2)

thisbenroberts
thisbenroberts

Reputation: 21

Sure. I think your document should look like this.. 

<button class="btn" onclick="goBack()">Go Back</button>

and in the head on JUST the page where you DO NOT want the button to show, include a style tag 

<style>
.btn {
display: none;
} '

then, in your CSS doc 

.btn {
display: block;
}

The style tag in your HEAD will override the CSS.

I decided to use 'display' instead of 'visibility' because display will the button from taking up space. While visibility will take up the space but just won't display the button. I guess leaving a blank square.

I hope this helps clarify.

Upvotes: 1

thisbenroberts
thisbenroberts

Reputation: 21

Put the button in a DIV and use the following in the CSS

visibility: hidden;

Upvotes: 0

Related Questions