A light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across the page

Overview


Driver.js

version downloads

Powerful, highly customizable vanilla JavaScript engine to drive the user's focus across the page
No external dependencies, supports all major browsers and highly customizable


  • Simple: is simple to use and has no external dependency at all
  • Highly customizable: has a powerful API and can be used however you want
  • Highlight anything: highlight any (literally any) element on page
  • Feature introductions: create powerful feature introductions for your web applications
  • Focus shifters: add focus shifters for users
  • User friendly: Everything is controllable by keyboard
  • Consistent behavior: usable across all browsers (including in-famous IE)
  • MIT Licensed: free for personal and commercial use

For Usage and Examples, have a look at demo

So, yet another tour library?

No, it is not. Tours are just one of the many use-cases. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: e.g. dimming the background when user is interacting with some component i.e. the way Facebook does when you try to create a post, using it as a focus shifter to bring user's attention to some component on page, or using it to simulate those "Turn off the Lights" widgets that you might have seen on video players online, etc.

Driver.js is written in Vanilla JS, has zero dependencies and is highly customizable. It has several options allowing you to manipulate how it behaves and also provides you the hooks to manipulate the elements as they are highlighted, about to be highlighted, or deselected.

Installation

You can install it using yarn or npm, whatever you prefer.

yarn add driver.js
npm install driver.js

Or include it using CDN. If you want a specific version, put it as [email protected] in the name

<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">

Or grab the code from dist directory and include it directly.

<link rel="stylesheet" href="/dist/driver.min.css">
<script src="/dist/driver.min.js"></script>

Usage and Demo

If you are using some sort of module bundler, import the library and the CSS file

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

otherwise use the script and link tags to import the JavaScript and CSS files.

Demos and many more usage examples can be found in the docs page.

Highlighting Single Element – Demo

You can highlight a single element by simply passing the selector.

const driver = new Driver();
driver.highlight('#create-post');

A real world usage example for this is: using it to dim the background and highlight the required element e.g. the way Facebook does it when creating a post.

Highlight and Popover – Demo

You can show additional details beside the highlighted element using the popover.

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  }
});

Also, title and description can have HTML as well.

Positioning the Popover – Demo

By default, driver automatically finds the suitable position for the popover and displays it. You can override it using position property.

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    // position can be left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right, mid-center
    position: 'left',
  }
});

You can also add offset to the popover position by using the offset property

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'bottom',
    // Will show it 20 pixels away from the actual position of popover
    // You may also provide the negative values
    offset: 20,
  }
});

Creating Feature Introductions – Demo

Feature introductions are helpful when onboarding new users and giving them an idea about different parts of the application; you can create them seamlessly with Driver. Define the steps and call the start when you want to start presenting. User will be able to control the steps using the keyboard or using the buttons on popovers.

const driver = new Driver();

// Define the steps for introduction
driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#second-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'top'
    }
  },
  {
    element: '#third-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'right'
    }
  },
]);

// Start the introduction
driver.start();

You can also hide the buttons and control the introductions programmatically by using the API methods listed below.

Asynchronous Actions – Demo

For any asynchronous actions between the transition steps, you may delay the execution till the action completes. All you have to do is stop the transition using driver.preventMove() in your onNext or onPrevious callbacks and initiate it manually using driver.moveNext(). Here is a sample implementation where it will stop at the second step for four seconds and then move on to the next step.

const driver = new Driver();

// Define the steps for introduction
driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#second-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'top'
    },
    onNext: () => {
      // Prevent moving to the next step
      driver.preventMove();
      
      // Perform some action or create the element to move to
      // And then move to that element
      setTimeout(() => {
        driver.moveNext();
      }, 4000);
    }
  },
  {
    element: '#third-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'right'
    }
  },
]);

// Start the introduction
driver.start();

You can also hide the buttons and control the introductions programmatically by using the API methods listed below.

API

Driver comes with several options that you can manipulate to make Driver behave as you like

Driver Definition

Here are the options that Driver understands:

