How to make child span collapse with parent - javascript

I am teaching myself about animations using simple rectangles and I have so far managed a bit of progress with this simple project:
html:
<!DOCTYPE html>
<html>
<head>
<title>test slider</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<span class="rect">
<span class="otherrect"></span>
</span>
<p id="button"> click here </p>
</body>
</html>
css
.rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.otherrect {
float: left;
height: 200px;
width: 250px;
background-color: red;
}
.closed {
height: 0;
background-color: white;
}
#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}
js
$(document).ready(function(){
$("#button").click(function(){
if ($( ".rect" ).hasClass( "closed" )){
$(".rect").removeClass("closed");
} else {
$(".rect").addClass("closed");
}
});
});
And it looks like this:
So, what I was aiming at, was that the red rectangle (class: otherrect) should also collapse and fade like its parent rectangle. How can I do this without using javascript and preferably not having to use the display property. Thanks for your time. P
---------------------------------EDIT AFTER RECEIVING ANSWERS-----------------------------------
Thank you all for your answers. These are all good in one way or another, but I guess I sould have mentioned that the red rectangle is going to be a video in the finished project so I need it to be a child of the other element because if the class that collapses it is applied to it directly, it affects the way it looks. Please refer to this other question to see a gif of what I mean:
slideDown() function behaving oddly

Change your span class or add one like this :
<span class="rect">
<span class="otherrect rect"></span>
</span>

Just add overflow:hidden; in the .rect { class and your good. :)

