# JS

## Options

There are a few variables that you can change in the `js/slides.js` file to customize your page. Here is the full list with the default values:

```javascript
// Debugging flag (all events except scrolling logged in the browser console)
window.debug = window.debug ? window.debug : 0;
if(window.location.href.indexOf("slidesDebug")!=-1){window.debug = 1;}
// Debugging flag (only scrolling/slide change events logged in the browser console)
window.scrollDebug = window.scrollDebug ? window.scrollDebug : 0;
if(window.location.href.indexOf("slidesScrollDebug")!=-1){window.scrollDebug = 1;}
// Flag indicating whether an action is currently in progress
window.inAction = 1;
// Flag indicating whether slide change is allowed
window.allowSlide = 1;
// Flag indicating whether regular scrolling is blocked
window.blockScroll = 1;
// Offset for the slide effect (ms)
window.effectOffset = 500;
// Speed of the slide effect (ms)
window.effectSpeed = 1000;
// Speed of the slide animation (ms)
window.slideSpeed = 1000;
// Delay for element animation classes clean up after the slide effect (ms)
window.cleanupDelay = 1400;
// If set, effectSpeed, effectOffset, slideSpeed, cleanupDelay will be detected from CSS classes, not from JS code
window.setAnimFromCSS = 1;
// Flag indicating whether the horizontal mode is enabled (slide effects only)
window.horizontalMode = 0;
// Progress of loading (0.5 = 50% loaded)
window.loadingProgress = 0;
// Flag indicating whether smooth scrolling is enabled
window.smoothScroll = 0;
// Speed of smooth scrolling
window.scrollSpeed = 500;
// Flag indicating whether sticky scroll effect is enabled
window.stickyScroll = 0;
// Speed of the sticky scroll effect
window.stickyScrollEffectSpeed = 500;
// Flag indicating whether scroll collection is enabled
window.collectScrolls = 0;
// Flag indicating whether preload is enabled
window.preload = 1;
// Flag indicating whether setting hash link is enabled (page.html#slide)
window.setHashLink = 1;
// Flag indicating whether the sidebar is shown now
window.sidebarShown = 0;
// Flag indicating whether the sidebar should be hidden on the body click
window.hideSidebarOnBodyClick = 1;
// Flag indicating whether popup should be hidden on body click
window.hidePopupOnBodyClick = 1;
// Add the status of the slider as a class on the body (slider_name, slider_name_0); 
window.sliderStatus = 0;
// Scroll sensitivity for slide change. The larger value will force user to make larger motion on touchpad / scroll more mousewheel steps.
window.minScrollToSlide = 200; // Default - for PC mousewheel, mostly
if(window.isAndroid){window.minScrollToSlide = 50;} // For Android touchscreens
if(window.isSafari && window.isMobile){window.minScrollToSlide = 70;} // For iPhone touchscreens
// Timeout to prevent the immediate change of a slide with a scrollable content in it when the end of the content is reached
window.awaitToSlideDown = 300;
// Pass the width of a frame as this var if you include this page into another one as an iframe. 
// Do that from the parent page like this: $("#iframe").get(0).contentWindow.frameWidthToDetectZoom = $("#iframe").width();
//window.frameWidthToDetectZoom = 1234;
// Sensitivity for hiding elements on scroll
window.hideOnScrollSensitivity = 100;
// Flag indicating whether parallax is enabled on mobile devices
window.allowParallaxOnMobile = 1;
// Flag indicating whether key navigation is disabled
window.disableKeyNavigation = 0;
```

### Events <a href="#js-event" id="js-event"></a>

There are few callbacks that allow you to execute your custom code after some events on your page:

