How to implement go-to javascript links? (plus highlight) - javascript

Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?

You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!

Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.

The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.

Related

Using Javascript to go to a sub url and then a specific section id within that url

I am having trouble making this work.
I want to use javascript to change to a sub url and then go to a specific section id as well.
This is what I'm using:
Javascript:
'click .acq-click'(event) {
location.href = '/products#acquisition';
}
HTML:
<section id="acquisition">
some html
</section>
However, when I click the button, it takes me to the sub url with this hash, but it won't move to that section id. It loads at the top of the page.
What can I do to make this work?
What you need is an anchor and a link to it:
Place this somewhere where you want to go to:
<a name="anchor"></a>
Then you can link to this position like this:
Go to Anchor

<a href> Anchor remains in URL and in page after refreshing

I have this little issue here with my page, where if I reload it while being anchored, the anchor remains and there is a problem to it. I.E
http://localhost/public/product/1#mod1
The anchor is #mod1, and while the anchor remains active after refresh, my CSS code is saying that this element:
.overlay:target
is active. Which is a very big issue, because then it doesn't allow me to explore the functionallity I have implemented on this anchor, unless I remove the #mod1 from the end of the page manually by hand. Because this CSS element makes this div visible when it should be not unless activated with the a href element.
(?)
<div id="mod{{$key}}" class="overlay">
content
</div>
Any ideas on how could I solve it? I tried catching whether the user has refreshed the page and redirecting him to an action/route/url, but the page stays blank then and URL unchanged.
You cannot use href with angularJS because it will misdirect the target link. AngularJS is a markup language for HTML, it is not HTML. Because angularJS is not HTML, we're provided a special set of directives to write angularJS values inline into HTML markup. The answer to solve your issue would be to replace the href tag in the anchor element with the angularJS directive ngHref. You can find more information about how to use ngHref and other directives at the link below. Good luck.
https://docs.angularjs.org/api/ng/directive/ngHref
Well I wanted to purely solve this without JS, but here's what I did, HTML:
<a ng-href="mod{{$key}}" class="button">(?)</a>
<div id="mod{{$key}}" class="overlay">
Then replaced the CSS of overlay:target to -> overlay:active, and implemented JS:
var curmod;
$('a.button').on('click', function(e)
{
curmod = document.getElementById($(this).attr('ng-href'));
$(curmod).addClass('active');
});
$('.popup a.close').on('click', function(e)
{
$(curmod).removeClass('active');
curmod = null;
});

Why this pop up is not shown?

I have a problem with a very simple JavaScript pop-up script.
I have this example page: http://www.onofri.org/example/example4/
At the end of this page there is a box containing some flags including the British flag that is reprsented by the #reportEng div (inside the engLink link).
What I want is that when the user clicks on this element a pop0up message will show.
So I have add to the page this simple script:
<script>
var test = document.getElementById('engLink');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
I have put the script inside the body section of the page and not in the head section because this is only a test page and the final result will be put into a page of a CMS in which I do not have access to the template (so I can't put the script in the head section).
The problem is that it does not work. If I click on the English flag the page is reloaded and the pop-up not shown.
Can you help me?
Thank you,
Andrea
I went a completely different approach. The addEventListener is pretty cool, but I'm a bit OLD and I've defaulted to nasty habits. This works just fine for me.
<script>
function myExample(){
alert("BaZing! It works!");
}
</script>
And for the HTML part...
<div id="reportEng" onClick="myExample()"></div>
I also want to point out that this 'fix' is a bit taboo (see here)
You don't prevent the link from being followed, so when you click the link which has an empty href, you simply reload the current page.
There are many ways to prevent the defaul link behaviour, but here is the old school way:
<div id="reportEng"></div>
Also on a side note I don't think a div element is allowed inside an a in HTML or XHTML.
FIDDLE
You are using a <a> tag, change it to use a <div> tag, or remove <a> tag at all
You can follow this to make div clickable.

Jump to a element automatically on page load

i have elements like this on page
go to hi
.
.
<a name="hi">hi text here</a>
but i would like users go to "hi text here" at first on page loading. how to do this?
I'd suggest that you first test for another hash before moving your users' browser to focus another element:
if (!document.location.hash){
document.location.hash = 'hi';
}
JS Fiddle demo.
Incidentally, you can use the hash (the part after the # in the URL) to jump to any element that has an id, you don't need to use the named-anchors (<a name="hi">...</a>).
Either, you can use the URL with the anchor (mysite.com/#hi) or you could use javascript:
document.getElementById('hi').scrollIntoView(true);
Please note that you should use ID, not name.
i think it would be usefull to work with anchors:
<a name="hi">here goes the text information what you like</a>
Create a link to the "hi Section" inside the same document:
Go to hi
Or, create a link to the "hi Section" from another page:
<a href="http://www.stackoverflow.com/html_links.htm#hi">
Visit the hi Section</a>
You can use jQuery along with its scrollTo plugin, and then write something like this:
$.scrollTo("a[name = hi]");
It should work just fine.

Is there a way to link to the middle of someone else's page even if they don't have an anchor?

...something along the lines of telling the browser which percent of the page to center to?
Yes you can. If the person has an element with an ID anywhere on the page. For example:
<div id="someId"></div>
Then you can create a link to this page like:
Middle!
The only thing you need to do is choose an Id in the middle.
No, you can't do this without anchors. You would need to access the DOM in order to do a scrollTo or something like that, which is prohibited on different domains. Security being the main reason.
{using Google Chrome web browser; remeber wiki is dynamic and the following URL may get invalid at anytime, the process is still valid though!}
1_ This is the main URL:
https://en.wikipedia.org/wiki/RSA_(cryptosystem)
2_ I want to refer to "A worked example" in the middle of the page
3_ right click on "A worked example" -> Inspect Element -> Edit as HTML
4_ you should see this:
<span class="mw-headline" id="A_worked_example">A worked example</span>
5_ The id is id="A_worked_example". Copy-paste it in the following sentence as follows:
Middle! :
Middle!
6_ There you go:
https://en.wikipedia.org/wiki/RSA_(cryptosystem)#A_worked_example
:)

Categories

Resources