How to toggle a single element and make other elements react [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have this:
function myFunction(x) {
x.classList.toggle('change');
}
body,
hmtl {
background- color: black;
}
.text {
color: Black;
}
a {
text-decoration: none;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 39px;
height: 30px;
border-radius: 90px;
background-color: blue;
margin: 20px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-345deg) translate(-9px, 6px);
height: 100px;
position: relative;
top: -100px;
width: 200px;
background- color: blue;
border-radius: 100px;
}
.change .bar2 {
transform: rotate(3000deg);
width: 100px;
height: 200px;
position: relative;
left: 200px;
background-color: blue;
top: -100px;
border- radius: 100px;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: blue;
width: 200px;
height: 200px;
position: relative;
left: 100px;
bottom: 200px;
opacity: 1! important;
border-radius: 100px;
}
.change .text {
color: black;
font-size: 10px;
position: relative;
top: -200px;
background-color: green;
display: block;
}
<a id="mobile-nav" href="#">
<div class="container" onclick="myFunction(this)">
<div class="bar1">
<p class="details"></p>
</div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="text">Hello</div>
</div>
</a>
I want to be able to toggle just the first element .bar1 and have the other two react in the way specified. I don't want user to be able to toggle bottom two elements .bar2 .bar3 but I still want them to react when .bar1 is pressed.
I tried moving the a attribute, but that didn't work as I was able to toggle the .bar1 but .bar2 and .bar3 didn't react. They are in a container so do I need separate containers and if so how do I link them? At the moment you can only toggle all three at once.

You can attach the event listener to the container, but only match if the event.target is the element you want.
There are of course other ways to achieve this by storing variables and attaching event listeners differently, and entirely depends on what you are trying to achieve.
Using onclick as you have in your example:
function myFunction(this1, x) {
if(x.target.matches('.bar1'))
this1.classList.toggle('change');
}
body,
hmtl {
background- color: black;
}
.text {
color: Black;
}
a {
text-decoration: none;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 39px;
height: 30px;
border-radius: 90px;
background-color: blue;
margin: 20px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-345deg) translate(-9px, 6px);
height: 100px;
position: relative;
top: -100px;
width: 200px;
background- color: blue;
border-radius: 100px;
}
.change .bar2 {
transform: rotate(3000deg);
width: 100px;
height: 200px;
position: relative;
left: 200px;
background-color: blue;
top: -100px;
border- radius: 100px;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: blue;
width: 200px;
height: 200px;
position: relative;
left: 100px;
bottom: 200px;
opacity: 1! important;
border-radius: 100px;
}
.change .text {
color: black;
font-size: 10px;
position: relative;
top: -200px;
background-color: green;
display: block;
}
<a id="mobile-nav" href="#">
<div class="container" onclick="myFunction(this,event)">
<div class="bar1">
<p class="details"></p>
</div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="text">Hello</div>
</div>
</a>
Using addEventListener
function myFunction(x) {
if(x.target.matches('.bar1'))
this.classList.toggle('change');
}
document.querySelector('.container').addEventListener('click',myFunction);
body,
hmtl {
background- color: black;
}
.text {
color: Black;
}
a {
text-decoration: none;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 39px;
height: 30px;
border-radius: 90px;
background-color: blue;
margin: 20px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-345deg) translate(-9px, 6px);
height: 100px;
position: relative;
top: -100px;
width: 200px;
background- color: blue;
border-radius: 100px;
}
.change .bar2 {
transform: rotate(3000deg);
width: 100px;
height: 200px;
position: relative;
left: 200px;
background-color: blue;
top: -100px;
border- radius: 100px;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: blue;
width: 200px;
height: 200px;
position: relative;
left: 100px;
bottom: 200px;
opacity: 1! important;
border-radius: 100px;
}
.change .text {
color: black;
font-size: 10px;
position: relative;
top: -200px;
background-color: green;
display: block;
}
<a id="mobile-nav" href="#">
<div class="container">
<div class="bar1">
<p class="details"></p>
</div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="text">Hello</div>
</div>
</a>

