Why do my hyperlinks go to the wrong directory? - html

In my project functionality is like when i need to set a link to direct to:
/site/sales/sold.php
so the menu.php file link would look like this:
<ul>
<li>Sales</li>
<li>Sold Items</li>
</ul>
it would sometime direct to
/site/sales/sold.php
and the next moment, it repeats the menu's directory like:
/site/sales/sales/sold.php
so i removed the sales directory, as its directing there by itself, worked for a little while and now it directs to
/site/sold.php
which does not exist so it ends up with a 404.

If you are on a page sales/ and link to a page sales, the link will result in sales/sales/ – that is the defined behavior.
The default method to avoid that is to specify a base URL via the HTML <base> tag. There is no PHP, JS or CSS involved here – just good ol' HTML 2.0.
<base href="http://www.example.com/site/">
Using this in your pages head, will define the given URL as base for all links on the page, thus a link like sales/ will actually result in http://www.example.com/site/sales/ when clicked.
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

Why don't you just use absolute Links? Or even URL-rewriting?
The only way of using relative links like your "sold.php" is if your menu only occurs inside your /sales directory. If this menu comes up for example inside a page on /site, of course it won't work, because there probably isn't a file called "sold.php" under /site/sold.php. So if you wan't to make sure, your link "Sold" always points to the right direction, use a Link like /site/sales/sold.php. Then it won't matter if you are inside /site or even inside /site/sales.
if i for example set my menu link to direct to: /site/sales/sold.php so the menu.php file link would look like this:
<li>Sales</li>
<ul>
<li>Sold Items</li>
</ul>
This does not make sense. If you would point your link to /site/sales/sold.php, your link would look exactly like that: <li>Sold Items</li>

Related

Linking to specific part of a webpage, that doesn't have an anchor tag

How do I create a link to a part of long webpage on another website that I don't control, that doesn't have an anchor tag?
I am trying to create a Course Outline Finder chrome extension for my university that you can use to:
Type course code in input box. (Use JS to filter out all other course codes)
Click the course code that remains after entering course code.
Course code link then leads you to a specific part of the university webpage that shows a list of course outlines for that specific course.
Ideally the webpage would have given an anchor tag like the following:
<h2 id="anchor">COMP150</h2>
Which I would then be able to link by doing the following:
<a href="https://www.ufv.ca/calendar/CourseOutlines/PDFs/COMP/#anchor>
But the website unfortunately doesn't have any id's for the h2 tags.
It instead has this:
<h2>COMP 150</h2>
<ul>
<li>COMP150-20000927.pdfEffective Fall 2012</li>
<li>COMP150-20011207.pdfEffective Fall 2019</li>
</ul>
Is there anything I can do?
You can insert the ID yourself in your extension:
document.querySelectorAll("h2")
.forEach(header => header.id = header.id ? header.id : header.textContent.trim())
Alternatively ask them to add an ID to their headers - they might agree

Setting base path breaks anchor links

I have created a WordPress theme and the images in it were all broken so I added a base path tag to the page.
<base href="https://www.example.com/wp/wp-content/themes/my-theme/"/>
But now all of the anchor / links don't work.
click here
The above link points to "https://www.example.com/wp/wp-content/themes/my-theme/index.php#an_id_on_the_page" instead of the same page but further down.
WordPress recommends adding "" to the path of every image. But that means breaking a workflow and editing the HTML code on every change.
Are there any ideas to fix this?
UPDATE
It looks like if I put a "/" in front of the anchor it looks like it is working. I'll test it some more to confirm.
No links or named anchors or blank hrefs will point to the original subdirectory, unless that is made explicit: The base tag makes everything link differently, including same-page anchor links to the base tag's url instead, e.g:
<a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
becomes
<a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>
<a href='?update=1' title='Some title'>A link to this page</a>
becomes
<a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>
With some work, you can fix these problems on links that you have control over, by explicitly specifying that these links link to the page that they are on, but when you add third-party libraries to the mix that rely on the standard behavior, it can easily cause a big mess.
Resource,

Move cursor via Xpath

Within the Ace editor HTML panel is it possible to move the cursor if I know the Xpath of the dom element?
For instance if I have this path
/html/body/nav/ul/li[2]
I would love to be able to move the cursor to
<html>
<body>
<nav>
<ul>
<li>Alpha</li>
*here*<li>Beta</li>
<li>Gama</li>
</ul>
</nav>
</body>
</html>
I guess one option is to write a regex based on opening tags but maybe there was a cleaner way. Haven't been able to see from the API if it's possible.,
Turns out I was over thinking the problem. I reinterpreted the path
/html/body/nav/ul/li[2]
to
/html/body/nav/ul/li/li
Split those and then had the Ace editor do a sequential find from the beginning. So find "<html" and then "<body" and then "<nav" etc.

How does one create a subpage from an html file

I couldn't figure out a title that descibes what I need but I will explain here. (I know how to make a sub page, just cant figure out how to make a path).
This may seem like a stupid question (which I cant figure out for the life of me after doing research), but how does one create a sub page to your html file so that it is a pathway such as:
exemplesite . com/Porfolio/
then you click an image which takes you to a new subpage and then the URL becomes:
exemplesite . com/Portfolio/Project-1
and this without changing pages. (I do not want this: exemplesite . com /Project-1)
Hope this makes sense.
Thank you
To create links for subpages, link to the folder, then the title of the page within that folder you want to link to.
For example:
This is how you do it:
PAGE NAME
If the FILENAME.html is not the same directory you'll address it like this:
PAGE NAME
answer via: https://forums.digitalpoint.com/threads/creating-links-for-subpages.2150899/
In the example you gave, Portfolio/Project-1, you would have a folder, Porfolio, and within it, a file, Project-1.html.
You can create "jump-to" anchors within your page by adding simply referencing element ids in a local href link (see snippet). I added a sizeable (ish) padding-bottom to clearly demonstrate the jump.
p {
padding-bottom:40px;
}
<body>
<p>Link to Books</p>
<h2>Introduction</h2>
<p>Welcome!</p>
<h2>Fruit</h2>
<p>Apples, Bananas, etc.</p>
<h2 id="books">Books</h2>
<p>List of books</p>
</body>

How does linking within a webpage work?

I know that linking in general looks like
examplesite.com
I was wondering how would someone link within the page it self. Sort of like when someone clicks on biography section in Wikipedia and it scrolls down to the part that has the biography but staying on the same page.
Any example could would be great.
I believe that you're referring to URL fragments (a.k.a. named anchors or bookmark links).
You'd create such a link like:
Jump to example
Which would take you to the part of the page where the element with the ID of example exists. Like:
<h1 id="example">example</h1>
In older versions of HTML, the name attribute was first used for this, however the ID has replaced that.
What you posted is actually a link inside a website. It does not contain a protocol such as http:// nor starts with // which would indicate a protocol-relative link, so it would load exampleside.com relative to whatever path you are currently on.
These are the kind of links you can use (each inside href="..."). We assume that you are currently on http://example.net/foo/index.html
https://example.com - goes to the "external" site https://example.com
//example.com - goes to the "external" site xxx://example.com with xxx being the protocol used to load example.net, so in my example http://example.com
www.example.com - goes to http://example.net/foo/www.example.com as it is not an external link
#foo - goes to the element with id="foo" on the current site (does not load anything from the server)
So what you want is probably the last example: ... and then id="foo" on the element you want to jump to.
Add some id to the element you want to link to, e.g
<div id="target">Hello</div>
Then you can link it by using #:
Go to target
Go to target
<hr style="height: 300vh" />
<div id="target">Hello</div>