HTML within page link - html

I'm aware that you can use html anchors to link to parts of a certain page.
However, I can't get it to work for the css template I currently have.
The navigation in the format provided works, but within a subsection of the page, the #name link stops working. I tried putting the id within the header, an tag and the panel id, but none of it works. Here is the source
view-source:http://matthewpiatetsky.com/cs103/
specifically the link to #p1 doesn't work

Related

How to create an internal mediawiki link for a html div element

A plea to all wiki gurus - can anyone help me create a link to another page in the same wiki when the wiki page is constructed in html?
Alittle background & context: I decided to get a bit arty in my mediawiki and made a simple landing page constructed using CSS and div elements to sit on a mediawiki page. After a little fettling, I managed to get the HTML rendered correctly and the page looks very nice!
Now I wish to use the div elements (lets call them 'buttons') as links to other mediawiki pages within the same wiki. (the actual 'buttons' are made up of several elements wrapped in a containing div element)
The actual html for a 'button' looks like this:
<div class="cf-box"><div class="cf-box-title">Button Title</div><div class="cf-button-icon"></div><div class="cf-box-text">Description of the information the button links to</div></div>
Using HTML, this would be a simple process of wrapping the containing element (cf-box) in a link and all is good in the world. I assumed that you would be able to do something similar in mediawiki such as..
[[Some Page|<div class="container"><div class="button"><div class="text"></div></div></div>]]
but when I try this, the outer 'container' opening and closing div elements are stripped out and displayed on the page as text leaving the internal div elements orphaned rendering garbage on the page. The link does work though!
Thanks to anyone who takes a look!

How an incoming in-page html link can be displayed at the top of the page?

Consider the following:
Page A has a link
http://example.com/page#design
Page B is on example.com, has name page, and has an element
<h2 id="design">Design</h2>
I expected that clicking on the link on page A, the browser would display the h2 element on the top of the page.
In my case it does not, neither in Firefox nor in Chrome.
What else should I tell in my html to achieve the desired result?
It has to do with Wordpress. Wordpress does not use the standard way to create in-page links with simply id attributes but one has to use anchors and name attributes:
<a name="design"><h2>Design</h2></a>
Now it works.
This page helped clarifying this problem:
https://www.kasareviews.com/wordpress-page-jump-links/

How to determine the source of CSS line?

I have a question about how content-hiding feature is implemented on thefreedictionary.com site.
I don't understand how does it work.
If you visit the following URL with AdBlock enabled,
http://encyclopedia.thefreedictionary.com/stack+overflow
the main content will be hidden.
Even if JavaScript is disabled (I'm using "NoScript" FireFox add-on), the main content will still be hidden.
Let's look at the main content div:
<div id="content" class="yt">
The path to this div is the following (the image is clickable):
Please note that the class name (yt in my case) is different on every page refresh, so your class name may contain another 2 letters.
By looking at "Rules" and "Computed" tabs in Firefox Developer Tools we can see that .yt class has its display attribute set to none.
It is easy to check that it is this checkbox that controls the visibility of main content.
My question is: Where does this css line come from?
It looks like a css data URI, but I can't find data URIs in html file.
The html file refers to "all.css" which also does not contain setting .yt display to none.
JavaScript is disabled, so display property could not be changed dynamically by a script.
I'm interesting, what trick is being used here.
Could someone explain please?

How to add Anchor Tags To Jump To Specific Location from page to another page

I want to use Anchor Tag for jump to relevant section of a page but i want to done this jump from any page for example WORK.html page(by menu).
I have a menu that there is in all pages. i want with click on any option, jump to relevant section but when am in another pages too.
such as this image: menu image!
in the image, I want to go from WORK page to Scaffolding or Typography that are on a single page.
this code is in menu codes in WORK.html:
go to relevant section
but should instead of "STYLE.html" jump to relevant section from "STYLE.html"
how to done this work???
Try to add an id to the div regarding the relevant part of your page. So put this preceded by the symbol id # at the end of the page link.
For example:
go to relevant section

Anchor links within tabs options?

I am working with a tabs layout and was wondering if there are any alternatives to anchor links when only using html and css? Are there subanchor links?
I want to link one item in the 1st tab to another item in the 2nd tab. What could I use that would allow me to do this? Anchor links aren't currently working due to the tabs layout.
Thanks!
Code: http://codepen.io/anon/pen/xsaht
For example, on tab 3, having a word from header 5 link to another word in header 4.
I found an alternative to this,
Instead of using an accordion, anchor links will work within the tabs. I created a table to contain the main headers of the sections at the top with anchor links. It also speeds up the site a little by getting rid of the accordions.
Code: http://codepen.io/anon/pen/pkvoI