I created my portfolio but unfortunately I cannot use
a button properly. What did I wrong?
On Chrome it does work pretty well!
friendly regard
<button>Check Portfolio</button>
The proper method to implement this is to stick the button inside of a form with method="get" and an action attribute with the site you are linking to.
You can also use JavaScript to set an event handler on the click event of the button.
Also, you can use CSS to make an anchor tag look like a button.
The one route NOT to go is wrapping a button in an a or vice-versa. It's not proper HTML.
if you use an A tag, you stick the button inside it also, you should use the full url, unless its in the current directory the webpage is in. For example:
<button> Click Here to Google! </button>
Related
How to disable or change the display of this link through the style. Help me please.
Do not use an <a> element if you do not want this behaviour. You cannot change it.
Instead, what you could do is have a <p> that uses the onclick event to send the user to your URL using JavaScript.
A working code might look like:
<p onclick="window.location.href='http://www.example.com'">Press here!</p>
That is not part of the website but a overflow added by the browser, you can not change what it displays. If you want to disable it you could have it instead of a href, a onclick handler that changes the websites location, but this would not work when users have javascript disabled or tries to open it in a new tab.
I have written a code for my html website project. When I open the html file itself, it loads correctly on various browsers. However, when I try to access the same file via localhost/xxxxx.html, the buttons don't seem to work. Other images and links work fine. All the files are placed within the same folder.
I have used a href along with the button element.
Can someone please help me? The project is due tomorrow and I am not a technology/coding native.
TIA!
The button element will not redirect you to the link you want because that's not what it is built for.
As you said, your link works fine, so you can use your link to navigate.
If you still want to use the button element, you can wrap it with the <form action="the_link_you_want_to_navigate" method="GET">. You can also use JavaScript code with a click event listener too.
But I think the best way to do this is by using the <a> tag and make it looks like a button using CSS properties.
Without seeing all your code it's tough to know why it's not working in your localhost. But... within the <button> element it's not typical to add an href the same way you would with an <a>. You can do it but with an onclick event in javascript.
I would suggest doing an Text and styling the .button class in your css.
Hopefully this helps and good luck on your project.
I have used #! in href of a tag in my website. It does not throws the user on top of the page if he/she clicks the link. But my question is, is it legal?
Click here
instead of
Click here
It seems your goal is to create something that the user can click on in order to trigger some JavaScript and you don't want side effects (like navigating to the top of the page).
is it legal?
It is not semantically correct. Links should be links.
It is a hack: You are linking to the element with id="!" and depending on the error recovery that happens when that element doesn't exist.
It is allowed under the rules of what constitutes valid HTML.
It is probably OK according to the various bits of accessibility legislation about the work which don't generally care if something works without JavaScript
The correct way to present a clickable control which exists only to bind JavaScript to is to use a button.
<button type="button">Click here</button>
You can apply CSS to make it look however you like though, so don't let "But it I want it to look like a link" stop you.
A more robust approach would be to use a server side fallback (i.e. a form submission or a link) and to cancel the default behaviour of the control by calling the preventDefault method of the event object.
Further reading:
Everyone has JavaScript, right?
Progressive Enhancement
Unobtrusive JavaScript
If your goal is to create something clickable in order to trigger some JavaScript function, then another way to achieve that is:
Execute JavaScript
It will execute JavaScript code when the user will click the link without refreshing or scrolling the page.
It is the best practice to link JavaScript.
Complete Example:
<!DOCTYPE html>
<html>
<body>
Execute JavaScript
</body>
</html>
For more details, see How to link to a JavaScript (HTML5 a href script)
I am testing the following link:
Link
But, as expected, it reloads my current page. How can I prevent it from reloading the page, but maintaining the -a- tag assigned to it?
Thanks ;)
If you don't want it to behave like a link, then don't use a link tag. Doing so hurt accessibility of a page, and you don't want that. There are other ways of browsing a website than a browser (think about the screen readers), which relies on the semantics of the page elements. Use a span if you simply want to apply a style.
If you still want to use an anchor, you can use this -
Link
This will prevent your page reloading.
Just add javascript:void(0) in href you will get..
Link
I think javascript:; also works.
Link
Simply don't specify href attribute:
<a>Link</a>
A link without href...
does not reload a page on click
does not change cursor to pointer on hover
does not change text style to underlined
If you put # inside the href like then the link will not refresh or reload when clicked.
I have the following:
Overview
Review
When I am on the overview page I want to make it so that clicking the overview address link does nothing. Something like disable for a button. Is this possible for an address link?
This should do it:
Overview
Of interest may also be nofollow:
Overview
The easiest way to disable a link is probably to remove the href value.
If you are rendering this from MVC, simply don't include the <a> tag.
It's a little unclear what is best for what you're trying to do.
Add 'return false' to prevent linking:
Overview
Just use a # sign in the href like so: Overview
You could do this with a layer of javascript on top of each page: your JS script would run and check all the links on the page -- if the link is the same as the page you are on then simply "hijack" the anchor by adding an onclick event which does nothing and doesn't bubble up the event.
This was you still pump out from your server side all the links -- and the script would be the same for all the pages, thus allowing it to be cached by the browser and only loaded once (assuming you place it in an external .js file).
You can try <a class="inactive" href="#">Overview</a> and give it some CSS to show it's a different type of link.