const driver = new Driver({
  className: 'scoped-class',        // className to wrap driver.js popover
  animate: true,                    // Whether to animate or not
  opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
  padding: 10,                      // Distance of element from around the edges
  allowClose: true,                 // Whether the click on overlay should close or not
  overlayClickNext: false,          // Whether the click on overlay should move next
  doneBtnText: 'Done',              // Text on the final button
  closeBtnText: 'Close',            // Text on the close button for this step
  stageBackground: '#ffffff',       // Background color for the staged behind highlighted element
  nextBtnText: 'Next',              // Next button text for this step
  prevBtnText: 'Previous',          // Previous button text for this step
  showButtons: false,               // Do not show control buttons in footer
  keyboardControl: true,            // Allow controlling through keyboard (escape to close, arrow keys to move)
  scrollIntoViewOptions: {},        // We use `scrollIntoView()` when possible, pass here the options for it if you want any
  onHighlightStarted: (Element) => {}, // Called when element is about to be highlighted
  onHighlighted: (Element) => {},      // Called when element is fully highlighted
  onDeselected: (Element) => {},       // Called when element has been deselected
  onReset: (Element) => {},            // Called when overlay is about to be cleared
  onNext: (Element) => {},                    // Called when moving to next step on any step
  onPrevious: (Element) => {},                // Called when moving to previous step on any step
});

Note that all the button options that you provide in the driver definition can be overridden for a specific step by giving them in the step definition

Step Definition

Here are the set of options that you can pass while defining steps defineSteps or the object that you pass to highlight method:

const stepDefinition = {
  element: '#some-item',        // Query selector string or Node to be highlighted
  stageBackground: '#ffffff',   // This will override the one set in driver
  popover: {                    // There will be no popover if empty or not given
    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
    title: 'Title',             // Title on the popover
    description: 'Description', // Body of the popover
    showButtons: false,         // Do not show control buttons in footer
    doneBtnText: 'Done',        // Text on the last button
    closeBtnText: 'Close',      // Text on the close button
    nextBtnText: 'Next',        // Next button text
    prevBtnText: 'Previous',    // Previous button text
  },
  onNext: () => {},             // Called when moving to next step from current step
  onPrevious: () => {},         // Called when moving to previous step from current step
};

For example, here is how it would look when highlighting a single element:

const driver = new Driver(driverOptions);
driver.highlight(stepDefinition);

And this is how it would look when creating a step by step guide:

const driver = new Driver(driverOptions);
driver.defineSteps([
    stepDefinition1,
    stepDefinition2,
    stepDefinition3,
    stepDefinition4,
]);

API Methods

Below are the set of methods that are available:

const driver = new Driver(driverOptions);

// Checks if the driver is active or not
if (driver.isActivated) {
    console.log('Driver is active');
}

// In case of the steps guide, you can call below methods
driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);
driver.start(stepNumber = 0);  // Starts driving through the defined steps
driver.moveNext();             // Moves to next step in the steps list
driver.movePrevious();         // Moves to previous step in the steps list
driver.hasNextStep();          // Checks if there is next step to move to
driver.hasPreviousStep();      // Checks if there is previous step to move to

// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// perform some asynchronous task and manually move to next step
driver.preventMove();

// Highlights the element using query selector or the step definition
driver.highlight(string|stepDefinition);

// Reposition the popover and highlighted element
driver.refresh();

// Resets the overlay and clears the screen
driver.reset();

// Additionally you can pass a boolean parameter
// to clear immediately and not do the animations etc
// Could be useful when you, let's say, want to run
// a different instance of driver while one was running
driver.reset(clearImmediately = false);

// Checks if there is any highlighted element
if(driver.hasHighlightedElement()) {
    console.log('There is an element highlighted');
}

// Gets the currently highlighted element on screen
// It would be an instance of `/src/core/element.js`
const activeElement = driver.getHighlightedElement();

// Gets the last highlighted element, would be an instance of `/src/core/element.js`
const lastActiveElement = driver.getLastHighlightedElement();

activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element
activeElement.hidePopover();           // Hide the popover
activeElement.showPopover();           // Show the popover