```html
<script>
    // The slide is changed
    $(window).on('slideChange',function(event, number, element){
         // Your code here, for example:
         console.log( "Current slide is " + $(element).data('title') + " #" + number);
     });
     // The slide is changed and the animation if the slide chnage is finished
     $(window).on('slideChange',function(event, number, element){
          setTimeout(function(){
              // Your code here, for example:
              console.log("Animation is finished");
              // You can also checkout an example: https://designmodo.com/slides/app/preview/example/trigger/
         },window.effectSpeed);
    });
    // The Slider (carousel) component is changed - added since Slides v.7
  $(window).on("sliderChanged",function(e, sliderID, selectedSlides, triggerEl){
         // Your code here, for example:
         console.log("The slider with data-slider-id='"+sliderID+"' is changed, moving to slide ",selectedSlides,"the trigger is ",triggerEl);
     });
    // The popup is shown
    $(window).on("popupShown",function(event, popupID){
        // Your code here, for example:
        console.log("The popup with data-popup-id='"+popupID+"' is shown");
    });
    // The popup is closed
    $(window).on("popupHidden",function(event, popupID){
        // Your code here, for example:
        console.log("The popup is closed. "+(popupID ? "data-popup-id='"+popupID+"'" : ''));
        console.log('Note that popupID!==false only if the popup was closed using the window.hidePopup(popupID) method.');
    });
    // The dropdown is shown (the 'trigger' argument is added since Slides v.7)
    $(window).on("dropdownShown",function(event, dropdownID, trigger){
        // Your code here, for example:
        console.log("The dropdown with data-dropdown-id='"+dropdownID+"' is shown. The trigger is: ",trigger);
    });
    // The dropdown is closed
    $(window).on("dropdownHidden",function(event, dropdownID){
        // Your code here, for example:
        console.log("The dropdown is closed. "+(dropdownID ? "data-dropdown-id='"+dropdownID+"'" : ''));
        console.log('Note that dropdownID!==false only if the dropdown was closed using the window.hideDropdown(dropdownID) method.');
    });
    // The sidebar is shown
    $(window).on("sidebarShown",function(event, sidebarID){
        // Your code here, for example:
        console.log("The sidebar with data-sidebar-id='"+sidebarID+"' is shown");
    });
    // The sidebar is closed
    $(window).on("sidebarHidden",function(event){
        // Your code here, for example:
        console.log("The sidebar is closed.");
    });
</script>
```

Need more events for your development purposes? Please, [let us know](https://designmodo.com/slides/contact/)!

### Methods <a href="#js-changeslide" id="js-changeslide"></a>

You can use these javascript functions to manipulate your slides page:

{% code overflow="wrap" %}

```html
<script>
  window.changeSlide(1); // go to first slide;
  window.changeSlide("increase"); // go to the next slide;
  window.changeSlide("decrease"); // go to the previous slide;
  window.showPopup("popupID", "inputID"); // Open the popup with data-popup-id="popupID" and (optionally) focus on the form field with id="inputID" in this popup
  window.hidePopup("popupID"); // Close the popup with data-popup-id="popupID". If the popupID is not provided - all opened popups will be closed.
  window.showDropdown($(".dropdownTrigger[data-dropdown-id='dropdownID']")); // Open the dropdown with data-dropdown-id="dropdownID"
  window.hideDropdown("dropdownID"); // Close the dropdown with data-dropdown-id="dropdownID". If the dropdownID is not provided - all opened dropdowns will be closed.
  window.showSidebar("sidebarID"); // Open the sidebar with data-sidebar-id="sidebarID".
  window.hideSidebar(); // Close all sidebars.
  window.isElementInView(".selector"); // Returns true if $(".selector") element is visible and false if not.
  window.updateNavigation(); // Marks navigation element as selected depending on selected now slide.
  window.unzoomImage(); // Hides previously zoomed-in image, check the https://slides.gitbook.io/manual/components#zoom-image
  window.equalizeElements(); // Sets equal heights to the .equalElement in the .flex.equal container, check the https://slides.gitbook.io/manual/components#flex-equalizer
  window.runAnimation(".slide:eq(2)").then(function(){alert("animation is played");}); // Runs animation in the desired slide. Added since Slides v.7
  window.resetAnimation(".someEl").then(function(){alert("animation reset finished. Play it it again using runAnimation() method.");}); // Reset already played animation of any element on the page. Added since Slides v.7
</script>
```

{% endcode %}

### Debug mode

You can switch your page into development mode and check in the browser console (`⌘|Ctrl + Shift + I`) which functions are called in the different moments.

You can enter the debug mode in four different ways:

* Add `<script> window.debug = 1; </script>` right after `js/slides.js` or `js/slides.min.js` script;
* Add `#slidesDebug` to the end of your page URL;
* Add `?slidesDebug=1` to your page URL;
* Set cookie with name `slidesDebug` and any value for your page. Type in the browser console: `$.cookie("slidesDebug",true);` to do that.

Then open the browser console and reload your page.

### Scroll debug mode (added since Slides v.7)

The [debug mode](#debug-mode) does not log scroll/slide change events. To enable logging of these events, use `slidesScrollDebug` instead of `slidesDebug` as mentioned in the [debug mode](#debug-mode) section.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://slides.gitbook.io/manual/js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.