Related

Customized HTML checkbox label

I have a customized check box which is grabbed from Codepen.
When the page loads the checkbox is almost checked and no text is available in the box.
.
When the user unchecks the checkbox it shows the value of its label:
.
What I want to do is to show a custom message to be displayed in the checkbox like 'Click me to confirm the contact'. When the user unchecks the checkbox it works fine showing that contacted.
I have tried with jQuery and it is not working. Could anyone give me a working solution? I expect something like this:
Thanks.
.inputGroup {
background-color: #fff;
border-radius: 25px;
}
.inputGroup label {
padding: 12px 30px;
width: 100%;
display: block;
text-align: left;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
border: 2px solid green;
border-radius: 25px;
height: 40px;
}
.inputGroup label:before {
width: 32px;
height: 32px;
content: '';
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
background-color: green;
}
.inputGroup input:checked~label {
color: #fff;
height: 40px;
border-radius: 25px;
border: 2px solid #5562eb;
}
.inputGroup input:checked~label:before {
-webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 1;
background-color: white;
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
border-radius: 25px;
}
<div class="inputGroup">
<input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
<label for="radio1" id="radio01">Contacted</label>
</div>
I don't really understand why you want your checkbox to be always checked ( as i see in your HTML ) but here's a solution to change the text on the label. Using :after pseudo-element.
If this is not what you are looking for. Please let me know in the comments.
.inputGroup {
background-color: #fff;
border-radius: 25px;
position:relative;
}
.inputGroup label {
padding: 12px 30px;
width: 100%;
display: block;
text-align: left;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
border: 2px solid green;
border-radius: 25px;
height: 40px;
box-sizing:border-box;
}
.inputGroup label:before {
width: 32px;
height: 32px;
content: '';
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
background-color: green;
}
.inputGroup label:after {
content:"Contacted";
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:2;
left: 15px;
}
.inputGroup input:checked~label:after {
content:"Click me to confirm";
}
.inputGroup input:checked~label {
height: 40px;
border-radius: 25px;
border: 2px solid #5562eb;
}
.inputGroup input:checked~label:before {
-webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 1;
background-color: white;
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
border-radius: 25px;
}
<div class="inputGroup">
<input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
<label for="radio1" id="radio01"></label>
</div>
Here's a solution using JavaScript to swap out the label values. One of the issues I ran into with this was that you had a text color of white on the label which I've had to remove to display the label.
input = document.getElementById('radio1');
label = document.getElementById('radio01');
function handleClick() {
(input.checked ? label.innerText = "Click me to confirm the contact" : label.innerText = "Contacted");
}
input.addEventListener('click', handleClick);
.inputGroup {
background-color: #fff;
border-radius: 25px;
}
#para {
z-index: 999;
}
.inputGroup label {
padding: 12px 30px;
max-width: 100%;
display: block;
text-align: left;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
border: 2px solid green;
border-radius: 25px;
height: 40px;
}
.inputGroup label:before {
width: 32px;
height: 32px;
content: '';
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
background-color: green;
}
.inputGroup input:checked~label {
height: 40px;
border-radius: 25px;
border: 2px solid #5562eb;
}
.inputGroup input:checked~label:before {
-webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 0;
background-color: white;
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
border-radius: 25px;
}
<div class="inputGroup">
<input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
<label for="radio1" id="radio01">Click me to confirm the contact</label>
</div>

Can't call function outside of this Div

