I have the below script
$('#copyright, #credit, #doom a').each(function () {
if ($(this).css('font-size') != '15px') {
document.location.href = "http://www.example.com";
}
});
It checks all these IDs' CSS properties for font-size 15px; if it's not 15px then the page will be redirect to example.com.
I want to know how can I add multiple css properties in that script. I want to include position:relative;height:auto;background:#000;.
It may look like this: (this is only example not the working script )
$('#copyright, #credit, #doom a').each(function () {
if
position:relative;height:auto;background:#000
{ do nothing }
else
{
document.location.href = "http://www.example.com";
}
});
Perhaps something like this:
For the sake of modularity and clarity you can separate this process into its own function:
function valid(element){
return (element.css('font-size') != '15px' &&
(element.css('position') != 'relative' &&
(element.css('height') != 'auto' &&
(element.css('background') != '#000');
}
And then use it in your code:
if (valid($(this)){
document.location.href = "http://www.example.com";
}
Related
I'm adding an background image for third party links with filter function like this
$("a").filter(function () {
var ignoreLink =
this.hostname == location.hostname // disregard same domain
|| this.href.match(/^(mailto|tel|javascript)\:/)
return !ignoreLink;
}).addClass("externalanchor").attr("target", "_blank");
the above code works fine now i have a requirement saying that some of the links should be internal ex:
<p>Email URL</p>
<p>Google</p>
<p>Google</p>
<p>Google</p>
my question is How to add a class for this links separate with out a dom change only with jquery.
You can use attribute contains selector
$("a[href*='google.com'], a[href*='w3schools.com'], a[href*='codeacademy.com']").addClass('no-external');
Maybe something like this works for you?:
https://jsfiddle.net/khkmmjjn/1/
Code:
$("a").each(function(){
if( $(this).attr("href").indexOf("https://jsfiddle.net") == 0 ||
$(this).attr("href").indexOf("jsfiddle.net") == 0 )
{
$(this).addClass("local");
}
else if( $(this).attr("href").indexOf("mailto:") == 0 ||
$(this).attr("href").indexOf("tel:") == 0 )
{
$(this).addClass("other");
}
else
{
$(this).addClass("external");
}
});
I have a function in my code that I need to modify links in my page, it looks something like this:
$('a').each(function(){
// code here related to HREF attr
});
$('form').each(function(){
// Code relate to the TARGET attr
});
I need to apply this function on all the links and targets of forms pointing to some specific domains. Let's say I have a list like this one: www.example.com,www.domain.com,www.anotherdomain.com
How can I modify the selector in a way it could apply it only to links and form pionting to the domains in the list?
You can use .filter:
var $exampleComLinks = $('a').filter(function() {
return this.href.indexOf('https://example.com') == 0
|| this.href.indexOf('https://example2.com') == 0
|| this.href.indexOf('https://example3.com') == 0;
});
Or simple if statement:
$('a').each(function() {
if (this.href.indexOf('https://example.com') == 0
|| this.href.indexOf('https://example2.com') == 0
|| this.href.indexOf('https://example3.com') == 0) {
console.log('do something this $(this)');
}
});
Using #Praveen Kumar's domainList approach:
var domainsList = ["www.example.com", "www.domain.com", "www.anotherdomain.com"];
$('a').each(function () {
if (domainsList.indexOf($(this).attr("href").replace(/https?:\/\/([^\/]*).*/gi, "$1")) > -1)
// Do it.
});
$('form').each(function () {
// Code relate to the TARGET attr
if (domainsList.indexOf($(this).attr("href").replace(/https?:\/\/([^\/]*).*/gi, "$1")) > -1)
// Do it.
});
If the targets are site url I suggest to add http:// or https:// and then (elsewhere you have to remove http:// from attr("target") or href when comparing.):
var domains="http://www.example.com,http://www.domain.com,http://www.anotherdomain.com";
$('a').each(function(){
if (domains.indexOf($(this).attr("href")) > -1)
});
$('form').each(function(){
if (domains.indexOf($(this).attr("target")) > -1)
});
You can use new RegExp() with parameter array list joined with separator "|", RegExp.prototype.test()
var list = ["www.example.com","www.domain.com","www.anotherdomain.com"];
$("a, form").each(function(i, el) {
if (new RegExp(list.join("|")).test(this.href || this.target)) {
// do stuff
}
})
jsfiddle https://jsfiddle.net/xkjpxd6L/
I'm looking for a way to rewrite URL of the location when the user want's to change page. So, let's say you have something like this:
<body>
<a href="http://example.com" />
</body>
Is there a way I can catch URL changing moment, and actually modify that URL before location is changed, for example I would like to change href into relative link like \http://example.com and redirect page actually there.
If you just want to trap the link and then modify it then yes, that's quite simple...
$("a").on("click", function(e) {
e.preventDefault(); // stops the link doing its default thing
window.location.href = "something/" + $(this).attr("href");
});
You obviously need to modify the line that changes the location, so that it modifies the href value however you need. I'd also recommend giving the links a class and selecting them with that, as the above code will affect every link on the page.
Finally, this will need to run after the DOM is loaded, so either wrap it in a document.ready handler of your choice, or put it in a script at the bottom of the body.
Demo
You can work from here. Also you will need urlrewrite in htaccess for this to work properly.
$(function () {
$('.buttonn').on('click', function (e) {
var seperator = (window.location.href.indexOf("?") === -1) ? "?" : "&";
if (window.location.href.indexOf("s1") === -1 && window.location.href.indexOf("s2") != -1) {
window.location.href = window.location.href.replace(/&?s2=([^&]$|[^&]*)/i, "&s1=s1");
} else if (window.location.href.indexOf("s1") != -1) {
window.location.href = window.location.href.replace(/&?s1=([^&]$|[^&]*)/i, "&s1=s1");
} else {
window.location.href = window.location.href + seperator + "s1=s1";
}
});
});
$(function () {
$('.buttono').on('click', function (e) {
var seperator = (window.location.href.indexOf("?") === -1) ? "?" : "&";
if (window.location.href.indexOf("s2") === -1 && window.location.href.indexOf("s1") != -1) {
window.location.href = window.location.href.replace(/&?s1=([^&]$|[^&]*)/i, "&s2=s2");
} else if (window.location.href.indexOf("s2") != -1) {
window.location.href = window.location.href.replace(/&?s2=([^&]$|[^&]*)/i, "&s2=s2");
} else {
window.location.href = window.location.href + seperator + "s2=s2";
}
});
});
I am looking for a way to set it up so that when an external link is clicked it will warn people that they are leaving the site. Preferably, it would darken the screen and display a message in the middle of the screen in a box with the option to click OK or Cancel.
I tried to use this code:
$("a.external").click(function () {
alert("You are about to proceed to an external website. The Great Western Market has no control over the content of this site. Click OK to proceed.");
});
and give each link a class of external but it doesn't seem to work. I don't want to use this because it means that the client will have to remember to add the class I would prefer something more automatic.
I also tried to use this code to do so but to no avail:
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
})
.click(function () {
var x=window.confirm('You are about to proceed to an external website. The Great Western Market has no control over the content of this site. Click OK to proceed.');
var val = false;
if (x)
val = true;
else
val = false;
return val;
});
I am using WordPress 3.8.1.
Thanks in advance for any help you can give.
Your filter logic should be correct, Try using the confirm function, and using jQuery instead of $.
jQuery('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).click(function(e) {
if(!confirm("You are about to proceed to an external website."))
{
// if user clicks 'no' then dont proceed to link.
e.preventDefault();
};
});
I tried this out in dev tools on your site and it seems to work correctly if you use jQuery. I think you may have some plugin that is causing conflicts with $.
JSFiddle Demo
Try using confirm instead of alert since that will pause and wait for user input. You'll then need function(e){ e.preventDefault(); } to prevent the default link actions.
To identify just external links you might do something like this:
var ignoreClick = false;
$(document).ready( function(){
$('input[type="submit"], input[type="image"], input[type="button"], button').click(function(e) {
ignoreClick = true;
});
$(document).click(function(e) {
if($(e.target).is('a'))
checkLink(e);
});
$('a').click(function(e) {
checkLink(e);
return true;
});
checkLink = function(e){
// bubble click up to anchor tag
tempTarget = e.target;
while (!$(tempTarget).is('a') && !!tempTarget.parentElement) {
tempTarget = tempTarget.parentElement;
}
if ($(tempTarget).is('a')){
if(!!tempTarget && $(tempTarget).is('a') &&
(tempTarget.hostname == "" || tempTarget.hostname == "#" || tempTarget.hostname == location.hostname)){
ignoreClick = true;
}
}
}
});
and to catch people with a message you might use beforeunload and the confirm option
$(window).bind("beforeunload", function (e) {
if (!ignoreClick){
if(!confirm("Leaving website message")) {
e.preventDefault();
}
}
});
It worked pretty well to me. I just removed unnecesary variables, but original script worked fine.
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
})
.click(function () {
return window.confirm('You are about to proceed to an external website. The Great Western Market has no control over the content of this site. Click OK to proceed.');
});
http://jsfiddle.net/3dkAN/1/
EDIT
Following #user1308743's line, seems that in cgmp.framework.min.js is summoning the jQuery.noConflict() mode, that unbinds the $() function for jQuery. So please use jQuery() for any jQuery implementation
I came up with some jquery to come from an external page and to show the hidden div (#section2) on another page. The problem is that I can't seem to get #section3 to work the same as #section2. Here's the code.
jQuery(document).ready(function() {
var hash = window.location.hash.substring(0);
jQuery(hash).css({
"display": "block"
});
if (hash != '#section2') {
jQuery('#section1').css({
"display": "block"
});
}
else {
jQuery('#section1').css({
"display": "none"
});
}
});
I tried else if
if(hash != '#section3'){
jQuery('#section1').css({"display":"block"});
}
I can only seem to get either #section2 or #section3 to appear with section1 hidden when their respective urls with the hash are entered. I can't seem to get them both of them to function correctly at the same time. Basically I need some thing that will produce
if(hash != '#section2' or '#section3'). I'm learning so any help would be much appreciated.
jQuery(document).ready(function() {
var hash = window.location.hash.substring(0);
jQuery(hash).css({
"display": "block"
});
if (hash != '#section2' && hash != '#section3') {
jQuery('#section1').css({
"display": "block"
});
}
else {
jQuery('#section1').css({
"display": "none"
});
}
});
Also, look into using the jQuery .show() and .hide() instead of those css changes (same effect, but less wordy, and it remembers the previous state).
Try;
$(document).ready(function(){
var sectionhash = window.location.hash.substring(0);
$(hash).css({"display":"block"});
if(hash != '#section2' || hash != '#section3'){
$('#section1').css({"display":"block"});
}else {
$('#section1').css({"display":"none"});
}
});
OR
$(document).ready(function(){
var sectionhash = window.location.hash.substring(0);
$(hash).css({"display":"block"});
if(hash != '#section2'){
$('#section1').css({"display":"block"});
}else if(hash != '#section3'){
$('#section1').css({"display":"block"});
}else {
$('#section1').css({"display":"none"});
}
});
(function($) {
var hash = window.location.hash;
$(hash).css('display', 'block');
$("#section1").toggle(!(hash=='#section2'||hash=='#section3'));
})(jQuery);