I am trying to create an anchor tag but its not working in any of the browsers
I am going from one page to another
<p>
View All Code Related Issues
</p>
and its going to this page having 10-12 anchor tags..
<div class="grouping">
<h4 id="Code2011">
<a>Code 2011</a>
</h4>
</div>
I tried these too:
<div class="grouping">
<h4 id="Code2011">
<a id="Code2011">Code 2011</a>
</h4>
</div>
and
<div class="grouping">
<h4>
<a name="Code2011">Code 2011</a>
</h4>
</div>
but none of them are working: When I go to that page and press enter on the url it then works...so that means my url is coming up fine...any ideas?
I found that this works better. Don't know why.
<div class="grouping">
<h4>
<a name="Code2011"></a>
Code 2011
</h4>
</div>
I have found that sometimes you can mistakenly have another element with the same ID. In my case, it was an option tag, which cannot be moved into view. As such, I would recommend you try $('#yourid') to see if there are any tags unexpectedly with the same ID.
In general:
'name' is deprecated, so don't use it.
All id's must be unique, no exceptions. You cannot have duplicated
id's.
Anchor id's need to occur in anchor tags. So something like <h4
id="myanchor"> wouldn't work as an anchor.
Your second example would work for you if you removed (or rename) the id from the H4 tag.
For others future reference, I've noticed anchors not working well within some divs. They seem to work better when placed next to a recognizable page element like an image or a table row, something on the page that isn't buried within a div. I think what may happen is with floated elements and relative positioning the page can't find the precise spot of your anchor so you get nothing.
Try:
Code 2011
Related
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.
I have some block of code and need to get data out of it and trying different version of xpath commands but with no success.
<div>
<div class="some_class">
<a title="id" href="some_href">
<nobr>1<br>
</a>
</div>
<div class="some_other_class">
<a title="name" href="some_href">
<nobr>John<br>
</a>
</div>
</div>
<div>
<div class="some_class">
<a title="id" href="some_href">
<nobr>2<br>
</a>
</div>
<div class="some_other_class">
<a title="name" href="some_href">
<nobr>John<br>
</a>
</div>
</div>
// and many blocks like this
So, this div blocks are the same except they are different by content of its sub-element. I need xpath query to get John's href which <a title="id"> is equal to 1.
I've tried something like this:
//div[./div/nobr='1' AND ./div/nobr='John']
to get only div that contains data I need and then wouldn't be hard to get John's href.
Also, I've managed to get John's href with:
//a[./nobr='John'][#title='name']/#href
but that way it doesn't depend on value from <a title="id"...> element but it has to depend on it.
Any suggestions?
I think what you want is
//div/div[a/#title='id']/following-sibling::div[1]/a/#href
which, given a well-formed input document, will return (individual results separated by --------):
href="some_href"
-----------------------
href="some_href"
You did not explain it very clearly though, as kjhughes has noted, and perhaps your sample HTML is not ideal.
Regarding your attempted path expressions, as the input is HTML, it is hard to know whether
<nobr>John<br>
means that "John" is inside the nobr element or not.
Thanks Mathias, your example was helpful, but as there are many elements with #title='id' it isn't reliable solution that will always catch good elements.
I've managed to make workaround, first catched the whole div, and then extract href I need.
//div[./div/a[#title='name']/nobr='John' and ./div/a[#title='id']/nobr='1']
//a[./nobr='John'][#title='name']/#href
I am using anchor tag for linking my welcome page to my main page. It is working on chrome but not in mozilla.
Code:
<div id="wel1"><h1>WELCOME TO ASSESMENT ENGINE</h1></div>
<div id="wel2">
<div id="wel3"><p id="wel4">Instruction:</p><br>
<p id="lang">Total number of questions : 5.<br><br>
Time alloted : 3 minutes.<br><br>
Each question carry 10 mark, no negative marks.</p>
</div>
<div id="wel5">
<p id="wel4">
Note:</p><br>
<p >
<ul>
<li><p>Click the 'Submit Test' button given in the bottom of this page to Submit your answers.</p></li>
<li><p>Test will be submitted automatically if the time expired.</p></li>
<li><p>Don't refresh the page.</p></li>
</ul>
</p>
</div>
<button id="bu">START THE TEST</buttton>
</div>
In this image START THE TEST button working on chrome perfectly but not on mozilla.
You have invalid close tag </buttton>
Try:-
<button id="bu">START THE TEST</button>
Demo
Although the code works if the end tag spelling error is corrected, it is illogical and forbidden in HTML5 to nest interactive elements: the a element must not have interactive content like a button element. A click on such an element could activate the outer element, or the inner element, or both. Although this might not matter in this specific case, it’s still not recommended.
Instead, you can use an image of a button an make it a link:
<img src="start.png" alt="START THE TEST" border="0">
or use a minimal form (submitting a form is different from following a link, but the differences often don’t matter, or could be an improvement):
<form action="as.html"><button type="submit">START THE TEST</button></form>
Spell mistake in the Closing button tag, Use </button> instead </buttton>
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.
I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem.
Thanks!
<div class="tab-panel-init clear ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
</div>
The problem is that it isn't valid html. Explain that you have to change the markup to make it work as desired. Changing the div to a span and setting the class .ph-item-featured-img to display: block should produce the same look-and-feel and be correct html.
Edit: Another, not as clean solution, is to add a click-listener with JavaScript and invoke the link upon a click on the image.
If you can't change the mark up (which you admit isn't valid), I don't think there is anything you can do here.
You should reconsider changing the markup. This example is bad in so many ways it could serve as a textbook example of what not to do.
Alternate strategies:
Remove everything but the image and
give it an onclick handler that does
the link mechanics.
Remove the DIV and just have the IMG
inside the anchor tag.
etc.
Well i looks like youre already using jQueryUI so why not just through a click even on the containing DIV. Also you should definitely change the markup. If its not valid, its not valid. That can lead to all kinds of problems other than the one youre currently facing. If there is a good reason for change this is it.
This is what the w3c validator returns when I pass in the snippet you posted:
Line 15, Column 46: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag
<div class="ph-item-featured-img">
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
If I remember correctly, IE6 requires that every element inside of the <a> tag to be an element with CSS display: inline set on it (or inline-by-default elements like <span>, <b>, <strong>, etc.), or else it doesn't get linked, or links act weird.
Perhaps it is even IE6's HTML parser that is to blame. Maybe it sees the <img src="#"> and thinks, "that's not a valid URL to an image! :ignore:". IE6 is strange that way, often acting in a way that is a diametric opposite to how standards-compliant browsers act.
Truth is, this I have no way of checking all this; thankfully, every Windows computer I have access to has IE7+ on it. Perhaps you should take Google's route and just explicitly say that you're not going to support IE6, redirecting all IE6 browsers to a place where they can upgrade.
I believe you can do this with conditional comments like so:
<html>
<head>
<!--[if lte IE 6]>
<meta http-equiv="refresh"
content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
...
</head>