I tried so many ways to get this code to work and failed every time. I know that it is easy but I can't get behind it...
If I click the 3 Stripes, they will transform to an X - that works perfect... but if I want to click the Menu text - the 3 stripes won't transform.
here is the working Code HTML, CSS and JS
function openCloseMenu(x) {
x.classList.toggle("change");
$('.navigation-menu').toggleClass('hidden');
}
.menu-container {
display: inline-block;
cursor: pointer;
white-space: nowrap;
float: right;
}
.menu-block {
display: inline;
white-space: nowrap;
width: auto;
}
.menu-block p {
font: 1.55em "Amatic Regular";
font-weight: bold;
float: right;
margin: 0;
color: #53b1c2;
padding-right: 0.3em;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
background-color: #2ba4b8;
opacity: 0.8;
margin: 6px 0;
transition: 0.4s;
border-radius: 50px;
}
.bar1 {
width: 1em;
height: 5px;
}
.bar2 {
width: 1.5em;
height: 5px;
}
.bar3 {
width: 2em;
height: 5px;
}
/* Rotate first bar */
.change .bar1 {
width: 2em;
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<span class="menu-block">
<div class="menu-container" onclick="openCloseMenu(this);">
<div class="bar1"></div>
<div class="bar2"></div>``
<div class="bar3"></div>
</div>
<p class="hidden-xs" onclick="openCloseMenu(this);">MENÜ</p>
</span>
This is Beacause , in your function you send this as a param (this), and in the menu this refer to the menu itself so , it wont work ,
Remove param as shown in bellow snippet :
function openCloseMenu() {
$(".menu-container").toggleClass("change");
$('.navigation-menu').toggleClass('hidden');
}
.menu-container {
display: inline-block;
cursor: pointer;
white-space: nowrap;
float: right;
}
.menu-block {
display: inline;
white-space: nowrap;
width: auto;
}
.menu-block p {
font: 1.55em "Amatic Regular";
font-weight: bold;
float: right;
margin: 0;
color: #53b1c2;
padding-right: 0.3em;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
background-color: #2ba4b8;
opacity: 0.8;
margin: 6px 0;
transition: 0.4s;
border-radius: 50px;
}
.bar1 {
width: 1em;
height: 5px;
}
.bar2 {
width: 1.5em;
height: 5px;
}
.bar3 {
width: 2em;
height: 5px;
}
/* Rotate first bar */
.change .bar1 {
width: 2em;
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="menu-block">
<div class="menu-container" onclick="openCloseMenu();">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<p class="hidden-xs" onclick="openCloseMenu();">MENÜ</p>
</span>
You may understand your own code:
function openCloseMenu(element) {
a function wich takes a parameter element ( x is not really a good name)
element.classList.toggle("change");
and then toggles a change on this certain element. So:
<p class="hidden-xs" onclick="openCloseMenu(this);">MENÜ</p>
This will trigger a change on the menu name. Which we dont want.
We want to change this element:
<div id="menu-icon" class="menu-container" onclick="openCloseMenu();">
Ive assigned an id to it. So we can get it like this:
$("#menu-icon")
The full code:
function openCloseMenu() {//no param needed here
$("#menu-icon").toggleClass("change");
$('.navigation-menu').toggleClass('hidden');
}
This answer uses http://jQuery.org. No Jquery:
function openCloseMenu() {//no param needed here
document.getElementById("menu-icon").classList.toggle("change");
document.getElementsByClassName('navigation-menu')[0].classList.toggle('hidden');
}

How to make a concentric circle on an existing circle which shows on anchor tag click

I have a small circle on top of which is a "+" button. When clicked, a circle shows up (a dotted one) and the data from my database is shown along its circumference.
Now I want another concentric circle outside of this, and it should also show on the button click, along with the first circle.
function toggleDiv(divId){
$("#"+divId).toggle();
}
.post-share{
display: block;
width: 74px;
height: 34px;
margin: 40px 0px 0px 0px;
background: #3e599a;
text-decoration: none;
width: 110px;
font: 12px;
color: #FFFFFF;
position: relative;
position:fixed;
top: 40%;
left: 50%;
z-index:99;
text-align: center;
vertical-align: middle;
}
.post-share span{
width: 15px;
height: 18px;
padding: 3px;
display: block;
position: absolute;
top: -24px;
right: 0;
background-color: #080563;
color: #FFFFFF;
font-weight: bold;
vertical-align: middle;
font: 10px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
text-indent: 0;
}
.social-buttons-text {
font-size: 4px;
color: #FFFFFF;
float: left;
margin: 0px;
padding: 0px;
text-align: left;
}
.sphere{
height: 80px;
width:80px;
border-radius: 50%;
}
/* for circle */
* {
padding: 0px;
margin: 0px;
transition: 1s;
}
html {
background-color: hsla(190, 60%, 50%,1);
overflow: hidden;
}
#wrapper {
margin: 200px auto;
height: 200px;
width: 600px;
}
.bubble {
border-radius: 100%;
height: 40px;
width: 40px;
display: inline-block;
margin: 0px 15px 0px 15px;
}
.animate {
animation: scaleWobble 2s infinite alternate ease;
}
#red {
background-color: hsla(350, 50%, 50%, 1);
}
#yellow {
background-color: hsla(70, 50%, 50%, 1);
}
#green {
background-color: hsla(120, 70%, 40%, 1);
}
#keyframes scaleWobble {
from {
height: 100px;
width: 100px;
}
to {
height: 125px;
width: 125px;
}
}
/**
* Position icons into circle (SO)
* http://stackoverflow.com/q/12813573/1397351
*/
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
.deg15 { transform: rotate(15deg) translate(12em) rotate(-15deg); }
.deg30 { transform: rotate(30deg) translate(12em) rotate(-30deg); }
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
.deg60 { transform: rotate(60deg) translate(12em) rotate(-60deg); }
.deg75 { transform: rotate(75deg) translate(12em) rotate(-75deg); }
.deg90 { transform: rotate(90deg) translate(12em) rotate(-90deg); }
.deg105 { transform: rotate(105deg) translate(12em) rotate(-105deg); }
.deg120 { transform: rotate(120deg) translate(12em) rotate(-120deg); }
.deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
.deg150 { transform: rotate(150deg) translate(12em) rotate(-150deg); }
.deg165 { transform: rotate(165deg) translate(12em) rotate(-165deg); }
.deg180 { transform: translate(-12em); }
.deg195 { transform: rotate(195deg) translate(12em) rotate(-195deg); }
.deg210 { transform: rotate(210deg) translate(12em) rotate(-210deg); }
.deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
.deg240 { transform: rotate(240deg) translate(12em) rotate(-240deg); }
.deg255 { transform: rotate(255deg) translate(12em) rotate(-255deg); }
.deg270 { transform: rotate(270deg) translate(12em) rotate(-270deg); }
.deg285 { transform: rotate(285deg) translate(12em) rotate(-285deg); }
.deg300{ transform: rotate(300deg) translate(12em) rotate(-300deg); }
/* this is just for showing the angle on hover */
.circle-container a:not(.center)::before {
position: absolute;
width: 7em;
color: white;
opacity: 0;
}
.circle-container a:hover:before { opacity: 1; }
/* this is for showing the circle on which the images are placed */
.circle-container:after {
position: absolute;
top: 2.8em; left: 2.8em;
width: 24em; height: 24em;
border: dashed 1px deeppink;
border-radius: 50%;
opacity: .3;
pointer-events: none;
content: '';
}
.circle-container:hover:after{
opacity: 1;
}
.circle-container a:not(.center)::after {
position: absolute;
left: 50%;
box-shadow: 0 0 .5em .5em white;
margin: -2px;
background: #fffea1;
content: attr(myattri);
}
.circle-container:hover a:after { opacity: 1; }
.circle-container a:hover:after { opacity: .3; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="post-share sphere yellow" id="name">erwerew
<span>+</span>
</span>
<div id="myContent" class='circle-container' style="display:none">
</div>
This may not be 100% the answer you are looking for, but it seems whatever you are doing, you may be making it more complicated then it needs to be.
You can create these circles by using a div with a border-radius:50%;
See this example which i think is acheving what you want with a lot less code.
JsFiddle Demo: https://jsfiddle.net/yfpnbf4z/3/
$("#circleToggle").click(function() {
$("#circle1").fadeToggle("slow");
$("#circle2").fadeToggle("slow");
if ($("#circle1").is(":hidden")) {
$("#circleToggle").html("+");
} else {
$("#circleToggle").html("-");
}
});
.container {
background: #333;
position: relative;
height: 500px;
width: 500px;
}
.button {
position: absolute;
left: 230px;
top: 5px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
background: #fff;
display: inline-block;
border-radius: 50%;
text-align: center;
}
.circle {
border-radius: 50%;
border: 1px dashed red;
display: none;
}
#circle1 {
position: absolute;
top: 150px;
left: 150px;
height: 200px;
width: 200px;
line-height: 200px;
text-align: center;
color: #fff;
}
#circle2 {
position: absolute;
top: 50px;
left: 50px;
height: 400px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="button" id="circleToggle">+</div>
<div class="circle" id="circle1">Some data</div>
<div class="circle" id="circle2"></div>
</div>
I hope this is useful to you mate.

