How to use fancybox to show specific class of webpage? - html

https://jsfiddle.net/054j0fj7/
As you can see when you click on show catlinks you get the wikipedia page, How ever I would like to show the catlinks at the end of page.This area is defined in HTML as following:
<div id="catlinks" class="catlinks" data-mw="interface">
and this is the fancybox
<div> Show Catlink </div>

Just change target URL to correct one with anchor #catlinks.
<div>
Show Catlink
</div>

If you want to display only part of the external page, then it is not possible to implement directly. You would need to create, for example, php file that reads content of that page, parses and outputs only the part you need. Then you would simply display that page in fancybox.

Related

How to share anchor links with angular components on angular 14?

I have a component menu which contains a few anchor tags. Each tag brings the user to that respective page section. I am trying to share the same anchor tag among the other components.
For example, I have two more HTML components called homepage.component.html and details.component.html. For each I call the menu.component.html by its selector. Both homepage and details html components have an id for the section I wanna scroll to. Here's how it looks like:
menu.component.html
Go to content
for both homepage.component.html and details.component.html
<div class="home-content" id="content"> Here comes more code </div>
It should work just like in a non-dynamic html project, however, when the anchor tag is clicked, the url redirects to '' (which is the first/default page) and then it shows the content for the first page, instead of the current componenet I am on.
I have tried creating a function where I get the current url and using the router.navigate, I pass the parameters indicating the fragment:
menu.component.ts
currentRoute: string
scrollToItem(){
this.currentRoute = this.router.url
this.router.navigate([this.currentRoute], {fragment: 'content'})
}
menu.component.html
<a (click)="scrollToItem()">Go to content</a>
However, this function adds the id #content to the url each time the anchor tag is clicked, redirecting the user to my 404 page.
I wanted to know if there is a way to use an anchor tag on the menu.componenet.html, while all the items that have "content" as their ids in different components are going to be displayed. Hopefully I made my question clear. If there is still questions about how the error occurs I can create and shate a stackblitz project. Thanks in advance :)

Using a tag in a dynamic url

I'm struggling to get the contact ref to work from different pages.
Basically for every product a different detail reference is provided (see 4867820 below).
I would like to create a button which links to the #contact id for every page on the website.
Basically if I put a link on the button including the reference, this works perfectly.
http://www.mywebsite/product/4867820#contact
However I am wondering if I can create something similar where the button links to the contact id on the same page without using the reference number.
http://www.mywebsite/product/this page#contact
So basically my question is how do I link to only #contact on this page without the reference numbers, so I can create 1 button on the page template.
Regards,
Assuming it will always point to the same page as the button:
a) If you are able to use anchor tags instead of buttons (and CSS-style them to look like buttons), you can simply point the anchor's href attribute to the section name.
It works like a relative link, just appending the href to current URL. Like so:
Contact Here
Or b) if you have to use only a <button> or <input> element specifically, you will need to use javascript to set the location in onclick handler of the button. For details on that see: Javascript inline onclick goto local anchor

How to make an index

I'd like to make a table of content for this web page I am making (the project is still offline for the time being).
Now I already know most of what I have to do (text boxes, lists, the CSS, etc) however I don't want the links going to new pages but rather it send the user to certain parts of the page like in a wiki.
Any idea on how one would code something like that?
Like this:
Jump to a section
Then in the location to jump to:
<a name="jump"></a>
You can use anchor link (or bookmarks)
The code will be:
<a href="#my-div>Link to 'my div'</a>
<div id="my-div"></div>
That link will scroll the page until the element with the corresponding ID

MediaWiki - how do I create a page which auto populates a link from the current page?

Hi sorry if this a daft question (newbie), I am currently using mediawiki-1.23.1 and have been looking for a way in which to create it easy for an end user to create a page. However I would love to be able to have a link auto-created/auto populate on the current page. I currently use the InputBox extension. But it doesn't seem to allow this additional function from my research. Is this a possibility through extensions, or will this have to be done via a custom php template?
current InputBox details.
<inputbox>
type=create
width=24
break=no
buttonlabel=Create new page
</inputbox>
Any help or direction would be really appreciated.
It is impossible to create a link from page A to page B automatically if you don't "mark" something on page B. And the simplest thing you can mark is "[[Category:...]]", like Bergi said. I will use preloaded text to make it easier.
What you need
If you want page in main namespace to be the page where end users type in InputBox, you need any extension that will show content of category page such as Extension:CategoryTree, or Extension:Dynamic Page List (see also Transclude a category in MediaWiki).
Steps
On page [[Template:PreloadedText]]
Put the following content
<!-- Do not edit under this line -->
<includeonly>[[Category:CreatedFromPageA]]</includeonly>
On page [[A]]
Put the following content
<!-- Show all pages in [[Category:CreatedFromPageA]] -->
<!-- Assuming you use Extension:CategoryTree -->
<categorytree hideroot="true" namespaces="-">CreatedFromPageA</categorytree>
<!-- InputBox -->
<inputbox>
type=create
width=24
break=no
buttonlabel=Create new page
preload=Template:PreloadedText
</inputbox>
For end users
On page [[A]], they will see every page that was created via the InputBox at the top. At the bottom, they will see the InputBox. After typing pagename and clicking the button, they will be brought to the page they typed. There will be the following text existing already
<!-- Do not edit under this line -->
[[Category:CreatedFromPageA]]
As long as they don't bother with these lines, after they click save, the new page will appear on the list automatically.

How to redirect to another page using Scala Template

I have two html pages: /algorithrms and /algorithms/add written in scala template. The route file contains following lines:
GET /algorithms controllers.Application.algorithms()
GET /algorithms/add controllers.Application.newAlgorithmForm()
I want to add a button in the page /algorithms and when I click that button, it simply redirects to the second page /algorithms/add. I know how to do this in JavaScript. I just want to call an action from the button click and then let the action redirects me to the landing page.
So I added the following code in the first page's html template:
#form(action=routes.Application.newAlgorithmForm()){
<input type="submit" value="Add">
}
It worked, but the landing url is: http://localhost:9000/algorithms/add?
I don't want that question mark. I want to know 1) what I did wrong to cause the question mark to generate and 2) how to remove it?
I do not know if you use Twitter bootstrap, but hyperlinks can look like buttons too, and the redirect to another page sounds to me like a plain hyperlink:
<a class="btn" href="#controllers.routes.Application.newAlgorithmForm()" >
#Messages("add.newAlgorithmForm")
</a>