Aligning four circle's inside a square in CSS and HTML5 - javascript

I am developing a Simon Says game, and have all the working JavaScript, etc.
The main problem I am having is with the CSS; everything works when you click it,
Here is a mock image of what I want it to look like:
update still having alingment problems have updated my CSS
CSS:
body {
background-color: #333;
color: #fff;
}
ul {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
padding: 3px;
}
.wrapper {
position: relative;
width: 640px;
margin: 0 auto;
}
.back {
width:700px;
height:700px;
background-color:black;
}
.pad {
width: 200px;
height: 200px;
z-index: 1;
margin: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
}
.shape1 {
position: absolute;
left: 0;
top: 50%;
margin-top: -300px;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
.shape2 {
position: absolute;
left: 50%;
margin-left: -50px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.shape3 {
position: absolute;
left: 0;
right: 50%;
margin-right: -50px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
}
.shape4 {
position: absolute;
left: 0;
bottom: 50%;
margin-bottom: -50px;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}
.level, .score {
width: 50%;
float: left;
text-align: center;
}
.sButton {
width: 30%;
margin: 0 auto;
}
.start {
width: 100%;
height: 30px;
text-align: center;
}
HTML:
<body>
<div class="wrapper">
<div class="back">
<div class="pad shape1" data-pad="1">
<audio preload="auto" class="sound1">
<source src="sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape2" data-pad="2">
<audio preload="auto" class="sound2">
<source src="sounds/mp3/sounds_02.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape3" data-pad="3">
<audio preload="auto" class="sound3">
<source src="sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape4" data-pad="4">
<audio preload="auto" class="sound4">
<source src="sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="break"></div>
</div>
<div class="level">
<h2>Level: 1</h2>
</div>
<div class="score">
<h2>Score: 0</h2>
</div>
<ul class="difficulty">
<li>
<input type="radio" class="difOpt" name="difficulty" value="2">Easy
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="1" checked>Normal
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.5">Hard
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.25">Insane
</li>
</ul>
<div class="sButton">
<button class="start">start</button>
</div>
</div>
</body>


You are going to want to give your shapes an absolute position and use the "top", "left", "right" and "bottom" css properties like so:
.shape1 {
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
Note that margin-top is used to slightly offset the "top" property. Border-radius will turn these into circles.

Related

DIV height changes after inserting new HTML

I have setup a video header in my homepage. I have setup javascript to remove the DIV (id=remove) with the video (after it ends running) and replace it with an image and 2 buttons.
What happens is that the next DIV below the Video/Image DIV (id=videoheader) is pushed down as the DIV increases in height.
I think there is something wrong with the css that positions the 2 buttons, because running it without inserting the 2 buttons nothing happens and all stays in place as expected.
I have tried to position the button relative and absolute without result. I have tried to adjust margins to position the next div that it does not move.
thanks for the help, Erwin
<div id="videoheader">
<div id="show" class="page-video-containter">
<div id="remove">
<video id="myVideo" playsinline="" autoplay=""
muted="" class="page-media">
<source src="testvideo.mp4" type="video/mp4">
</video>
</div>
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
var el = document.getElementById ("remove");
el.remove();
document.getElementById("show").insertAdjacentHTML('beforeend',
'<img class="page-media" src="SL_STILLS_10.png"> <div
class="women"> <input type="button" class="button"
onclick="location.href=\'#\';" value="Women shop here" /> </div>
<br> <div class="men"> <input type="button" class="button"
onclick="location.href=\'#\';" value="Men shop here" /> </div>');
}
</script>
</div>
This is the CSS
.page-video-container {
position: relative; width: 100%; height: 100%;
}
.page-media {
position: relative; width: 100%; height: 100%; top: 0;
left: 0; right: 0; bottom: 0; background-size: cover; z-index: -1;
margin: 0;
}
#videoheader {
position: relative; margin: 0%;
}
.videotext {
color: white; margin: 0px; padding: 20px; position:
absolute; top: 2%; font-size: 2vw;
}
#videoheader .women .button {
margin-top: -1%; position: absolute;
top: 5%; left: 50%; transform: translate(-50%, -50%);
}
#videoheader .men .button {
margin-top: -1%; position: absolute; top:
10%; left: 50%; transform: translate(-50%, -50%);
}

Playing multiple audio files throws error on Firefox

