Activate Auto Navigation Feature on Mouseover using jQuery

I have a series of divs that cycle automatically to display their contents one after the other every few seconds. The same content is also displayed when the corresponding link is hovered over. The functionality is working correctly, but I would like to reset the auto-navigation function so that when the mouse leaves the link, the auto-navigation starts from the first link. Below is the code snippet:


            // Javascript code here
        

            /* CSS code styles here */
        

            <!-- HTML code goes here -->
javascriptjqueryhtmlcss

Answer №1

To incorporate the mouseout event, you can apply the following script:

$('.wpb_wrapper').on('mouseout touchend touchcancel', function() {
  reset();
  start();
})

function start() {
  setTimeout(() => {
    autoNavInterval = setInterval(autoNav, 3000);
  }, 000);
}

function reset() {
  clearInterval(autoNavInterval);
  currentLink = 0;
  homeLinks.forEach(function(element) {
    $('[data-hover=' + element + ']').removeClass('default-underline');
    $('.home-' + element).hide();
  });
  $('.home-' + homeLinks[0]).show();
  hovered = false;
}


$(function() {
  var homeLinks = ['i-t', 'o-c', 'c-f', 'i-c', 'c-u'];
  var currentLink = 0;
  var hovered = false;
  var autoNavInterval;

  $(".home-link").hover(function() {
    hovered = true;
    $('.home-' + homeLinks[currentLink]).hide();
    $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
    currentLink = homeLinks.indexOf($(this).attr('data-hover'));
    $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
    $('.home-' + homeLinks[currentLink]).show();
  }, function() {
    hovered = false;
  });

  function start() {
    setTimeout(() => {
      autoNavInterval = setInterval(autoNav, 3000);
    }, 000);
  }
  
  function reset() {
    clearInterval(autoNavInterval);
    currentLink = 0;
    homeLinks.forEach(function(element) {
      $('[data-hover=' + element + ']').removeClass('default-underline');
      $('.home-' + element).hide();
    });
    $('.home-' + homeLinks[0]).show();
    hovered = false;
  }

  function autoNav() {
    if (hovered === false) {
      $('.home-' + homeLinks[currentLink]).hide();
      $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
      currentLink++;
      if (currentLink >= homeLinks.length) {
        currentLink = 1;
      }
      $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
      $('.home-' + homeLinks[currentLink]).show();
    }
  }
  
  start();
  
  $('.wpb_wrapper').on('mouseout touchend touchcancel', function() {
    reset();
    start();
  });
});
.left-fill {
  background: #0000006b;
  height: 100vh;
}

.right-fill {
  background: pink;
  height: 100vh;
}

.vc_col-sm-6 {
  width: 50%;
  float: left;
}

.pivot-nav {
  list-style: none;
  font-family: 'Montserrat';
  text-align: left;
}

.pivot-nav li a {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none;
  line-height: 40px;
}

.pivot-nav li a.default-underline::after,
.pivot-nav li a:hover::after {
  width: 100%;
}

.pivot-nav:hover a.default-underline:not(:hover)::after {
  width: 0;
}

.pivot-nav li a::after {
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s;
  width: 0;
}

.home-o-c,
.home-c-f,
.home-i-c,
.home-c-u {
  display: none;
}

.our-company {
  clear: both;
  display: block;
  height: 50vh;
}

