On begin.html, I've written some code like:
<a target="_blank" href="test.php">Proceed</a>;
This makes the link open in a new tab/window. Simultaneously, I want to go to test2.php from begin.html by clicking on the same link.
So, basically, at the end of my operation, one tab shows test2.php and the new tab shows test.php.
Is it possible?
Considering you have test2.php in root folder as test.php. you can try it this way. Don't forget to add your javascript code inside a script tag.
<script>
function OpenNewPage() {
var win = window.open('test2.php', '_blank');
win.focus();
}
</script>
<a target="_blank" href="test.php" onclick="OpenNewPage();">Proceed</a>
You need JavaScript to do that; and even with it it’s very likely the browser will block the second window thinking it’s a popup:
<button id="b">Click here</button>
document.getElementById("b").addEventListener("click", function() {
window.open("https://www.google.com", "_blank");
window.open("https://www.bing.com", "_blank");
}, false);
See this JSFiddle.
Related
I've checked other posts on here, no results of what I'm looking for.
I want to click on
About
<div id="about">Content of this..</div>
and have it scroll to that element without putting www.domain.com/#about in the address bar
As a perfect example please check out this site that I found here and click on some of the links --they don't change the address bar when clicked.
You can do what you want using javascript and jquery, example below (note that this is using an old version of jquery):
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1200);
});
});
</script>
</head>
<body>
<a class="scroll" href="#codeword">Blue Words</a>
<div id="codeword"></div>
</body>
</html>
Played around with this myself and here is a summary of my learnings on the subject.
Here's the basic link command:
Blue Words
Here's how you denote where the jump will scroll the page:
<A NAME="codeword">
Here's what's happening
The A HREF command is the same as a basic link except the link is to a codeword rather than a URL.
PLEASE NOTICE there is a # sign in front of the codeword. You need that to denote it is an internal link. Without the # sign, the browser looks for something outside the page named after your codeword.
Your "codeword" can be just about anything you want. I try my best to keep it short and make it denote what it is jumping to. There might be a limit to the number of letters you can use--but I haven't found it yet.
The point where the page will jump follows the same general format except you will replace the word HREF with the word NAME.
PLEASE NOTICE there is no # sign in the NAME command.
Note! Where you place the NAME target will appear at the top of the screen browser.
Hope it helps.
window.location.hash = ""
is the possible way I could find.
hash gives the string next to #.
//dont use a, use class
$(document).ready(function(){
$(".mouse").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes
to scroll to the specified area
$('html, body').animate({
scrollTop: $("#section").offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = "";
});
} // End if }); });
One possible workaround is to use a <button> instead of a <a>.
So rather than....
About
<div id="about">Content of this..</div>
...you can change it to
<button href="#about">About</button>
<div id="about">Content of this..</div>
This way the anchor link will not affect the URL.
For me, only inserting "return false;" solved this issue.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" async></script>
<script>
jQuery(document).ready(function($) {
$('a[href^=#]:not(a[href=#])').click(function() {
$('html, body').animate({scrollTop: $(this.hash).offset().top}, 1300, 'easeInOutExpo');
return false;
});
});
</script>
(This applies to all anchor links on the page.)
I tried to monitor window.location.hash using a MutationObserver, but that doesn't work, see How to use (or is it possible) MutationObserver to monitor window.location.pathname change?
So now I'm using the window.onpopstate() eventListener:
var flag_onpopstate=false; // use this global flag to prevent recursion
window.onpopstate = () => {
if (flag_onpopstate) return;
flag_onpopstate = true;
window.location.hash = "";
flag_onpopstate = false;
}
A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document.
I am trying to create a custom share link so on click it will share the current URL.
I understand this
<a href="http://twitter.com/share?text=An%20Awesome%20Link&url=http://www.google.com">
Share This on Twitter</a>
But is there any way to make it dynamic, so it will grab the URL of the page the user is on and share that, rather than a hard coded link.
Thanks
In Javascript you can use :
document.URL
It gives you the current url
https://developer.mozilla.org/en-US/docs/DOM/document.URL
and
document.title
for getting the title of this page
https://developer.mozilla.org/en-US/docs/DOM/document.title
with jQuery or javascript you can set the href attribute
http://docs.jquery.com/Attributes/attr
https://developer.mozilla.org/en-US/docs/DOM/stylesheet/href
Example:
$('a').on('click', function() {
$(this).attr('href',
'http://twitter.com/share?text='+document.title+'&url=' + document.URL);
});
Another way:
https://dev.twitter.com/docs/tweet-button
With jQuery:
$('a').on('click', function() {
document.location = 'http://twitter.com/share?text=' + document.title + '&url=' + window.location.href;
});
Use this
<a data-count='horizontal' expr:href='data:post.canonicalUrl' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on twitter</a>
Putting expr:href='data:post.canonicalUrl' does the trick.
nonetheless,twiiter gives you an option while generating buttons
(source: ctrlv.in)
How can I prevent the page from "jumping up" each time I click a link? E.g I have a link somewhere in the middle of the page and when I click it the page jumps up to the top.
Is the anchor href="#"? You can set it to href="javascript:void(0);" instead.
If you are going to a prevent default please use this one instead:
event.preventDefault ? event.preventDefault() : event.returnValue = false;
Let's presume that this is your HTML for the link:
Some link goes somewhere...
If you're using jQuery, try like this:
$(document).ready(function() {
$('a#some_id').click(function(e) {
e.preventDefault();
return false;
});
});
Demo on: http://jsfiddle.net/V7thw/
If you're not on jQuery drugs, try with this pure DOM JavaScript:
window.onload = function() {
if(document.readyState === 'complete') {
document.getElementById('some_id').onclick = function(e) {
e.preventDefault();
return false;
};
}
};
It will jump to the top if you set the link href property to # since it is looking for an anchor tag. Just leave off the href property and it won't go anywhere but it also won't look like a link anymore (and make sure to handle the click even in javascript or else it really won't be of much use).
The other option is to handle the click in javascript and inside your event handler, cancel the default action and return false.
e.preventDefault();
return false;
How can I make a link a href="#" does not show # in URL when clicked and does not scroll up the page?
I have seen it in http://www.offroadstudios.com/creative-agency
But could not learn how they did it.
Left menu contains a href="#" but it behaves in the way I am asking.
Looking at that site it would appear they are using jQuery to change the visible content. To prevent a # from appearing in your browser bar, you can preventDefault:
$("a.myLinkClass").click(function(e){
e.preventDefault();
//do something..
});
See Demo: http://jsfiddle.net/SJuwL/show
In topic author link, they used this:
jQuery(document).ready(function() {
jQuery('.product-selector').each(function(i, element) {
jQuery('.product-selector.product-' + i).click(function() {
jQuery('a#products-top').focus();
if (producttool == false) {
producttool = true;
}
// Return false so that the page doesn't switch.
return false;
});
});
});
So, the answer on your question, is to return false; in onclick event.
Demo here: http://jsfiddle.net/FSou1/K3p2W/
$('a[href="#"]').click(function(event){
event.preventDefault();
});
Attack a click handler to the link and prevent the default action
$('a').click(function(){return false});
http://jsfiddle.net/MjyzK/show/
To link-jump to a position in the HTML file it is possible to use a named anchor tag.
<a name="here"></a>
LINK <!-- jumps to the position "here" -->
I have a button that is accessed by a keyboard shortcut but the users have to press ALT+Z. Is there anyway to let the users access the button by simply pressing Z (or some other key) without having to press ALT?
Many thanks,
<input style="display:none;" id='stopButton1' type="button" value="Z" onclick="stop('z')" accesskey="z" />
No that is not possible in pure HTML.
JavaScript is needed: Use the keypress event to detect specific character codes, and call some function.
We can use jquery 2.1.3 plugin and keypress with ASCII value
JS:
$(document).keypress(function (e) {
if (e.which == 72 || e.which==104) {
window.location.replace("http://soluvations.in");
}
});
HTML:
<p>Press H/h to go to Home Page</p>
Here is
JSFIDDLE link
I landed on this page looking for a quick way to make accesskey operate without the modifier (alt) key.
If anyone else is looking for the same, I have added this to my page:
$(document).on('keydown', function(e) {
var link = $("a[accesskey=" + e.key + "]");
if (link.length) {
window.location = link.attr('href');
}
});
This will capture keypresses, and if there is a link with that accesskey set, it will redirect to its href.