I'm no programmer, so this might be really messy. Maybe there's a cleaner method to create a mouseover pop-up?
I'm using an empty href to create a mouse over pop-up. My issue is that the empty href is not displaying as a link, so there is no indication that one should mouseover.
(<span title="Infrastructure, comprising a society's ... , and science (symbolic and ideational relations)."><i>'Infrastructural, Structural and Superstructural'</i></span>
I also tried: javascript:void(0); javascript:; and # (all to no avail); I finally settled for italics- but that is no real cue.
If you just want the pop-over title, you can put that on any element without having to use an empty (and non-semantic) a link.
Plus, considering your a tag is empty nothing will be rendered, so no link will be seen.
If I understand what you're trying to do correctly, I think your tags should be around the text.
<span title="Infrastructure, comprising a society's ... , and science (symbolic and ideational relations)."><i>'Infrastructural, Structural and Superstructural'</i></span>
You are close - but you need to know that <a href='...'> opens the tag and </a> closes it. The text between those two is the bit that show up underlined.
Blah
or...
<span style="color:blue" title="The definition of the term">the term used</span>
Related
I have hundreds of footnotes in scores of documents.
All are in HTML4 format. I have needed to update all the pages to HTML5.
When using a code checker for HTML5, I am informed that "NAME" as be deprecated and it I am getting warnings in to change the code.
I can't find a code example to resolve this. I am not looking to do anything fancy. I don't want to display the footnote by hovering the mouse over the call to the footnote. I just want to be able to click on a footnote number and get to it at the bottom of the page and then return! I don't see how that is done without "NAME."
Currently as an example, this is what a my code looks like. (I make have ten or more footnotes on any given page.
<P>This is in the regular text
<A NAME="sdfootnote1anc" HREF="#sdfootnote1sym"><SUP>1</SUP></A>></P>
AND it calls this at the bottom of the page.
<p><DIV ID="sdfootnote1">
<A NAME="sdfootnote1sym" HREF="#sdfootnote1anc">1</A> - Here I am explaining it before I go on after the break to the next footnote.</DIV><BR>
Change name to id
<A CLASS="sdfootnoteanc" id="sdfootnote1anc" HREF="#sdfootnote1sym">
<A CLASS="sdfootnotesym" id="sdfootnote1sym" HREF="#sdfootnote1anc">1</A>
I would like to know if it is possible to create a link to a specific span in someone else's page. For putting on a website or blog one might create for themselves, or even a local page one uses to put links to something interesting they found maybe.To be more clear, I want the link this way so that when someone clicks on the link, it goes to a specific location on the page, mostly for a long page where you want someone to go directly to the relevant information - when that part of the page doesn't have an anchor element you can make use of. I am using Wikipedia as an example, even though it might not be the best example, because I know Wiki uses it's own way of doing certain things. Say you wanted to link to the Wiki page "List of fallacies" and the span for the sublist titled "Red herring fallacies".
The page link is :
"https://en.wikipedia.org/wiki/List_of_fallacies"
Using Inspect Element, I got this for span :
<span class="mw-headline" id="Red_herring_fallacies">Red herring fallacies</span>
I tried to combine them like this :
<a href="https://en.wikipedia.org/wiki/List_of_fallacies<span class="mw-headline" id="Red_herring_fallacies">Red herring fallacies</span>">Red
herring logic fallacies list</a>
I am just wondering; am I a) doing it incorrectly for just using HTML, b) it can be done, but you have to use additional assets (CSS, JavaScript, etc), or c) it isn't possible to do at all?
I would like to do it using just HTML if possible, but if that is not possible, then I would appreciate it if someone can tell me how you might do it some other way - if it isn't impossible altogether. Thanks
Edit: My page is marked as a duplicate of answers to an earlier question, and from looking at the page it appears that this IS true. But I think my question heading itself was more clear to a beginner without much knowledge of advanced topics in creating webpages. Thanks for all of the help, and if the moderator believes my point is not relevant then please feel free to do whatever you do with duplicate questions.
you are missing a close "> just before the span started and you are missing the anchor in your href like this #Red_herring_fallacies, because span has that ID
<a href="https://en.wikipedia.org/wiki/List_of_fallacies#Red_herring_fallacies">
<span class="mw-headline" id="Red_herring_fallacies">Red herring fallacies</span>
Redherring logic fallacies list
</a>
The span has an ID. Use that as the parameter in your URL in the link.
Red herring logic fallacies list
To target an id you must add #theId at the end of your url.
The result will look ass follow:
<a href="https://en.wikipedia.org/wiki/List_of_fallacies#Red_herring_fallacies">
Red herring logic fallacies list
</a>
When a user inserts linebreaks in a contenteditable element, browsers insert HTML into the element.
Here is what you get when you hit [Enter] in various browsers:
IE: <p></p>
Chrome: <div><br></div>
Safari: <div><br></div>
Firefox: <br />
Opera: <br />
(Test for yourself with this JSFiddle demo.)
Is there a way to get the browser NOT to insert HTML when the user hasn't inserted any HTML? Of course, I could just use
<textarea></textarea>
...and that does behave very similar to how I want, however, I don't want a strictly "text-only" input, as I will be adding and modifying HTML in the editable element using Javascript.
I considered constantly stripping all HTML out as the user types, only allowing HTML with a special class that I create to remain. That doesn't seem like a great solution, however. Is there something like wrap='soft' or some other way to say "stop making up HTML and putting it in my element!"
If you make it content editable, you are implicitly allowing the user to change the content of the HTML.
Pressing return should insert some kind of newline - either as closing a paragraph (</p>) and starting a new one (<p>), or entering a line break (<br>). Both of which in HTML require HTML tags, for the simple fact that a standard newline character (eg. \n or \n\r) is rendered as a single space, which is not what the user would expect - so inserting a raw newline as a "soft wrap" would not make sense and will ultimately lead to users impotently slamming their enter key getting mad at your site for not inserting a break when they think it should.
An even more fun fact is that if a user highlights some text, they can (or should) be able to bold and italicize text using keyboard shortcuts, which will again insert HTML.
Short of writing Javascript to override this behaviour, I am not sure you can disable the enter key inserting HTML tags to render the requested newlines.
To demonstrate this, here is a really simple page:
<html>
<body>
<div contentEditable="true"> Some things.</div>
</body>
</html>
(In Internet Explorer at least) If you double click on the text it becomes editable. Move to the end of line and type the following:
Enter - ( A new paragaph is made (wrapping the prior text in p tags).
Type "Words", the select it and hit Crtl + b - the text is now wrapped in <strong> tags.
Hit Shift + Enter - a line break (<br>) is now inserted.
Type "More words", select it and hit Crtl + i Its now italicised in <em> tags.
And the source should look like:
<html>
<body>
<div contentEditable="true">
<p>Some things.</p>
<p>
<strong>Words</strong>
<br>
<em>More words</em>
</p>
</div>
</body>
</html>
If you want complete control over the content going into the area, I'd recommend using a WYSIWYG editor, or alternative, accept that the browser probably knows what its doing and let it do its thing so you don't need to worry about it.
There is no cross-browser way of disabling or forcing an editable div to interpret enter keypress differently from what the browser intended.
Besides, different browsers will do different things with the new line. Some will wrap lines inside <p> tags, some will add <br>.
The idea is that it's the browser that controls the editable div, not you.
If you try to fiddle with the output in real time, you will be like a passenger occasionally trying to snatch the wheel from the driver's hands.
You're not even guaranteed to get the key events from such a div. For instance, your fiddle does not seem to work in IE11.
I would rather do it just like this very SO editor does: use a textarea for user input and generate whatever rich HTML you want in another, non-editable div.
I'm trying to create a page where a user clicks on a link on the left and is taking to a specific section on the page.
Here is example. I've added as much of the code I'm using as I can.
What your trying to do works with the Id or Name attribute.
To elaborate: The anchor tag that your rendering as the target of where your page needs to go should be:
<a id="myId"></a>
or
<a name="myId"></a>
or both..
When you build a link to another part of the page, you need two parts, the link (that you click), and the target (that the page scrolls to).
The link's href attribute needs to start with a '#'. This signifies that the link is 'internal' to the page, and not another, external page.
The target can be either a named anchor <a name="something"></a> or an element with an ID: <div id="something">. You don't include the '#' in the name or the ID.
That's the key part you're missing. Take the '#' off the front of your <a name=""> values and it will work.
Let us know if that works, and we can help you develop this further: There's a lot more polish you could add, but let's get the basics working first.
Today I was working on a tab navigation for a webpage. I tried the Sliding Doors approach which worked fine. Then I realized that I must include an option to delete a tab (usually a small X in the right corner of each tab).
I wanted to use a nested anchor, which didn't work because it is not allowed. Then I saw the tab- navigation at Pageflakes, which was actually working (including nested hyperlinks). Why?
Nested links are illegal
They must be doing some really crazy stuff with JavaScript to get it to work (notice how neither the parent nor the nested anchor tags have a name or href attribute - all functionality is done through the class name and JS).
Here is what the html looks like:
<a class="page_tab page_tab">
<div class="page_title" title="Click to rename this page.">Click & Type Page Name</div>
<a class="delete_page" title="Click to delete this page" style="display: block;">X</a>
</a>
Actually, the code I had pasted previously was the generated DOM, after all JS manipulation. If you don't have the Firebug extension for Firefox, you should get it now.
Edit: Deleted the old post, it was no longer useful. Firebug is, so this one is staying :)
I suspect that working or not working nested links might depend if your browser renders page in strict mode (e.g. XHTML DTD, application/xml+html MIMEtype), or in "quirks" mode.
In spite of nested tags are illegal but writing them using JS will work!, try this:
$('<a>', {
href: 'http://google.com',
html: '<a>i am nested anchor </a>I am top Anchor'
}).appendTo($('body'))