Develop Reference

How to Hide the Back Side of Door Once Open? Vanilla JS/CSS Door Animation

So I have a door animation using vanilla JS with CSS for the styling. Is there a way to hid the backside of the door when it's open?
As well as making the door not clickable. (I don't have it as toggle, but you can still interact with the button.)
Basically I just want a back background and not see the backwards "1" when the door is open.
Any ideas on how to make that happen? I imagine it's adding another div with style, but I really am not sure after goofing around with this for a while.
Cheers!
Codepen here: https://codepen.io/LovelyAndy/pen/LYZKEvB
HTML:
<div>
<div class="door-back">
<button class="door">1</button>
</div>
</div>
CSS
.door-back {
position: relative;
height: 105px;
width: 105px;
background-image: url("https://i.redd.it/e84gxikhoul21.jpg");
border-radius: 50px;
background-size: cover;
margin: 0 auto;
margin-top:50px;
}
.door {
position: absolute;
height: 105px;
width: 105px;
font-size: 1.5em;
color: white;
border: 2px solid goldenrod;
border-radius: 50px;
background: black;
cursor: pointer;
transform-origin: left;
transition: all 0.5s ease-in-out;
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px)
rotateY(-150deg);
}
.d1 {
top: 100px;
left: 60px;
}
JS
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.add("doorOpen");
}

Possible solution: change the text color on transition:
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.toggle("doorOpen");
}
.door-back {
position: relative;
height: 105px;
width: 105px;
background-image: url("https://i.redd.it/e84gxikhoul21.jpg");
border-radius: 50px;
background-size: cover;
margin: 0 auto;
margin-top: 50px;
}
.door {
position: absolute;
height: 105px;
width: 105px;
font-size: 1.5em;
color: white;
border: 2px solid goldenrod;
border-radius: 50px;
background: black;
cursor: pointer;
transform-origin: left;
transition: transform .5s ease-in-out,
color 0s .3s linear
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-150deg);
color:black;
}
.d1 {
top: 100px;
left: 60px;
}
<div>
<div class="door-back">
<button class="door">1</button>
</div>
</div>

You can achieve both disable the click on door button and not to show the '1' after the door is open in CSS.
.doorOpen {
...other css
// you just need add this property which disables click
pointer-events: none;
color: black;
}
Making the text color black will make it complete black.
If you completely want to remove the text '1' then you can do like below.
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.add("doorOpen");
doorEl.textContent='';
}
These are two ways I can think of.

You can try to do something like this https://codepen.io/dom-the-dev/pen/MWeqaJq just have a button on the opposite side that acts like the back of the door
<div>
<div class="door-back">
<button class="door front">1</button>
<button class="door back">2</button>
</div>

How to access a button not originally on page to animate and refresh?

I'm working on this codepen to practice working with APIs and search bar animations.
wikiSearch codepen
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset" onclick="moveReset();"></button>
some of my js
$('.btn-reset').on('click', function(){
$('.btn-reset').css({
'right': '22px'
})
$('.btn-search').css({
'background-color': 'white'
})
})
How can I access the X button after the search results come in?
On the splash page, the X button works as I want it to - moves right when input is focused and moves back to the left where it is hidden.
My goal is to have this behavior persist, even after the results display, and in addition to refresh to the original splash page.
I've tried adding an active class when it is clicked,delegating to #reset from body, adding an onclick event inline with the html, and using the location reset property, to no avail.
Thanks for any pointers.

