JavaScript update <a> href and then follow it and keep intended target - javascript

I have a problem. I need to update href and then follow it. It may seem that it's quite easy task, because I just could return false, create new link element and then initialise click on it or maybe just change location.href...
So problem is: How to know if user held [CTRL] button or right-clicked and chose one of Open in New Tab, Open in Incognito Tab or Open in New Window... or of course simply clicked with left-button...
This href must be updated on click. Mouse hover may be an option but this will fail in mobile and tablets :)
P.S. if you give a negative evaluation it would be nice to know why :)

Okay, so here's a workaround for you:
HTML
Click
JQuery
$('a').on('mouseenter focus', function() {
// Re-write url
$(this).attr('href', 'redirected_location');
});
$('a').on('click', function(e) {
// Prevent default behaviour (i.e. opening link)
e.preventDefault();
// Re-write url
$(this).attr('href', 'redirected_location');
// Re-direct to link
window.location = $(this).attr('href');
});
The idea here is that we rely on other user interaction, other than clicking, to re-write the HREF.
I have chosen mouseenter and focus to cover both mouse and keyboard events.
This means that the URL they will follow, even if they right-click and chose new window, will be correct.

just send them to a redirect page with the refferal url.
Link
Then on the redirect page you do something like this.
header('Location: '.$_GET['refferal_href']);
And if you don't have php enabled use javascript to grab the redirection url.

Related

Link with hash : how to always navigate

On the footer of the website I'm working on, I have links to different pages, and in one case, 2 links to the same page with a different hash in the url ,like this :
<a href="http://example.com/mypage#test>Test</a>
<a href="http://example.com/mypage#test2>Test2</a>
These hashes are not true anchors, they reflect some actions the user takes (namely showing/hiding some content).
If I come from another page, I navigate without any problem. However, if I am already on "mypage", then the hash changes, but nothing happens. The browser detects and anchor change and thus tries to navigate to the anchor.
That's fair enough, but I want my user to be actually redirected to "http://example.com/mypage#test2", as if he copy-pasted it himself in the address bar. How can I achieve that ?
I could use the hashchange event but it would make it complicated to manage the rest of the javascript, so I wonder if there is a simpler way to do it.
You have a very simple solution if you are using jQuery:
$(window).on('hashchange', function() {
//code
});
Check out this: On - window.location.hash - Change?
Also this MDN documentation.
Use the location.hash property of the window object to find out what the anchor is. To detect a change in the hash, with plain javascript, just use the onhashchange event.
window.onhashchange = new function() {
window.location.replace("http://example.com/mypage" + window.location.hash);
});

perform href before onClick

I've the following link:
I
And this use the following javascript:
function showGallery(){
if(window.location.hash) {
$('#gallery').fadeIn('fast');
var hash = window.location.hash.substring(1);
alert(hash);
} else {
}
}
So it only show the gallery when in the URL is a hashtag. But when i click on the link, nothing happens. When i click it twice, the gallery fade in.
So the link first make the javascript, and i doesn't work 'cause there is no hashtag in the URL and after that, it perform the href and insert the Hashtag in the URL.
How can i do that?
My Target:
When i click on a link, it open a gallery. To know which gallery i must open, i insert in the URL a Hashtag. Here i want to display the HDR album. And i also want, if my site get opend with a hashtag, it should display the gallery.!
Is there also a another, easier or cleaner way to make it?
Hope you understand what i want.
For modern browsers, you can bind your Javascript code to the onhashchange event. Links will be without Javascript:
I
And the Javascript is run whenever the hash has changed:
function locationHashChanged() {
if (location.hash === "#HDR") {
$('#gallery').fadeIn('fast');
}
}
window.onhashchange = locationHashChanged;
Have you tried a setTimeout call to delay the onclick event?
Like this:
I
You can simplify this quite considerably, it is not good practice to use the href for other things than pure navigation.
<a onClick="showGallery('HDR')">I</a>
And then:
function showGallery(name){
if(name) {
$('#gallery').fadeIn('fast');
alert(name);
} else {
}
}
If you want to run showGallery() without following the link, the correct code is this:
I
By keeping the href the user still sees the destination in the status bar and navigation still works for clients without Javascript (i.e. Google). By returning false in the event handler, you prevent the browser from following the link.
In showGallery(), you can then show the gallery and add '#HDR' to the location.hash.
You don't need to verify the window's hash, because on first click you don't have any hash in the address bar. The functionality will only apply on the second click.
What you can do is this:
gallery 1
function showGallery(galid){
var linkhash = $('#' + galid).attr('href').substring(1);
alert(linkhash);
$('#gallery' + linkhash).fadeIn('fast');
}

Javascript: history not loading page