activeElement.getNode();  // Gets the DOM Element behind this element

Note – Do not forget to add e.stopPropagation() to the click binding that triggers driver.

Contributions

Feel free to submit pull requests, create issues or spread the word.

Sponsored By

Thanks to BrowserStack for sponsoring the compatibility testing needs.

BrowserStack

License

MIT © Kamran Ahmed

Comments
  • Can't see highlighted item

    Can't see highlighted item

    Image attached. No error messages in the console.

    code:

    const driver = new Driver({
        opacity:1
      });
      driver.highlight({
        element: '.subNavOptionW[data-option="Topics"]',
        popover: {
          title: 'Title for the Popover',
          description: 'Description for it',
        }
      });
    
    screen shot 2018-03-17 at 6 40 32 pm
    opened by RonItelman 24
  • Uncaught TypeError: Cannot read property 'style' of undefined

    Uncaught TypeError: Cannot read property 'style' of undefined

    Chrome in the current version and in the device emulation mode drops a Uncaught TypeError: Cannot read property 'style' of undefined. Firefox works normal.

    image

    opened by st-schneider 15
  • Tour on kamranahmed.info/driver - popups are cut off

    Tour on kamranahmed.info/driver - popups are cut off

    While stepping through the list of features, the popups are cut off at the bottom, so the user needs to manual scroll to move them into the visible window, in order to read or click buttons.

    screen shot 2018-03-14 at 10 10 45 am

    In latest Chrome:

    Google Chrome is up to date Version 65.0.3325.162 (Official Build) (64-bit)

    opened by krishan 9
  • Navigating away while transitioning sets incorrect scroll position

    Navigating away while transitioning sets incorrect scroll position

    When navigating away from a popup (using the arrow keys) in the middle of an animation to scroll to the visible popup, there is no other scroll event happening to get the correct focus.

    scrollmove

    opened by MartinMuzatko 9
  • No functionality in IE11

    No functionality in IE11

    Hi there, although the README says that this works with IE, I'm experiencing issues with IE11, which unfortunately I need to support for a current project.

    None of the pop-ups or overlaps display when opening in IE11, and your demo site also does not function either. Other than that, it's a really awesome project, and it works well in modern browsers!

    I've found a limited workaround, which is documented here: https://stackoverflow.com/questions/35215360/getting-error-object-doesnt-support-property-or-method-assign#39021339

    This has restored some functionality - the boxes appear where they should, and they cycle through in the correct order, but there is no framing of the highlighted element - just reduced opacity background across the whole page. It works, but doesn't look as nice.

    Equally, there is no animation, although this is less of an issue.

    opened by lb13 9
  • Tour does not start if the second element is hidden

    Tour does not start if the second element is hidden

    I believe this has something to do with https://github.com/kamranahmedse/driver.js/issues/25 but not sure. My second element #sidebar is collapsible. When I collapse it and I try to start thr tour - it doesn't start. If I display it again, the tour starts working!

    //Defines driver for all calls
    const driver = new Driver({
      className: 'scoped-class',        // className to wrap driver.js popover
      animate: false,                    // Whether to animate or not
      opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
      padding: 10,                      // Distance of element from around the edges
      allowClose: false,                 // Whether the click on overlay should close or not
      overlayClickNext: false,          // Whether the click on overlay should move next
      doneBtnText: 'Done',              // Text on the final button
      closeBtnText: 'Close',            // Text on the close button for this step
      stageBackground: '#ffffff',       // Background color for the staged behind highlighted element
      nextBtnText: 'Next →',              // Next button text for this step
      prevBtnText: '← Previous',          // Previous button text for this step
      showButtons: true,               // Do not show control buttons in footer
      keyboardControl: true,            // Allow controlling through keyboard (escape to close, arrow keys to move)
      scrollIntoViewOptions: {block:"top"},        // We use `scrollIntoView()` when possible, pass here the options for it if you want any
      onHighlightStarted: (Element) => {}, // Called when element is about to be highlighted
      onHighlighted: (Element) => {},      // Called when element is fully highlighted
      onDeselected: (Element) => {},       // Called when element has been deselected
      onReset: (Element) => {},            // Called when overlay is about to be cleared
      onNext: (Element) => {},                    // Called when moving to next step on any step
      onPrevious: (Element) => {},                // Called when moving to previous step on any step
    });
     
    //Start listening for click on the on the tour button and move forward when it happens. 
    document.getElementById('launchtour')
            .addEventListener('click', function(event) {
              event.stopPropagation();
    
    // Define the tour steps if the button is clicked. 
    driver.defineSteps([
      {
        element: '#launchtour',
        popover: {
          title: 'Welcome to the Online Help Tour!',
          description: 'Watch this tour...',
          position: 'left',
        nextBtnText: 'okay, Start!'	
        }
      },
      {
        element: '#sidebar',
        popover: {
          title: 'Access the Tree',
          description: 'Browse the complete docs...',
          position: 'right'     
        }
      },
      {
        element: '#pdf_button',
        popover: {
          title: 'Create PDFs',
          description: 'Create PDFs ...',
          position: 'left'
        }
      },
      {
        element: '#selectglobe',
        popover: {
          title: 'Switch ',
          description: 'Select any of the ...',
          position: 'left'
        }
      },
      ]);
    
    // Launch the tour if the button is clicked. 
    driver.start();
    
    });
    
    opened by kapooramit 8
  • onPrev, onNext and onDone event callbacks to element options

    onPrev, onNext and onDone event callbacks to element options

    Add onPrev, onNext and onDone callbacks options to element's options. onStart features can be implemented by test options.isFirst in the callbacks.

    image

    fixed issues #51 and #69

    opened by Yahasana 8
  • Supporting an array of selectors

    Supporting an array of selectors

    I've the need to create a tour that highlight a subset of DOM sibling elements.

    Something like: driver.highlight('.foo, .bar');

    I can't use a parent node because the scope is to not highlight other siblings.

    The expected final result should be probably to highlight the minimal rect that contains all of the elements.

    Do you think that this new feature would be difficult to be implemented?

    opened by keul 7
  • Bug(Ionic) Driver highlighted element

    Bug(Ionic) Driver highlighted element

    Hi I have the following problem when I run the highlight on ionic apparently for more than increasing the z-index of the driver-highlighted-element class the element is still below the white box

    image

    opened by Juanperezc 6
  • Popover is not showing in highlighting element with vuejs

    Popover is not showing in highlighting element with vuejs

    I am using it with vue.js, the element is highlighted but popover is not shown help me out maybe I am missing something

    import * as Driver from 'driver.js'; import 'driver.js/dist/driver.min.css';

    screenshot from 2018-07-01 01-32-42

    opened by junip 6
  • Improvements for use with ShadowRoot and Websites with white text

    Improvements for use with ShadowRoot and Websites with white text

    Hello there,

    With your recent commit https://github.com/kamranahmedse/driver.js/commit/523519fbe1d37edbb8cda39b73b56d2efe3c4fc3 you already made a big step to make this tool compatible with shadow roots and it works like a charm with polymer. But the element that is highlighted won't be highlighted correctly :wink:

    Screenshot of the described behaviour:

    shadow-root_before

    While inspecting the way the overlay works I also noticed that Websites that use white text will head into problems when using this tool:

    white_text_before

    So I tried another way of creating an overlay with a cutout for a element. This PR contains some changes in the css so that the overlay div won't be needed anymore. These changes would make driver.js compatible for use with shadow doms and independent of text colors in the highlighted elements.

    As I didn't want to dive in deeper into the internal workings of the code the overlay div is still created but doesn't serve any purpose anymore.

    Some "after"-Screenshots:

    shadow-root_after white_text_after

    I think that this is an easier way of doing things which also enhances compatiblity for different projects. I hope that you will think the same!

    Kind regards Fabian

    opened by FabianWilms 6
  • Bump express from 4.17.1 to 4.18.2

    Bump express from 4.17.1 to 4.18.2

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • How can I do something on the popover

    How can I do something on the popover

    I haven't seen an api that can be used after the popover visible. I want to add some doms and add addEventListenr on them, but when step changed, it will be losing efficacy

    opened by yokiizx 1
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Updated dev dependencies

    Updated dev dependencies

    Hi Kamran,

    I couldn't get driver.js to build on my system which has no python 2.x Therefore I

    • updated the devDependencies in package.json so it will build on a system with python 3.10
    • had to fix the webpack.config file due to changes in postcss-loader options format.
      • I also added a babel-loader config that maintains compatibility with MS WebBrowser control (~IE8), which the previous release had
    • new CHANGELOG file in a separate commit (feel free to omit)

    Cheers, Martin

    opened by mlisowsk 0
  • Add `destroy` method API

    Add `destroy` method API

    In some scenarios, we may need to actively destroy Driver instances, and these events should also be unregistered.

    https://github.com/kamranahmedse/driver.js/blob/4a0247ee25ba4f235bbf87434e9217c50619a1b8/src/index.js#L86-L103

    opened by xuexb 0
