Troubleshooting my jquery plugins problem

I'm currently attempting to utilize a jquery plugin called ancensor.

If you're interested, the plugin page can be found here

My code snippet looks something like this:

    <nav class='navbar navbar-default' role='navigation '>
    <ul class='alinks list-inline links-to-floor'>
    <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink1">test1</a></li>
       <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink2" >test2</a></li>
       <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink3">test3</a></li>
       <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink4">test4</a></li>
       <li class="list-group-item"><a href='#' class="ascensorLink ascensorLink5">test5</a></li>
    </ul>
    </nav>

    <div id='ascensorBuilding'>
    <div class='ascensorFloor1'  style=''>
                test here
    </div>
    <div class='ascensorFloor2'  style='height:1200px; width:1000px; background-color:red;'>
               blog hree oooo
    </div>
    <div class='ascensorFloor3'  style='height:1200px; width:1000px; background-color:red;'>
    aaagg
    </div>
    <div class='ascensorFloor4'  style='height:1200px; width:1000px; background-color:red;'>
    dddd
    </div>
    <div class='ascensorFloor5'  style='height:1200px; width:1000px; background-color:red;'>
    ddd
    </div>




        <script src="/lib/jquery-1.8.0.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
        <script src="/lib/jquery.ascensor.js"></script>
        <script src="/lib/bootstrap/js/bootstrap.min.js"></script>

<script>
  $(function() {

  $('#ascensorBuilding').ascensor({
     AscensorName: 'ascensor',
         AscensorFloorName: '1.0 | 1.1 | 1.3 | 4.3 | 5.4 | 5.5 | 5.6 | 7.6 | 8.6 | 8.7 | 8.8 | 8.9 | 10.2',
         Time: 9000,
         WindowsOn: 1,
         Direction: "chocolate",
         AscensorMap: '1|1 & 2|1 & 3|1 & 3|2 & 3|3 & 4|3 & 5|3 & 3|4 & 3|5 & 4|5 & 5|5 & 6|5 & 3|6',
         Easing: 'easeInOutQuad',
         KeyNavigation: true,
         Queued: false,
         QueuedDirection: "y"
        })
  });

</script>

Despite following the instructions on the plugin page, I am still unable to get it functioning properly. Any assistance would be greatly appreciated! Thank you!

Answer №1

As per the guidelines, it is recommended to start with using <section> and then customize it as necessary.

HTML LINKS

<li><a class="ascensorLink ascensorLink1"></a></li>
<li><a class="ascensorLink ascensorLink2"></a></li>

HTML CONTENT

 <div id="ascensorBuilding">
        <section>
            //content for floor one goes here
        </section>

        <section>
            //content for floor two goes here
        </section>

        <section>
            //content for floor three goes here
        </section>
    </div>

JAVASCRIPT

$('#ascensorBuilding').ascensor({
    AscensorName:'ascensor',
    ChildType:'section',
    AscensorFloorName:'Home | Implementation ',
    Time:1000,
    WindowsOn:1,
    Direction:'chocolate',
        AscensorMap:'2|1 & 2|2 & 3|2 & 2|3 & 2|4 & 1|4 & 2|5',
        Easing:'easeInOutQuad',
        KeyNavigation:true,
        Queued:false,

});

Answer №2

Make sure to assign each floor a unique id instead of just setting the class to ascensorFloorX. To see how it's done correctly, refer to the source code of the page you provided.

For example,

<div class='ascensorFloor1'  style=''>
     ^

should be changed to

<div id='ascensorFloor1'  style=''>
     ^

Furthermore, don't forget to close the

<div id='ascensorBuilding'>
element properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating and fetching CSV files using PHP and AJAX

