PUSH JS Library Documentation by pushabl.com

PUSH JS Library is an HTML attribute-based JavaScript library that allows you to easily implement common JavaScript functionalities such as popups, accordions, sliders, and carousels. By using simple HTML attributes, you can add dynamic interactions to your webpage without writing custom JavaScript code.

Table of Contents

• Overview
• Getting Started
• Core Features
• HTML Attributes
• Customization Options

Overview

The PUSH JS Library is built to simplify common interactive features like popups, accordions, sliders, and carousels by leveraging custom HTML attributes. It allows you to build dynamic UI elements using pure HTML, while the JavaScript handles functionality based on those attributes.

Getting Started

To start using PUSH JS Library, simply include the following script in your HTML:

<script src="https://js.pushabl.com/get_pkg.php"></script>

Once included, you can begin using the HTML attributes to add functionality to your elements.

Core Features

Popups

PUSH JS makes it easy to create popups with HTML attributes. Simply add the data-push-popup attribute to an element to enable it.

<button data-push-popup="popup-id">Open Popup</button>
<div id="popup-id" class="popup">
  <div class="popup-content">
    <span class="close" data-push-close>×</span>
    <p>This is a popup!</p>
  </div>
</div>

Accordions

To create an accordion, use the data-push-accordion attribute. It will handle the toggle of content display based on user interaction.

<div class="accordion" data-push-accordion>
  <div class="accordion-header">Accordion Title</div>
  <div class="accordion-content">
    Accordion content goes here...
  </div>
</div>

Sliders

For image or content sliders, you can use the data-push-slider attribute. It will automatically enable sliding functionality on the element.

<div class="slider" data-push-slider>
  <div class="slides">
    <div class="slide">Slide 1 Content</div>
    <div class="slide">Slide 2 Content</div>
  </div>
</div>

Carousels

To implement a carousel, simply use the data-push-carousel attribute. This enables an interactive, looping carousel.

<div class="carousel" data-push-carousel>
  <div class="carousel-item">Item 1</div>
  <div class="carousel-item">Item 2</div>
</div>

HTML Attributes

PUSH JS Library functions are triggered by using specific HTML attributes:

• data-push-popup: Enables a popup. Requires a target element ID.
• data-push-close: Closes a popup when clicked.
• data-push-accordion: Creates an accordion where sections toggle open/closed.
• data-push-slider: Enables slider functionality for rotating content.
• data-push-carousel: Creates a looping carousel of items.

Customization Options

You can further customize the behavior of each component by adding optional attributes for timing, animation speed, and more:

• data-push-delay: Adds a delay before triggering the action (e.g., popup, slider).
• data-push-speed: Sets the transition speed for sliders or carousels.
• data-push-loop: Enables looping for carousels and sliders.