I have a menu that loads a new html file in a div. The loading is done by a click event attached to the menu's <a> tags. The loading works well and I add the new load to the history by constructing a new href with a hash tag.
But when I use the back button, the URL is updated correct in the browsers address field, but the page is never loaded. If I focus the address field and press enter it loads.
This is the javascript located in the mypage.html header.
<script type="text/javascript">
$(document).ready(function() {
// replace menu link click
$(".right-menu a").live('click', function(ev) {
ev.preventDefault();
ev.stopPropagation();
window.location.href = $(this).attr('href');
$("#content-right").load('mypage'+window.location.hash.substring(1)+'.html');
return false;
});
// If page loads, load the content area according to the hash.
var hrtag = window.location.hash.substring(1);
if(hrtag=="")
hrtag='about';
$("#content-right").load('mypage'+hrtag+'.html');
window.location.hash = hrtag;
});
</script>
This is the menu
<ul class="right-menu">
<li>About</li>
<li>Screens</li>
<li>License</li>
<li>Download</li>
<li>Donate</li>
</ul>
If I load the page as mypage.html, the javascript will append the hash #about and load the div id "content-right" with mypageabout.html
If I click the menu, for example download, it will load the div id "content-right" with mypagedownload.html
In both cases, the window.location will be set to the hash version of the page, mypage.html#about and mypage.html#download to register them in the history.
If i click the menu in the following order; license, about, screens and then click the browser's back button, the address field will show; mypage.html#about, mypage.html#license but it will NOT load the pages!?!
The URLs are obviously in the history, but they don't load.
Any clue to what might be wrong here?
// Thanks
EDIT - The solution
Thanks to Andres Gallo's article I came up with this solution:
<script type="text/javascript">
$(document).ready(function() {
// Make sure the page always load #about
LoadIDWithURL('#content-right','myPageAbout.html');
window.addEventListener('hashchange',function() {
if (window.location.hash != "") {
// We have a hash, use it!
LoadIDWithURL('#content-right','MyPage'+window.location.hash.substring(1)+'.html');
} else {
// We do not have a hash, force page reload!
window.history.go(0);
}
});
});
// Load the targetID with the URL loadURL.
function LoadIDWithURL(targetID,loadURL) {
$(targetID).load(loadURL);
}
</script>
I wrote a very detailed article on this exact topic. It explains how to build exactly what you are trying to do.
Furthermore my article also explains how you can pass parameters in your links to have javascript do special things
Here is a link to the article http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/
The best method is to attach your functionality to your hashchanges rather than to you click events. This allows any changes in history to take advantage of your javascript functionalities.
This is normal behaviour when navigating between pages which differ only in their hash. You have two options:
Use the hashchange event, or an emulation of it, to detect when the user changes the hash by navigation back or forward and update the page appropriately
Use the HTML5 history API.
you can try with hashchange
$(function(){
$(window).hashchange(function(){
// some event
})
})

Javascript tweak to open URL either in a new window or new tab based on user's choice

I am facing an issue where a link on my website opens in a new window if you simply click on it. However, if you right click and say open in new window or new tab, it opens the same window (URL) again from where the link is clicked.
Self Service Option is a link and the JSP calls a function getSelfServSite() when the link is clicked. This is how the code flows in my case
function getSelfServSite()
{
getToTheLink("${myConfigInfo.selfServiceURL}");
// this is because the URL is configurable
}
function getToTheLink(url)
{
window.open (url, "currentWindow", "");
}
What am I doing wrong. I want it to go to the right link no matter how the user click it.
Please advise. Thanks
I would suggest doing something like this.
Setup an event handler to capture when a user right clicks. When they do, run you function to get the selfServSite url, and set the links href attribute to be the new Url.
here is some info on capturing the right click event.
How can I capture the right-click event in JavaScript?
EDIT: Based on our discussion in the comments, here is a revised solution.
When the page is opened in a new window from a right-click, it has "#id-card" appended to it, so what you need to do is check for that value when the page first loads, and if it's there, run the same javascript function that gets run when the user left-clicks on the link.
You can check for this value using the location objects hash property.
http://www.w3schools.com/jsref/obj_location.asp

Perform a jQuery event before opening up a link

I have a simple javascript/jQuery related question:
I have the following markup in my tumblr blog:
NEXT
The # above changes according to which page the user is on. ie: # is variable, and cannot be static.
With jQuery, I would like to perform an effect (slideUp();, to be specific) before the new link is opened.
Is that possible?
I have tried both .click() and .mousedown(). Doesn't seem to work, since when I click the link, the new page opens up before any effects take place.
I have heard of preventDefault(), but I'd like to shy away from that, for that would mean I must create a separate function to detect the page #, etc. (too much work~)
I recommend against doing that. Just let the user change pages.
However, if you really want to, what you need to do is indeed preventDefault (explicitly, or by returning false from your handler), do the slideUp, and then in the slideUp completion function, trigger the change in URL.
Like this:
$("a.pagination").click(function() {
// Grab the link's href
var href = this.href;
// Slide up the content you want to slide up
$("some_selector_here").slideUp(function() {
// Slide is finished, navigate
location.href = href;
});
// Prevent the default action of the link
return false;
});
You just need to defer changing of page's url:
$('.pagination').click(function(){
var link = this;
$('.some-other-element').slideUp(500, function(){
location.href = this.getAttribute('href');
});
return false;
});

Categories