thanks in advance for your help.
I have some code that has an <a href>xxxxx</a> inside of a larger block of code which consists of divs inside of an <a>xxxxx</a> block, like this:
<a href=...>
<div>
xxxxxxx
</div>
<div>
<a href=...>xxxxxx</a>
</div>
<div>
xxxxx
</div>
</a>
note: in this case both <a> actually use the same href URL, the reason there are two <a> is that the first <a> already existed prior to surrounding the larger page area with <a href="..."> functionality
the problem is that i now need to use a <form> with hidden values and i am unclear as to where and how to place the <form> so that the user clicks definitely pass the hidden form parameters to the url
thanks again.....
First, using a link inside a link (a tags) makes no sense and is a no-go. Erase the inner link - wherever you click inside the outer link, the link will work anyway - no need for an inner link if it has the same target.
Second, if you mean to transmit parameters ("hidden form values") when you click that link, I wouldn't use a form, but append these values to the linked URL (like http://example.com/page1.php?par1=abc&par2=xyz, so that they can be received as GET parameters by the target page.
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
I am trying to create a set of links to specific sections in the page using the <a href="#..."> notation, but it doesn't seem to work. Clicking on the link seems to do nothing and right-click -> open in a new tab changes the url but does not move to a different section of the page. I am using Firefox 28.0. My links are as follows:
<div>
<p>Contents</p>
<ul>
<li>Map</li>
<li>Timing</li>
<li>Timing Details</li>
</ul>
</div>
And they should be linking to:
<div id="map">[content]</div>
<div id="timing">[content]</div>
<div id="timingdetails">[content]</div>
Links to external webpages work fine. Placing the id="..." feature inside an <a> tag instead did not fix the problem. My webpage url is of the form http://127.0.0.1/foo/bar/baz/. This is within a Python Django project.
Any idea why this isn't working?
Every href needs a corresponding anchor, whose name or id attribute must match the href (without the # sign). E.g.,
Map
<a name="map">[content]</a>
An enclosing div is not necessary, if not used for other purposes.
Wow, thanks for pointing that out OP. Apparently Mozilla Firefox doesn't associate the id attribute with a location in the HTML Document for elements other than <a> but uses the name attribute instead, and Google Chrome does exactly the opposite. The most cross-browser proof solution would be to either:
1.Give your anchor divs both a name and an id to ensure max. browser compatibility, like:
Go to Map <!-- Link -->
----
<div id="map" name="map"></div> <!-- actual anchor -->
Demo: http://jsbin.com/feqeh/3/edit
2.Only use <a> tags with the name attribute as anchors.
This will allow the on-page links to work in all browsers.
what happened with me is that the href does not work second time and that because I should Remove hash value first,,
take look how I resolved it
go to Content 1
function resetHref() {
location.hash = '';
}
Just resurrecting this post because I had a similar problem and the reason was something else.
In my case it was because we had:
<base href="http://mywebsite.com/">
defined on the .
Obviously, don't just remove it, because you need it if you are using relative paths.
Read more here:
https://www.w3schools.com/tags/tag_base.asp
Content 1
Content 2
Content 3
....
<a name="1"></a>Text here for content 1
<a name="2"></a>Text here for content 2
<a name="3"></a>Text here for content 3
When clicking on "Content 1" it will take directly to "Text here for Content 1.
Guaranteed!
Today being March of 2022, I had a specific occurrence of this problem that illustrates how the whole web environment is an "issue" today.
Same requirement: links that go to a section of the page.
It worked on my desktop's Chrome and Firefox, but not on my client's and neither on my Android's Chrome.
After reading multiple threads several times for a few hours, I found out that, in order for this behavior to be the most consistent across browsers and browser versions, you have to implement both things:
a container with an id, and
an anchor with a name property,
The most important part is that the anchor tag with a name, must have content inside of it.
So, you have your links
Go to section
<!-- more links -->
And you have the sections you want your links to go to
<div id="page-section">
<a name="page-section" class="collapse"> placeholder-content (important) </a>
<!-- your section content -->
</div>
Since you MUST have content inside the anchor with the name, you can then hide it in several ways.
My approach was to just set it's height to 0.
In order for the height to be effective, the anchor tag's display property should be set to block or inline-block for example.
.collapse {
height: 0px;
overflow: hidden;
display: block;
}
Finally it all worked, and I have to thank the many developers who struggle with this sort of thing (which should be much easier to do, but, the web...), and all the people who answer questions like this and share their knowledge.
This might help
JS:
function goto($hashtag){
document.location = "index.html#" + $hashtag;
}
HTML :
<li><a onclick="goto('aboutus')">ABOUT</a></li>
In my case The input tag was the problem. I implemented my tabs by input (radio buttons) which was preventing the anchor tag's behaviour.
It was like this at first (not working):
<a href="#name">
<li>
<label></label>
<input></input>
</li>
</a>
Then I removed the input tag and it worked:
<a href="#name">
<li>
<label></label>
// <input></input> <!-- removed it -->
</li>
</a>
Make sure you're not using preventDefault in javascript
Here is something that I finally got to work in IE, Chrome and Firefox.
Around any text create an anchor tag like this:
<a class="anchor" id="X" name="X">text</a>
Set "X" to whatever you want.
You must enclose something in the anchor tags such as text or an image. It will NOT work without these.
For the link, use this:
text
As for getting rid of the CSS for links using our anchor tag use something like this:
a.anchor {
color:#000;
text-decoration:none;
}
This seems to work well.
So I have a box on the right side of the page which when clicked on different titles will take to different news articles on the page though I also have it so when articles within the website titles are clicked upon on the page that they will be taken to the source. At the moment though neither are working what is going wrong?
html
<a name="Anchor1">News Article</a>
Use id attribute inside the link to have the same effect as name attribute
<a id="Anchor1" href="http://newsarticle.com">News Article</a>
Simply add an id attribute to the link:
<a id="foo" href="http://newsarticle.com">News Article</a>
Then link to it like this:
link to foo
Nested <a> elements are forbidden in HTML syntax.
Browsers effectively enforce this restriction in their parsing rules.
Example:
if you have a link ,
a<a href="b.html">bc</a>
Browsers will parse it as,
a b c
Reference: Nested links are illegal.
I want to link to a section of a dynamic page using the # anchor. Something like this:
<a href=page.php?id=3#section-name>LINK</a>
It didn't work. What is the right way to do it?
I'm not using a direct link, but a redirect like header("Location:page.php?id=3#section-name") from another script.
I have a section named section-name in file page.php. I guess page.php has a problem figuring out the value of the id to process (3 or 3#section-name). I am redirected to page.php which has its content repeated vertically.
You've only presented half of your code so I can only give a sample of the proper way to do it:
<body>
<a name="top"> </a>
<a href="#top">
Go To Top Of Page
</a>
</body>
When using anchor tags, you can target an element by its ID. Browsers will look for the ID before it looks for the name attribute when the link refers to such.
<a href="#section-name>LINK</a> will go directly to <div id="section-name"> if it exists.
Here's an example
Read: HTML Anchors with 'name' or 'id'?
A typical anchor tag works as follows:
A href link tag is written like so:
Jump to a001
See the #a001 above? That is referencing an id in the HTML page, and it will jump to it if you click this link.
To provide an example of how this id that we would jump to might look on a page, look below.
<li id="a001">text here</li>
Reference
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