Home When clicking a button, how do you make video and text appear?
Reply: 3

When clicking a button, how do you make video and text appear?

Maxaye
1#
Maxaye Published in 2018-01-13 07:18:56Z

I'm actually quite lost and don't know where to start. So basically what I'm trying to achieve is when the button is clicked, the text and video will reveal. Otherwise hide it when clicked away.

picture of how I want it preview on the html page

HTML

<div id="abl1"> <!-- Ability ONE VIDEO HEAL SHOT !-->
    <video preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video>
</div>

<div class="shape1"></div>
    <p class="ability1txt">Text.</p>
<div class="button.abl">
    <button id="abl1.btn" class="ability1"></button>
</div>

CSS

abl1 video{
    height: 500px;
    width: 600px;
    z-index: 1;
    position: absolute;
    margin-top: 50px;
    margin-left: 200px;
}


.ability1txt{
    position: absolute;
    text-align: center;
    width: 600px;
    font-size: 27px;
    z-index: 10px;
    margin-left: 55%;
    margin-top:8%;
    font-family: "BigNoodleTitling";
    color: white;  
}
Sean Francis N. Ballais
2#
Sean Francis N. Ballais Reply to 2018-01-13 08:05:37Z

Use jQuery.

You could always use raw Javascript but using jQuery makes things a whole lot easier. Generally, Javascript is used for interactivity.

Your Javascript code would look something like this:

$(document).ready(function() {
    $('div.button\.abl button#abl1\.btn').click(function() {
        if ($('div#abli video').is(':visible') && $('p.ability1txt').is(':visible')) {
            $('div#abli video').hide(); // or fadeOut()
            $('p.ability1txt').hide(); // or fadeOut()
        } else {
            $('div#abli video').show(); // or fadeIn()
            $('p.ability1txt').show(); // or fadeIn()
        }
    });
});
S.Serp
3#
S.Serp Reply to 2018-01-13 07:57:35Z

You can do it by javascript as following:

function ab1_Click() {
   var vid1 = document.getElementById("ab1Video");
   var t1 = document.getElementById("ab1Text");
   var v = "visible"; 
   if (vid1.style.visibility != "hidden") { v = "hidden"; }
   vid1.style.visibility =  v; 
   t1.style.visibility = v;
}
<div id="abl1"> <!-- Ability ONE VIDEO HEAL SHOT !-->
        <video id="ab1Video" preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video>
</div>

<div class="shape1"></div>
<p id="ab1Text" class="ability1txt">Text.</p>

<div class="button.abl">
    <button id="abl1.btn" class="ability1" onclick="ab1_Click()">Show/Hide</button>
</div>

zer00ne
4#
zer00ne Reply to 2018-01-13 12:59:39Z

You really don't need JavaScript to make video and text show/hide. By using only CSS and HTML we could hide anything with a strategically placed checkbox and label. Added some JavaScript so the video pauses when it's hidden, but the show/hide feature requested doesn't need any JavaScript.

Details commented in Demo

Demo

// Reference the <video> and <input type='checkbox'>
var v = document.getElementById('vid0');
var c = document.getElementById('chx0');

/* Whenever label.btn is clicked, the checkbox triggers
|| the change event. When a change happens, the <video>
|| will play if the checkbox is checked and pause if 
|| it isn't
*/
c.onchange = function(e) {
  if (this.checked) {
    v.play();
  } else {
    v.pause();
  }
}
html,
body {
  width: 100%;
  height: 100%;
}


/* Although .chx is "gone", it is still able to 
|| influence and be influenced by other elements
*/

.chx {
  display: none
}

.case {
  display: none;
  height: 270px;
  width: 480px;
}


/* When checkbox is checked the figure.case
|| that follows the label.btn which in turn 
|| follows the checkbox is revealed
*/

.chx:checked+.btn+.case {
  display: block;
}

#vid0 {
  width: 100%;
  height: 100%;
  display: block;
}

.cap {
  text-align: center;
  width: 100%;
  font-size: 27px;
  color: white;
  display: table;
  background: rgba(0, 0, 0, 0.6);
}

.btn {
  font-size: 48px;
  display: inline-block;
  width: 8ch;
  height: 2ex;
  cursor: pointer;
  color: #00f;
  text-shadow: 3px 1px 2px #555;
}

.btn::before {
  content: '▶'
}


/* When the checkbox is checked, the pseudo-element
|| of label.btn that follows the checkbox changes its
|| icon to pause.
*/

.chx:checked+.btn::before {
  content: '⏸';
  font-size: 54px;
}
<input id='chx0' class='chx' type='checkbox'>
<!-- 
[for] attribute value is the #id of the form-control it is accosiated with. This association allows the <label> to act as the form-control's proxy. Simply put, if label#btn0 is clicked, then input#chx0 is checked or unchecked.
-->
<label id="btn0" class='btn' for='chx0'></label>


<figure class="case">
  <video id='vid0' preload="auto" autoplay loop src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005611.mp4" width='480' height='270'></video>
  <figcaption class='cap'>1 min/11 sec Leader</figcaption>
</figure>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.310378 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO