- Joined
- Aug 21, 2023
- Messages
- 40
- Reaction score
- 0
Hello everyone.
I'm stuck with this code. It should show a drop shadow of the h1 element but it doesn't.
This is in short the html:
and the script:
if anybody knows how to fix this let me hear.
I'm stuck with this code. It should show a drop shadow of the h1 element but it doesn't.
This is in short the html:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Developing Plugins</title>
<link rel="stylesheet" type="text/css" href="ui-themes/jquery-ui.custom/jquery-ui.theme.css">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="node_modules/jquery-ui-dist/jquery-ui.css" />
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/jquery-ui-dist/jquery-ui.js"></script>
</head>
<body>
<div id="container">
<h1>Inventory</h1>
</div>
</body>
</html>
JavaScript:
(($) => {
$.fn.shadow = function() {
return this.each((i, element) => {
const $originalElement = $(element);
for (let i = 0; i < 5; i++) {
$originalElement
.clone()
.css({
position: 'absolute',
left: $originalElement.offset().left + i,
top: $originalElement.offset().top + i,
margin: 0,
zIndex: -1,
opacity: 0.1
})
.appendTo('body');
}
});
};
});
$(() => {
$('h1').shadow({
copyOffset: index => ({
x: -index,
y: -2 * index
})
});
});