JQuery add shadow error

M

musicman1985

Joined
Aug 21, 2023
Messages
32
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.
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
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);
}
 
M

musicman1985

Joined
Aug 21, 2023
Messages
32
Reaction score
0
VBService said:
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);
}
Click to expand...
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.
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
musicman1985 said:
I'm currently studying a jQuery book, I know it's easier with css but it should be this way.
Click to expand...
Ok. I understand, but inside function you use still css ;)
musicman1985 said:
.css({
position: 'absolute',
left: $originalElement.offset().left + i,
top: $originalElement.offset().top + i,
margin: 0,
zIndex: -1,
opacity: 0.1
})
Click to expand...


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:
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
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

Similar Threads

JQuery hover error 3
Sort by number of characters 1
How can I add React 18 to existing HTML? 2
Buttons lining up 1
Add recipes using JavaScript in table 20
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button 3
What is the error in this code , file not fetch and not fetched in the basemap, not vissible in the browser 1
Javascript DOM 1

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 498

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top