How to link a hash link from the URL to Javascript content? - javascript

I've once used jQuery UI in order to add the tab feature to one of my project.
Everything was working just fine, and I noticed each tab was bound to a URL hash tag (I do not know you say it in english). As an example, once I clicked on the first tab, #Tab0 was added to my URL.
I want to reproduce this behavior in my current project. But I'm not using jQuery UI tabs, I am porting a desktop application and there are JavaScript buttons which write and replace content inside my page (in the manner of different pages, but without reloading).
How do I proceed to mimic this behavior ? Do I have to manually fetch the tag in the URL and do things accordingly all by JavaScript ?
Thanks,

u could do it this way:
creating an url with hash from current url:
var url = window.location.href + '#Tab0';
reading a hash from current url:
var hash;
if (window.location.href.indexOf('#') > -1)
{
hash = url.split('#')[1];
}

you can do this by using location.hash:
//you can set hash
location.hash = "something";
//and read it eg. http://domain.com#something
console.log(location.hash); //will return the current hash value 'something'
Also you have to remember that if your anchor tag has hashed href attribute e.g. <a href="#something"> it will be appended automatically to current url and browser will try to find given id on the page. Of course you can prevent that default behaviour.

Related

Jquery each and attr

I have some external links in my page
Label
Label
I try to direct the ext link to an exit page before automatically redirecting it to the destination. It works fine, but with multiple ext links on the page, my script is getting the href of link-1 for other ext links too.
Ergo:
// To grab the href of the destination page i.e http://example.com/link-1
var external = $(".ext").attr('href');
// To forward to the exit page first i.e http://localhost/checkLinkURL?=http://example.com/link-1
$(".ext").attr('href', 'http://localhost/checkLinkURL?=' + external);
I have tried wrapping the second part of code in an each function but it still gets only the href of link-1. I don't know if the rest of my script is relevant to the problem. It's pretty basic and just strips out the exit page and forwards automatically to the destination. But how come this doesn't work as intended, even with an each function?
You can change the href attribute of each link, you can use .attr() with a callback function which provides the current href for you as the second argument, which you can use as your query string:
$('.ext').attr('href', function(i, external) {
return 'http://localhost/checkLinkURL?=' + external;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Label
Label

opening a new window based on the current url of the page

So ostensibly I'm trying to make a button or a link who's target is contingent on the current page's URL. I'm working on a Wordpress portfolio site that opens up different projects in an Ajax window, but I also want to be able to link to the separate project page from that window. For instance, if I click the thumbnail for a project titled "Blue" it opens up the project in the ajax window and the url changes to "www.website.com/#blue." Incidentally, the url of the corresponding project page would then be "www.website.com/projects/blue". The idea is to hardcode the button into the Ajax window and write a script that generates the correct URL for the project page so my client doesn't have to copy-paste the code for the button and update the target URL every time she posts a project. This is what I came up with, but I'm not great with Jquery or Javascript and I think something might be wrong with my syntax or the structure of the script. Right now, nothing happens when I press the button.
First it splits the url at each "/" and creates an array from the different strings, then it removes the "#" from the unique string, and opens a new window with the new address.
EDIT There were some syntax errors, but it's still not working. Any thoughts on this new version:
$(".comment_button").click(function(){
var parse_url = window.location.href.split('/');
var project_name = parse_url[2].replace("#", "");
window.open("http://www.balletinform.com/projects/" + project_name);
});
Tried using a element ?, with target="_blank" attribute ?
<a id="blue" href="www.website.com/projects/blue" target="_blank">blue</a>
If I understand correctly, what you want to get is the #blue part of the url.
If so, you can use window.location.hash.
Your function will then looks like window.open("http://www.balletinform.com/projects/" + window.location.hash.substring(1));
Your current function was setting project_name to "www.balletinform.com" ([0]=>"http:"; splitted(/); [1]=>""; splitted('/'); [2]=>"www.balletinform.com"; splitted('/'); [3]=>"#blue").
So an alternative solution would have been var project_name = parse_url[parse_url.length-1].replace("#", "");
var new_url=""+(window.location.href).replace('#','projects/');
window.open(new_url);
Try replacing # with 'projects/'

Remove the full hash / anchor from a URL using `$location`

How do I remove the full hash / anchor from a URL using the $location object in angularJS?
For example, I have the following url http://www.myurl.com/town/street, I am using anchor links in my page and I wish to remove the hash/anchor when a user clicks a link that toggles the visibility of a div/content (using ng-show), my code below tries to remove an existing hash/anchor like http://www.myurl.com/town/street#houses however I have notice that when I seem to have the following url http://www.myurl.com/town/street##houses using the code below so my $anchorScroll() doesn't work, then it changes my url to http://www.myurl.com/town/street#/%23houses#houses
if($location.hash().length > 0){
$location.path('#' + $location.hash()).replace();
}
$location.hash(toggleTarget);
$anchorScroll();
How do I just remove the full hash / anchor? Any ideas anyone? Thanks in advance.

addition to url

I am developing my own template selector for CSS templates. At the moment, it works fine, clicking on a name from the selectbox changes the template. However there is 1 function that is missing.
If you look here: http://www.demo.joomforest.com/?template=corporate
you can obviously see the URL contains ?template=corporate at the end of it, thus if you enter that URL, it loads the corporate template.
This is my selector so far: http://joomjunk.co.uk/demo
As you can see, I added a hash + template name to the end of the url upon selecting a template, however if you copy and paste that URL into a new tab for example, it loads the default template.
So my question is, how can I add something similar to ?template=corporate and have it load the correct template upon loading that specific URL?
I'm not asking for the full code, but to point me in the right direction.
Thanks in advance.
window.location.search
This will contain whatever comes after the ? in your URL, including the ?
if
window.location.href === "http://www.demo.joomforest.com/?template=corporate"
then
window.location.search === "?template=corporate"
if you want to parse the query string, there are many resources available. If, however, you just want to do it for this specific case:
var tmpl = window.location.search.split('=')[1];
// tmpl === "corporate"
This will split the string on = and then return the second element in the array
If you have an URL like http://foo.bar/#corporate you can just check the window.location.hash in your javascript and load that template immediately.
Seems reasonable since you already add hashes in your dropdown – the user will see the same template if they choose to refresh the page.
You might even be able to trigger a click event on the right dropdown menu item based on the hash property, but that would require the DOM to be fully loaded.

Where can I find documentation to support this behavior?

I'm looking over some previous developers code and I come across this line:
location.href = '#' + variable;
Which has the effect of updating location.hash. Remove the '#' and of course it redirects to the non-existent url. Playing around a bit it seems I can set the hash via location.href as long as the value starts with '#'. This line or similar is used a lot, but I can't seem to find any documentation the supports this behavior of it updating location.hash by setting location.href this way.
I would like to see something showing this isn't just a happy accident that this works so I don't have to re-code all the situations where this is used. Anything you can link me to would help.
Would it be better to just changes these to properly set the location.hash anyway?
Thnks
At a guess this is because setting location.href to value is supposed to have the same behaviour as clicking a link whose href=value would; it's not supposed to replace the contents of the address bar, because then you'd have to build absolute URLs everytime you wanted to use location.href.
Assigning values to location and location.href was apparently there back in Javascript 1.0, so it's entirely possible this wasn't properly specified anywhere – neither the Mozilla or Microsoft documentation go into detail. HTML5 specifies the behaviour, most likely retroactively.
This is a good place to start your journey on the location properties.
https://developer.mozilla.org/en/window.location
By the way, #something is a valid url and assigning a new url to window.location cause the browser to navigate to the new destination.
#something is called hash and direct the browser to an anchor on the current document, or to the top of the document if the anchor does not exists.
http://docstore.mik.ua/orelly/webprog/DHTML_javascript/0596004672_jvdhtmlckbk-chp-10-sect-2.html
So what happens is when you set location.href to something that is not seen as an absolute path. The browser will automatically put the current url prepended to whatever value you are trying to set it to.
So "#section1" = "www.mysitethatistoocoolforschool.com#section1"
and "section1" = "www.mysitethatistoocoolforschool.comsection1" (this does not exist)
This URLs with a '#' char are called anchor based URLs, they're not supposed to redirect the user from the page, instead they just update the position of the page by some offset, the same way as setting the location.hash you cited.
As stated by Sii this works because when you change the location.href value it's like you're clicking on a link for example then you have the following equivalence:
<a href="#toc" >Go to Table of Contents</a>
Is the same as:
location.href = "#toc";
Both of them would result in your location.hash variable to have the value toc.

Categories

Resources