I have css blocks that must go away from the page when they gain the .gone class.
I register a click event in Javascript, in the event handler I add the .gone class to the clicked element.
The bullet should go away to the left, or to the right, but it just disappears.
Here is the HTML code:
<div id="firstPage">
<div id="bullets">
<div data-href="#projects" class="top left">Projects</div>
<div data-href="#skills" class="top right">Skills</div>
<div data-href="#experiences" class="bottom left">Experiences</div>
<div data-href="#contact" class="bottom right">Contact</div>
</div>
</div>
The javascript code:
var bullets = [];
function openPage(e) {
e.preventDefault();
this.classList.add('gone');
}
var tmpBullets = document.querySelectorAll('#bullets div');
for(var i = 0 ; i < tmpBullets.length ; i++) {
tmpBullets[i].addEventListener('click', openPage, true);
bullets.push(tmpBullets[i]);
}
The CSS code:
html {
font-family: QuattrocentoSans;
overflow: hidden;
}
#firstPage {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/noise.png');
}
#firstPage h1 {
display: block;
margin: auto;
text-align: center;
margin-top: 100px;
font-family: Pacifico;
font-size: 50px;
color: #fff;
text-shadow: 0 0 3px #000;
}
#bullets {
display: block;
width: 320px;
margin: auto;
}
#bullets div {
position: absolute;
display: inline-block;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background-color: #333;
text-align: center;
color: white;
text-decoration: none;
margin-top: 10px;
margin-right: 5px;
margin-left: 5px;
text-shadow: 0 0 3px #999;
font-size: 1.2rem;
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
#bullets div.top {
top: 100px;
}
#bullets div.bottom {
top: 270px;
}
#bullets div.left {
left: calc(50% - 165px);
}
#bullets div.right {
right: calc(50% - 165px);
}
#bullets div:hover {
box-shadow: 0 0 10px #555;
transition: box-shadow 500ms;
}
#bullets div.left.gone {
left: -160px;
}
#bullets div.right.gone {
right: -160px;
}
See jsfiddle for live demo : http://jsfiddle.net/8u9j6n6x/
Thanks for your help
You need to add the transition to the .gone class not the #bullets div
#bullets div.gone {
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
updated fiddle http://jsfiddle.net/8u9j6n6x/1/
Related
I am designing a portfolio website and wanted to have my work slide up onto the screen when you clicked portfolio, same way a nav bar would slide over when you click a menu icon. The code I have works for nav bars on the right and left, but for the bottom it still shows the block even with the height of 0
unfortunately using display:none and changing it to display:block with jquery removes the smooth animation of it sliding onto screen.
html
<div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
testing
Services
Clients
Contact
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>
css
.portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
}
javascript
function openNav2() {
document.getElementById("portfolionav").style.height = "100vh";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
}
Use display: none instead of height.
Once the portfolio div is fixed, you can use the top property instead of cotroling the animation by the height. You also have to set the default height as 100vh.
So your portfolionav should be:
.portfolionav {
height: 100vh;
width: 100%;
position: fixed;
z-index: 3;
top: 100vh;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
}
And your JavaScript functions:
function openNav2() {
document.getElementById("portfolionav").style.top = "0";
}
function closeNav2() {
document.getElementById("portfolionav").style.top = "100vh";
}
Now, you just have to adjust the hand-button as you wish.
You can combined height and paddingTop for show and hide navigation because of padding it is showing when you set height:0px;
function openNav2() {
debugger;
document.getElementById("portfolionav").style.height = "100vh";
document.getElementById("portfolionav").style.paddingTop = "60px";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
document.getElementById("portfolionav").style.paddingTop = "0";
}
.portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 0px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
}
<div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
testing
Services
Clients
Contact
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>
I was wondering if there is an easy way of creating the animation, similar to Whatsapp one.
When you are on chat screen and go back to chat list, an active element is highlighted gray for a moment (so it shows which chat was opened before).
Is there not complicated way of doing this in JS or CSS? Hopefully most of you guys know what I'm talking about. Unfortunately can't find any examples in the net...
Here is a example of how you could achieve the effect, but with no more details on your project i can't do more.
var li = $('li');
var messages = $('.messages');
var close = $('.close');
li.on('click', function(){
$(this).addClass('active');
messages.addClass('active');
});
close.on('click', function(){
messages.removeClass('active');
li.removeClass('active');
});
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.info {
margin-bottom: 20px;
padding-left: 15px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background: #ececec;
padding: 10px;
border-bottom: 2px solid black;
cursor: pointer;
transition: background .2s .3s;
}
li.active {
background: gray;
transition: background .3s;
}
.messages {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
transition: transform .3s;
transform: translateX(100%);
padding: 20px;
}
.messages.active {
transform: translateX(0);
}
.close {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
position: absolute;
right: 70px;
top: 30px;
background: black;
color: white;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}
.close:hover {
opacity: .7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="info" >Click on a person, and close the discussion by clicking on the "X" to see the effect.</p>
<ul>
<li>Bob</li>
<li>Steven</li>
<li>Marie</li>
<li>Marc</li>
<li>Jack</li>
<li>Edouardo</li>
</ul>
<div class="messages">
A lot of messages bla bla ...
...
<span class="close">X</span>
</div>
Searched all over the internet, and I can't beat this issue.
I have a pricing section with a pricing plan switch. The logic itself is working fine, however, the CSS checkbox toggle itself isn't switching from left to right.
I assume it has to do with the CSS itself or the way I select the elements with JS. I've also read some topics on SO where they say that it's a checkbox issue with WordPress, didn't find my answer there, unfortunately.
The issue
On Chrome desktop, the CSS checkbox toggle isn't working.
On Safari, iPhone X the CSS checkbox switch checkbox does work but only if you click the label elements with text
Here's a link to the page
Link to Dropbox of me demonstrating the issue on iPhone
window.onload = function() {
var e = document.getElementById("firstPlan"),
d = document.getElementById("secondPlan"),
t = document.getElementById("switcher_iOS"),
m = document.getElementById("firstPlan_box"),
y = document.getElementById("secondPlan_box");
if (document.getElementById("switcher_iOS") == null) {
var node = document.createElement("input");
node.id = "switcher_iOS";
node.type = "checkbox";
node.className = "toggle_iOS--check";
var elm = document.getElementsByClassName('toggle_iOS')[0];
elm.insertBefore(node, elm.firstChild)
t = document.getElementById("switcher_iOS");
}
e.addEventListener("click", function() {
t.checked = false;
e.classList.add("togglePricing--is-active");
d.classList.remove("togglePricing--is-active");
m.classList.remove("hide");
y.classList.add("hide");
});
d.addEventListener("click", function() {
t.checked = true;
d.classList.add("togglePricing--is-active");
e.classList.remove("togglePricing--is-active");
m.classList.add("hide");
y.classList.remove("hide");
});
t.addEventListener("click", function() {
d.classList.toggle("togglePricing--is-active");
e.classList.toggle("togglePricing--is-active");
m.classList.toggle("hide");
y.classList.toggle("hide");
t.checked = !t.checked;
})
}
/* Toggle */
#switcher_iOS {
width: 100%;
}
.toggle_iOS,
.togglePricing {
display: inline-block;
vertical-align: middle;
margin: 10px;
}
.togglePricing {
color: #ccc9c9;
cursor: pointer;
transition: .1s;
font-weight: bold;
font-size: 17px;
}
.togglePricing--is-active {
color: #181818;
}
.toggle_iOS {
position: relative;
width: 58px;
height: 28px;
border-radius: 100px;
background-color: #1D8BF1;
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}
.toggle_iOS--check {
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}
.toggle_iOS--check:checked~.toggle_iOS--switch {
right: 2px;
left: 57.5%;
transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: .01s, 0s;
}
.toggle_iOS--switch {
position: absolute;
left: 2px;
top: 2px;
cursor: pointer;
bottom: 2px;
right: 57.5%;
background-color: #fff;
border-radius: 36px;
z-index: 1;
transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: 0s, .01s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
<label class="togglePricing togglePricing--is-active" id="firstPlan">Payment Plan</label>
<div class="toggle_iOS">
<label for="switcher_iOS"><input type="checkbox" onclick="void(0);" id="switcher_iOS" class="toggle_iOS--check" checked></label><b onclick="void(0);" class="toggle_iOS--switch"></b>
</div>
<label class="togglePricing" id="secondPlan">One Payment</label>
I have simplified your css, and in order for this to work, you have to remove your JS that reset the state of the checkbox from the checkbox on click event such as
t.checked = !t.checked;
var t = document.getElementById("switcher_iOS");
t.addEventListener("click", function(){
console.log("i am", this.checked);
})
.toggle_iOS{
position: relative;
width: 58px;
height: 28px;
border-radius: 100px;
background-color: #1D8BF1;
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.05);
}
.toggle_iOS--switch{
position: absolute;
left: 2px;
top: 2px;
cursor: pointer;
bottom: 2px;
right: 57.5%;
background-color: #fff;
border-radius: 36px;
z-index: 1;
transition: 0.15s cubic-bezier(0.785,0.135,0.15,0.86);
transition-property: left,right;
transition-delay: 0s,.01s;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
[type=checkbox]:checked + .toggle_iOS--switch{
left: 57.5%;
right: 2px;
}
.toggle_iOS [type=checkbox]{
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}
<div class="toggle_iOS">
<input type="checkbox" id="switcher_iOS">
<div class="toggle_iOS--switch"></div>
</div>
first can you look on those two image so you understand.
When not hover: http://s15.postimg.org/sn6rk45rf/not_Hover.png
When hover: http://s16.postimg.org/yk6beg1ad/on_Hover.png
Right now when I have my mouse over a image, both image get buttons.
But I just want each image have theve own buttons on mouse over and the other image hide the buttons.
I don't really know how to fix it, and I'm very beginner with Javascript.
Here is my HTML/CSS/Javascript codes.
var buttonNew = document.getElementsByClassName('buttonNewest');
var buttonRan = document.getElementsByClassName('buttonRandom');
function imageOver() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "block";
buttonNew[i].style.animation = "moveButtonsRight 2s";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "block";
buttonRan[i].style.animation = "moveButtonsLeft 2s";
}
}
function imageLeave() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "none";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "none";
}
}
.charSelect[role="Background"] {
width: 1600px;
min-height: 600px;
margin: 25px auto;
}
.charSelect[role="Background"] > h1 {
width: 300px;
margin: 0 auto;
border: dashed 2px rgba(255, 207, 0, 0.75);
text-align: center;
text-transform: uppercase;
font-size: 2.6em;
text-shadow: 2px 2px 3px rgb(0, 0, 0);
}
.charSelect[role="Characters"] {
position: relative;
display: inline-block;
width: 250px;
height: auto;
background: rgba(42, 42, 42, 0.7);
border: dashed 2px rgba(255, 207, 0, 0.4);
color: rgba(255, 207, 0, 1);
opacity: 0.6;
-webkit-transition: opacity 1s;
margin-left: 250px;
}
.charSelect[role="Characters"]:hover {
opacity: 1;
transform: scale(1.05);
}
.charSelect[role="Names"] {
width: 100%;
font-size: 1.8em;
}
.charSelect[role="Names"] > p {
margin: 0 !important;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
/* Buttons */
.charSelect[role="LatestVid"], .charSelect[role="RandomVid"] {
width: 170px;
height: 45px;
background: -webkit-linear-gradient(top, rgb(255, 207, 0), rgba(255, 207, 0, 0));
text-align: center;
line-height: 45px;
color: black;
-webkit-transition: background 1s;
transition: background 1s;
box-shadow: 0px 0px 3px;
}
.charSelect[role="LatestVid"] {
display: none;
position: absolute;
top:50%;
right: 70%;
}
.charSelect[role="RandomVid"] {
display: none;
position: absolute;
top:50%;
left: 70%;
}
.charSelect[role="RandomVid"]:hover , .charSelect[role="LatestVid"]:hover {
background: rgb(255, 207, 0);
}
/* Animation */
#-webkit-keyframes moveButtonsLeft {
0% {
left: 50%;
}
100% {
left: 70%;
}
}
#-webkit-keyframes moveButtonsRight {
0% {
right: 50%;
}
100% {
right: 70%;
}
}
<!-- Character one -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
<!-- Character two -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
You're calling an imageOver() that loops all your elements.
Instead of using JS (at all) I'd go with pure CSS:
*{font: 14px/1 sans-serif;}
.charSelect{
position: relative;
display: inline-block;
vertical-align: top;
}
.charButtons{
position: absolute;
bottom: 40px;
width: 100%;
text-align:center;
opacity: 0;
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
}
.charButtons a{
display: block;
margin-top: 1px;
text-align: center;
color: #fff;
background: #444;
padding: 10px;
opacity: 0.9;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.charButtons a:hover{ opacity:1; }
.charSelect:hover .charButtons{
visibility: visible;
opacity: 1;
}
<div class="charSelect">
<img src="http://placehold.it/180x150/4af/&text=Hero+1">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 1</h2>
</div>
<div class="charSelect">
<img src="http://placehold.it/180x150/fa4/&text=Hero+2">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 2</h2>
</div>
The problem is that you're not reffering tot the current object that you have cursor on. If you go with with cursor over and image, your function will apply those changes for all buttonNew and buttonRan that can be found on page.
I made a content tile that when clicked, activates another part of the screen. On the tile, I have a couple links that, when clicked, go to new pages. I made a non-javascript version that works fine.
No javascript:
https://jsfiddle.net/raazqqks/2/
HTML:
<div class="tile activeTile" id="response0">
<div class="responseContainer">
<div class="left">
<h4 class="title">
<a class="topLink" href="javascript:alert('Link clicked')">Title</a>
</h4>
<p>Foo bar</p>
<p>Foo bar?</p>
<p class="extra">
<a class="topLink" href="javascript:alert('Link clicked')">Extra foo bar!</a>
</p>
</div>
<div class="bonus">
<p>Bonus</p>
</div>
<a class="noJavaLink" id="0" href="javascript:alert('Tile clicked');"></a>
</div>
</div>
CSS:
.responseContainer {
position: relative;
overflow: hidden;
z-index: 0;
transition: all linear .2s;
border: 1px solid grey;
border-radius: 4px;
background-color: white;
}
.responseContainer p {
margin: 0;
}
.tile {
width: 80%;
text-align: left;
margin: 16px 48px 16px 32px;
margin-top: 0;
transition: all linear .2s;
z-index: 0;
border-radius: 4px;
background-repeat: no-repeat;
}
.activeTile {
width: 90%;
border-radius: 4px;
color: white;
}
.activeTile > div {
background-color: rgba(33, 33, 33, .5);
}
.left {
float: left;
margin: 10px;
margin-top: -10px;
max-width: 50%;
}
.title {
font-size: 1.2em;
}
.title h4 {
margin: 20px 0 20px;
}
.bonus {
float: right;
margin-top: 10px;
margin: 10px;
font-size: 1.5em;
max-width: 50%;
}
.topLink {
position: relative;
z-index: 100;
}
.noJavaLink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
background-color: white;
border-radius: 4px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.active .noJavaLink {
pointer-events: none;
cursor: default;
}
I want to add simple animations to it, so if javascript is available, this version loads.
Javascript:
https://jsfiddle.net/n4svaLut/
Javascript:
document.addEventListener("DOMContentLoaded", setJavascriptTileAnimation(), false );
/* Set onclick events for tile animation
|
*/
function setJavascriptTileAnimation() {
var tiles = document.getElementsByClassName('tile')
var links = document.getElementsByClassName('noJavaLink');
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
var id = tile['id'];
tile.onclick = function() {
changeActiveTile(this.id);
//return false;
};
links[i].removeAttribute('href');
};
}
/* Toggle active tile
|
*/
function changeActiveTile(id) {
id_number = getIdNumber(id);
active_tile = document.getElementsByClassName('tile activeTile')[0];
active_tile.classList.remove('activeTile');
setTimeout(function() {
tile = document.getElementById(id);
tile.classList.add('activeTile');
}, 300);
}
function getIdNumber(id) {
return id.replace( /^\D+/g, '');
}
Notice how the links only work on a double click. Ive been playing around with this for two days and havent made any progress at all. Any ideas?
SOLUTION: Remove 'return false' from the onclick setter.