CODEWITHSUNDEEP
jqueryhtmlcss
user38208
user38208

Reputation: 1094

Hover interaction on Touch/Mobile devices using jQuery

I am using jquery to show content to links to hover and when the same links are clicked they scroll down to the appropriate div containing more content. This seem to work well on laptops and desktops.

I am having a problem when coming to mobile or touch devices as the hover function doesn't work. What happens is that, one the link is touched, the hover text is momentarily shown and then is scrolls down to the div. Is it possible to delay the scroll down by 5 seconds so that the text is shown and then it scrolls down.

Or what other atlernative can we use for touch and mobile devices only?

$(".o-c").click(function() {
  $('html, body').animate({
    scrollTop: $(".one").offset().top
  }, 2000);
});

$(".o-c").hover(function() {
  $('.home-o-c').show();
  $('.home-i-t').hide();
}, function() {
  $('.home-o-c').hide();
  $('.home-i-t').show();
});

$(".c-f").hover(function() {
  $('.home-c-f').show();
  $('.home-i-t').hide();
}, function() {
  $('.home-c-f').hide();
  $('.home-i-t').show();
});

$(".i-c").hover(function() {
  $('.home-i-c').show();
  $('.home-i-t').hide();
}, function() {
  $('.home-i-c').hide();
  $('.home-i-t').show();
});


$(".c-u").hover(function() {
  $('.home-c-u').show();
  $('.home-i-t').hide();
}, function() {
  $('.home-c-u').hide();
  $('.home-i-t').show();
});
.left {
  width: 50%;
  float: left;
  background: red;
  height: 100vh;
}

.right {
  width: 50%;
  float: right;
  background: green;
  height: 100vh;
}

.one {
  width: 100%;
  background: yellow;
  height: 100vh;
  display: block;
  clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="left">


  <ul class="pivot-nav">
    <li class="pivot-nav-item"><a class="o-c default-underline custom-scroll-link" href="#one" data-toggle="my-scrollspy-2">1</a></li>
    <li class="pivot-nav-item"><a class="c-f custom-scroll-link" href="#" data-toggle="my-scrollspy-2">2</a></li>
    <li class="pivot-nav-item"><a class="i-c custom-scroll-link" href="#" data-toggle="my-scrollspy-2">3</a></li>

  </ul>

</div>

<div class="right">

  <p class="home-i-t" style="display: block;">TEXT.</p>
  <p class="home-o-c" style="display: none;">TEXT More.</p>
  <p class="home-c-f" style="display: none;">2</p>
  <p class="home-i-c" style="display: none;">3</p>


</div>

<div class="one">
  Some more TEXT HERE
</div>

Upvotes: 1

Views: 128

Answers (1)

Rounin
Rounin

Reputation: 29453

Is it possible to delay the scroll down by 5 seconds so that the text is shown and then it scrolls down.

Yes, this is possible.

You need to execute only two steps:

  1. Prevent the default behaviour of the link click using preventDefault();
  2. Set a timeout using setTimeout();, after which the browser responds to the link click

Working Example:

const sectionLinks = document.querySelectorAll('.links li a');
const textParagraph = document.querySelector('.text p');

sectionLinks.forEach((sectionLink) => sectionLink.addEventListener('click', (e) => {
    
    // PREVENT THE DEFAULT LINK CLICK BEHAVIOUR
    e.preventDefault();

    // ADD THE TEXT
    textParagraph.textContent = 'You clicked the ' + e.target.textContent + '...';

    // DUPLICATE THE STANDARD LINK CLICK BEHAVIOUR (AFTER A TIMEOUT)
    setTimeout(() => {window.location.href = e.target.href}, 1000);

  }, false));
:root {
scroll-behavior: smooth;
}

body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 400px 400px 400px 400px;
color: rgb(255, 255, 255);
}

a {
color: rgb(255, 255, 255);
}

li {
line-height: 36px;
}

div {
padding: 12px 0;
}

h2, p {
padding-left: 12px;
}

.section {
grid-column: 1 / 3;
}

.links {
background-color: rgb(255, 0, 0);
}

.text {
background-color: rgb(0, 127, 0);
}

#section-a {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 0);
}

#section-b {
background-color: rgb(255, 127, 0);
}

#section-c {
background-color: rgb(0, 0, 191);
}
<div class="links">
<ul>
<li><a href="#section-a">Link to Section A</a></li>
<li><a href="#section-b">Link to Section B</a></li>
<li><a href="#section-c">Link to Section C</a></li>
</ul>
</div>
<div class="text"><p>Text Here...</p></div>
<div id="section-a" class="section"><h2>Section A</h2></div>
<div id="section-b" class="section"><h2>Section B</h2></div>
<div id="section-c" class="section"><h2>Section C</h2></div>

Upvotes: 1

Related Questions