Move the animation settings into a 3rd class ("anim"), give both span elements that class as well and add the "closed" class to any element with the "anim" class in your onclick.
Note: This uses the same amount of JavaScript as your question, which I assume is ok (but technically doesn't meet the "without using javascript" requirement)
(thx to Mark B for the onclick)
EDIT: Added a video. The animation is a little hokey, sorry :(
$(function(){
$("#button").click(function() {
$('.anim').toggleClass('closed')
});
});
.rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;
}
.anim {
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.otherrect {
float: left;
height: 200px;
width: 250px;
background-color: red;
}
.closed {
height: 0;
background-color: white;
}
video {all:inherit}
#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<span class="rect anim">
<span class="otherrect anim"><video class="anim" controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video></span>
</span>
<p id="button"> click here </p>
</body>

Related

How do I change the background of a button when clicked?

Okay, okay. I know many people have asked this question on Stack Overflow, but the solutions don't work for me. So my problem is simple: how do I make the female-av-button and male-av-button have a background URL of female-avatar & male-avatar respectively? Here's my code:
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" onclick="chooseanav()" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
// document.getElementsByClassName("user-input").style.height="500px";
function chooseanav() {
document.getElementsByClassName('female-av').style.background = "url('../img/female-avatar.png') no-repeat";
}
</script>
</body>
</html>
Any help is greatly appreciated.
Thanks!
Change your code to be;
document.getElementsByClassName('female-av')[0].style.background = "url('../img/female-avatar.png') no-repeat";
Oddly, unlike .getElementById() when you use .getElementsByClassName() you need to index the object. I think this is because IDs are unique where classes can be many.
The clue is in the getElement vs getElements.
EDIT: to answer your comment regarding clicking outside it etc you will have to change up your code a bit. Check my snippet below and let me know if anything doesn't make sense!
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
var femaleAV = document.getElementsByClassName('female-av')[0];
var maleAV = document.getElementsByClassName('male-av')[0];
document.addEventListener('click', function(e) {
if (e.target.className == 'female-av') {
femaleAV.style.background = "url('../img/female-avatar.png') no-repeat";
maleAV.style.background = "";
} else if (e.target.className == 'male-av') {
femaleAV.style.background = "";
maleAV.style.background = "url('../img/male-avatar.png') no-repeat";
} else {
femaleAV.style.background = "";
maleAV.style.background = "";
}
});
</script>
</body>
</html>
Basically, I have removed your onclick="" event from the female-av and have put an overall listener in the <script>. From here I have set 2 variables (Female & Male) and then an if-statement to check what is being clicked. Depending on what is being clicked it will either set/unset the female or male background respectively and if neither of the two are clicked it resets both.
There is a downside to this though, should the user click ANYWHERE else it means it will reset the selection. Example, if you select your MALE or FEMALE and then click to change your username you will see it deselects/resets.
To fix this, you can narrow the function like so;
document.querySelector('.avatars').addEventListener('click', function(e) {...})
That way it only listens to clicks inside the .avatars box.
I hope it's clear! If not, let me know and I'll try explain further!
You don`t have to use javascript to change it. You can use :focus directly in css.
.male-av:focus{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
.female-av:focus{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
So this way when the button is clicked you can keep the image or change the background color.But it returns to normal when clicked outside of the button.
This will make any element that has class female-av change its background on click
let fa = document.getElementsByClassName("female-av-button");
for(let i = 0;i<fa.length;i++){
fa[i].addEventListener('click',function(){
this.style.background="url('../img/female-avatar.png') no-repeat";
});
}
if you want only one specific element to have this behavior give it an id and use
document.getElementById("elementID").addEventListener('click',function(){this.style.background="black";});
Maybe have the image contained in the button itself and not the CSS.
Then have a JavaScript function that changes the image.
Or (the easier option) have a JS function that toggles the class containing the new image and the one with the old image (with the old image class already in there).
Say...
<html>
<style>
/* add this to <style> the css (exept the image links) */
.confirm {
background: url('https://live.staticflickr.com/7057/7119974123_291cac34b7_b.jpg') no-repeat;
}
.unclicked {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Flag_of_Tabajd_%281-1_aspect_ratio%29.svg/480px-Flag_of_Tabajd_%281-1_aspect_ratio%29.svg.png') no-repeat;
}
</style>
<script>
/*add this to <script> block*/
function change() {
var btnImg= document.getElementById("btn")
btnImg.classList.toggle("confirm")
btnImg.classList.toggle("unclicked")
}
</script>
<div id="Copy this"></div>
<button class="unclicked" id="btn" onClick=change()></button>
</html>
The classes are so the background can be swapped and clicking it twice will result in the original image showing!
It does work for me, so I hope this helps!
Gypsy.jpg location (uploaded)
This will work:
//CSS
button {
background: blue;
}
<!-- HTML and JS -->
<!-- Blue to Gypsy.jpg -->
<button id="this" onclick="putimage('https://i.stack.imgur.com/8oMX9.jpg'); //<-- paste image here.">Click Me!</button>
<script>
var putimage = function(i) {
// i is image url.
document.getElementById("this").style = 'background: url("' + i + '") space !important';
};
</script>

Onclick show div overlapping/hiding others

I'm trying to achieve 3 clickable <div> that expand and hide/overlap others on click, while showing what's inside each clicked <div>. I only have JQuery as of right now.
My initial question is, what should I use? (Flexbox? CSS animation? React?)
Is it possible in vanilla html+css+js stack without having a bonky transition ?
I made an image to illustrate what I'm trying to say:
It is possible just by using pure Javascript, all you need to do is add a click event to each div, and when one is clicked you issue yourDivName.setAttribute("style", "display: block"); and issue yourDivName.setAttribute("style", "display: none"); to the other two. Then just repeat this process for each one. Obviously enclosing each one in a function yourFunctionName(){
//Enter logic here
}
Your process should be first getting each div and putting it in a variable, then doing the above code according to what you wish to do to the div. I hope this helps let me know if you'd like me to do the Javascript for you :)
First of all, you should write your script in the question when asking questions on stackoverflow. Because we must see what code do you have.
About your question, there are so many options. If you want to use jQuery:
HTML:
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
JavaScript:
$('.group').on('click', function(){
$('.group').hide();
$(this).show();
});
If you want to make it with CSS, you can do something like:
HTML:
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
CSS:
.group{
display: none;
}
.group:active{
display: block;
}
If you want to make some animation you can use CSS transition
I am answering my own question to show you the progress I made.
This is greatly starting to get form following both your advices. (Jsfiddle at the end).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StackCode</title>
<link rel="stylesheet" href="dummy.css" />
</head>
<body>
<header>
</header>
<section class="section">
<div class="service-box">
<div class="service-story">
<div> <h1> Title </h1> </div>
<img class="img-left" src="https://via.placeholder.com/250x700">
<div class="service-story-expand">
<h1>TITLE</h1>
<p>Sample text</p>
<img src="https://via.placeholder.com/100">
</div>
</div>
<div class="service-art">
<div> <h2> Title2 </h2></div>
<img class="img-middle" src="https://via.placeholder.com/250x700">
<div class="service-art-expand">
<h1>TITLE</h1>
<p>Sammple text</p>
</div>
</div>
<div class="service-motion">
<div> <h2> Title3 </h2></div>
<img class="img-right" src="https://via.placeholder.com/250x700">
<div class="service-motion-expand">
<h1>TITLE</h1>
<p>Sammple text</p>
</div>
</div>
</div>
</section>
<script src="jquery-3.4.1.min.js"></script>
<script src="dummy.js"></script>
</body>
</html>
CSS
*
{
margin:0px;
padding:0px;
}
html {
overflow-x :hidden;
background: black;
}
header
{
height:20px;
overflow: hidden;
background-color: black;
padding: 45 0 0 0;
z-index: 0;
width: 100%;
}
.section{
width: 100%;
background:grey;
margin: auto;
}
.service-box{
overflow: hidden;
width: 90%;
height: auto;
margin:auto;
display: flex;
justify-content: space-evenly;
}
.service-story{
height: auto;
overflow: hidden;
flex:1;
order: 1;
transition: flex .3s ease-out;
}
.service-story.clicked{
background:white;
height: auto;
flex:6;
transition: flex .3s ease-out;
}
.service-story-expand{
display: none;
}
.service-art{
overflow: hidden;
flex:1;
transition: flex .3s ease-out;
order: 2;
}
.service-art.clicked{
background:white;
flex:6;
transition: flex .3s ease-out;
}
.service-art-expand{
display: none;
}
.service-motion{
overflow: hidden;
flex:1;
transition: flex .3s ease-out;
order: 3;
}
.service-motion.clicked{
background:white;
flex:6;
transition: flex .3s ease-out;
}
.service-motion.clicked img{
float: left;
}
.service-motion-expand{
display: none;
}
.service-story.clicked img{
width:auto;
height:auto;
}
Js + Jquery
$('.service-story').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-story-expand').show();
});
$('.service-art').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-story-expand').show();
});
$('.service-motion').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-motion-expand').show();
});
I chose the solution of flexbox. This is not exactly what I was looking for, but it does the trick.
Now the problem I encounter are the following.
How to put content which is firstly hidden next to my images and not under ?
How to close other divs when one is open ?
How to hide content once a <div> is clicked again ? (If I understand correctly, is a "If/Then/Else" situation)
I think the last two questions are frequently asked, so I'll start searching by myself, just showing my progress.
Thank you once again for your time, and I hope I did better on formating.
Here is a jsfiddle.
https://jsfiddle.net/7oa28cg4/
Ps: Also working on responsiveness, i'm learning it.

How to put a content inside the box after it has been hovered?

I'm planning to make a sticky note kind of style and I want to show the content inside the box without it being displayed first when the hover is not active. Like here in my code example: Please help!
body {
margin: 45px;
}
.box {
display:inline-block;
background-color: pink;
height: 200px;
width: 200px;
transition: transform 300ms ease-in-out;
pointer-events: none;
}
.container {
width: 200px;
height: 200px;
border: 20px solid grey;
background-color: violet;
}
.container:hover .box{
transform: translate(200px, 150px) rotate(20deg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSSTransitions.css">
<script src="jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>CSS Transitions</title>
</head>
<body>
<div class="container">
<p>Hello</p>
<div class="box"></div>
</div>
</body>
</html>
fiddle
Hey guys, I'm sorry if my explanation of what I wanted to achieve wasn't clear. There's a pink box that is visible when not hovered and there's a violet box inside when it's hovered. I want the paragraph inside the violet box hidden when the pink box is not hovered. But my code shows here that even the pink box isn't hovered, the paragraph inside the violet box is already been displayed.
You have to set the position: absolute of the inside div i.e. .box to place it over the text. Remember to set position: relative to the parent div i.e. .container.
Absolute positioned element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned
relative to its closest positioned ancestor if any; otherwise, it is
placed relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left. This value
creates a new stacking context when the value of z-index is not auto.
Absolutely positioned boxes can have margins, and they do not collapse
with any other margins.
More help on position property
body {
margin: 45px;
}
.box {
display: inline-block;
background-color: pink;
height: 200px;
width: 200px;
transition: transform 300ms ease-in-out;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
}
.container {
position: relative;
width: 200px;
height: 200px;
border: 20px solid grey;
background-color: violet;
}
.container:hover .box {
transform: translate(200px, 150px) rotate(20deg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSSTransitions.css">
<script src="jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>CSS Transitions</title>
</head>
<body>
<div class="container">
<p>Hello</p>
<div class="box"></div>
</div>
</body>
</html>
I hope this will help you.

Cannot select element in JQuery and execute simple event

I cannot make a simple click event on the "canvas" using JQuery click function.
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>
"test" message is appearing but functions above is not working. Other siblings of div "middle" (I did not include since I tried to remove them for testing and it still happening) can execute events but only this div and inside cannot execute a single event.
Tried also to console.log($("#canvas")) and it fetches some data below.
[div#canvas]
here is the complete html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="/demo/resources/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/demo/resources/themes/custom/css/custom.css" rel="stylesheet" />
<script src="/demo/resources/themes/bootstrap/js/bootstrap.min.js"></script>
<script src="/Sketchy-demo/resources/themes/custom/js/custom.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>App Page</title>
</head>
<body>
<div class="middle">
<div id="canvas"></div>
</div>
</body>
</html>
custom.css
.middle{
z-index: -1;
position: relative;
display: block;
height: 88%;
width:100%;
top: 0px;
left:0px;
margin: 0px;
background-color: transparent;
}
#canvas{
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
Below is the image of the divs:
This is really frustrating because this is a basic function that I cannot call.
Edit:
I added a https://jsfiddle.net/5mtt2khu/
Please let me know any questions.
Thanks!
Do with event.target element .And match with condition
Updated js Fiddle
$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if($(e.target).attr('id')== 'canvas'){
alert('canvas')
//do stuff for canvas
}
else{
alert("middle");
//do stuff for middle
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>
Updated
Remove or change the z-index
$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if ($(e.target).attr('id') == 'canvas') {
alert('canvas')
//do stuff for canvas
} else {
alert("middle");
//do stuff for middle
}
});
});
.middle {
z-index:0;/*remove or change > -1*/
position: relative;
display: block;
height: 88%;
width: 100%;
top: 0px;
left: 0px;
margin: 0px;
background-color: red;
}
#canvas {
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>
Your code seems to work.
So the problem must come from other things. Here is some possibilities :
JQuery is not correctly installed
You have a javascript error before so this is never executed
Your html is dynamically added after you load the event handler
You have an other div with the same id somewhere
If your html is dynamically added, I recommend you to do something like this
$(document).ready ( function () {
$(document).on ("click", "#canvas", function () {
alert("canvas");
});
$(document).on ("click", "#middle", function () {
alert("middle");
});
});
If you have several "canvas" id, you can do something like :
$("[id=canvas]").click(function () {
alert("canvas");
});
I think you are looking for something like this:
$(document).ready(function(){
alert("test");
$("#canvas").click(function(e){
alert("canvas");
e.stopPropagation();
});
$(".middle").click(function(){
alert("middle");
});
});
.middle {
width: 200px;
height: 200px;
background: red;
}
#canvas {
width: 100px;
height: 100px;
background: green;
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>
Hope it helps :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="middle">
<div id="canvas" style="width:10px;height:10px;background:red;"></div>
</div>
</body>
<script>
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
</script>
Try to change the div to input type or button.It works when I specified the color to the div and clicking it.So, without knowing where to click the event was not working.
Your jQuery code is actually working fine as it should. The problem here is propably because the canvas has no height and width defined, so it's too small to actually be able to click on it.
Give the divs a height and width like the below code snippet and you'll see that the jQuery gets executed correctly.
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle" style="border: 1px solid black; height: 50px; width: 100px;">
<div id="canvas" style="border: 1px solid red; height: 15px; width: 30px;"></div>
</div>

How to align content on a banner if there's a HTML5 video involved

I may need to re-title this post. I have a HTML5 video but I'm having a very hard time styling it the way I want it to.
HTML
<header>
<div class="video-holder full-img">
<video autoplay loop muted>
<source src="<?php bloginfo('template_url'); ?>/img/syau.webm" type="video/webm">
<source src="<?php bloginfo('template_url'); ?>/img/syau.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="height:100%">
<div class="row" style="height:100%">
<div class="banner-text col-sm-12 col-md-6 col-md-offset-2">
<h1>Step<br>Your<br><span id="type-selector" class="typed-element"></span><br>Up</h1>
</div>
<div class="btn-container col-md-2">
<div class="btn-cta">
<a class="btn btn-primary btn-lg" href="/roster/">Check us out</a>
</div>
</div>
</div>
</div>
</header>
This is how I'm doing HTML5 video. I have Javascript to get the height of the device so the banner always matches it.
Javascript
function windowResizeFunctions(e) {
var windowH = $(window).height(),
headerH = $('#my-navbar').height();
$('header').css('height', windowH);
}
$(window).resize(function(){
window.requestAnimationFrame(windowResizeFunctions);
});
setTimeout(function() { windowResizeFunctions();
});
This is my CSS
header {
position: relative;
overflow: hidden;
width:100%;
height:100vh;
}
.banner-text {
position: relative;
z-index: 200;
text-align: left;
display: table;
float: left;
height: 100%;
}
.banner-text h1 {
display: table-cell;
vertical-align: middle;
}
.btn-container {
z-index: 201;
height: 100%;
display: table;
}
.btn-cta {
display: table-cell;
vertical-align: bottom;
padding-bottom: 90px;
}
.video-holder {
position:absolute;
height:100%;
width:200%;
left:-50%;
}
video {
position:absolute;
top: -99999px;
bottom: -99999px;
left: -99999px;
right: -99999px;
margin: auto;
min-height:100%;
min-width:50%;
}
Now, this is my real live example. On laptop this looks how I want it, but on everything else it's very hard to work with. What I'm trying to achieve is the banner text on the left, and the button on the bottom right of the container so it's leveled with the baseline of the last word.
I thought to do flexbox. I tried giving .row display:flex and .banner-text align-items:center; but that wouldn't work. I tried a variety of HTML changes to move things around and I couldn't get it, I'd post my attempts but this question would become massive.
I just want it to look like this on laptop/desktop. On tablet and mobile I just want it to stack, text on top and button below. This is coded terribly and I'm not sure how to properly do it.
Put the <a> button inside the <h1> tag -- as the last element.
Increase the width of the <h1> tag by changing its parent class from col-md-6 to col-md-8.
Set the following CSS to the button:
float:right;
position:relative;
top:40px;
It's a little hacky and there's def better solutions out there but that would require restructuring your entire DOM. This is the easiest fix.

Categories