In wikipedia's table of contents, by simply putting a hash tag and removing the whitespaces using underscores on the desired content, we can jump to different contents in the same page. Is there a HTML tag to do this? Or must I use Javascript? If so, give me the syntax in jQuery since I'm more comfortable with it. Thanks!
Fragment identifiers on URIs link to elements with matching ids.
section name
...
<div id="foo">section contents</div>
Normally you would link to named anchors, like so:
<a name="top"></a>
go to top of page
But you can use any matching ID really.
Related
Is it possible to make an <a href> link to the same page when your destination doesn't have an ID?
Jump to Topic 1
...
<!--destination is below-->
<h1 class="tab-title" data-editor-style="title" style="color:#444444">Topic 1</h1>
Sadly, the answer is no. You need an ID or at least a name, like CBroe mentioned in a comment of your question.
However, I found this here:
Today, all browsers recognize top as being the top of the page. If you
want the visitor to go to the very top of the page, the ID tag can be
left out and the A HREF link will still work.
A URL fragment identifier can only target an element with a matching ID, or a corresponding named anchor. You cannot link to arbitrary elements without IDs. (There was a proposal that would have allowed the use of CSS selectors as fragment identifiers, in which I was personally involved, but it never took off.)
The best you can do is to use JavaScript to select the element you want and give it an ID that is reserved for your hyperlink. If the elements matching this selector will change then you will additionally have to listen for such changes and handle them accordingly, but that's probably beyond the scope of this question.
I know that id selector is used to specify a style for a single element. My question is, if I have a project and it has multiple php files, can these php files contain elements with same id?
Here is example:
php file 1:
...
<body>
<h1 id="test">header1</h1>
</body>
...
php file 2:
...
<body>
<h3 id="test">header3</h3>
</body>
...
css file:
#test
{
color:red;
}
This usage is correct or not?
If they are all rendered in the same HTML page in the browser, it's incorrect as ID should be unique on a single page. If only one is ever rendered then it'll be a-ok.
If you want your Web pages to validate as XHTML or HTML, then you should have unique IDs on your pages.
Yes, that is correct. In fact, that is a good idea. If you do that, you can use the same stylesheet on both pages. As long as you don't combine the files, it's a great idea.
What you are doing is fine, but it looks like class is better for what you are trying to do. You typically use ID to specify a specific element on a specific page and class to apply styling to different elements, on the same or different pages.
Using the same ID on multiple pages WILL work, but imo class is the more proper thing to use.
The id should be unique for each element per (HTML) document.
So, unless you combine the output of your PHP files into a single HTML file there is no problem. In page1 your one h1 heading will be red, in page2 your one h3 heading will be read, etc.
Personally, I prefer CSS classes for appearance and DOM IDs for functions, but they can be mixed.
I've been working on this for way too long. I'm trying to put HTML inside the title attribute of a tag. This is for a tooltip. Of course, if this is going to be possible, then I have to escape all of the necessary characters so it doesn't screw up the tag in which it is contained. To be specific, how can I fit the following inside the title attribute of a tag:
test
That is, I want this:
<div title="test">my div</div>
I feel like I've tried everything. Is this even possible?
I googled HTML Escape Characters and found a tool to do it: http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
It produced this string which you can use:
<a href="test">test</a>
if you are using jquery you can do it like this
$('div').attr('title','test');
if you want to escape html tags then you simply can do this
if your test is in a div something like this
<div id="tag">test</div>
then you can do $('div').attr('title', $("#tag").text());
Total newbie question, but I cant figure out what im doing wrong. I want a make a link that jumps down the page to a header. I believe these are called fragment links. Here is my code thats not working:
My Link
<div id="cont">
<p>Lots of content here, abbreviated in this example to save space</p>
<h2 id="Frag">Header I want to jump to</h2>
</div>
Pretty sure you need to specify the name attribute for an anchor to work, for example:
Skip to content
<div name="content" id="content"></div>
Okay, so 'pretty sure' was a euphemism for 'guess' and I thought I'd look it up, so, from the HTML 4.01 Specification we get this from section 12.2.3 Anchors with the id attribute:
The id attribute may be used to create an anchor at the start tag of
any element (including the A element). This example illustrates the use of the id attribute to position an anchor in an H2 element. The anchor is linked to via the A element.
You may read more about this in Section Two.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to Section Two above for more details.`
To carry on the convention of guesswork, perhaps your page isn't long enough to allow jumping to that content (that is, your page might have nowhere to jump and the content to jump to is already visible.)
Other than that, and from the same section of the spec previously linked, here is some general info on when to use what as the anchor identifier (in terms of the link its self) that could be otherwise valuable:
Use id or name? Authors should consider the following issues when
deciding whether to use id or name for an anchor name:
The id attribute can act as more than just an anchor name (e.g., style sheet selector, processing identifier, etc.).
Some older user agents don't support anchors created with the id attribute.
The name attribute allows richer anchor names (with entities).
Your code works fine in firefox anyway you can use as well name instead of id..
http://www.w3schools.com/tags/att_a_name.asp
if you want to have a nice scrolling you can use jquery scroll http://api.jquery.com/scroll/
When jumping to anchors on a JSP, HTML anchors do not work. Eg, something like
Link
...
<div id="name"></div>
fails because the server actually looks for a file named "filename.jps#name" and returns an error. Is there any workaround for this?
What you describe is called a fragment identifier and the target can be a named anchor or an identified element, for example
go to foo
<a name="foo">foo</a>
<div id="foo">foo</div>
with the named anchor variation demonstrated in this demo
Please also note that the HTML5 specification has deprecated the name attribute for a elements has been dropped, so an id would be the only HTML5 valid way to navigate to a fragment identifier.
I think that you've set a <base> tag in your document. All identifier links are also relative to it. If this is true, then you need to change your identifier links from
<a href="#name">
to
<a href="${pageContext.request.requestURI}#name">
See also:
Is it recommended to use the <base> html tag?