Why is URL Hash Navigation not functioning when linking to a different page's slide on the carousel?

Why isn't the #tag link being recognized?

Even though the data-hash items are visible in the URL window, the script doesn't seem to pick them up.

The standard script used on the carousel page is as follows:

$(document).ready(function() {
    $('.sidetext-carousel').owlCarousel({
        items: 1, 
        loop: false, 
        center:true, 
        margin:30, 
        URLhashListener:true,
        startPosition: 'URLHash',
    });
})

Could this be conflicting with other JS like the one found in owl.carousel_main.js file below?

(function($) {
    "use strict";
    var fullHeight = function() {
        $('.js-fullheight').css('height', $(window).height());
        $(window).resize(function(){
            $('.js-fullheight').css('height', $(window).height());
        });
    };
    fullHeight();

var carousel = function() {
    $('.sidetext-carousel').owlCarousel({
        loop:true,
        autoplay: false,
        margin:30,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn', 
        nav:true,
        dots: true,
        autoplayHoverPause: false,
        items: 1,
        navText : ["<p><small></small><span class='ion-ios-arrow-round-back'></span></p>","<p><small></small><span class='ion-ios-arrow-round-forward'></span></p>"],
        responsive:{
          0:{
            items:1
          },
          600:{
            items:1
          },
          1000:{
            items:1
          }
    }
    });
};
carousel();

})(jQuery);

Is there a way to prioritize the UrLHashNavigation script?

Or have I placed the script incorrectly?

Appreciate your help.

Answer №1

Could this possibly be overridden by other JavaScript, like the code found in the owl.carousel_main.js file?

No, because the Owl initializer function can only be called once. It operates on a first-come, first-served basis. To make it work, you'll need to merge both setup scripts along with all carousel options (such as items:1, loop:false, etc) into a single call.

Since your initial Owl initializer script is placed before including jQuery and the carousel JavaScript files, it will fail and get disregarded. However, if your ..._main.js file is included in the correct order, it will run successfully.

To resolve this issue:

Combine the two scripts, for example:

