I would like to add an entry to the table of contents of a wiki page that links to an arbitrary point inside the article. In my use case, I want to link to multiple 'header rows' inside a long table.
I tried both
<h4 style="display: none;">My invisible TOC entry</h4>
as well as
<div style="display: none;">My invisible TOC entry</h4>
However, it seems that the element does not get rendered at all. How do I add such an invisible entry?
I'll reply to your use case directly: «I want to link to multiple 'header rows' inside a long table».
I usually recommend to use normal headers in such cases. You will even be able to do section editing of the sub-table (or row) without breaking the general table. An example of sections which reuse existing cells/headers is the Feature map on mediawiki.org.
Alternatively, to have really invisible anchors, you can just add a <span id=linkme></span> or similar, often done via an {{anchor}} template.
Middle ways, i.e. anchors which are actually sections and display in the TOC, but are hacked and made inservible for viewing and section editing, don't really look like "solutions" to me.
Related
Let's say I have the following section on a form
Form Section:
Data:_____________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
and I want to be able to insert {{ data }} into the section while keeping every line (even if it's unused). I'm doing this for work to replicate an old form. This form has to be identical and that's why I can't simply do something like:
<u>{{ data }}<u>
Thanks in advance for any and all help!
There seem to be a couple of options here;
Hacky: Use multiple text inputs. Style them to have a solid bottom border (as the underline) and use a bit of javascript to handle moving between them on word wrap/arrow key movement. Downside: you'll miss something like handling text readers properly, obscure keyboard shortcuts, etc... Also, while pasting is fairly easy, copying would be a pain.
Use a textarea with a background-image with the lines. This relies on you locking down the font size/line spacing to look right
Html5: look into using contenteditable attribute. you should be able to replicate the appearance fairly easily using css and divs/spans. Then make the right one editable
This post might be helpful. How to underline blank space in CSS?
In their example, you would put your template code in the first span.
I'm having a bit of trouble styling some text that is being gathered from a database. Is there a quick way of stylizing the article content inside?
This is where I have it being pulled from the database
<div class="col-4 col-fright">
<h1 class="article_title"><?=$this->article->name?></h1>
<?=$this->article->content?>
<?if(count($this->siblings) > 0){?>
<hr>
<strong>You may also be interested in these articles:</strong><br>
<?foreach($this->siblings as $s){?>
<?=$s->name?><br>
<?}?>
<?}?>
</div>
I figured I could just throw a span class around the article content but that would apply the style to all the text.
Here's an example of what the text may look like when I pull it
The title looks fine since I was able to put it into a tag, but everything else is needs work.
I can't think of a quick way. I suppose you could start by looking for the first occurrence of "[more]" and either removing it or properly formatting the content to show the rest of the article once [more] is clicked.
There's not much you can do unless you are reasonably confident about the structure of your source. For example, applying some logic like "if the number of works on a line are fewer than 7 and contain no periods, wrap it in tags" would produce sub-headers in this example, but might break in others that have unpredictable content.
It seems as though you're looking for artificial intelligence to format your document.
I understand the concept of one id in an html page. As a noob, i was just wondering if you can use the same id once for different html pages. Will that be consider sloppy?
For instance, <div id="1"></div> (used only once)in index.html and used <div id="1"></div> again in product.html. Is that consider bad?
I tried to do a search but found no answers.
Thank you!
!edit! Thank you for the answer guys. Appreciated!
An id should only be used once on a single document. It is used for elements that only should appear once on the page anyway (think of a "top navigation bar"). Classes are used for elements that can appear more than once (think of a "particularly styled table", a "repeatable block of information" or things that share particular charasteristics such as "on this browser width this block spans 6 columns" in for example bootstrap). It is perfectly normal to use the same id on different pages. Usually you'll make a skeleton/template for your layout, where each element will be styled the same on each page that uses this template. It is then helpful to have the same id for the same element across different pages. (or: It would be considered sloppy to change the layout of the page on every page, using different id's for each element, as it would be hard or impossible to maintain your pages.)
It's fine to do that, but you would want to name your ids something better than "1". Something more descriptive, like <div id="main-part"></div> would be better.
Probably a silly questions, but I'd like to have a hyperlink withing another hyperlink, much like a
<a href="#somewhere">
This is the hyperlink,
and this is the other one
</a>
Aside from that it's not compliant and all, is there a way of doing this?
*Edit: the outer hyperlink is used by a carousel, and won't take the browser somewhere.
Lets think about this. What is the browser suppose to do?
Go to the first hyperlink, or the second one, or both?
If you want the first one, then the second hyperlink is not required.
If you want the second one, then close the first one before and reopen if necessary after closing the second.
If both then write some Javascript to get it to open a new window. for the second hyperlink before loading the first hyperlink.
Anchor tags, just like inline or block level elements, layer up on top of each other when nested such that attributes can be set for different subsets of information or visual space within them. This may be useful if you have a large anchor element functioning as a large button, but want to insert a link to a different location within that button.
Have you tried implementing it? See this jsFiddle proving that nested inline elements work, both with span and anchor tags. Note that the nested element overrides the clickable area subset within the parent element, just as you'd expect it to if you were listening for a hover event.
Disclaimer: While technically this can be done, that doesn't mean that it should be done. Nesting links in particular can result in user confusion and be misleading about what content is pointing to what locations.
You can't nest it, but you can do something I did below..
<a href="somewhere">
This is the hyperlink,</a>
and this is the other one
May be you solution:
<form action="http://myhomepage.ru/" method="get">
second link within
<button>first link</button>
</form>
I'm creating a simple static website, and I wish to link from one page to a specific word or phrase on another. Using an anchor only appears to cause Chrome to link to a specific line, even when that word is the only content anchored on that line. Any further suggestions?
Edit: Specifically, I wish for the target word or phrase to be clearly disambiguated from all other content on the page, even on the same line.
How about using the CSS target pseudo selector (element:target) as shown at http://www.catchmyfame.com/2009/08/01/the-css3-target-pseudo-class-selector/.