You have a z-index management problem. After click on search button the reset button has a z-index value of -1, this means that even you are see the button when you think you click on it you don't.
A way to fix this particular problem could be to remove the z-index attribute in your css file for reset button, also give z-index value to input control like 5 and for the search button like 10 to keep the logic you already have.
// form validation
$("form").on("submit", function(e) {
var word = $("#search").val();
if (word.length === 0) {
alert("This field is required");
e.preventDefault();
} else {
e.preventDefault();
$('form').css({
"margin-top": "0%"
})
$('body').css("background", "yellow")
search(word);
}
})
// retrieve data from wikipedia api
function search(word) {
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'opensearch',
list: 'search',
search: word,
format: 'json'
},
dataType: 'jsonp',
success: function (response) {
var content = ''
for (var i = 0; i < response[1].length; i++) {
content +=
'<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
+"<h3>"+response[1][i]+"</h3>"
+"<p>" + response[2][i] + "</p>"
+'</a> </div>';
};
$('#content').html(content)
.css({
"margin": "5% 25%",
"text-align": "center"
});
}
});
}
$('input').on('focus', function(){
$('.btn-reset').css({
'right': '-22px',
'background-color': 'white'
})
$('.btn-search').css({
'background-color': 'hotpink'
})
})
$('.btn-reset').on('click', function(){
$('.btn-reset').css({
'right': '22px'
})
$('.btn-search').css({
'background-color': 'white'
})
})
* {
box-sizing: border-box;
}
body {
background: Chartreuse ;
transition: all .3s ease-in-out;
}
/* search button: */
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 25%;
z-index:5;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
.btn-search {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
cursor: pointer;
z-index:10;
}
.btn-reset {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
}
form {
float: left;
height: 50%;
margin: 0% 27%;
position: relative;
width: 30%;
margin-top: 10%;
}
input {
border-radius: 15px;
right: 0;
transition: all .3s ease-in-out;
width: 50%;
}
input:focus {
width: 100%;
}
.btn-search {
background: hotpink;
color: #fff;
}
.btn-reset:focus {
right: -22px;
}
button {
transition: all .3s ease-in-out;
}
.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 15px;
height: 20px;
line-height: 20px;
padding: 0;
right: 5px;
top: 5px;
width: 20px;
}
h3 {
padding-top: 10px;
}
.item {
position: relative;
padding-bottom: 5px;
background-color: hotpink;
border-radius: 5px;
}
/* for underlining each item block */
/* .item:before {
content: "";
position: absolute;
width: 75%;
bottom: 0;
left: 12.5%;
border-bottom: 1px solid black;
} */
.item-text {
text-decoration: none;
color: black;
}
#returned {
color: white;
font-size: 0.75em;
}
<div class='search-wrapper'>
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset"></button>
</form>
</div>
<br>
<div id="content">
</div>

So, if I'm getting you, you're looking for how to cause certain effects on the reset button when certain events happen? If I'm getting that, then there are really two events: first, any time the text input loses focus (at which point, you'd hide the reset button, I assume), and second, when the reset button itself is clicked.
Looking at the first case, you'd simply have the on('blur', function(){...}) set on the input, just as you have on('focus', function(){...}) happening right now. When the input is blurred, simply re-hide the reset and toggle the color change back on the search button.
In the second case, you're missing a line to actually clear the contents of the input. Presumably, you'd also want to remove the results of any search if you clear the input, but that's not really a given.
Hope this helps, if not please clarify!
// form validation
$("form").on("submit", function(e) {
var word = $("#search").val();
if (word.length === 0) {
alert("This field is required");
e.preventDefault();
} else {
e.preventDefault();
$('form').css({
"margin-top": "0%"
})
$('body').addClass("body-with-results");
search(word);
}
})
// retrieve data from wikipedia api
function search(word) {
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'opensearch',
list: 'search',
search: word,
format: 'json'
},
dataType: 'jsonp',
success: function (response) {
var content = ''
for (var i = 0; i < response[1].length; i++) {
content +=
'<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
+"<h3>"+response[1][i]+"</h3>"
+"<p>" + response[2][i] + "</p>"
+'</a> </div>';
};
$('#content').html(content)
.css({
"margin": "5% 25%",
"text-align": "center"
});
}
});
}
$('#search').on('focus', function(){
$('.btn-reset').show();
$('.btn-search').css({
'background-color': 'hotpink'
})
}).on('blur', function(){
$('.btn-search').css({
'background-color': '#ccc'
});
})
$('#resetBtn').on('click', function(evt){
evt.stopPropagation();
evt.preventDefault();
$(this).hide();
$('#content').empty();
$('#search').val('');
$("body").removeClass("body-with-results");
})
* {
box-sizing: border-box;
}
body {
background: Chartreuse ;
}
.body-with-results {
background: yellow;
}
/* search button: */
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 25%;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
.btn-search {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
cursor: pointer;
}
#resetBtn {
display: none;
background: white;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
right: -28px;
top: 0px;
width: 30px;
z-index: 5;
}
form {
float: left;
height: 50%;
margin: 0% 27%;
position: relative;
width: 30%;
margin-top: 10%;
}
input {
border-radius: 15px;
right: 0;
transition: all .3s ease-in-out;
width: 50%;
}
input:focus {
width: 100%;
}
.btn-search {
background: hotpink;
color: #fff;
}
.btn-reset:focus {
right: -22px;
}
button {
transition: all .3s ease-in-out;
}
.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 15px;
height: 20px;
line-height: 20px;
padding: 0;
right: 5px;
top: 5px;
width: 20px;
z-index: -1;
}
h3 {
padding-top: 10px;
}
.item {
position: relative;
padding-bottom: 5px;
background-color: hotpink;
border-radius: 5px;
}
/* for underlining each item block */
/* .item:before {
content: "";
position: absolute;
width: 75%;
bottom: 0;
left: 12.5%;
border-bottom: 1px solid black;
} */
.item-text {
text-decoration: none;
color: black;
}
#returned {
color: white;
font-size: 0.75em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='search-wrapper'>
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button class="btn btn-reset fa fa-times" id="resetBtn"></button>
</form>
</div>
<br>
<div id="content">
</div>
A few changes have been made to the code. Specifically, what's happening is when the form has been submitted and the body's CSS altered, there is a z-index issue cropping up. Here are the changes made:
The body el style is now being changed by adding/removing a 'body-with-results" class. This is purely cosmetic, as I really don't like hard-coding style changes.
The reset button is no longer a pure reset button, it is now simply a styled button that simulates a reset. When you reset a form, that's all you reset. However, in this case, you want to reset the form, hide the reset element, and clear any results from the contents div. So the reset el now does just that.
Styles on the reset button -- rather than sliding in and out (which could still probably be a thing), I simply set the right/top values in the css, and also fixed the z-index thing. Note that I used the ID of the el rather than the class to set the styles. This was done to properly handle the specificity of the styles (IDs are considered more specific than classes, thus ID styles override class styles).
I removed the code to hide the reset button on blur -- the issue with that becomes, when you try to click on the reset button, the first event is the input blur, which promptly hides the element you just thought you clicked on.
Still trying to track down the wierd suggested results remnant code, but this is a starting point.