Navigation Menu not working on mobile

I'm using Navigation using a plugin called Hamburgler and it works fantastic on desktop. However, on mobile, the navigation appears, but it can't be clicked.
The coding for the site I'm trying to edit is a bit janky, my apologies.
Navigation coding:
JS
<script type="text/javascript">
// HAMBURGLERv2
function togglescroll() {
$('body').on('touchstart', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
});
}
$(document).ready(function() {
togglescroll()
$(".icon").click(function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$("body").toggleClass("noscroll");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
// PUSH ESC KEY TO EXIT
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$(".mobilenav").fadeOut(500);
$(".top-menu").removeClass("top-animate");
$("body").removeClass("noscroll");
$(".mid-menu").removeClass("mid-animate");
$(".bottom-menu").removeClass("bottom-animate");
}
});
</script>
HTML
<a href="javascript:void(0)" class="icon">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</a>
<div class="mobilenav">
<div class="insidenav">
2016 Salary Guide
2015 Salary Guide
2014 Salary Guide
</div>
</div>
CSS
#navigation {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
background-color: #fff;
z-index: 994;
}
.top-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 999 !important;
}
.mid-animate {
opacity: 0;
z-index: 999 !important;
}
.bottom-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
z-index: 999 !important;
}
.top-menu {
top: 5px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.mid-menu {
top: 13px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.bottom-menu {
top: 21px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.menui {
background: #000;
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
margin-top: 10px;
position: absolute;
z-index: 999 !important;
}
.icon {
z-index: 999 !important;
display: block;
padding: 9px;
height: 32px;
width: 32px;
position: fixed;
right: 30px;
top: 15px;
}
.mobilenav {
font-family: inherit;
top: 0;
left: 0;
z-index: 995 !important;
display: none;
position: fixed;
width: 100%;
height: 100%;
background: #FFF;
opacity: 0.98;
}
.insidenav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
width: 100%;
max-width: 300px;
}
a.inside {
z-index: 2147483647;
display: block;
width: 300px;
height: 70px;
background-color: #dd152e;
color: #FFF;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
text-align: center;
line-height: 70px;
text-transform: uppercase;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-ms-transition: background .5s ease-in-out;
-o-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
margin-bottom: 50px;
text-decoration: none;
}
a.inside:hover {
background-color: #c21228;
}
Here's the site itself:
http://salaryguide.diamondbacklab.com
Sorry, I know it's a lot of code to look at. Any help would be super appreciated!
You need to remove these lines from JavaScript:
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
to make it work. Because preventDefault() also prevents standard browser behaviour.

How to create a `<div>` with a sloped edge

I'm trying to make the following shape in CSS:
I can do it using rotations but the problem is that I need to have a background image that doesn't get rotated.
Here you go.
#box {
width: 200px;
height: 200px;
background: black;
position: relative;
-webkit-transition: all 300ms ease-in;
}
#box:hover {
-webkit-transform: rotate(-180deg) scale(0.8);
}
#box:after {
display: block;
content: "\0020";
color: transparent;
width: 211px;
height: 45px;
background: white;
position: absolute;
left: 1px;
bottom: -20px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
HTML
<div id='s'></div>
CSS
#s {
width:0px;
height:0px;
border:none;
border-left:400px solid #000;
border-top:400px solid #000;
border-bottom:200 px solid #fff;
}
http://jsfiddle.net/xvm7K/

Categories