There is a javascript and jquery for which I need your help:
$(document).ready(function ()
{
$( '.website' ).popover(
{
'trigger' : 'click',
'placement' : 'right'
});
});
HTML:
<a href="javascript:void(0)" data-content="www.google.com" class="website" >
Google Website
</a>
When I click on the "Google Website", it displays "www.google.com". But what I want is, when I click on "www.google.com", this URL show open in a new tab also.
What if there is 2 different website like "google.com"; and "yahoo.com"; in the same data-content, so that when clicked on anyone, it should redirect to respective page
How do I do it?
I've made some changes in the code, to keep more than on one link in a data-content, you can try it:-
<a href="javascript:void(0)" data-content="http://www.google.com" class="website" >
Google Website
</a>
<a href="javascript:void(0)" data-content='http://www.google.com,http://www.yahoo.com' class="website" >
Websites
</a>
And change your javascript like this:-
$('.website').click(function(e){
e.preventDefault();
var dataContents = $(e.target).attr('data-content').split(",");
for(var i=0; i<dataContents.length;i++){
window.open(dataContents[i], '_blank');
}
})
And if popup is blocked in your browser, you've to unblock that.
I'm trying to open the second window also in a tab rather than in a new window.
Try this:-
$('.website').click(function(e){
e.preventDefault();
window.open($(e.target).attr('data-content'), '_blank')
})
Also make some change in the html:-
<a href="javascript:void(0)" data-content="http://www.google.com" class="website" >
Google Website
</a>
You can also add another data-content in the html, and then also it'll work fine.
<a href="javascript:void(0)" data-content="www.yahoo.com" class="website" >
Yahoo Website
</a>
Fix your data-content attribute to include http://, otherwise it will open relative to the current url:
<a href data-content="http://www.google.com" class="website">
Google Website
</a>
and keep user Indra's code:
$('.website').click(function(e){
e.preventDefault();
window.open($(e.target).attr('data-content'), '_blank');
});
JSFiddle Example
http://jsfiddle.net/BM7Tc/
Related
I want to stop href to a div on the same page i tried this but not working for the same page but is working for other page.
<a href="#tab2" data-toggle="tab" aria-expanded="false" class="surveydata">
This is my function
$("a.surveydata").click(function(event) {
event.preventDefault();
});
But always go to my div with id tab2
You could try to remove the href attribute from the tag when the page load, like this:
$('a.surveydata').first().removeAttr('href');
try this:
$("a").click(function(e){
e.preventDefault();
})
I want to add click for tags <a> and at the same time add attribute "active" for the current <a>;
I had done it like this, but it doesn't work:
HTML:
<div class="leftFocus">
<a class="leftFocusItem active" href="/" ><i class="fa fa-fire mr5 text-red fa-fw"></i>今日动态</a>
<a class="leftFocusItem" href="/recommend"><i class="fa fa-user-plus mr5 text-violet fa-fw"></i>您的关注</a>
<a class="leftFocusItem" href="/activity" ><i class="fa fa-gamepad mr5 text-blove fa-fw"></i>热门活动</a>
<a class="leftFocusItem" href="/rank" ><i class="fa fa-trophy mr5 text-yellow fa-fw"></i>排行榜</a>
</div>
JS:
$(document).ready(function(){
"use strict";
$('.leftFocus a').on('click', function(){
$(this).addClass('active').siblings('.leftFocusItem').removeClass('active');
});
});
How should to write the right js for this problem?
Your logic is fine but you will lose what has been selected as soon as the browser loads a new page.
You could add preventDefault() to the code to stop the browser from following the link, but then the links won't work ;)
$(document).ready(function(){
"use strict";
$('.leftFocus a').on('click', function(e){
// link will have correct class but no longer will navigate
e.preventDefault();
$(this).addClass('active').siblings('.leftFocusItem').removeClass('active');
});
});
It seems like you should instead be checking to see which link is the current path and setting the class on that, like so:
"use strict";
$(document).ready(function(){
document.querySelectorAll('.leftFocus a').forEach(function (link) {
if (link.href === window.location.href) {
link.classList.add('active');
}
});
});
Clicking a link causes the browser to leave the current page and load a new one.
Any DOM modifications you make to the current page will be lost.
You need to add the class in the new page. Ideally, you would do this using server-side code but you could use client-side JavaScript by comparing location.href to the href property of each link in the menu.
I am working on a site which opens a href link on a site when the form is submitted on contact form-7. I have a question: It is opening one link. But I want to open two links simultaneously when the form is sent. I dont know how to achieve this.
Please help
document.addEventListener('wpcf7mailsent', function(event) {
location = document.getElementById("link").getAttribute("href");
}, false);
document.addEventListener('wpcf7mailsent', function(event) {
location = document.getElementById("link2").getAttribute("href");
}, false);
<a href="http://www.annualpm.com/wp-content/uploads/Fabius-GS-User-Manual.pdf" target="_blank" id="link">
<p><img style="height:40px;" src="http://www.annualpm.com/wp-content/uploads/Hopstarter-Software-Adobe-Acrobat-Standard.ico">Fabius GS User Manual</p>
</a>
<a href="http://www.annualpm.com/wp-content/uploads/FabiusGSSpecSheet.pdf" target="_blank" id="link2">
<p><img style="height:40px;" src="http://www.annualpm.com/wp-content/uploads/Hopstarter-Software-Adobe-Acrobat-Standard.ico">Fabius GS SpecSheet</p>
</a>
Since 'location' redirects the current window, you can only do this once. Try using 'open' instead. Note: this will open the link in a new tab.
See: https://www.w3schools.com/jsref/met_win_open.asp
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.open(document.getElementById("link").getAttribute("href"));
setTimeout(function(){
window.open(document.getElementById("link2").getAttribute("href"));
},500);
}, false );
</script>
the setTimeout function prevents the browser to flag the second link as a popup (in that case the second window will be blocked) :)
I have this JS and HTML Code:
<div id="EditPage" class="EditPagePopup">
<div class="EditPagePopupWrapper">
<iframe id="EditPageFrame" width="100%" height="75%" src=""></iframe>
<div id="JQueryPopupRight"><a id="JQueryRefreshIframe">↻</a> <a id="JQueryClose">×</a></div>
</div>
</div>
$(document).ready(function(){
$("a#MiniPopupWindow").click(function (e) {
e.preventDefault();
//On click, open the page (<a value> value) in the above iframe/popup window
$("#EditPageFrame").attr("src", $(this).attr("value"));
$("a").removeClass("active");
$(this).addClass("active");
JQueryPopup('#EditPage');
});
$("a#JQueryRefreshIframe").click(function (e) {
document.getElementById('EditPageFrame').contentWindow.location.reload(true);
});
});
then i have a href links like:
<a id="MiniPopupWindow" value="http://www.google.co.uk/">test</a>
this opens a popup div with an iframe in, and making the SRC of the iframe the value of the a href item
I have a function on another page using javascript:
function VoIP_Portal() {
window.location = "/voip_portal";
}
how can i use a function to open the popup window with an SRC in the iframe?
<a id="MiniPopupWindow" href="http://www.google.co.uk/">test</a> ??
window.location = "/voip_portal";
nedd a href
window.location.href = "/voip_portal";
You can use a cookie to achieve it. In case your request can be handled on the server side it will be easier, you can send the required parameters to server ans serve your page from there.
In case you want to solve it with just JavaScript then you can look into this solution. Passing values from one page to another in JavaScript
Regards,
HBK
I write following code`
Holiday
<script>
a.popup.click(function(event)
{
event.preventDefault();
window.open($(this).attr('href'));
});
</script>
It'll open b.html in a new window, but opens in the same, why?
I include JQuery like this`
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
Which is the latest version? Can it be a reason?
a.popup.click will throw an error because a is not defined.
You are trying to use the jQuery click method, so you need to create a jQuery object that references the element you are trying to select.
jQuery("a.popup").click(your_function)
You can achieve opening in a different tab functionality in your case by simply specifying target="_blank" for your anchor tag as
<a href="b.html" target="_blank" class="popup" >
Holiday
</a>
You please try using the following code, it works, and you can choose your title and set different parameters that are suitable for you:
$(document).ready(function(event) {
$('a.popup').on('click', function(event) {
var params = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
event.preventDefault();
window.open($(this).attr('href'), "Title", params);
});
});
Just change this part
<a href="b.html" target="_blank" class="popup" >
jsFiddle