Releases(0.9.7)
  • 0.9.7(Jun 14, 2019)

  • 0.9.6(May 7, 2019)

  • 0.9.5(Mar 4, 2019)

  • 0.9.3(Feb 19, 2019)

  • 0.9.2(Feb 7, 2019)

  • 0.9.1(Feb 7, 2019)

    • https://github.com/kamranahmedse/driver.js/commit/9fe4828ce40a81126594b39b838b1097a98d3e9e Fix – Positioning the popover on scrollable elements
    • https://github.com/kamranahmedse/driver.js/commit/991eb5d6c533870ed441f2d925459afd4274266f Fix – Tap event on mobile closes the driver in some cases
    • https://github.com/kamranahmedse/driver.js/commit/9c530a49f4e6f9c67e0a42ae438374e5b3de929f Feat – New mid-center position allows popovers to be positioned on top of the element
    • https://github.com/kamranahmedse/driver.js/commit/e29a33e482c9aec00da233921f966a5e5f3ca8e0 Feat – refresh method has been exposed that repositions and re-renders the driver
    Source code(tar.gz)
    Source code(zip)
  • 0.9.0(Feb 7, 2019)

    • https://github.com/kamranahmedse/driver.js/pull/138/commits/b734961d93343716ce9f3b68a6c2a93c9a2a2897 Adds scoped class names for popovers
    • https://github.com/kamranahmedse/driver.js/commit/b07411067c7a586b12acdf0eed395769a18040cb Decrease animation duration
    • https://github.com/kamranahmedse/driver.js/commit/53091086a1b4cfd09d69e0ea196f8559a7b0cebd Improve performance and proper positioning
    • https://github.com/kamranahmedse/driver.js/commit/92ac285ea18f00385e17f6308463a89e3d149f91 Fixes type definitions for positions
    Source code(tar.gz)
    Source code(zip)
  • 0.8.0(Oct 12, 2018)

  • 0.5.0(Apr 15, 2018)

    • Makes popover description optional. You may only provide title https://github.com/kamranahmedse/driver.js/commit/6bd2494ff83a48b5185867e1d85047847877d452
    • Fixes stacking-contexts issue. But you have to be using non-animated version. https://github.com/kamranahmedse/driver.js/commit/783018d32cfb3a4deb3f80044c8ffe221a3f1467
    Source code(tar.gz)
    Source code(zip)
  • 0.4.0(Apr 10, 2018)

