Currently the Overlay only closes upon clicking button 'X'. I would like it to close when clicking outside the overlay or if the page is refreshed.
The other thing I have tried at least 100 times and miserably failed, is to keep the hover effect (color #F00) intact when the overlay is active. I have tried
.active{
color:#F00;
}
but it seems that this only works for the split second the link is clicked on.
The Javascript is as following:
<script type="text/javascript">
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
</script>
The CSS is as following:
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
</style>
The HTML is as following:
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
Your help will be strongly appreciated!
Keep in mind this is a quick fix for your problem and wrote it to show you some basics in javascript
document.onclick = function(event) this triggers on any mouse click on the document.
var target = getTarget(event); this calls the function that will return what element was clicked
What the function does
Since all your elements have an id we are checking to see if the id is blank. If there is no idea it is than outside your elements so close the div
I added an id to your button so we could change the color from black to red
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>
Related
Basically, I coded this player for my personal video hosting site (some elements censored in this example) but when I embed a video, it aligns to the left side and gets cut off at the right side or has a black bar there if the ratio is off.
(I embedded a video from Archive.org for this example, it is by no means my own. It appears to belong to Scott Draves.)
function vidplay() {
var video = document.getElementById("SubjectVideo");
var button = document.getElementById("play");
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function restart() {
var video = document.getElementById("SubjectVideo");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("SubjectVideo");
video.currentTime += value;
}
function hideControls() {
var x = document.getElementById("controls");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
background-color: black;
}
#SubjectVideo {
position: fixed;
height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
#Data {
display: flex;
flex-wrap: wrap;
}
.EpisodeData {
text-align: right;
flex: 50%;
}
#hideButtons {
text-align: left;
flex: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>[Video title]</title>
<link rel="icon" href="../../../../favicon.ico" type="image/png" sizes="16x16">
<link rel="stylesheet" href="../../../player.css">
<script src="../../../RedirectScripts/redirect.js"></script>
<script src="../../../player.js"></script>
</head>
<body id="main" onLoad="hideControls()">
<video autoplay id="SubjectVideo" onended="NextVideo()">
<source src="https://ia801507.us.archive.org/35/items/electricsheep-flock-247-52500-0/00247%3D52640%3D52374%3D52639.mp4" type="video/mp4">
Your browser doesn't support < video >..
</video>
<div class="content">
<div id="controls">
<div id="buttonbar">
<p><center><img src="../../logo.png" width="20%"></p>
<button id="restart" onclick="restart();"><img src="../../../restart.png" alt="restart"></button>
<button id="rew" onclick="skip(-30)"><img src="../../../rewind.png" alt="rewind 30s"></button>
<button id="play" onclick="vidplay()"><img src="../../../play.png" alt="play/pause"></button>
<button id="fastFwd" onclick="skip(30)"><img src="../../../fastforward.png" alt="fast-forward 30s"></button>
</div>
</div>
<div id="Data">
<div class="hideButtons">
<button id="hide" onclick="hideControls()">Show/Hide Controls</button>
</div>
<div class="EpisodeData">
Video Title
</div>
</div>
</div>
</body>
</html>
When I insert a tag around the video, it puts the left edge of the video on the edge instead of properly centering it.
does anyone know how I could effectively center it, and put borders on the bottom and top instead of having a cutoff on the sides?
The error at the end is for an autoplay script that isn't linked here, it can be disregarded.
Add the next styles to the video tag
left: 0;
right: 0;
margin: auto;
Add this #SubjectVideo ruleset to center your <video> tag:
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: auto;
margin-left: auto;
It should look like this:
#SubjectVideo {
position: fixed;
height: 100%;
margin-right: auto;
margin-left: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I want to create 2 buttons can when clicked will reveal their respective content from 2 different directions.
Example:
When a user click on smt, the content will open from the left.
When a user click on mi, the content will open from the right.
So far, I managed to do the smt part only as I don't know how to make the "mi" part work.
Below is my code:
Style:
<style>
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 60;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 60px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 650px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
SMT button:
<div id="myNav" class="overlay">
×
<div class="overlay-content">Smt</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px; left:300px;" onclick="openNav()">smt</span>
JavaScript:
<script>
function openNav() {
document.getElementById( "myNav" ).style.width = "100%";
}
function closeNav() {
document.getElementById( "myNav" ).style.width = "0%";
}
</script>
How can I re-use the same code for the second button?
I think you are looking for this.. May be this could hep you
I use jquery-ui, function slide to achieve desire effect
Using single content
$('#loginPanel').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'left'},1000);
} else {
$('#userNav').hide('slide',{direction:'left'},1000);
}
});
$('#loginPanel1').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'right'},1000);
} else {
$('#userNav').hide('slide',{direction:'right'},1000);
}
});
a {
color: #000;
cursor:pointer;
display:block;
}
#userNav{
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<button id="loginPanel">left-to-right</button>
<button id="loginPanel1">right-to-left</button>
<div id="userNav">User Area</div>
Using separate content (i use flex to make both content show inline you can just remove class main-content to show them on separate line as block)
$('#loginPanel').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'left'},1000);
} else {
$('#userNav').hide('slide',{direction:'left'},1000);
}
});
$('#loginPanel1').click(function(){
if ($('#userNav1').is(':hidden')) {
$('#userNav1').show('slide',{direction:'right'},1000);
} else {
$('#userNav1').hide('slide',{direction:'right'},1000);
}
});
a {
color: #000;
cursor:pointer;
display:block;
}
.area{
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
.main-content {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<button id="loginPanel">left-to-right</button>
<button id="loginPanel1">right-to-left</button>
<div class="main-content">
<div class="area" id="userNav">User Area 1</div>
<div class="area" id="userNav1">User Area 2</div>
</div>
You can pass the Id to the function like this:
onclick="openNav("myNav1")"
And if you need to hide element, You can use: display: "none"
<script>
function openNav(id) {
document.getElementById(id).style.display = "block";
}
function closeNav(id) {
document.getElementById(id).style.display = "none";
}
</script>
Just need to do this for the code:
Add "2" to "openNav", "myNav2", "closeNav2"
< script>
function openNav2() {
document.getElementById( "myNav2" ).style.width = "100%";
}
function closeNav2() {
document.getElementById( "myNav2" ).style.width = "0%";
}
</script>
Same for the button code, add "2" to "myNav", "openNav", "closeNav"
<div id="myNav" class="overlay">
×
<div class="overlay-content">MI</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px;
left:300px;" onclick="openNav()">MI</span>
All the stuff for the button seems right and it works in reverse of what I want currently. when I load the page the div: myDIV is there and the button toggles it disappearing and reappearing. How do I make myDIV none by default but still have the button function as a toggle
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display:none;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
I think the point is in here style.display = '' actually do
When you use style.display to get display status, it can not get display attribute defined in css
You need to get CSS Value first to toggle the display value with a button in JS. By default, it is advised not to give inline style on HTML.
function myFunction() {
const cont = document.querySelector("#chartContainer");
const styles = getComputedStyle(cont)
const displayStyle = styles.display;
if(displayStyle === "none"){
cont.style.display = "block";
}else {
cont.style.display = "none";
}
}
const BTN = document.querySelector("button");
BTN.addEventListener('click', myFunction);
.container {
background-color: #FFF;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
}
#chartContainer {
background-color: blue;
border-radius: 25px;
height: 200px;
width: 100%;
float: below;
display: none;
}
button {
width: 50px;
height: 50px;
}
<div class="container">
<button>toggle</button>
<div id="chartContainer">
</div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
</div>
I have used bootstrap to correlate the size of my background image to the window, but when I try to put images on top of it they get appended below. Also have attached my javascript, full functional, supposed to move images on touch of key
console.log('javascript linked');
$(function(){
function player1() {
var margin1 = $('#bar1').offset().left;
if (margin1 < "600") {
var move1 = (margin1 + 50);
$('#bar1').css('marginLeft', move1);
} else {
alert("Player 1 is the Winner!!!!");
}
}
function player2() {
var margin3 = $('#bar3').offset().left;
if (margin3 < "600") {
var move3 = (margin3 + 50);
$('#bar3').css('marginLeft', move3);
} else {
alert("Player 2 Is The Winner!!!!");
}
}
function checkPlayer1(event) {
var x = event.keyCode;
if (x===13){
player1();
}
}
function checkPlayer2(event) {
var y = event.keyCode;
if (y===32){
player2();
}
}
function move(){
var div = $("#bar2");
div.animate({left: '638px'}, 1000);
};
$('body').keypress(checkPlayer2);
$('body').keypress(checkPlayer1);
$("window").ready(move)
})
h1 {
position: absolute;
top: 5%;
margin: 0 auto;
font-size: 5vw;
left: 10%;
}
#bar1{
background: url('http://orig11.deviantart.net/c8fb/f/2011/237/3/1/profile_picture_by_red_angry_bird-d47u569.png');
background-repeat:no-repeat;
background-size:contain;
margin-left: 10px;
height: 50px;
width: 50px;
display: inline-block;
}
#bar2{
background: url('http://vignette3.wikia.nocookie.net/angrybirds/images/b/bf/Kingcry.gif/revision/latest?cb=20130310195100');
background-repeat:no-repeat;
background-size:contain;
margin-left: 10px;
height: 50px;
width: 50px;
display: inline-block;
position: relative;
}
#bar3{
background: url('http://www.clipartkid.com/images/47/angry-bird-yellow-icon-angry-birds-iconset-femfoyou-uJ3C4l-clipart.png');
background-repeat:no-repeat;
background-size:contain;
margin-left: 10px;
height: 50px;
width: 50px;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<img src="http://www.walldevil.com/wallpapers/a28/angry-birds-computer-background-linnut-rovio-writing.jpg" />
<h1>First Player to Catch the Pig Wins!</h1>
<div class="flex-container">
<div class="flex-item" id="bar1"></div> <br>
<div class="flex-item" id="bar2"></div> <br>
<div class="flex-item" id="bar3"></div>
</div>
</body>
</html>
add a class to the image like this:
<img class = "img-background" src="http://www.walldevil.com/wallpapers/a28/angry-birds-computer-background-linnut-rovio-writing.jpg" />
and then add a css 'position absolute, top 0, left 0 ':
.img-background{
position: absolute;
top: 0;
left: 0
}
I need to have 2 footer.The first footer should be fixed as page scrolls, as scroll reaches page end, footer1 should rest/placed before the footer2.
<html>
<head>
<style>
body{
margin: 0;
}
#header{
height: 100px;
background: orange;
}
#body{
height: 10000px;
background: white;
}
#footer1{
height: 100px;
background: darkblue;
}
.footer-sticky{
position: fixed;
bottom: 0;
right: 0;
left: 0;
background: pink;
}
#footer2{
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="body"></div>
<div id="footer1" style="position:fixed;bottom: 0;right: 0;left: 0;background: black;height:50px;color:white;">footer1</div>
<div id="footer2" style="">footer2</div>
</body>
</html>
Program includes 2 footer.The first footer should be fixed as page scrolls, as scroll reaches page end, footer1 should rest/placed before the footer2.
Here's jsfiddle link
http://jsfiddle.net/dLe5cv4j/
add position: relative; to the body and insert this javascript at the end (or inside the page load event)
var f1 = document.getElementById("footer1");
var f2 = document.getElementById("footer2");
window.addEventListener("scroll", function(){
if (document.body.scrollTop + window.innerHeight >
document.body.scrollHeight - f2.clientHeight ) {
f1.style.position = "absolute";
f1.style.bottom = f2.clientHeight+"px";
}
else{
f1.style.position = "fixed";
f1.style.bottom = "0px";
}
});
Result: http://jsfiddle.net/Lkuy0ext/
Add in your styles may work you
#footer1
{
z-index: 1;
}
#footer2
{
position: relative;
z-index: 2;
}
#footer1{
margin-bottom:100px;
height: 100px;
background: darkblue;
}
edit and try.