I can't figure out how to open a new tab using JavaScript. I went through related questions but nothing worked for me. I want the browser to open a new tab when someone clicks on the link (example.com) below. What code should I add and where should I place that code?
My html code is here -
<section id="work-grid" class="site-inner">
<div class="work-item" data-groups='["all", "webdesign"]' data-url="http://example.com">
<figure class="image-container"><img src="images/work/web-one.jpg" /></figure>
</div>
Thank you in advance.
Use the attribute newtab on the a element.
Code for driver for newtab a attribute:
(()=>{document.getElementsByTagName("a").map((e)=>{if(e.newtab==="newtab"){e.target="_blank";e.rel="noopener noreferrer";}return e;});})();
Beautified version without an anonymous function:
document.getElementsByTagName
(
"a"
).map
(
(e) =>
{
if (e.newtab === "newtab") {
e.target = "_blank";
e.rel = "noopener noreferrer";
}
return e;
}
);
You can only put the compressed version on your page due to uncompressed-code checking.
Related
I am working on a form widget on Elementor on WordPress, when the user submits the submit button of the form, it will show a pop-up which is created by elementor. The pop-up actually is a DIV tag including my HTML code which I wrote in an HTML widget into the pop-up, as below, and this DIV will be added by some Elementor function to the body tag of the page dynamically when user presses submit button.
<div id="calenderchooser01" style="min-height:100px;"></div>
<script>
function calenderchooser(){
var calenderhtml="";
var numofunits = document.getElementById("form-field-field_numberunits");
if(numofunits.value>=15){
calenderhtml = "<div class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;'>over 15</div>";
}else if(numofunits.value<15){
calenderhtml = "<div class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;'>less than 15</div>";
}
document.getElementById("calenderchooser01").innerHTML = calenderhtml;
console.log(calenderhtml);
}
document.getElementById("thisisanidcustom").addEventListener("click",
calenderchooser
);
</script>
thisisanidcustom is the id of submit button form. Also, I tested it with assigning showing of this pop-up to a normal button.
In both cases when I press the button it shows error on the Chrome console:
Uncaught TypeError: Cannot set property 'innerHTML' of null
at HTMLAnchorElement.calenderchooser (9a48896437a750ba11b18d8323f96ea7.js:59)
it references this line :
document.getElementById("calenderchooser01").innerHTML = calenderhtml;
and I think it says that the div#calenderchooser01 does not exist.
I think maybe the function call occurs before adding the DIV to the body tag. but I have not access to Elementor default functions to edit them and say after popup occurs call the calenderchooser(). so in this situation how can I call the function calenderchooser() right after popups shows up. I also thought of something like an event listener on DIV existing change state if available but found nothing.
this worked for me using window.setTimeout() method:
<div id="over15" class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;display:none'>over 15</div>
<div id="less15" class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;display:none'>less than 15</div>
<script>
function functionCall(){
setTimeout(calenderchooser, 100);
}
function calenderchooser(){
var numofunits = document.getElementById("form-field-field_numberunits");
if(numofunits.value>=15){
document.getElementById("over15").style.display = "block";
console.log("over15");
}else if(numofunits.value<15){
document.getElementById("less15").style.display = "block";
console.log("less15");
}
}
document.getElementById("thisisanidcustom").addEventListener("click", functionCall
);
</script>
I'm building a simple webpage.
I wanna select the text inside a <div> and then open a new tab in the same browser and do a Google search for that text with the click of a button. Right now, I just have the solution to copy to clipboard with a button click. Is there any workaround for this...?
I'm OK with using either Google Chrome or Firefox as it's just for a local project. Not meant for public hosting.
UPDATE : I actually need to copy text which is rendered by other HTML code inside the div. I don't wanna copy the code inside the div also.
For reference, here is a code snippet that I used to make my copy to clipboard function.
JavaScript:
function CopyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
alert("Copied the text. Use Ctrl+V to paste on Google")
}
}
HTML:
<div class="search" id="div1">
<!--Text to search for (here, CEO of Google)-->
<span>CEO of Google</span>
</div>
<button id="button1" class="button" onclick="CopyToClipboard('div1')">Copy question</button>
This code selects just the text inside the div and then copies it. I don't wanna search for the rest of the code....
Try with the code below.
You can find out more information about how to redirect from your page here.
<html>
<body>
<div id="search_this">New text</div>
<button type="button" onclick="myButtonOnClick()">Search!</button>
</body>
<script>
function myButtonOnClick(){
let url = "https://www.google.com/search?q=";
let searchText = document.getElementById("search_this").innerHTML;
debugger;
window.open(url + searchText);
}
</script>
</html>
This code does the job:
function searchMe() {
var stringQuery = document.getElementById('text_div').innerHTML;
var query = "https://www.google.com/search?q=" + stringQuery.split(' ').join('+');
window.open(query);
}
<div id="text_div" onClick="searchMe();">
Kittens
</div>
Note: Does not work here on stackoverflow but I've tested it in a custom html file and it works.
OK I've got a workaround. Hope it helps someone else with the same problem. A special thanks to both #Daan Seuntjens and #Alex Dragnea for sharing answers as I have used their basic method.
Here, I've selected the text in the <div> and stored it int the range variable which was used earlier for the copy to clipboard function. And then, I did I used another variable query just like both the answers earlier told to add the text https://www.google.com/search?q= to the beginning of the text. And then, I did window.open(query); to open it in another tab and then do a Google search..
NOTE : This code doesn't run here on Stack Overflow. But, I have tested it externally. It is verified and ready to go...
function search(containerid) {
if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
var query = "https://www.google.com/search?q=" + range;
window.open(query);
}
}
<div class="question" id="div1">
<!--Text to search for (here, CEO of Google)....-->
<span>CEO of Google</span>
</div>
<button class="button" onclick="search('div1')">Search</button>
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.
I'm trying to use Lightbox's title function as a simple way to put PDF download links and website URLs so that people are able to see designs in full detail and actually visit interactive websites they've seen as images. I do it this way:
<a href="projects/img_full/my_project.png" data-lightbox="project1" data-title="<a href='http://example.com/' target='_blank'>Visit site</a>">
<img src="projects/thumbs/my_project.png" alt="Project 1" />
</a>
The link outputs correctly under the Lightbox's image, and target='_blank' remains if I inspect it in my browser. However, the link still opens in the same tab.
Why does this happen? Is there a way to avoid it?
I have the same problem, on my project page I have gallery of places, and in title I have an url to wiki site with description of current place, when I click on the link page opens in the same window, in firebug everything looks fine (with attribute target etc.)
I found something in Lightbox library that I think is responsible for running urls
// Enable anchor clicks in the injected caption html.
// Thanks Nate Wright for the fix. #https://github.com/NateWr
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption')
.html(this.album[this.currentImageIndex].title)
.fadeIn('fast')
.find('a').on('click', function(event){
location.href = $(this).attr('href');
});
}
but I'm not 100% sure that is this, could someone show where I can update code and depened opening links by the "target" attribute?
EDIT:
ok, found solution to this, need to replace code above with this and it works for me, found it on github
https://github.com/lokesh/lightbox2/pull/299/files
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption')
.html(this.album[this.currentImageIndex].title)
.fadeIn('fast')
.find('a').on('click', function (event) {
if ($(this).attr('target') !== undefined) {
window.open($(this).attr('href'), $(this).attr('target'));
} else {
location.href = $(this).attr('href');
}
});
}
I am trying to create chrome extension which will read text inside the particular TAG from the Webpage ...
but not able to read value
I need to pick Text inside the tag definition excluding html tags..
here i want to read the value from the tag "definition"
output:is an overwhelming urge to have of something is often connected with money
suppose web page is like this
<div id="definition">
<div class="section blurb">
<p class="short"><i>Greed</i> is an overwhelming urge to have <i>more</i>
of something
<p class="long"><i>Greed</i> is often connected with money</p>
</div>
</div>
this is what i was trying
popup.html
<script>
var newwin = chrome.extension.getBackgroundPage();
newwin.get();
</script>
background.html
<Script>
function get()
{
var myDivObj = document.getElementById("definition");
if ( myDivObj ) {
alert (myDivObj.innerHTML);
}else{
alert ( "Alien Found" );
}
}
</Script>
I moved my script from the background page to content scrit and it worked like charm..
but was just wondering why dint work in background page..?