How to style a button

Most browsers have a “Back” button as standard.
If you need an on page button, you could link to the sub-page with a url variable, Eg:

href="/electricity/?city=london"

Now you know from where they reached the sub page.
Then use that variable to set the url to what it should be in the link back button on the sub page.

I’ve placed a test page for you to see what I did

http://pintotours.net/TEMP1/indonesia.php

Click on “Electricity” in the left sidebar. Another page opens through target blank.

I’ve placed a box at the bottom; it would be nice if it was clickable and did just what it instructs the visitor to do

I would still say that the right thing to do, and the easy thing to do, in this case coincide. Don’t open it in a new tab/window. Open the link the way links were designed to be opened, in the same tab/window. (The user can always choose to open in a new tab, but you shouldn’t take that control away from them. It causes accessibility/usability issues.)

1 Like

TechnoBear

I know, and my other system works as you suggest.

But what i want to know is how I could turn that box into a button that closes the page.

I tried this but obviously I did not understand it. When I click I end up back on the page I want to close

<style>
#close{

margin:0 auto;
margin-top:100px;
border:solid gray 5px;
background-color:#F1E3D5;
color:black;
max-width:60%;
padding:30px 0 20px 0;
}

#close p{
text-align:center !important;
line-height:160%;

}

#close b{
color:crimson;
font-size:20px;
}
.advert{

padding-top:20px;
}
#close span{
text-align:center;
margin:0 auto;
}
</style>
<div id="close">

<a href="#" onclick="closeWin()"><p> To return to the previous page <br><b>close this tab only</b><br>Press the little x at the top in the tab<br> not in the top right corner.</p>

 </a>

</div>

If you want a link back the the page, something like:-

<a href="<?php echo $_SERVER['HTTP_REFERER'] ; ?>">Go Back</a>

Only Referer is not that reliable, which is why I suggested a variable set in the link on the source page.

<a href="current.php?city=jakarta">

Then on the “current” page you have

if (isset($_GET['city'])) { $city = preg_replace('#[^a-z]#iu', '', $_GET["city"]);

and the link

<a href="<?php echo $city; ?>".php>Go Back</a>

Or something along those lines.

Hi Sam

No, I don’t want a link to anywhere. I want to close the page. No links!

Let’s see if I understand what you are saying…

You want a button on the web page that effectively clicks the close “X” on the current page’s tab (or by whatever mechanism the current page is closed) and that’s it. No expectations of “what’s next”?

How about tricking google by directing to the page with location.href = 'https://foo.bar'? I’m really d’accord with @TechnoBear that opening a new window unsolicitedly is a bad idea. As for myself, I’d leave. :-/

2 Likes

Ditto… F-A-S-T.!

1 Like

Ditto here too

I am sorry if I could not explain myself, but that is not AT ALL what I want to do.

Anyway, thank you all.

Same for me. Almost. I leave instantly.

Desperate attempts to force me to stay (or register, or signup for a newsletter, or follow, or like, etc.) produce the opposite result.

I like to at least think I have some free will and an ability to make my own decisions.

But, IIRC all of the problems and pitfalls of such an approach were brought up, what, two years ago now?

If all of the evidence hasn’t convinced by now, I doubt if it ever will. Chances are we will still be getting “help me do this the wrong and difficult way” topics for some time to come.

Anyway, Back on-topic,

As said, a link can be styled to look like a button.
As long as a page is opened by script, it can be closed by script.

<a href="" onclick="window.open('qim-close.html')" >open</a>
<a href="" onclick="window.close()" >close</a>
1 Like

Could you tell me where I said or implied that?

The fact that you are not using a modal overlay or a simple link to a page.

I’m fairly sure I understand what you want to do; what I don’t understand is why you want to do it.

Your problem, as stated, is that you are linking to the same content from two different pages, and you don’t want Google to penalise you for duplicate content. (It’s most unlikely they would; they’d simply show one page in search results and not the other.)

Your chosen solution to this is to open the link in a new window/tab (I’m not entirely clear how this helps the Google issue), and you now want to use JS to create a button which will close that window/tab.

It has been explained to you that simple links to a single page are both the easiest solution and the recommended solution. It has further been explained that opening links in a new tab/window is considered bad practice for reasons of usability and accessibility. And while it may not have been mentioned in this topic, I’m pretty sure I’ve already pointed out to you that if you use JavaScript for basic functionality, you need to ensure your site still functions with it disabled.

Despite all that, your chosen solution is still to open and close a new tab/window using JavaScript, and you want help creating and styling a button to accomplish the “close”.

If that’s not an accurate summary, then I apologise; I have, indeed, misunderstood the issue and I would be grateful if you could explain it again.

If that is accurate, then I suggest you first read http://webaim.org/techniques/hypertext/hypertext_links#new_window, which explains techniques to make opening new tabs/windows more user-friendly. I suggest you also read up on accessible use of JavaScript: http://webaim.org/techniques/javascript/. Otherwise, you may be solving your own perceived problem at the risk of creating problems instead for your site users.

2 Likes

Hi TechnoBear

Thank you for returning to this issue

  1. what you suggest that I should do is exactly what I have done in published pages.
  2. what i am playing with is not to divert visitors to other pages but simply to tell them to leave and will be given a further option to leave the site altogether (among other things).
  3. when opening a page via target blank I am following the visitor’s desires as he/she is getting what they chose. It’s not an unwanted popup.
  4. my idea (which I like, and will pursue) has other ingredients which are not there yet, so it is too early to judge them.
  5. and more to the point there are TWO ways of dealing with this. The current one, online for over a year, where the visitor, who is interested in Jakarta, looks for a link that will take him back to Jakarta where he went originally; or simply ask him to close the current page (which if he has website experience he will do in the usual way) and he will be back where he intended to be without having to search for the correct link.
  6. at the end of the day this is a marketing decision which, right or wrong, must be left for the site’s owner to decide upon.

I am fully aware and grateful for the dangers as understood by other forum members, but quite honestly I don’t see how they relate to my question. I started the thread by asking for a bit of code; when prompted to explain what I wanted it for, I gave a very close hypothetical example, which is somewhat removed from my real intention. After all, I just wanted a bit of code.

Meanwhile, I have found the technical solution to the problem.

Thank you

Perhaps the actual, rather than hypothetical, example might have elicited a better response. As I’m sure you realise, the best way to accomplish something on a site may vary according to the exact situation.

If you’d posed a question asking how to style an HTML table for your navigation links, we’d have told you that you were using the wrong approach; HTML tables should not be used for layout. And we’d have suggested the correct way to achieve the desired result with HTML and CSS.

In the same way, the approach you were suggesting was not a good one for the hypothetical scenario you described, so members tried to explain why and provide more helpful suggestions. (You need to remember, too, that you will not be the only person reading this topic; somebody coming later with a similar question will also need to know about accepted best practices.)

Touché!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.