For my curiosity, given a CSS-only button markup like this one: http://www.cssbutton.me/ryanjohnson_me/4fea99463f2df0f605000043, one can create a button visually using:
<div class="button">Click</div>
But how can we actually make it functional? For example, make it link to some other page, so when user clicks on it, she gets redirected.
I've tried wrapping a <a href> inside the <div>, but the button text shows up as a link, which is undesirable. I also tried the opposite - wrapping the <div> inside a <a href>, which seems to work but I was told this is not valid html code.
Any other suggestion?
P.S. The targeted browsers would be IE8+, chrome 14+, Firefox 11+, Safari 5+ and Opera 11+, if this makes any difference.
Have you tried changing the
<div class="button">Click</div>
into <a class="button" href="#your_link">Click</a>?
It should work as a normal link, and have the css buttons stylings and expected behavior.
Use JavaScript to bind an action to the button.
function addEventHandler(elem,eventType,handler) {
if (elem.addEventListener)
elem.addEventListener (eventType,handler,false);
else if (elem.attachEvent)
elem.attachEvent ('on'+eventType,handler);
}
addEventHandler(document.getElementById('yourButton'), 'click', function(e) {
document.location.href = "newpage.html";
});
Add to the css:
a.button { text-decoration: none; }
To create button links:
<a class="button" href="/somewhere.html">Somewhere</a>
Using JavaScript, specifically jQuery, you can do
<div class="button" id="myButton">Click</div>
$("#myButton").click(function()
{
location.href = "mypage.htm";
});
Related
I have a blog-site, which is full of text, therefore i use sections.
my code:
Test
....
<h3 id="test">Test</h3>
When I click on the anchor, it works, but if I use the URL, i cannot get to the section, only to the top of the site.
What I want:
mysite.com/site1:
<a href="/site2#test > Test</a>
mysite.com/site2
<h3 id="test"> Test </h3>
Why does it not jump to the section?
Have you tried using two # for the anchor?
<a href="/site2##test>Test</a>
It seems Chrome sometimes has it's issues with anchor links and this may help (at least works on my machine)
(possibly related to Anchor <a> tags not working in chrome when using #)
One way to solve this might be using window.location in javascript
<script>
function goToSite2Section() {
window.location = '/site2#test';
}
</script>
Test
This question already has an answer here:
Why are buttons discouraged from navigation?
(1 answer)
Closed last year.
What element should I use for JavaScript actions?
Actions that does something like play/pause/stop/new/open/save/print/close, etc.
<a id="play" href="#">Play</a>
Play
<button id="play" tabindex="0">Play</button>
<div id="play" role="button" tabindex="0">Play</div>
I see many people use anchors <a> with a href="#" but that doesn't feel very semantic, it feels like anchors are for hyperlinks that point to a resource, not for actions that does stuff. Then you have to hack it around with event.preventDefault (i.e. return false).
I rarely see people use the <button> element, but isn't it what is supposed to be used?
TLDR; you can open an anchor link in a new Tab/Window but not a button.
Here is a rule of thumb:
For navigation just use anchor it's alright to style it as a
button and let it use it's href attribute well.
For quick actions (play,pause,stop,+1 like) just use button it
doesn't have href for a reason!
Consider this code.
const [anchor] = document.getElementsByTagName('a')
const [button] = document.getElementsByTagName('button')
anchor.addEventListener('click', e => {
console.log('anchor clicked')
e.preventDefault()
}, false)
button.addEventListener('click', e => {
console.log('button clicked')
})
a {
text-decoration: none;
padding: 2px;
}
button {
background: none;
border: none;
font-size: 16px;
}
.btn {
background-color: blue;
color: white;
display: inline-block;
text-align: center;
}
<a class="btn" href="#">
Anchor
</a>
<hr/>
<button class="btn" type="button">
Button
</button>
Styling
They both look almost alike (with minimal justifications) the only problem is that you'll have to undo some stylings that come with button like border & background but with anchor you don't get the clicking popping animation that you'd get with button.
Functionality
But since the anchors <a> need <a href="some/path"> to work even if it's just #, unless you need to navigate after clicking the anchor you'll have to use e.preventDefault() in your javascript to prevent it.
The best way to decide which element has the best semantics for a JS based user interaction is to ask what you want to happen if the JS fails (which it will.
Think progressive enhancement. Think unobtrusive JavaScript.
Should the user just go to another page? Use a link. The href will be the fallback from when the JS fails.
Should the user go to another page while sending some data or making a POST request? Use a button, put it in a form.
Is it impossible to have any kind of server fallback? Use a <button type="button"> and consider generating it from JS/DOM instead of HTML.
Then you have to hack it around with event.preventDefault
You could set the href to javascript:void(0) rather than #, which would prevent execution without having to use event.preventDefault()
But buttons are probably better for this sort of thing
This is more of a preference thing.
Personally, I prefer to either use the <button> tag or make my own.
If it makes more sense to you to use the <button> tag, use it. If it works, it's not wrong. =)
In my project all my anchor tags are working perfectly in IE and Chrome but none of them are not working in Safari browser.
below is my tag.
<a id="btnNewCompany" href="#" onclick="btnNewCompany_OnClick()"
runat="server"> Add Company </a>
From the above i am calling the btnNewCompany_ OnClick() javascript.
function btnNewCompany_OnClick() {
$get('btnEdit').click(); -----> onserverclick event
}
Can ay one please help me why Anchors are not working in Safari?
I think in asp.net webforms onclick will look for that method in the server side code, try changing it to OnClientClick instead
If #thebiffboff isn't right, try declaring it like this:
btnNewCompany_OnClick = function() {
}
In Chrome I have a simple contenteditable="true" span, and if the user clicks anywhere around it, the cursor shows up and he/she can start editing. This is annoying b/c I only want the cursor to show up when the user clicks on the span itself, not outside of it.
Example: http://jsbin.com/oyamab/edit#javascript,html,live
Html below...
<body>
<span id="hello" contenteditable="true">Hello World</span>
</body>
If you visit that link in Chrome, click anywhere in the rendered html box (the far right column in jsbin), and you can start editing. In Firefox on the other hand, you have to click on the actual span to edit it (yay!).
Do I need to just accept this as a Chrome thing, or is there a hack around it? Thanks.
I strongly suspect it's just a WebKit thing. You can work around it though by making the span contenteditable only when it's clicked
Demo: http://jsfiddle.net/timdown/nV4gp/
HTML:
<body>
<span id="hello">Hello World</span>
</body>
JS:
document.getElementById("hello").onclick = function(evt) {
if (!this.isContentEditable) {
this.contentEditable = "true";
this.focus();
}
};
I have sitewiode styling of buttons using the html element. For buttons that submit forms this works well. However some buttons are just links. Therefore I use this syntax:
<button>Link Text</button>
This works perfectly in all browsers except IE, where the button clicks but nothing happens. The link isn't followed.
How can I get this to work in IE?
Don't put the button inside the link. You can easily style the <a> to look just like the <button> with CSS.
Could you post more code? As it stands, a <button> element inside a link element isn't a proper way to do this. Stick to semantics. You should just style the <a> element using CSS. If you really want to stick to using that combination, IE requires you to use type="button". So <button type="button"></button>
This is my issue also. Using code:
<a href="table_of_contents.html" title="Table of Contents">
<button> <b>Contents</b> </button>
</a>
It works for Firefox and Safari; but fails for Explorer and Opera.
Tried answer from Michel:
Contents
No change: Firefox and Safari OK; Explorer and Opera NG.
I have changed to the following code, which works for all four browsers.
<form action="table_of_contents.html">
<input value="Contents" title="Table of Contents"
style="font-weight: bold" type="submit">
</form>
PS: This does NOT work for type="button". Hope this helps.