Make arrow in button point down after menu slides out

I have a button that has an arrow appended to it when a user hovers over it. When clicked, a content div slides out in its wrapper using jQuery.slideToggle().
Once the div slides out, I want to make the arrow in the button rotate 180 degrees to signify that pressing it will make the content div go down if clicked again.
I made a JsFiddle to show what I have so far: https://jsfiddle.net/414mwv17/
What would be the best way to make the arrow point down after the button is clicked?

Create a new class for how you want the carat to appear :
#makeGroupButton span.rotate:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(135deg);
}
Note the class addition in the selector.
Then change the javascript/jQuery to just toggle that class:
$('#makeGroupButton').bind('click', function(){
$('#slideout').slideToggle(500);
$(this).children('span').toggleClass('rotate');
});
You can't directly select the :after and :before pseudo selectors with jQuery, so just changing the class, and adding CSS is customarily the easiest method.
Updated fiddle

Have started it for you to build on. Check this out and let me know your feedback. Thanks!
Added the following style:
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
and some js too:
$('#makeGroupButton').bind('click', function(event) {
event.preventDefault();
$('#slideout').slideToggle(500);
$(this).find('span').toggleClass('open');
});
#wrapper{
height: 500px;
width: 300px;
position:relative;
border: 2px solid blue;
}
#slideout {
height: 95%;
width: 95%;
border: 2px solid red;
position: absolute;
bottom: 0;
left: 2.5%;
}
#makeGroupButton
{
clear: both;
text-align: center;
color: white;
width: 220px;
background:black;
overflow: hidden;
transition: all 0.5s;
}
#makeGroupButton:hover, #makeGroupButton:active
{
text-decoration: none;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
#makeGroupButton span
{
display: inline-block;
position: relative;
padding-right: 0;
transition: padding-right 0.5s;
}
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 0;
right: -20px;
opacity: 0;
width: 15px;
height: 15px;
margin-top: -5px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-bottom: none;
border-left: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-45deg);
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 0;
top: 50%;
}
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slideout" style="display: none;"></div>
</div>
<a href="#" id="makeGroupButton">
<span>New Group</span>
</a>

I would add a class rotate on click then apply the following css :
#makeGroupButton.rotate span:after {
top: 0px;
-webkit-transform: rotate(-228deg) !important;
}
I have update your js fiddle https://jsfiddle.net/414mwv17/2/.
A much cleaner way to do it would be use an arrow icon then just rotate that icon by 180 degrees.
Hope this helps

