I making a webpage. The problem is I am really bad at HTML. I need to make a button that opens up the contact like on a new page I don't know how to explain really.
Right now if I click contact it leaves it on the same page with other stuff not cleared.
How would I do that?
[EDIT]
I misunderstood. I would try showing the element in a modal. This is simple with something like Fancybox, if you're new to coding.
https://fancyapps.com/fancybox/3/
Example of how to load an element in a modal: https://fancyapps.com/fancybox/3/docs/#inline
To hide your contact div until it's clicked:
<div style="display: none;" id="contact">Your content...</div>
[ORIGINAL]
Have you tried adding a target="_blank" attribute to your HTML?
Eg:
Contact
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
This question already has answers here:
Anchor or Button in React SPA?
(3 answers)
Closed 9 months ago.
I see a lot of discussion on the internet about <a> tags that look like buttons, and rules that all links must obey. However, I am confused about <button> tags that are styled to look like links.
I am creating a single-page-app and my navigation component is responsible for rendering / hiding different sections of the website. Only one section would be visible at a time, so I'm treating each section as if it was a unique page with its own route.
My navigation controls are buttons, instead of links. I did this because there is nothing valid that I'm aware of, which I can put inside the hrefs (given that the hidden content is not present in the DOM).
I read on the internet that buttons must have styling to identify the priority of the button, for accessibility reasons. Ideally, I want the buttons to look like links since they behave similarly to links (although not identical).
Are there any accessibility concerns with styling buttons to look like links? Would it make more sense to style these buttons as buttons? If they should look like buttons then what should be the priority? Does it make more sense just to hide the hidden "pages" with css, so that I can turn the buttons into <a> tags and add an href?
Here is the typical markup for single page apps
<div>
<nav>
<ul>
<li>
<button data-name="Skills">Skills</button>
</li>
<li>
<button data-name="Projects">Projects</button>
</li>
<li>
<button data-name="History">History</button>
</li>
<li>
<button data-name="Employment">Employment</button>
</li>
<li>
<button data-name="Contact">Contact</button>
</li>
</ul>
</nav>
<div id="content-panel">
Home
</div>
</div>
The part at the bottom div#content-panel represents the Home page. It will be replaced with the other pages using JavaScript, which will contain the main content of the website.
For those who stumble across this, please don't use <a> without an href, it results in an element that is not longer focusable with the keyboard.
The following fiddle shows this. Try using Tab to focus the links.
You could obviously add tabindex="0" to add them back to the focus order, but this is an anti-pattern and if you ever find yourself doing this it is an indication that you have made a mistake with your HTML.
<div>
<nav>
<ul>
<li>
<a data-name="Skills">Skills</a>
</li>
<li>
<a data-name="Projects">Projects</a>
</li>
<li>
<a data-name="History">History</a>
</li>
<li>
<a data-name="Employment">Employment</a>
</li>
<li>
<a data-name="Contact">Contact</a>
</li>
</ul>
</nav>
<div id="content-panel">
Home
</div>
</div>
If you are building a SPA in a fashion similar to that described by the OP you should still be using anchors <a> for navigation.
There are a few things you should consider:
When each section is shown you should update the URL on the site via JavaScript.
If your site also has Server Side Rendering (SSR) and can function in a limited fashion without JavaScript (recommended as JavaScript does fail more often than you think due to network errors, JS errors for certain scenarios you missed etc. etc.) then the href of the anchors should point to the correct URL.
On SPA navigation it is recommended that once the new page is loaded you programatically set focus on that pages <h1>. You can do this by adding tabindex="-1" to the <h1> (which allows it to receive focus programatically without being added to the focus order of the page) and then using header1.focus()
For an even better experience for people who use a screen reader it may also be beneficial to add an aria-live section to the page with the value of assertive that announces "loading" once a link is clicked. <div aria-live="assertive"><!--add "loading" here programatically when the link is clicked, remove it once the page has loaded--></div>
I have a reasonably long answer with a bit more detail of this technique here that explains why.
To answer the original question finally!
You can style a button to look like a link. However consistency across a site is key.
So make sure that if that is the styling you use for buttons that the majority of buttons look the same.
Also if you make a button look like a standard link then really you should make your links look different to your buttons styled as links.
This avoids confusion as a button has the expectation it will change something on the current page or submit a form, a link has the expectation of changing the page / URL / navigation.
However the advice is not quite the same for a link styled like a button. It has become acceptable that links can be styled like buttons if they are a Call To Action for example. Yet again though, consistency across a site is key for a great user experience.
As stated on MDN Navigation expects to have a links as children. So if you want to prevent any accesibility issue, I suggest you to stick to them, just remove the href attribute and add a type="button" to your a tags.
Anything that looks like something else fools the user. This applies to a link looking like a button, a link looking like plain text, an h1 looking like an h2, a ul looking like an ol, etc. When the user is fooled, the user can get confused or be misled into errors. With a link that looks like a button, for example, the user may press Space to activate it and be surprised to find that it is not activated, but instead the page is scrolled.
I try to make a duplicate of the share button on the following site (it's at the bottom):
WARNING! THE IMAGES ON THIS SITE CAN BE VERY DISTURBING!!!
http://www.bbc.co.uk/news/special/2014/newsspec_8702/index.html
If I click from there it looks like this:
If I copy the code:
<a href="https://www.facebook.com/dialog/feed?app_id=58567469885&redirect_uri=http%3A%2F%2Fwww.bbc.co.uk%2Fmodules%2Fsharetools%2Fcallback%3Fst_cb%3Dfacebook%23state%3Dfeed&display=popup&link=http://www.bbc.co.uk/news/magazine-29205427&name=Voices%20from%20the%20mall%20-%20remembering%20the%20first%20terrifying%20hours%20of%20the%20Westgate%20attack%20a%20year%20ago%2C%20via%20%40BBCNewsMagazine&description=Shared%20via%20BBC%20News&picture=http://newsimg.bbc.co.uk/media/images/67373000/jpg/_67373987_09f1654a-e583-4b5f-bfc4-f05850c6d3ce.jpg" target="_blank"><span>Facebook</span>
</a>
And put it in a html or jsfiddle:
https://jsfiddle.net/clankill3r/6oufc1pL/
Then instead of a popup I get a new window and the image is gone:
Why is that? And how can I change this behavior.
edit:
If I click the popup on the original site the link changes to this for some strange reason:
https://www.facebook.com/dialog/feed?app_id=58567469885&redirect_uri=http%3A%2F%2Fwww.bbc.co.uk%2Fmodules%2Fsharetools%2Fcallback%3Fst_cb%3Dfacebook%23state%3Dfeed&display=popup&link=www.bbc.co.uk/news/magazine-29205427&name=Voices%20from%20the%20mall%20-%20remembering%20the%20first%20terrifying%20hours%20of%20the%20Westgate%20attack%20a%20year%20ago%2C%20via%20%40BBCNewsMagazine&description=Shared%20via%20BBC%20News%20Magazine&picture=http://www.bbc.co.uk/news/special/2014/newsspec_8702/static/img/fb.png
Change the picture= to image= like this:
<a href="https://www.facebook.com/dialog/feed?app_id=58567469885&redirect_uri=http%3A%2F%2Fwww.bbc.co.uk%2Fmodules%2Fsharetools%2Fcallback%3Fst_cb%3Dfacebook%23state%3Dfeed&display=popup&link=http://www.bbc.co.uk/news/magazine-29205427&name=Voices%20from%20the%20mall%20-%20remembering%20the%20first%20terrifying%20hours%20of%20the%20Westgate%20attack%20a%20year%20ago%2C%20via%20%40BBCNewsMagazine&description=Shared%20via%20BBC%20News&image=http://newsimg.bbc.co.uk/media/images/67373000/jpg/_67373987_09f1654a-e583-4b5f-bfc4-f05850c6d3ce.jpg" target="_blank"><span>Facebook</span>
</a>
Does this work for you?
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
I`ve seen on various websites, some links appear like this: http://www.myserver.com/page.html#something and when I click on it, it just moves to another portion of the page.
I want to know how to do this. Is it only the URL of the <a href> atrribute?
The fragment at the end of the url coresponds to an ID on the page you're visiting.
If in my page I have a section such as:
<div id="comments">
...
</div>
Then I can take the user to this section by attaching #comments to the pages URL
(http://www.example.com/page.html#comments)
Link to comments
Update
Some of the other answers here correctly point out that you can create an anchor with a name attribute as: <a name="example"></a>.
Although this is technically correct, it's also a very antiquated way of doing things and something I'd recommend you avoid. It's very 1997 as some might say :-)
The text after the hashtag corresponts with an anchor on the page. An anchor is a hidden element on the page which you can link to.
Think for example about a large page with an to top link in it
To create an anchor use:
<a name="C4"></a>
To link to it use: Text
Or you can even link to an id of an element
Check out: links (aka anchors)
Also note that you can use <a name="something"></a> or <a id="something"></a>
or using divs <div id="something"></div>
This is a link to a bookmark on the given page (or even just #something on the current page).
To make it work, you need to define something. You can do this using the name attribute of an <a> tag.
http://programming.top54u.com/post/HTML-Anchor-Bookmark-Tag-Links.aspx