JQuery add shadow error

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:
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>
and the script:
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
    })
  });
});
if anybody knows how to fix this let me hear.
 
Joined
Jul 4, 2023
Messages
478
Reaction score
60
Try like this
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
    })
  });
});

Why not to do this in pure css?
e.g.
CSS:
h1 {
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.1),
    2px 2px 0 rgba(0,0,0,0.1),
    3px 3px 0 rgba(0,0,0,0.1),
    4px 4px 0 rgba(0,0,0,0.1),
    5px 5px 0 rgba(0,0,0,0.1);
}
 
Joined
Aug 21, 2023
Messages
40
Reaction score
0
Try like this
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
    })
  });
});

Why not to do this in pure css?
e.g.
CSS:
h1 {
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.1),
    2px 2px 0 rgba(0,0,0,0.1),
    3px 3px 0 rgba(0,0,0,0.1),
    4px 4px 0 rgba(0,0,0,0.1),
    5px 5px 0 rgba(0,0,0,0.1);
}
thank you . "Why not to do this in pure css?" - I'm currently studying a jQuery book, I know it's easier with css but it should be this way.
 
Joined
Jul 4, 2023
Messages
478
Reaction score
60
I'm currently studying a jQuery book, I know it's easier with css but it should be this way.
Ok. I understand, but inside function you use still css ;)
.css({
position: 'absolute',
left: $originalElement.offset().left + i,
top: $originalElement.offset().top + i,
margin: 0,
zIndex: -1,
opacity: 0.1
})


this code
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
    })
  });
});
generated that result
HTML:
<div id="container">
  <h1>Inventory</h1>
</div>
<h1 style="position: absolute; left: 8px; top: 21.4375px; margin: 0px; z-index: -1; opacity: 0.1;">Inventory</h1>
<h1 style="position: absolute; left: 9px; top: 22.4375px; margin: 0px; z-index: -1; opacity: 0.1;">Inventory</h1>
<h1 style="position: absolute; left: 10px; top: 23.4375px; margin: 0px; z-index: -1; opacity: 0.1;">Inventory</h1>
<h1 style="position: absolute; left: 11px; top: 24.4375px; margin: 0px; z-index: -1; opacity: 0.1;">Inventory</h1>
<h1 style="position: absolute; left: 12px; top: 25.4375px; margin: 0px; z-index: -1; opacity: 0.1;">Inventory</h1>

This doesn't look too good from the point of view of good programming practices.
The html and css code is unnecessarily duplicated, just to get the simple shadow effect.

Consider the code e.g. in that way (you still studying a jQuery ;))
JavaScript:
$.fn.shadow = function() {
  return this.each((i, element) => {
    const textShadows = [];

    for (let j = 1; j <= 5; j++) {
      textShadows.push(`${j}px ${j}px 0 rgba(0, 0, 0, 0.1)`);
    }

    $(element).css({
      'text-shadow': textShadows.join(', ')
    });
  });
};

$(() => {
  $('h1').shadow();
});
generated that result
HTML:
<div id="container">
  <h1 style="text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px, rgba(0, 0, 0, 0.1) 2px 2px 0px, rgba(0, 0, 0, 0.1) 3px 3px 0px, rgba(0, 0, 0, 0.1) 4px 4px 0px, rgba(0, 0, 0, 0.1) 5px 5px 0px;">Inventory</h1>
</div>

above code is strongly similar to ;)
CSS:
h1 {
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.1),
    2px 2px 0 rgba(0,0,0,0.1),
    3px 3px 0 rgba(0,0,0,0.1),
    4px 4px 0 rgba(0,0,0,0.1),
    5px 5px 0 rgba(0,0,0,0.1);
}
 
Last edited:
Joined
Jul 4, 2023
Messages
478
Reaction score
60
Finally, analyze this code in a broader context
[ on-line ]
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>
    -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <style>
      /* for demonstration */
      body {
        margin-top: 3rem;
      }
      .flick {
        position: fixed;
        top: 1vh;
        height: 3rem;
        border: none;
        font: 400 .9rem/1 system-ui, monospace;
        font-variant: small-caps;
        color: limegreen;
        text-align: center;
        animation: flick 4.5s ease-in-out .5s infinite;
        will-change: transform;
        pointer-events: none;
      }

      @keyframes flick {
        from {
          transform: translatex(-1.8vw) rotate(-5deg);
          color: orangered;
        }
        3% {
          transform: translatex(1.8vw) rotate(5deg);
        }
        6% {
          transform: translatex(-1.8vw) rotate(-5deg);
        }
        9% {
          transform: translatex(1.8vw) rotate(5deg);
        }
        12% {
          transform: translatex(-1.2vw) rotate(-4deg);
        }
        15% {
          transform: translatex(0.8vw) rotate(4deg);
        }
        18% {
          transform: translatex(-0.8vw) rotate(-3deg);
          color: orangered;
        }
        22% {
          transform: translatex(0.4vw) rotate(3deg);
        }
        26% {
          transform: translatex(0) rotate(0);
          color: limegreen;
        }
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>   
    <div id="container">
      <h1>Inventory</h1>
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    
    <!-- for demonstration -->
    <div class="flick">&#9664; Move beam</div>

    <script>
      $.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
          })
        });
      });
    </script>
  </body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,990
Messages
2,570,211
Members
46,795
Latest member
YolandaCar

Latest Threads

Top