Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tutorial for designers? #24

Closed
hsteel opened this issue Mar 27, 2014 · 2 comments
Closed

Tutorial for designers? #24

hsteel opened this issue Mar 27, 2014 · 2 comments

Comments

@hsteel
Copy link

hsteel commented Mar 27, 2014

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
Copy link
Owner

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
Copy link
Author

hsteel commented Mar 31, 2014

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:

<!-- 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>


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

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 #24 (comment) . 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.

@WindyWong WindyWong mentioned this issue May 12, 2014
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kennethcachia @hsteel