Owner
Kamran Ahmed
Lover of all things web and opensource. Coding and writing stuff for humans™. Building roadmap.sh
Kamran Ahmed
A better way for new feature introduction and step-by-step users guide for your website and project.

Intro.js v3 Lightweight, user-friendly onboarding tour library Where to get You can obtain your local copy of Intro.js from: 1) This github repository

usablica 21.7k Jan 2, 2023
Guide your users through a tour of your app

Shepherd is maintained by Ship Shape. Contact us for web app consulting, development, and training for your project. Browsers support Edge Firefox Chr

Ship Shape 10.8k Dec 28, 2022
An interactive guide for web page elements using jQuery and CSS3

pageguide.js An interactive, responsive, and smart guide for web page elements using jQuery and CSS3. Works great for dynamic pages and single-page ap

Tracelytics 912 Dec 25, 2022
Come learn how to do realtime events in JavaScript with Brian Holt!

Please click here to head to the course website. Issues and Pull Requests Please file issues and open pull requests here! Thank you! For issues with p

Brian Holt 66 Dec 25, 2022
Google-Drive-Directory-Index | Combining the power of Cloudflare Workers and Google Drive API will allow you to index your Google Drive files on the browser.

?? Google-Drive-Directory-Index Combining the power of Cloudflare Workers and Google Drive will allow you to index your Google Drive files on the brow