Prevent event handlers in an iframe from affecting the parent window/page (jump/scroll to top)

I would like to prevent a toggle event inside an iframe from causing the parent page to jump up to the top when clicked.
The child page does not do that by itself thanks to the following code below. However, when I interact with it while inside an iframe; the same child page causes the parent with the iframe to jumps up to the top when I click on the toggle button in the child page.
I used:
return false;
evt.preventDefault();
evt.stopPropagation();
And they work fine if I was looking at the child page by itself. However, the code has no effect in preventing the parent page from jumping to the top.
Child page code (Application Matrix PHP):
.documentBody
{
color: #808080;
padding: 0px 20px 0px 20px;
vertical-align: top;
}
.documentBody a
{
color: #0075a0;
text-decoration: none;
}
.documentBody a:hover
{
color: #0092c8;
}
.boxBodyArticulatedTrucks {
display: block;
height: 208px;
margin: auto;
background: url( "../assets/user-interface/articles/box/body/background/articulated-trucks.png" ) no-repeat center center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.boxBodyArticulatedTrucks:hover
{
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.questionForm
{
/*width: 587px;*/
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 20px;
}
.questionFormBody
{
/*background-color: #fbfbfb;
border: solid 1px #eeeeee;*/
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
display: none;
}
.btnAccordion
{
border: solid 1px #eeeeee;
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
padding-top: 20px;
background: url( "../assets/user-interface/articles/accordion/icons/down-arrow.png" ) no-repeat center right 20px #fbfbfb;
}
<div id="articulatedTruck">
<div class="documentBody">
<div class="btnAccordion">
Articulated Truck
</div>
</div>
<div class="questionForm">
<div id="questionFormBody0" class="questionFormBody">
<div style="padding-top: 26px; padding-bottom: 10px;">
1. What is the application(s)?
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#chkArticulatedTruck').change(function () {
$('#articulatedTruck').toggle(this.checked);
parent.setArticleSize();
return false; // Prevent page from jumping to the top
}).change(); // Ensure visible state matches initially
});
</script>
Parent page code:
<iframe id="article" src="./applications/application-matrix.php" width="627px" height="500px" frameborder="0" scrolling="no"></iframe>

How to make button have a pop-up effect and border to have a white shadow when mouse hover above the button

Functionality:
The Button should have the following effect when user hover above the button:
The Button should have a pop-up effect.
The Button border should have white shadow effect.
What has been done:
I have made use of
img:hover{
border-color: white;
}
to try to get the effect of the a border shadow of white.
Issue:
I can't really seem to get the said effect. However, I was able to get the effect such as this :
img:hover{
background-color: white;
}
when user hover above the button.
Hence, how am I able to create the css such that when user hover above the button, it will create the said effect.
Thanks.
img:hover {
border-color: white;
}
#Button1 {
position: absolute;
top: 310px;
left: 1550px;
outline: 0px;
z-index: 2;
border: 0;
background: transparent;
}
<button id="Button1" onclick="GreatLoveInSingapore()">
<img src="lib/img/GreatLoveButton.png">
</button>

If you want just to grow up your button you should use transfrom it allow you to scale your button
div{
margin: 50px 200px;
}
button{
border: 0;
padding: 0;
cursor: pointer
}
img {
height: 100px;
width: 100px;
display: block;
transition: 0.7s;
}
img:hover{
transform: scale(1.2);
}
<div>
<button class="container">
<img src="http://i.imgur.com/IMiabf0.jpg">
</button>
</div>
EDIT: another way if you have img not text
div.container {
text-align: center;
margin: 100px auto 0;
}
a {
display: inline-block;
background-color: #1984c3;
color: #fff;
font-size: 1.5em;
font-family: 'Calibri', sans-serif;
font-weight: lighter;
padding: 1em 2em;
text-decoration: none;
text-transform: uppercase;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.1s;
}
a:hover{
transform: scale(1.2);
}
<div class="container">
Hi Im a Button
</div>

Here's a link that can help you.
http://ianlunn.github.io/Hover/
this page has a collection of over effects.

Example of padding....
button{
transition: padding 1s;
}
button:hover {
box-shadow: 0px 5px 5px #888888;
padding:15px;
}
<button><img src="#"/></button>
Transition is used to give the button an animated stretch and box-shadow for the pop-out effect. This is just a quick example mainly to focus on the padding.
I'm sure you can expand on this applying more styles to fit your needs.
Any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!