I have successfully created a PHP script that generates a CSV file for automatic download by the browser. The code below shows a working version with sample data for different car models. <?php $cars = array( array("Volvo",22,18), array("BMW",15,1 ...

Attach an event listener to a particular textarea element

Currently, I am developing a project in Next.js13 and my focus is on creating a custom textarea component. The goal is to have this component add an event listener to itself for auto-adjusting its height as the user types. Below is the relevant section of ...

Enhancing the appearance of a PHP HTML email

I scoured the web for an answer to this question and all I could find was to include the following: $headers = 'MIME-Version: 1.0' . "\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; and ...

Is there a different method to position an element in the center of the webpage?

Typically, the code margin:auto is used for centering, but I have a different code below. HTML : <article> <header></header> </article> CSS: article{ max-width: 500px; margin: auto; /* centered - nice */ } header{ width: ...

Ways to align a div in relation to a span element?

I have a large block of text within a div. I am seeking a way to create a hover effect on specific words within the text, which will then display a div below the word containing a customized div. This functionality resembles the feature on Wikipedia where ...

Creating a fixed-position layout in CSS that expands to fill the parent container

I am exploring a 'drag and drop' script that meets my requirements, but I am facing a couple of issues with the positioning of the DIV and allowing a DIV to be fixed while still expanding its parent container. You can view an example on CodePen. ...

What is the best way to incorporate a function within a $.click (jquery) event that utilizes an id directly from the clicked element?

It seems that my title may not be very clear, but I have a jQuery code snippet that is causing some issues. The problem stems from the fact that when I click on an image with the class 'slideimg', I expect a function named slideDo to be executed, ...

I am attempting to make the fade in and out effect function properly in my slideshow

I've encountered an issue where the fading effect only occurs when the page initially loads and solely on the first image. Subsequently, the fading effect does not work on any other images displayed. This is the CSS code I have implemented by adding ...

Transferring information and storing it in a textbox

I have a homepage that features a popup window. <textarea class="form-control item"></textarea> <button type="button" class="btn btn-primary" name="name">Send</button> Additionally, there is a secondary page at (/conclusion/main) ...

My Javascript file is not being recognized by MVC

Initially, I created an MVC application without fully understanding that MVC is more backend-oriented than frontend-focused. I ended up building a simple website with just HTML, CSS, and Javascript files, which worked perfectly. However, when I tried to in ...

Activate scroll event when image src changes in Angular using jQuery

Seeking assistance with utilizing jQuery to scroll to a specific thumbnail inside a modal when left/right arrows are pressed. The modal should appear when the user clicks on an image. I've managed to implement scrolling upon clicking a thumbnail, but ...

Leveraging the power of AJAX/JQuery to send form data to a PHP script

I've compiled this based on information from other sources on this platform and a variety of tutorials. I'm puzzled as to why it's not functioning, and I've had no success with alternative methods. Below are excerpts from the HTML of m ...

Utilizing CSS3 transformation perspective on a div element when the window has finished loading

Greetings everyone. I've been experimenting with CSS3 perspective, and I'm encountering an issue where it only shows up while the window is loading. Here's a fiddle ._red{ background-color:#f00; display:block; width:100px; ...

Discovering the form through a click event using jQuery

$(function() { $('.offer-wrapper').click(function (e) { if ($(e.target).hasClass('form')) { return // perform an action if a form is present } }); }); <script src="https://cdnjs.cloudflare.com/ajax/lib ...

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

Customizing alert message styles in Java script: Changing color and font of specific parts

I have been attempting to change a specific part of text to be bold and displayed in red color. Unfortunately, this does not seem to work on Microsoft Edge. Here is my code: alert("Hi how are you my friend"); The section that needs to be formatted: "fri ...

Unable to dismiss message in Django

I'm a beginner in Django and I recently followed a tutorial to add message alerts to my code. The alerts are displaying correctly, but unfortunately, I am having trouble closing them using the 'x' button. https://i.stack.imgur.com/BQS1S.png ...

What is the best way to convert HTML into a React component?

This is the situation I am facing : 1) The application requests a CMS (Content Management System) for page contents. 2) The CMS responds with "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>" 3) The applicat ...

What is the correct way to show a PHP script as an HTML page following an AJAX call?

Attempting to utilize AJAX to call a php file that will display an html page from my js. Below is the php file in question: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=& ...

Automated video and image gallery - with a twist!

While searching for a (jQuery) video/image gallery to incorporate on my website, I came across several available options. However, I am specifically looking for one that, when set to "autoplay" mode and reaches a video file, will automatically play the ent ...