Aicirou 127 Jan 2, 2023
A light-weight user's step-by-step guide for your website using Vanilla JS.

WebTour JS A light-weight user's step-by-step guide for your website using Vanilla JS. Features User's walkthrough - can be used to guide user's to yo

JM de Leon 23 Nov 21, 2022
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Niklas 51 Nov 15, 2022
This is a simple script to upload Multiple files into google drive using google drive API and Nodejs.

Welcome to gDrive Multiple File Upload ?? This is a simple script to upload Multiple files into google drive using google drive API and Nodejs Install

Jayamal Sanuka Hettiarachchi 1 Dec 29, 2021
why make apps to increase focus -- when you can make apps to reduce focus

impossifocus ?? What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Aleem Rehmtulla 10 Nov 30, 2022
A lightweight (the actual ship is heavy though), performat & powerful sharder for Discord.JS. Indomitable uses cluster module to evenly spread her weight (load) across your cores

Indomitable A lightweight (the actual ship is heavy though), performat & powerful sharder for Discord.JS. Indomitable uses cluster module to evenly sp

Saya 17 Nov 29, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
A light-weight, customizable lightbox plugin for jQuery

About Colorbox: A customizable lightbox plugin for jQuery. See the project page for documentation and a demonstration, and the FAQ for solutions and e

Jack Moore 4.8k Dec 29, 2022
light – weight css preprocessor

STYLIS A Light–weight CSS Preprocessor. Installation Use a Direct Download: <script src=stylis.js></script> Use a CDN: <script src=unpkg.com/stylis></

Sultan 1.6k Jan 3, 2023
A light-weight module that brings the Fetch API to Node.js

A light-weight module that brings Fetch API to Node.js. Consider supporting us on our Open Collective: Motivation Features Difference from client-side

Node Fetch 8.1k Jan 4, 2023
Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | 简体中文 Talk is cheap,

Baidi Liu 187 Jan 2, 2023
JQuery-TableToExcel - Light weight jQuery plugin for export HTML table to excel file

tableToExcel Light weight jQuery plugin for export table to excel file Demos Website and demo here: http://tanvirpro.com/all_project/jQueryTableToExce

Tanvir Sarker 4 May 8, 2022
Light-weight react-like maximum-optimistic library for building user interfaces.

wili Wili is a 2kb Light-weight react-like maximum-optimistic library for building user interfaces. Usage Welcome componenet: class Welcome extends Wi

Amir Fo 3 Feb 16, 2022
Light-weight Linked Open Data native cataloguing and crowdsourcing platform

id name brief-description type release-date release-number work-package keywords licence release link demo running-instance credits clef CLEF, Crowdso

Polifonia H2020 10 Apr 26, 2022
StashQL is a light-weight, open-source npm package that improves the speed of your GraphQL queries in your application.

Table of Contents What is StashQL? Install Getting Started Queries Mutations refillCache clearRelatedFields Logging The Team What is StashQL? StashQL

OSLabs Beta 67 Sep 30, 2022
🪶 An light weight image host built using typescript.

Feather; an next-gen image uploader built to be used with sharex. Built using typescript, expressjs. To get started ( IN ORDER ) ~ Hosting ~ npm i ~ n

Saige 5 Jun 14, 2022