$('.sidetext-carousel').owlCarousel({
  items: 1, 
  loop: false, 
  center: true, 
  margin: 30, 
  URLhashListener: true,
  startPosition: 'URLHash',
  autoplay: false, 
  animateOut: 'fadeOut',
  animateIn: 'fadeIn', 
  nav: true,
  dots: true,
  autoplayHoverPause: false,
  navText : ["<p><small></small><span class='ion-ios-arrow-round-back'></span></p>","<p><small></small><span class='ion-ios-arrow-round-forward'></span></p>"],
  responsive:{
    0:{
      items:1
    },
    600:{
      items:1
    },
    1000:{
      items:1
    }
}

Note that I didn't verify the options, I just copied them from your original script. If there's an error, it still remains.

Next, remove the first initializer script and insert the combined initializer script (assuming you've placed it in the ..._main.js) after adding jQuery and Owl.js in your HTML:

<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/owl.carousel_main.js"></script>

If done correctly, everything should start functioning smoothly.

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

Tips for Retrieving a JavaScript Variable's Value in JSP

In my JSP file, I have implemented dynamic rows of textboxes using JavaScript. Now that I have input values into these fields, how can I retrieve those values in my result JSP page? ...

Facing a node.js installation issue on Windows 10 while using Visual Studio Code (VS

Issue encountered while trying to execute "DownloadString" with one argument: Unable to establish a secure connection due to SSL/TLS channel creation failure. At line:1 char:1 + iex ((New-Object System.Net.WebClient).DownloadString('https ...

Utilizing Odometer to pass a variable to jQuery

I'm interested in incorporating a jQuery odometer into a master page to display dynamic information. I found a helpful resource for this at this link. To achieve this, I need to fetch data from a SQL Server database using C# and then pass it to the J ...

Utilize viewport activation to determine browser width

Is there a way to dynamically add the viewport-meta tag only for devices with screen widths larger than 680px? If the screen is smaller than 680px, then the responsive style file should be enabled instead. I attempted to achieve this by placing the follow ...

Can someone advise me on how to ensure my function effectively delivers a desired outcome?

My goal is to learn Javascript on my own, but I'm struggling to make progress. I've created a function called fixedSpending() that takes two inputs, num1 and num2, and adds them together. However, when the user hits the "=" button, I expect the f ...

Tips for incorporating real-time data into your nodeJS and express applications

I am currently utilizing express for managing all the routing in my web application. Additionally, I have integrated firebase to store my data. For organization purposes, I decided to divide my code as follows: index.js: This file serves as the main node ...

Using axios.spread() allows for caching of my API requests, a feature that is not available when

Thank you for taking the time to read this. I find myself in a peculiar situation where I am required to invoke multiple CMS API routes from my server to incorporate their response.data into an object that will later be transferred to the client side. The ...

AngularJS SmartyUI position not dynamically updating on SmartyStreets plugin

In my angularJS application, I am utilizing SmartyStreets' LiveAddress for address validation and autofilling two fields in a form. After the user submits the form, a message (either success or failure) is displayed in a div above the form. However, t ...

Toggle the visibility of the data depending on the dropdown option chosen

Currently, I am developing an AngularJS application and facing a requirement to toggle the visibility of data based on the selected value in a dropdown list. Specifically, if the user chooses "Show" from the dropdown, the content within a tab should be dis ...

the modal body is taking longer than expected to load with ajax

I have a unique modal that I'm filling with dynamic data through an Ajax GET request upon modal load. Interestingly, the data is not fetched or added to the modal body unless I trigger an alert first. The structure of my modal is as follows: <div ...

The `finally` function in promises is failing to execute properly

Currently working with Typescript and I've included import 'promise.prototype.finally' at the beginning of my index.js file (in fact, I've added it in multiple places). Whenever I try to use a promise, I encounter the error message say ...

Utilize the arrow keys to navigate through the search suggestions

I am facing an issue with my search bar where I am unable to navigate through the suggestions using arrow keys. I have been struggling with this problem for days and would appreciate any help in resolving it. var searchIndex = ["404 Error", "Address Bar ...

What is the process for programmatically aligning two cards side by side using Material UI in React after retrieving data from an API?

I am currently working with data from an API that I need to display in the format of cards, arranged side by side. To achieve this, I have been using an array and passing the data to components programmatically. You can see the output image and my code bel ...

Creating clickable data columns in jQuery DataTablesWould you like to turn a column in your

How can I turn a column into a clickable hyperlink in a jQuery DataTable? Below is an example of my table structure: <thead> <tr> <th>Region</th> <th>City</th> <th> ...

Tips for sending a tab id to a URL using jQuery

Upon examining the code snippet below, it is apparent that I am attempting to pass the value of a tab's id to a URL. In this instance, I am displaying it in HTML just for illustrative purposes; however, the hashtag id fails to be transferred to the UR ...

Conceal the scroll bar while the page preloader is active

Is there a way to hide the scroll bar while the preloader is loading on a webpage? I want to prevent users from scrolling until the preloader disappears. I have tried using CSS and setting the body overflow to hidden, but it's not working as expected. ...

Unusual express middleware usage in NodeJS

app.use(function(req,res,next){ console.log('middleware executed'); next(); }); app.get('/1',function(req,res){ console.log('/1'); res.end(); }); app.get('/2',function(req,res){ console.log('/2'); res.end() ...

What is the correct way to access an element with spaces in handlebars while working with node.js?

I have an object containing values with spaces in strings. For example: object = { "group of people": [ { (...) } ], "another group of people": [ { (...) } ] } Now, I want to use this object with the handlebars helper block in my view ( ...

Understanding the intricacies of JavaScript function calls often results in unexpected null returns

I currently have a code that is able to run and collect data using an AJAX library. My goal is to allow users to add their own functions to the library and execute them, similar to $.get. It may be a bit difficult to fully explain what I am trying to achie ...

Unable to apply programatically loaded attributes to the rangeslider.js plugin

I'm having trouble with my graph editor that uses the rangeslider.js plugin. The bars are not updating properly most of the time, and sometimes they don't work at all. I have a demo available here and a simplified version on Fiddle. Strangely, so ...