jQuery: How can I change buttons appearing on “hover”, to buttons appearing on tap for mobile devices?

问题: I have an Jquery accordion with as content a container, which is set relative to the buttons that I put in there which are set absolute. upon hovering in the video contai...

问题:

I have an Jquery accordion with as content a container, which is set relative to the buttons that I put in there which are set absolute.

upon hovering in the video container, the videos appear. When hovering out of the container, they dissapear. All works fine for laptops/PC

Currently trying to get the buttons to appear when on a mobile screen. Of course, hover wont work, but I cannot seem to figure out how to let the buttons appear on tap and dissapear when you tap again or used one of the buttons

The code I will drop now will be extremely rough + of course you wont see any images, but on hover you will see 2 buttons appear.

  $('.video-js').add('.video-button').hover(function () {
            $('.button-visibility').css("display", "inline-block");
        }, function () {
            $(".button-visibility").css("display", "none");        
    });


    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
        $('.video-js').add('.video-button').onClick( function () {
                $('.button-visibility').css("display", "inline-block");
            }, function () {
                $(".button-visibility").css("display", "none");        
        });
    } 
.video-button {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}


.button-visibility {
    display: none;
    cursor: pointer;
}


.video-play, .video-rewind, .video-check, .video-forward {
    background-color: #ffffff;
    padding: 15px 22px 15px 12px;
    text-align: center;
    
}

.video-check, .video-rewind, .video-forward {
    top: 51%;
    padding: 22px 21px;
}


.video-forward{
    margin-left: 100px;
}

.video-rewind {
    margin-left: -100px;
    padding: 22px 21px;
    
}

.video-check {
    margin-left: 200px;
    background-color: 	#00FF00;
    display: none;
}
<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="accordion">
  <h3> 
     <span> <i class="fas fa-caret-right rotate arrow"></i> Algemene       introductie </span>             
   </h3>
                            
   <div class = "video-parent">
     <video id='my-player' class="video-js" controls data-setup='{"fluid": true}'>
       <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
       <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogv">
       <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
     </video>
   <a class="video-button" id="video-play">></a>
   </div>
   
   <a class="video-button button-visibility video-rewind"> <img src="images/src/rewind%20icon.svg" alt="rewind"></a>
                                    <a class="video-button button-visibility video-forward"> <img src="images/src/forward%20icon.svg" alt="forward"></a>
                                    <a class="video-button video-check"> <img src="images/src/done%20icon.svg" alt="check"></a>
   
   
</div>

<script src="https://vjs.zencdn.net/7.5.4/video.js"></script>


回答1:

Try:

$('.video-js').on('tap', (function () {
            $('.button-visibility').css("display", "inline-block");
        }, function () {
            $(".button-visibility").css("display", "none");        
    });

Source: https://api.jquerymobile.com/tap/ Also, make sure you have jquery and jqueryMobile


回答2:

This is more of a work-around than a solution.

after a full day of testing and trying and being on a time-crunch I decided to take a more "simpler route". I put the buttons under the video. created a class .button-visibility.hover and changed the .css to .addClass and .removeClass. Reason being because it would bug out if i'd press the check mark in video and swap to desktop or vice versa.

I also added if ($(window).width() > 786 ) {} and put my jQuery code in there, so that if the window width would get lower than 786px it would display the buttons under the video as I anticipated to happen.

  • 发表于 2019-07-04 18:36
  • 阅读 ( 213 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除