Tutorial for designers?

hsteel commented 10 years ago

Hi :) Your BackgroundCheck script is amazing,thank you!

I'm currently trying to use it in a project where I have breadcrumbs sitting over an image, but I can't for the life of me get it working. Could you please provide a html example page with the init command and css for this kind of scenario for myself and my fellow Javascript newbs :) (I do apologise - it's just that like many designers I love the solution but I'm like a fish out of water with JavaScript).

If it helps here is the html I'm using, and I've also attached a screenshot.

    <img src="img/placeholder.jpg" alt="" />
    <ul class="breadcrumbs">
      <li><a href="index.html">Home</a></li>
      <li><a href="committee.html">Committee</a></li>
      <li class="current"><a href="code-of-conduct.html">Code of Conduct</a></li>
    </ul>

screenshot

Many thanks! Harmony

kennethcachia commented 10 years ago

Hi Harmony,

Thanks! :)

No problem, here's an example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Add meta and any other CSS and Javascript files -->

    <!-- Load BackgroundCheck -->
    <script src="background-check.min.js"></script>

    <!-- Styles for classes added by BackgroundCheck -->
    <style>
      .breadcrumbs li a.background--light {
        color: #000;
      }

      .breadcrumbs li a.background--dark {
        color: #fff;
      }
    </style>
  </head>

  <body>
    <!-- Added a class to img -->
    <img class="background-image" src="image.jpg" alt="" />

    <ul class="breadcrumbs">
      <li><a href="index.html">Home</a></li>
      <li><a href="committee.html">Committee</a></li>
      <li class="current"><a href="code-of-conduct.html">Code of Conduct</a></li>
    </ul>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        // Initialize BackgroundCheck
        BackgroundCheck.init({
          targets: '.breadcrumbs li a',
          images: '.background-image'
        });
      });
    </script>
  </body>
</html>

You can also refer to other examples here.

Let me know if you have any other questions!

hsteel commented 10 years ago

Oh my goodness you are so awesome!! Thank you J

Thanks, Harmony

Harmony Steel | Web Systems Officer Lake Macquarie City Council 126-138 Main Road Speers Point NSW 2284 | Box 1906 HRMC NSW 2310 P: 02 4921 0148 | hsteel@lakemac.nsw.gov.au | www.lakemac.com.au http://www.lakemac.com.au/ Please consider the environment before printing this email.

From: Kenneth [mailto:notifications@github.com] Sent: Friday, 28 March 2014 1:19 PM To: kennethcachia/Background-Check Cc: Harmony Steel Subject: Re: [Background-Check] Tutorial for designers? (#24)

Hi Harmony,

Thanks! :)

No problem, here's an example:

<!DOCTYPE html>

``` ```

```

You can also refer to other examples here https://github.com/kennethcachia/Background-Check/tree/master/examples/build .

Let me know if you have any other questions!

— Reply to this email directly or view it on GitHub https://github.com/kennethcachia/Background-Check/issues/24#issuecomment-38883035 . https://github.com/notifications/beacon/6777629__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcxMTU5MjM2NywiZGF0YSI6eyJpZCI6Mjg3MjQ5MDV9fQ==--7ff88ba97bbd9baed49aa9d436798cacd373b1da.gif

This information is intended for the addressee only. The use, copying or distribution of this message or any information it contains, by anyone other than the addressee is prohibited by the sender.

Any views expressed in this communication are those of the individual sender, except where the sender specifically states them to be the views of Council.

Information provided to Council in correspondence, submissions or requests (verbal, electronic or written), including personal information such as your name and address, may be made publicly available, including via Council website, in accordance with the Government Information (Public Access) Act (GIPA Act) 2009.

kennethcachia / background-check

Tutorial for designers? #24