I have this script which fades in/out the page
(function($) {
$(window).load(function() {
$('#preloader').fadeOut();
$('#wrap').fadeIn();
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#wrap").fadeOut(redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
})(jQuery);
But I have some external links which I don't want to effect so I don't want to target these.
I have found how to test for internal links using this script
var siteURL = "http://" + top.location.host.toString();
var internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
But I'm really stuck on how to combine the two! Any ideas please?
I think you use the regex,
Try this,
var patt = new RegExp('(\/|..\/|.\/|#|https:\/\/www.google.co.in)');
var $internalLinks = [];
$('a').each(function(index){
if(patt.test($(this).attr('href'))){
$(this).addClass('fadeclass');
};
})
$('input').click(function(){
$('.fadeclass').fadeOut('slow')
});
Demo JsFiddle
From the above code, I used the regular expression for match the href, when I mentioned external links found then I added the fadeclass. You can use fadeclass whatever.
Related
I wrote the toggle-accordion. It works good if links and accordion there are on one page, url links works. But how make open my toggle-accordion to url from another page?
https://codepen.io/malinosky/pen/wxKzEo
$(function(){
var accordionFaqHead = $('.i-accordionFaq-head');
accordionFaqHead.on('click', function() {
$(this).next().slideToggle();
});
function accHash() {
var hash = $(this).attr('href');
if (hash) {
var accordionItem = $(hash);
if (accordionItem.length) {
accordionItem.find('.i-accordionFaq-body').show();
}
}
}
$('.i-link-hash').on('click', accHash);
});
You can check if there is hash in the url and call your function with it:
JS:
if (window.location.hash) {
var $hashedElement = $(window.location.hash);
accHash.apply($hashedElement);
}
Use apply to call your function while setting this to be equal to $hashedElement
To add hash while going from page to page you need to add it to your anchor tag first:
HTML:
I have this code in my header.php :
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("a").click(function(){
jQuery("a").attr("target","_blank");
url=jQuery(this).attr('href');
jQuery(this).attr('href','/te3/out.php?l=click&u=' + escape(url));
});
});
</script>
And right now it opens all links in new browser tabs. What I would like is to open only the posts. The permalink looks like mywebsite.com/this-is-the post/ if this helps in any way.
Please help
Thanks
You can filter links with jQuery's .filter() method. Just customize the regular expression to fit your actual needs
jQuery(document).ready(function() {
jQuery("a")
.filter(function() {
var href = jQuery(this).attr('href');
// return true if href exists and matches the regular expression
return href && href.match(/mywebsite\.com\/[\w-]+/);
})
.click(function(){
jQuery("a").attr("target","_blank");
url = jQuery(this).attr('href');
jQuery(this).attr('href','/te3/out.php?l=click&u=' + escape(url));
});
});
Update
If you want the opposite behavior, you can use .not()
jQuery(document).ready(function() {
jQuery("a")
.not(function() {
var href = jQuery(this).attr('href') || '';
// return true if href exists and matches the regular expression
return href.match(/mywebsite\.com\/[\w-]+/);
})
.click(function(){
jQuery("a").attr("target","_blank");
url = jQuery(this).attr('href');
jQuery(this).attr('href','/te3/out.php?l=click&u=' + escape(url));
});
});
I am trying to pass url parameters through to the next pages by appending them to all the links on the page. The code I have works fine for this purpose.
I am encountering trouble when having anchor links on the page, as it puts the parameters after the URL and after the anchor as well, preventing the link from going to the anchor point.
Ex. website.com/?param1=test/#anchor?param1=test
Here is my code:
<script type="text/javascript">
jQuery(document).ready( function($) {
var params = window.location.search.replace(/\+/g,'%20');
var button = $('a[href]').each( function(i) {
this.href = this.href + params;
});
});
</script>
Any help would be greatly appreciated!
There you go:
var button = $('a[href]').each( function(i) {
var clearUrl = this.href.split("#");
clearUrl[0] += params;
this.href = clearUrl.join("#");
});
I've got 3 pop-ups on my page. They function using JQuery and the following JS code:
$(document).ready(function() {
$('#open_thanks').click(function(e) {
e.preventDefault();
var tPop = $('.thanks_popup');
tPop.toggle();
});
$('#open_reference').click(function(e) {
e.preventDefault();
var rPop = $('.leave_reference_popup');
rPop.toggle();
});
$('#facebook').click(function(e) {
e.preventDefault();
var fPop = $('.facebook_popup');
fPop.toggle();
});
$('.thanks_popup').append('<div class="close"><div class="inner"><button></button></div></div>');
$('.leave_reference_popup').append('<div class="close"><div class="inner-2"><button></button></div></div>');
$('.facebook_popup').append('<div class="close"><div class="inner-3"><button></button></div></div>');
$('div.inner button').click(function() {
var tPop = $('.thanks_popup');
tPop.toggle();
});
$('div.inner-2 button').click(function() {
var rPop = $('.leave_reference_popup');
rPop.toggle();
});
$('div.inner-3 button').click(function() {
var fPop = $('.facebook_popup');
fPop.toggle();
});
});
My html is quite simple:
Thanks Popup
Open Reference
Open Facebook Popup
I can't figure out how to use hashtag URL navigation to have a pop-up default as open though? Basically, I want to be able to link to index.html#open_thanks and have that pop-up default as open/up.
Thanks.
On page load, parse out any hash values in the url, and then do x.
How to get #hash value in a URL in JS
When i click a link i need to send post via ajax. The problem is that the request is dropped because of open a link.
jQuery('#pagination a').click(function(){
jQuery.post('index.php?option=com_component',
{checked_sites_for_session: jQuery('.selected-site input[type="checkbox"]').map(function () {return this.value;}).get()}
).success(function(){window.location = jQuery(this).attr('href')});
console.log(jQuery(this).attr('href'));
return false;
});
But again the problems is (thanks to joomla) in url - its like /~user/joomla/index.php/view-sites?view=sites&page=2 - as you see it starts from slash, but the real link is http://localhost/~user/joomla/index.php/view-sites?view=sites&page=2, but in the source i have <a href="index.php?option=com_component&view=sites&.'.$option.'page='.$left.'"//....`
So i need some "multipurpose domain parsing solution" or just stop joomla changing my url's.
Using the native element.href will get you the entire href including the domain, and not just the attributes value, also there's a scope issue with the this keyword being used inside the $,post function :
$('#pagination a').on('click', function(e){
e.preventDefault();
var self = this;
$.post('index.php?option=com_component',
{checked_sites_for_session: $('.selected-site input[type="checkbox"]').map(function () {
return this.value;
}).get();
}
).success(function(){
window.location = self.href;
});
});
From the links you've posted they don't look to be the same at all, so you might have to figure something out for that, as some CMS solutions use rewriting etc.
problem with this
jQuery('#pagination a').click(function(e){
e.preventDefault();
var me=this;
jQuery.post('index.php?option=com_component',
{checked_sites_for_session: jQuery('.selected-site input[type="checkbox"]').map(function () {return this.value;}).get()}
).success(function(){window.location = jQuery(this).attr('href')});
console.log(jQuery(me).attr('href'));
return false;
});