I'm using multiple audio files in a sample page.
The audio should play on audio player's play button click as well as background image click and show a mic image throughout while playing.
But this is not working right in Firefox and IE alone and others are fine, the Mic image is not getting activated while clicking the play button in the audio player, but works fine on BG image click.
pasting the fiddle URL hence snippet doesn't work
https://jsfiddle.net/sivakanagaraj/g8rxp3h0
$(function() {
$('.medical-minutes-list a').click(function(e) {
e.preventDefault();
var $audio = $(this).find('audio');
$('.overlay2').removeClass('overLi');
$audio.data('playing') ? $audio.trigger('pause') && $('.overlay2').removeClass('overLi') : $audio.trigger('play') && $(this).find('.overlay2').addClass('overLi');
});
$('.audio').on('play', function() {
$('.audio').data('playing', true).not(this).trigger('pause').data('playing', false) && $(this).find('.overlay2').removeClass('overLi');
}).on('pause', function() {
$(this).data('playing', false) ;
});
});
.medical-minutes-list {
display: flex;
flex-wrap: wrap;
}
.medical-minutes-list li {
width: 40%;
padding: 0;
float: left;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 20px;
}
ul li {
padding: 4px 0 4px 15px;
position: relative;
}
.medical-minutes-list li a {
position: relative;
float: left;
width: 100%;
min-height: 173px;
}
li{list-style-type:none}
.medical-minutes-list li a img {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
.medical-minutes-list .audio {
position: absolute;
border: 1px solid #868686;
width: 100%;
background: #f1f3f4;
left: 0;
min-height: 56px!important;
bottom: 0;
z-index: 1;
}
.minutes .medical-minutes-list li a .overLi, .minutes .medical-minutes-list li a:hover .overlay {
left: 0;
height: 100%;
background-color: rgba(0,0,0,.3803921568627451);
background-position: center;
}
.minutes .medical-minutes-list li a .overLi, .minutes .medical-minutes-list li a:hover .overlay {
display: block!important;
cursor: pointer;
background: url(https://i.pinimg.com/originals/50/01/99/5001999f2024f364b90d6859a2ae4922.png);
background-repeat: no-repeat;
position: absolute;
background-size:100%;
top: 0;
bottom: 96px;
left: 30px;
right: 0;
border: 0;
border-radius: 0;
width: auto!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="minutes">
<ul class="medical-minutes-list">
<li><a><img src="https://i2.wp.com/ipadhelp.com/wp-content/uploads/2014/03/sound-e1451764735946.jpg?resize=800%2C525&ssl=1"> <span class="overlay2 "> </span> <span class="overlay overlay1">
<audio class="audio" controls="" src="http://www.schillmania.com/projects/soundmanager2/demo/_mp3/rain.mp3">Your browser does not support the audio element.</audio>
</span> </a>
<div class="details">
<h4><strong>demo</strong></h4>
</div>
</li><li><a><img src="https://i2.wp.com/ipadhelp.com/wp-content/uploads/2014/03/sound-e1451764735946.jpg?resize=800%2C525&ssl=1"> <span class="overlay2"> </span> <span class="overlay overlay1">
<audio class="audio" controls="" src="http://www.evidenceaudio.com/wp-content/uploads/2014/10/monsterchords.mp3">Your browser does not support the audio element.</audio>
</span> </a>
<div class="details">
<h4><strong>demo</strong></h4>
</div>
</li><li><a><img src="https://i2.wp.com/ipadhelp.com/wp-content/uploads/2014/03/sound-e1451764735946.jpg?resize=800%2C525&ssl=1"> <span class="overlay2"> </span> <span class="overlay overlay1">
<audio class="audio" controls="" src="http://www.evidenceaudio.com/wp-content/uploads/2014/10/lyricslap.mp3">Your browser does not support the audio element.</audio>
</span> </a>
<div class="details">
<h4><strong>demo</strong></h4>
</div>
</li>
</ul>
</div>

HTML: Show transparent cover on image and video

I am trying to show a transparent cover when I hover over a <picture /> or a <video />, and hide the cover again when the mouse leaves the image or the video.
Here is my code:
$(document).ready(function() {
$('.cspn-show-on-hover').hover(
function() {
$(this).find('.cspn-cover').css('display', 'table-cell');
},
function() {
$(this).find('.cspn-cover').css('display', 'none');
},
);
});
.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<video class="cmedia-box" controls>
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
As you may notice, when you hover on the image, a transparent purple cover is shown. But when I used a <video /> instead of <picture />, the cover no longer appears !
Could anyone help me identify the reason ?

I think you are looking for something like this:
<html>
<head>
<style>
div{display:inline-block;}
img,video{height:200px;}
.cover:hover{background:#fff;opacity:0.15;}
</style>
</head>
<body>
<div class="cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
<div class="cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</body>
</html>

All you need is a wrapper:
.media-cover {
display: inline-block;
position: relative;
}
.media-cover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #6b478fb3;
opacity: 0;
}
.media-cover:hover:after {
opacity: 1;
}
<div class="media-cover">
your media object here...
</div>
Here's an example with the media objects centered in a full screen parent:
.media-cover {
position: relative;
display: inline-block;
}
.center-me {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 15%;
border-bottom: 1px solid #eee;
}
.media-cover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none; /*delete this line to disable interaction with video/picture */
background-color: #6b478fb3;
opacity: 0;
transition: opacity .2s linear; /*delete this line to disable fade effect */
}
.media-cover video, .media-cover picture, .media-cover img {
display: block;
max-width: 100%;
}
.media-cover:hover:after {
opacity: 1;
}
picture img {
max-width: 100%;
display: block;
}
body {margin: 0;}
<div class="center-me">
<div class="media-cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
</div>
<div class="center-me">
<div class="media-cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</div>

Video elements should be treated as images, where they can't have unrelated children elements. Also, you should be able to make the hover event by just using pure css like so:
.cmedia-box:hover .cspn-cover {
display: table-cell;
}
I made it work how you might have intended here:
.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cmedia-box:hover .cspn-cover {
display: table-cell;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<div class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<video controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>

How To Vertically Center Text Over Responsive Video

For some reason this is giving me heck and can't find a solid answer.
I have a video playing in the background that goes to full-width and is responsive to the screen size. I have a title/text over the video. But I cannot for the life of me figure out how to vertically center this text to the video in a responsive way! Thanks for any help!
Codepen:
http://codepen.io/149203/pen/VagPxe
html:
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div> <!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div> <!-- header-container -->
</body>
css:
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
text-align: center;
color: white;
}
pulling in this css:
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css

Display wrapper to display: table, change child element to display: table-cell, vertiacl-align: middle.
http://codepen.io/anon/pen/ZWwLPP

I found and forked this CodePen. This is the best solution I found. (Uses Bootstrap.)
http://codepen.io/149203/pen/JXxbEL
HTML
<div class="row">
<div class="col-xs-12 vert-center-container">
<video autoplay loop style="width:100%" class="img-responsive">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" />
</video>
<div class="vert-center-text">
<h1>Caption Text</h1>
</div>
</div>
</div>
CSS
.vert-center-text {
position: absolute;
top: 40%;
left: 0;
text-align: center;
width: 100%;
}
.vert-center-text h1 {
color: white;
}
.vert-center-container {
position:relative;
}

simulate the the header container as table and h3,h6 as table-cell with vertical-align:middle
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
display:table;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
display:table-cell;
vertical-align:middle;
text-align: center;
color: white;
}
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div>
<!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div>
<!-- header-container -->
</body>

how to place Close button on Youtube Player

Could you help me ? how to place "Close Button" over Youtube player ? I am trying but it's going back to the the player.
<iframe id="ytPlayer" class="white_content" style="z-index: 1004;display: block;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="532" height="329" src="http://www.youtube.com/embed/xHLnZMjJ8bY?autoplay=0&enablejsapi=1&origin=http%3A%2F%2F127.0.0.1%3A81"></iframe>
<div id="ytinfo" class="white_content" style="display: block;">
<div id="ytName">A.R Rahman Maahi Ve Song Highway</div>
<div id="ytDesc">
<p>Maahi Ve Full Song (Audio) ► http://youtu.be/S1aQhVUy_9g </p>
</div>
</div>
<div id="fade" class="black_overlay" onclick="closeLightBox()" style="display: block;">
<div style="
z-index: 9999;
left: 78%;
top: 11%;
width: 22px;
position: absolute;
"> <img src="https://airasiaxtakeover.appspot.com/imgs/1060/WhiteClose.png"></div>
</div>
css --
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 23%;
width: 50%;
height: 50%;
padding: 16px;
background-color: black;
z-index:1002;
overflow: auto;
}
Here is the demo Link :- http://jsfiddle.net/rushijogle/EFbzY/
Thank you in advance

Your z-index needs to higher:
.black_overlay{
z-index:9999;
}
DEMO
Also, for IE you need to add the wmode parameter to your video URL and set it to transparent
Eg.
http://www.youtube.com/embed/xHLnZMjJ8bY?autoplay=0&enablejsapi=1&origin=http%3A%2F%2F127.0.0.1%3A81&wmode=transparent

Categories