I have this code that displays a different image in place of a broken image link. The problem is that the script changes not only "damaged" images, but also images that display without a problem. How can I modify the code below?
$("img").each(function () {
if (
(typeof this.naturalHeight != "undefined" &&
this.naturalHeight == 0 &&
this.naturalWidth == 0) ||
this.readyState == "uninitialized"
) {
$(this).attr(
"src",
"http://some-photo.blabla.png"
);
}
});
I'm taking my first steps in programming.
Modifying the code so that it only fixes broken links, not all of them.
Your code should be executed after the page is fully loaded
$(document).ready(function () {
$("img").each(function () {
if (
(typeof this.naturalHeight != "undefined" &&
this.naturalHeight == 0 &&
this.naturalWidth == 0) ||
this.readyState == "uninitialized"
) {
$(this).attr(
"src",
"http://some-photo.blabla.png"
);
}
});
}
I found a solution, of course with your help. Thank you!
var delayscript = function(){
$(document).ready(function () {
$("img").each(function () {
if (
(typeof this.naturalHeight != "undefined" &&
this.naturalHeight == 0 &&
this.naturalWidth == 0) ||
this.readyState == "uninitialized"
) {
$(this).attr(
"src",
"http://some-photo.blabla.png"
);
}
});
})
};
setTimeout(delayscript, 10000);
Related
How can I write an alternative function for DOMSubtreeModified?
$('html').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
var structure = $(event.target).closest(".form--group");
structure.find(".thevoornaam, .date_of_birth, .stepbirthVal, .livingkid, .right, .limitSelected, .pijlers, .total_pijlers").on("keyup change DOMSubtreeModified", function() {
if (structure.find(".thevoornaam").val().length > 1 && structure.find(".date_of_birth").val().length > 1 && structure.find('.stepbirthVal').html() == "" && structure.find(".livingkid").is(':checked') && structure.find(".right").is(':checked') && structure.find(".limitSelected:checked").val() == "1" && structure.find(".pijlers").val() != null && structure.find(".total_pijlers").val() != null) {
$("#stepbirth").removeClass("disabled");
} else if (structure.find(".thevoornaam").val().length > 1 && structure.find(".date_of_birth").val().length > 1 && structure.find('.stepbirthVal').html() == "" && structure.find(".livingkid").is(':checked') && structure.find(".right").is(':checked') && structure.find(".limitSelected:checked").val() == "0") {
$("#stepbirth").removeClass("disabled");
} else {
$("#stepbirth").addClass("disabled");
}
});
});
This function is working fine but i am getting this message in browser console.
[Violation] Added synchronous DOM mutation listener to a event. Consider using MutationObserver to make the page more responsive.
Can anyone help me with this?
Thanks in advance.
I have two arrays say X and Y. I need to check conditions as below
if ((!x_array && x_array.length == 0) && (!y_array && y_array.length == 0)) {
console.log("======BOTH EMPTY======")
//display something
}
if ((x_array && x_array.length > 0) && (y_array && y_array.length > 0)) {
console.log("======BOTH NOT EMPTY======")
// do something
}
if ((x_array && x_array.length > 0) && (!y_array && y_array.length == 0)) {
console.log("======ONE IS EMPTY AND OTHER IS NOT======")
//do something
}
if ((!x_array && x_array.length == 0) && (y_array && y_array.length > 0)) {
console.log("======ONE IS EMPTY AND OTHER IS NOT======")
//do something
}
else {
//do something here
}
I checked with both OR and AND but nothing is working as needed. Please help
This code can't work. Let me point out the flaws for you.
!x_array && x_array.length == 0
This line can never evaluate to true if x_array is not defined or is null since null and undefined are "falsy" types. Because of that, false && true and false && false are never true. So, the first condition can't execute. A better way to write this would be:
...
if( ( !x_array ) || ( !y_array ) ) {
console.log( 'Either array is either undefined or null' );
}
Then, you can go on to check values by using the length property to see if they are defined but empty.
...
if( ( x_array.length === 0 ) || ( y_array.length === 0 ) ) {
console.log( 'Either array is empty' );
}
You can apply similar logic to find out the next few conditions for your code.
P.S.: It's a general stylistic preference to use camelCase in JavaScript. And try using the === operator when comparing values. The === can be rewritten as:
return ( typeof objA == typeof objB ) && ( objA == objB );
Since == only checks if values are equal and not the types.
The following is true: '2' == 2.
Why not simplify with some refactored code!
var isEmp = (input) => !input || input.length == 0;
And this use this as
if ( isEmp ( x_array ) && isEmp( y_array )
{
console.log( "both empty" );
}
else if ( !isEmp ( x_array ) && !isEmp( y_array )
{
console.log( "both not empty" );
}
else
{
console.log( "One of them is empty other is full" );
}
Or even simpler
var isXEmpty = isEmp( x_Array );
var isYEmpty = isEmp( y_Array );
var log = isXEmpty ? ( isYEmpty ? "Both Empty" : "Only X Empty" ) : ( isYEmpty ? "Only Y Empty" : "Both not Empty" );
Demo
console.log( "1", checkArrays( [], [] ));
console.log( "2", checkArrays( [1], [1] ));
console.log( "3", checkArrays( [1], [] ));
console.log( "4", checkArrays( [], [1] ));
function checkArrays( x_Array, y_Array )
{
var isEmp = (input) => !input || input.length == 0;
var isXEmpty = isEmp(x_Array);
var isYEmpty = isEmp(y_Array);
return isXEmpty ? (isYEmpty ? "Both Empty" : "Only X Empty") : (isYEmpty ? "Only Y Empty" : "Both not Empty");
}
the ! in the some of your conditions is the culprit;
I also merged two of your conditions to avoid repetition.
let x_array = ['1'];
let y_array = ['1'];
if ((x_array && x_array.length == 0) && (y_array && y_array.length == 0)) {
console.log("======BOTH EMPTY======")
//display something
}
if ((x_array && x_array.length > 0) && (y_array && y_array.length > 0)) {
console.log("======BOTH NOT EMPTY======")
// do something
}
if (((x_array && x_array.length > 0) && (y_array && y_array.length == 0)) || ((x_array && x_array.length == 0) && (y_array && y_array.length > 0))) {
console.log("======ONE IS EMPTY AND OTHER IS NOT======")
//do something
}
else {
//do something here
}
In event.js, to judge the same handler, here is code:
return handler
&& (!event.e || handler.e == event.e)
&& (!event.ns || matcher.test(handler.ns))
&& (!fn || zid(handler.fn) === zid(fn))
&& (!selector || handler.sel == selector)
Why use (!fn || zid(handler.fn) === zid(fn)) to (!fn || handler.fn === fn)
Here is the source code of zid
var _zid = 1
function zid(element) {
return element._zid || (element._zid = _zid++)
}
if I have to judge two functions, a === b is enough
why to use zid(a) === zid(b)? Maybe some trap?
I don't know why?
Here is the source code of zepto.js event.js: https://github.com/madrobby/zepto/blob/master/src/event.js
I want a simple function for toggling full screen. Here is what I've written:
function toggleFullScreen() {
var elem = document.documentElement,
request = elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen,
exit = document.exitFullscreen || document.msExitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
if (!document.fullscreenElement && !document.msFullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
request.call(elem);
} else {
exit.call(document);
}
}
Any better or simple solution?
Thanks.
I have to the following function that I would like to modify so that it only binds the click event to all href's that = /ShoppingCart.asp?ProductCode="whatever" (whatever = whatever is in there") but not if it is specifically /ShoppingCart.asp?ProductCode="GFT". It must also check or convert a gft or Gft to upper case to check for those as well. So basically it has to check for any variation of the case of GFT.
If it finds a "GFT" do not bind the click event.
function sacsoftaddtocart() {
if (location.pathname == "/SearchResults.asp" || location.pathname == "/Articles.asp" || location.pathname.indexOf("-s/") != -1 || location.pathname.indexOf("_s/") != -1) {
$("a[href^='/ShoppingCart.asp?ProductCode']").click(function () {
var href = $(this).attr('href');
addToCart3(href);
return false;
});
}
}
You can do it using .toUpperCase() and .filter(), like this:
function sacsoftaddtocart (){
if (location.pathname == "/SearchResults.asp" || location.pathname == "/Articles.asp" || location.pathname.indexOf("-s/") != -1 || location.pathname.indexOf("_s/") != -1) {
$("a[href^='/ShoppingCart.asp?ProductCode']").filter(function() {
return this.href.length - this.href.toUpperCase().indexOf('PRODUCTCODE=GFT') != 15;
}).click(function () {
var href = $(this).attr('href');
addToCart3(href);
return false;
});
}
}
You cant test it in a demo here. The this.href.length - matchPosition == 15 is checking that the ProductCode=GFT is both matched and there's nothing after the "GFT", so a product code like "GFT5" won't match.
using the filter in this post link text
function sacsoftaddtocart() {
if (location.pathname == "/SearchResults.asp" || location.pathname == "/Articles.asp" || location.pathname.indexOf("-s/") != -1 || location.pathname.indexOf("_s/") != -1) {
$("a:regex('href','*/ShoppingCart.asp\?ProductCode=(!?=GFT)*)").click(function () {
var href = $(this).attr('href');
addToCart3(href);
return false;
});
}
}
or if you don't want to use an exrat plugin:
function sacsoftaddtocart() {
if (location.pathname == "/SearchResults.asp" || location.pathname == "/Articles.asp" || location.pathname.indexOf("-s/") != -1 || location.pathname.indexOf("_s/") != -1) {
$("a['href^='/ShoppingCart.asp?ProductCode']")
.filter(function(){ return !/ProductCode=GTF/.test($(this).attr('href')) };
.click(function () {
var href = $(this).attr('href');
addToCart3(href);
return false;
});
}
}
Try them and see what happens ;)