.cf2 {
  clear: both;
  display: block;
  height: 50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">
  <div class="wpb_wrapper">
    <p class="home-i-t">TEXT One</p>
    <p class="home-o-c">TEXT One</p>
    <p class="home-c-f">TExt for C f.</p>
    <p class="home-i-c">Some more text fo i c.</p>
    <p class="home-c-u">Get in touch </p>
  </div>
</div>
<div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">
  <div class="wpb_wrapper">
    <ul class="pivot-nav">
      <li class="pivot-nav-item"><a data-hover="o-c" class="home-link" href="#" data-toggle="my-scrollspy-2">O C</a></li>
      <li class="pivot-nav-item"><a data-hover="c-f" class="home-link" href="#" data-toggle="my-scrollspy-2">C F</a></li>
      <li class="pivot-nav-item"><a data-hover="i-c" class="home-link" href="#" data-toggle="my-scrollspy-2">I C</a></li>
      <li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a data-hover="c-u" class="home-link" href="#">C U</a></li>
    </ul>
  </div>
</div>

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

Conceal an element within the initial row of the table

Below is the table structure: <table id="mytable"> <tr> <td>name</td> <td> <a id="button1" class="button">link</a> </td> </tr> <tr> <td>name2</td> ...

jqueryhtmlcss

When a model is changed from within a jQuery event, Angular 2 fails to update the view

During the development process, I encountered an issue while creating a custom search panel that displayed search results in a dropdown container. In my controller, I defined the following: export class ProductSearchComponent implements OnInit { publ ...

javascriptjqueryangular

Node.js for Instant Notifications

Currently in the works is a calendar application using Node.js, express.js, and Sequelize. The functionality is straightforward - users can create tasks in the calendar and assign tasks to other system users. One of the challenges I'm facing involve ...

javascriptnode.jswebsocketsocket.iosequelize.js

Form containing unchecked checkbox

I am trying to send a false value via post for a checkbox that is not checked by default. Here is how my checkbox is defined: <label><input type="checkbox" id="rez" name="rezerwowanie" value="false" />Rezerwowanie</label> After submitti ...

phphtmlcheckbox

Transforming every function into a for loop using jQuery

Previously, I sought help from the knowledgeable individuals on stackoverflow to assist me in shifting a background image the correct distance during a mouseover event. The solution worked smoothly, however, I am now pondering the efficiency of utilizing t ...

javascriptfor-loopjquery

Using jQuery to implement tiered radio buttons styled with Bootstrap

I am currently in the process of learning jQuery, so please excuse my lack of knowledge in this area. I am working on a web form using Bootstrap that involves tiered radio buttons. When the user selects "Yes" for the first option, it should display the ne ...

javascriptjquerytwitter-bootstrapradio-button

What could be the reason my foreach loop is not being run?

After creating a login form that successfully grants access upon entering the correct email and password, there seems to be an issue. A foreach loop is implemented to test all results, with the assumption of only one account existing. foreach ($result as ...

phphtmlsqlsessionforeach

Enable the use of custom tags containing hyphens in the kses filter for WordPress

I developed a specialized Wordpress plugin that enables users to incorporate custom HTML element tags (such as <my-element>) into the content of a Post. This allows users without the unfiltered_html capability to utilize predefined custom tags. The ...

phphtmlwordpress

Information vanishes as the element undergoes modifications

I am currently working with a JSON file that contains information about various events, which I am displaying on a calendar. Whenever an event is scheduled for a particular day, I dynamically add a div element to indicate the presence of an event on the c ...

javascriptjson

The location.reload function keeps reloading repeatedly. It should only reload once when clicked

Is there a way to reload a specific div container without using ajax when the client requests it? I attempted to refresh the page with the following code: $('li.status-item a').click(function() { window.location.href=window.location.href; ...

javascriptjqueryajax

AngularJS causing a modal popup to appear even when the associated button is disabled

When using a Bootstrap modal popup form that opens on button click in AngularJS, I noticed that the modal still appears even when the button is disabled. Can someone help me understand why this happens? Here is the code for the button: <a class="btn b ...

javascriptjqueryangularjstwitter-bootstraptwitter-bootstrap-3

Creating a custom AngularJS HTTP interceptor that targets specific URLs

Is there a way to configure an $http interceptor to only respond to specific URL patterns? For example, I want the interceptor to only intercept requests that match "/api/*" and ignore any other requests. ...

javascriptangularjsangular-httpangular-http-interceptors

Using jQuery to input a value that returns the [object Object]

While working with jQuery in asp.net, I encountered an issue where the value assigned to a hidden field (hfstockcode) is returning [object Object]. The console output shows v.fn.v.init[1]. How can I retrieve the correct value for the hidden field? $(docum ...

javascriptjqueryasp.net

What could be the reason for the variable failing to update inside a for loop in JavaScript?

When running the for loop, everything appears to be working smoothly except for the failure to update the element variable as planned. <h6>Q1</h6> <h6>Q2</h6> <h6>Q3</h6> However, the output I actually received was: & ...

javascripttemplate-literals

During my JavaScript coding session, I encountered an issue that reads: "Uncaught TypeError: $(...).popover is not a function". This

Encountering an issue while trying to set up popovers, as I am receiving this error: Uncaught TypeError: $(...).popover is not a function. Bootstrap 5 and jQuery links are included in the code, but despite that, the functionality is still not operational. ...

javascripthtmldjangobootstrap-5popover

What is the best way to dynamically assign a value to an anchor tag upon each click using jQuery?

How can I pass a value to an anchor tag on every click using jQuery? I am encountering an issue with my current code where the value is not being retrieved when I click the button. //HTML snippet <button id="a-selectNm" data-a_name="<?php echo $row[ ...

javascriptphpjqueryhtml

Tips for accessing the reference of a child when it is a functional component

Trying to implement a Higher Order Component (HOC) to access the ref of any component. It works perfectly fine when regular JSX is passed, but encounters issues when a functional component is passed: class GetRef extends React.Component { state = {}; ...

javascriptreactjsreact-hooksuse-ref

Attempting to transmit unique symbols using JQuery Ajax to a PHP script

I am using JQuery Ajax to send special characters to a PHP file. sending_special_characters.js var special_chars = '!@#$%^&*()_+-='; var dataToSend = 'data=' + special_chars; $.ajax({ type: "POST", ...

javascriptphpjqueryajax

"Enhance User Experience with Multilevel Dropdowns in Bootstrap 4 - Submenus Aligned to the Top

I recently embarked on a project that involved using Bootstrap 4.4, The project is an eCommerce grocery store with departments comprising categories and subcategories. The main menu became very lengthy when using the default code, so I encountered some al ...

javascripthtmljquerycssbootstrap-4

What is the method for displaying an array separately for each item in JSON using JavaScript?

The issue arises when using for (let pet of person.pets) loop. In my JSON data, the "pets" field is an array but instead of getting a single array for each object, I am getting all pet arrays for every object in the JSON file. The desired outcome is to h ...

javascriptarraysjsonjavascript-objects