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();
})
Related
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.
If I have this markup:
Click Here for Content 1
Click Here for Content 2
Click Here for Content 3
Click Here for Content 4
And I want to set up my fancybox observer for each of those, but I want the content of the popup set to each link's data-fancybox-content, is there a way to do that in one fell swoop?
You don't need the .each() method but use the regular fancybox initialization script to bind your selectors (or elements) to fancybox, so
<a class="fancybox" href="#" data-content="<p>Content 1</p>"> Click Here for Content 1</a>
<a class="fancybox" href="#" data-content="<p>Content 2</p>"> Click Here for Content 2</a>
<a class="fancybox" href="#" data-content="<p>Content 3</p>"> Click Here for Content 3</a>
<a class="fancybox" href="#" data-content="<p>Content 4</p>"> Click Here for Content 4</a>
Notice that is not a good idea to bind javascript events to global elements (HTML tags) but use specificity (CSS selectors) instead, so we added the class fancybox to the elements we want to bind to fancybox.
Also notice that we only used data-content instead of data-fancybox-content attributes (data-fancybox-{something} is an special attribute that has no value for content)
Then you can set the content dynamically using the beforeLoad callback like :
jQuery(document).ready(function ($) {
$('.fancybox').fancybox({
beforeLoad: function () {
this.content = $(this.element).data("content");
}
});
}); // ready
See JSFIDDLE
PS. you could even set a fancybox gallery by setting a rel or data-fancybox-group attribute to your elements. You wouldn't be able to do that with the .each() method.
Figured it out, here's how I did it:
$('a').each(function() {
$(this).fancybox({
content: $(this).attr('data-fancybox-content'),
});
});
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
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/
I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.
I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo
In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)
$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});
We can use an iframe to display the link in the <a> tag.
Here's a fiddle
Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});