I have a link that sets a cookie and hides a DIV (intro) when clicked. I however also want it to go to a URL (a href) when clicked, while still running the code to hide the div and set the cookie. How do I achieve this?
Currently I have the cookies code:
$(document).ready(function() {
if (!readCookie('my-intro')) {
$('#intro').show();
}
$('#close').click(function() {
$('#intro').hide();
createCookie('my-intro', true, 1)
return false;
});
});
(Note there's more code for the "createCookie" function, but I don't think that's relevant to the problem, so I removed it to keep it cleaner).
And the current link:
close and go to URL
The problem is with the above, I need it to close AND go to a URL, which I can't seem to set as I already have a "href" with javascript.
Thank you very much in advance for your help.
Just enter your link under the href attribute, and return true at the end of your click function.
You can more-or-less duplicate what a normal <a> click does by just setting window.location:
window.location = "http://what/ever";
Now, that said, it's not really clear what the point would be of adjusting page layout when you're about to obliterate it all anyway.
If I understand you properly I would do the following:
Give the link these attributes:
Close and go
And then do a
window.location = $( '#close' ).attr ( 'href' );
I think you can use the following code-
<div id="div1">click here to go to www.yahoo.com</div>
You have to define the setCookie() function to set the cookie.
Related
I've tried to apply the method found on this post : specific tab hyperlink
But i don't understand why it doesn't work for me. I'm sure it's a little mistake but i'm not an expert in javascript.
If you could give me some help :
here is my page but if i try to access directly on my "devis" tab with this link it doesn't work.
Thanks for your time
Try this:
Your external link:
Devis From Outside
And JS (to extract tab hash from page URL and update tabs view):
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = this.href.split('#');
$('.nav a').filter('a[href="#'+target[1]+'"]').tab('show');
})
</script>
See JsFiddle DEMO, I hope it works for you, Thanks !
I was wondering whether it was possible to make a link with <a> tags that doesn't display its URL?
Put into other words, I would like a piece of HTML that either hides or obfuscates the URL that it links to.
I have found this StackOverflow question, but I'd prefer that the link would work in all browsers (not just chrome) and was not a popup. I already have access to jQuery, Bootstrap and PHP 5.5.
Any help would be appreciated.
UPDATE: I feel this needs clarification. I do not want it to be visible in ANY way - i.e. this is a link that must NOT be shared, so I cannot simply use redirects and just hide the URL when it is hovered over - I do not want it visible in the source code either. Sorry for any inconvenience :(
Thanks,
ICT
You can capture the link in a closure to hide it, then point the window there when the <a> is clicked, for example
function hideLink(anchor) {
var href = anchor.getAttribute('href');
anchor.removeAttribute('href');
anchor.className += ' pseudolink';
anchor.addEventListener('click', function (e) {
e.preventDefault();
window.location.href = href;
});
}
window.addEventListener('load', function () {
hideLink(
document.getElementById('my_link')
);
});
.pseudolink {
color: blue;
cursor: pointer;
text-decoration: underline;
}
<a id="my_link" href="http://google.com">Hover over me</a>
It is not possible to completely hide the URL you are attempting to navigate to. The URL must be present in some form - such as the 'href' attribute of the <a> - tag to tell the browser where to navigate to.
However, it is possible to mask the URL with access to your server settings. Using a .htaccess file it is possible to redirect from one entered URL to another, whilst maintaining the entered URL within the address bar of the browser. There are many sources online that explain how to do this.
Simply handling each link using some logic within a PHP file may be suitable to hide the link in the source. For example, you could send every link to handler.php and specify a value for which page to navigate to, ie handler.php?page=1.
handler.php would then contain something along the lines of:
<?php
if ($_GET['page'] == 1) header('Location: /where/you/want/to/go');
if ($_GET['page'] == 2) header('Location: /where/else/you/want/to/go');
?>
This way, the user will not know where the link actually goes and (using the .htaccess settings) unaware of the URL they have navigated to.
You could use an url minifier like this one : https://goo.gl/.
<a data-link="some link here"></a>
$('a').on('click', () => {
window.location.href = $(this).attr('data-link');
});
User won't see the link while hovering it.
OK so I was using a bit of jquery to select all the <a> tags on the page and if they link to an image file to add a zoom class to it for the purposes of a lightbox.
This is the code which works
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
There is a problem with this though;
Say I have a link which just goes to another page but passes an image url as a GET variable in the URL the lightbox is activated as a result of this and fails because the link is not actually to an image. For example:
Link text
In the above instance the jQuery script will add the zoom class to this anchor even though it doesn't actually link to a picture.
This wouldn't usually be an issue as you would leave the page to go to the link's destination before the lightbox has a chance to appear, but in times where a new tab/window is opened I get a failed lightbox coming up.
This is particularly prevalent on social media buttons such as Pinterest which passes an image url within the link.
[apologies for the title - I wasn't sure how best to phrase it. Please feel free to edit to something more suitable]
you could add the zoom class only if href attribute doesn't contain a ? (or, in other words, a querystring is not included), e.g.
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').each(function() {
if (this.href.indexOf('?') < 0) {
$(this).addClass('zoom');
}
});
});
You can parse the href with a simple regex to check that the image is not in the query string, and filter out the false positives.
$(document).ready(function () {
$imgLinks = $('a[href$=".png"], a[href$=".gif"], a[href$=".jpg"]');
$imgLinks.filter(function() {
return !$(this)
.attr('href')
.match(/^http\:\/\/.*\?.*http\:\/\/.*\.(png|gif|jpg)$/);
})
.addClass('zoom');
});
Sometimes it makes sense to have a link within a fancybox to launch another fancybox (or load content within the current one).
Say, you have a fancybox error message on login. You also have a "email me my password" widget that works via a fancybox. You may want to combine the two to say (in a fancybox):
Bad password!
Forgot my password!
Unfortunately, this will not work. I considered adding the following js:
$('#fancybox-content a').live('click', function(){
$(this).fancybox();
});
Surprisingly, this sort of worked: You have to click on the link twice and then the right thing happens. Ugh.
Finally, I found a hacky ugly work-around (it works!):
$('#fancybox-content a').live('click', function(){
var href = $(this).attr('href'); //assume there is a selector inside href
$.fancybox($(href).html()); //find the html manually and load
});
What is the right way to accomplish this?
This is i how i solved this problem in my projects:
$('a.fancybox').live("click",function(event) {
event.preventDefault();
var href = $(this).attr('href');
$.fancybox({href: href})
});
In this way you can add fancybox to any current un future A elements with .fancybox class so you don't have to define new events after opening fancybox.
Version 2 is already using "live", so using class names - `$(".fancybox").fancybox();' - would also work on elements loaded using ajax
You should be telling elements to open a Fancybox from within your plugin.
Somewhere you have the following ->
$(document).ready(function(){
$("#my_element").fancybox();
});
That's a very basic function to open a Fancybox, and not only that, but it will also what to open based on the href of the element. You don't need to do any leg work here.
So if you have ->
Forgot my password!
Simply add an ID, such as 'x' for simplicity ->
<a id="x" href="#forgot-password">Forgot my password!</a>
Then, enable the Fancybox plugin for this element.
$(document).ready(function(){
$("#my_element").fancybox();
//this is for our new container to fire
$("#x").fancybox();
});
That should be all you need.
I have various links which all have unique id's that are "pseudo-anchors." I want them to affect the url hash value and the click magic is all handled by some mootools code. However, when I click on the links they scroll to themselves (or to the top in one case). I don't want to scroll anywhere, but also need my javascript to execute and to have the hash value in the url update.
Simulated sample code:
button 1
button 2
Home
So if you were to click on the "button 1" link, the url could be http://example.com/foo.php#button1
Does anyone have any ideas for this? Simply having some javascript return void kills the scrolling but also kills my javascript (though I could probably work around that with an onclick) but more importantly, prevents the hash value in the url to change.
The whole point of an anchor link is to scroll a page to a particular point. So if you don't want that to happen, you need to attach an onclick handler and return false. Even just adding it as an attribute should work:
button 1
A side of effect of the above is that the URL itself won't change, since returning false will cancel the event. So since you want the URL to actually change, you can set the window.location.hash variable to the value that you want (that is the only property of the URL that you can change without the browser forcing a reload). You can probably attach an event handler and call something like window.location.hash = this.id though I'm not sure how mootools handles events.
(Also you need all of the IDs to be unique)
You can use the code below to avoid scrolling:
linktxt
I'm probably missing something, but why not just give them different IDs?
button 1
button 2
Home
Or whatever convention you'd prefer.
Also, preventDefault
$(your-selector).click(function (event) {
event.preventDefault();
//rest of your code here
}
I found the solution. Here I save an old location from calling href
and restore it after scrolling
<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
if (window.pageYOffset!= null){
st=oldOffset;
}
if (document.body.scrollWidth!= null){
st=oldOffset;
}
setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>
and in body of page
<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a>
Thanks to sitepoint
An easier way would probably be to add it as a GET. That is, http://example.com/foo.php?q=#button1 instead of http://example.com/foo.php#button1
This won't have any effect on how the page is displayed (unless you want it to), and most scripting languages already have tools in place to easily (and safely) read the data.
Well here we are 7 years after this answer was published and I found a different way to make it work: just point the window.location.hash to a non-existent anchor! It doesn't work for <a>s but works perfectly in <div>s.
<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>
Worked fine in Chrome 56, Firefox 52 and Edge (IE?) 38. Another good point is that this doesn't produce any console errors or warnings.
Hope it helps somebody besides me.
There is a solution without any JavaScript at all:
I will not jump to the top
Use
button 1
where
function setHash(hash) {
event.preventDefault();
history.pushState(null, null, "#"+hash);
}
event.preventDefault() stops browser from what it normally would do on clicking, and history.pushState adds to the sessions history stack.
For further discussion, see here and here