Modernizr probleem, functie wordt uitgevoerd op alle browsers
Zijn er hier mensen die ervaring hebben met modernizr?
Ik heb een fallback moeten maken zodat object-fit ook werkt (maar dan op een andere manier) op IE. Het probleem is alleen dat hij deze functie op alle browsers toepast, dus ook op browsers die wel gewoon netjes object-fit ondersteunen.
Wat doe ik verkeerd?
Mijn code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if ( ! Modernizr.objectfit ) {
console.log('object fit wordt niet gesupport');
tpj('.featuredpost').each(function () {
var $container = tpj(this),
imgUrl = $container.find('.img-responsive').prop('src');
if (imgUrl) {
$container
.css('backgroundImage', 'url(' + imgUrl + ')')
.addClass('compat-object-fit');
}
});
tpj('.big-post').each(function () {
var $container = tpj(this),
imgUrl = $container.find('.img-responsive').prop('src');
if (imgUrl) {
$container
.css('backgroundImage', 'url(' + imgUrl + ')')
.addClass('compat-object-fit');
}
});
}else{
console.log('object fit wordt gesupport');
}
console.log('object fit wordt niet gesupport');
tpj('.featuredpost').each(function () {
var $container = tpj(this),
imgUrl = $container.find('.img-responsive').prop('src');
if (imgUrl) {
$container
.css('backgroundImage', 'url(' + imgUrl + ')')
.addClass('compat-object-fit');
}
});
tpj('.big-post').each(function () {
var $container = tpj(this),
imgUrl = $container.find('.img-responsive').prop('src');
if (imgUrl) {
$container
.css('backgroundImage', 'url(' + imgUrl + ')')
.addClass('compat-object-fit');
}
});
}else{
console.log('object fit wordt gesupport');
}
Op alle browsers lees ik nu in de console: 'object fit wordt niet gesupport'. Terwijl dat alleen waar is voor IE.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script type="text/javascript">
console.log(Modernizr.testAllProps('objectFit','cover'));
</script>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script type="text/javascript">
console.log(Modernizr.testAllProps('objectFit','cover'));
</script>
</body>
</html>