JS button click prompt from text to dropdown menu

JS button click prompt from text to dropdown menu - javascript

I have this HTML code with JS script, That if someone press on the button it will open a popup with a blank text (for user to enter details),
How do i take the same code with pop up but just replacing the text with drop down menu ? ( i dont know JS and have tried adding the drop down on JS script \ near button and calling the function - icant make it work) :
<select name="username" id="username">
<option value="R1">R1</option>
<option value="R2">R2</option>
<option value="R3">R3</option>
<option value="R4">R4</option>
<option value="R5">R5</option>
<option value="R6">R6</option>
<option value="R7">R7</option>
</br>
</select>
but its just presenting next to the button, i need it after i click on the popup instead of blank text,
and i need it as the function works today, it is passing the value it got to me.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="30">
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
/*padding: 60px 100px;*/
text-align: center;
text-decoration: none;
/*display: inline-block;
font-size: 20px;*/
margin: 10px 20px;
cursor: pointer;
background-color: #555555;
border-radius: 12px;
transition-duration: 0.4s;
width: 250px;
height: 50px;
font-size: 20px;
} /* Black */
.button:hover {
background-color: #7B8288; /* Green */
color: white;
}
.button_active {
background-color: #19bf53; /* Green */
color: white;
}
.button_timeout_soon {
background-color: #F75858; /* Green */
color: black;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(255,255,255);
background-color: rgba(255,255,255, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
</head>
<body>
<ul>
<button class="button button" onclick="myFunction(form);openNav()">{{ button }}</button>
<input type="hidden" name="reason" id="myField" value=""/>
</ul>
<script>
function myFunction(frm) {
var txt;
var reason = prompt("Please enter username:");
if (reason == null || reason == "") {
txt = "CANCEL";
} else {
txt = reason;
}
frm.reason.value = txt; // 1st option
return txt
}
</script>
</body>
</html>

The standard JS prompt is not going to cut it.
You'll probably need to create your own modal which you can then add a dropdown menu to.
Find more information here:
How to create java script prompt with dropdown

Related

How to make pop-up div hide/show on click

I want to make a button to change and make div pop-up after clicked and after being again clicked hide div and came back to normal. How do I do that? (also if you can keep it HTML and css because I am learning Java and not so familiar and good with it but if it is only way you know with Java no problem). I tried it with a Focus in css but after I click any were in a screen button just came back to normal.
If you know this please answer it would be very big help.
.viewgames {
color: black;
background-color: white;
border: none;
border-radius: 2px;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
position: absolute;
z-index: 1;
letter-spacing: 1px;
word-spacing: -5px;
width: 150px;
height: 60px;
margin-left: 45%;
margin-top: 400px;
cursor: pointer;
opacity: 1;
transition: 0.75 s;
}
.gamesvp {
margin-top: 0px;
}
.viewgames: hover.gamesvp {
margin-top: 0px;
}
.viewgames: hover {
background-color: rgba(0, 0, 0, 0);
border: 4px white solid;
color: white;
transform: scale(1.2);
}
.hidegames {
opacity: 0;
margin-bottom: 15px;
}
.viewgames: focus {
color: black;
background-color: white;
border: none;
border-radius: 2px;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
position: absolute;
z-index: 1;
letter-spacing: 1px;
word-spacing: -5px;
width: 150px;
height: 60px;
margin-left: 45%;
margin-top: 400px;
cursor: pointer;
opacity: 1;
transition: 0.75s;
}
.viewgames: focus.gamesvp {
opacity: 0;
}
.viewgames: focus.hidegames {
opacity: 1;
}
<button class="viewgames"><p class="gamesvp">View Games</p>
This is what I have so far!

What i had understand so far by your question this is what you want
It uses JS
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
$(".popup").toggleClass('active');
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup.active{
color: red;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<div class="popuptext" id="myPopup">A Simple Popup!</div>
</div>

how to start webkit animation after page load?

I have an animation with my header wrapper and I want the animation to start after the page completely loads.
However it seems like it starts before the page loads. I looked up a function on css tricks and that is what i am using here.
It seems the animation starts a little early. Any help with this?
From the post on css tricks i added a class "preload" to the body and then removed the class in my JavScript to start the animation but does not seem to work.
<!---------------------------HTML ------------------------>
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body class = "preload">
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper anim fadeInDown">
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
</body>
</html>
<!--------------------------------------CSS------------------------------>
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
<!-----------------------------------------JS------------------------------>
$(window).load(function() {
$("body").removeClass("preload");
});

Remove .fadeInDown class from wrapper div
Make wrapper div display:none by default.
Add display:block !important; CSS to .fadeInDown class
On page ready add .fadeInDown class to wrapper div.
$( document ).ready(function() {
$(".wrapper").addClass("fadeInDown");
});
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
display:block !important;
}
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body class="preload">
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper anim" style='display:none'>
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
</body>
</html>

This preload class prevents transitions, but not keyframe animations. It's also a bit hacky.
Instead of removing a class on page load, it might make more sense to add the fadeInDown class in your $(window).load function, which will cause the CSS animation to run immediately after the class is added. Just remember to remove that class from the HTML, as it will now be added in JS.
$(window).load(function() {
$(".wrapper").addClass("fadeInDown");
});

Why doesn't my Javascript if else work?

I've been messing around with this mobile friendly navigation menu, and for some reason my menu will open (JS IF statement), but not close (JS ELSE statement. So I'm stuck as to why it is opening but not closing?
P.S. I'm new to JavaScript, so it might be something simple that I over looked, thanks!
Here's the code I'm working with:
function myFunction(x) {
x.classList.toggle("change");
}
function navChange() {
var x = document.getElementById("myNav").style.height
if (x = "0%"){
document.getElementById("myNav").style.height = "100%";
} else {
document.getElementById("myNav").style.height = "0%";
}
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}
.container {
position: absolute;
top: 25px;
left: 25px;
display: inline-block;
cursor: pointer;
margin: 20px;
z-index: 12;
}
.bar1, .bar2 {
width: 35px;
height: 4px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: rotate(-45deg) translate(0px, 0px) ;
background-color: gray;
}
.change .bar2 {
transform: translate(1px, -10px) rotate(45deg);
background-color: gray;
}
<div id="myNav" class="overlay">
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<div class="container" onclick="myFunction(this), navChange()">
<div class="bar1"></div>
<div class="bar2"></div>
</div>
Thanks for your time and energy!

The reasoning for the errors that I see is for one you are doing assignment in your conditions.
a = 15;
b = 10;
if(a = b) alert("hello world");
a now is now 10, because we used assignment instead of testing for equality which would look like.
if( a == b)
Also you are testing the style property which looks like you are setting through CSS and style.height will not return what you are looking for. You will need to test PX or what have you.
var height = window.getComputedStyle(document.getElementById("element")).height;
var height = parseInt(height,10);
if( height > 1510 ) {
//do whatever
}

Everything EasyBB said was true, but here's an example on how it can be done cleanly:
function myFunction(x) {
x.classList.toggle("change");
}
function navChange() {
var x = document.getElementById("myNav").clientHeight; // Use clientHeight to get the actual height, ignoring style rules. //.style.height
if (x == "0"){ // == to compare, = here would set the value, so x would always equal 0.
document.getElementById("myNav").style.height = "100%";
} else {
document.getElementById("myNav").style.height = "0"; //No reason to use percentage here, as 0% =0px.
}
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}
.container {
position: absolute;
top: 25px;
left: 25px;
display: inline-block;
cursor: pointer;
margin: 20px;
z-index: 12;
}
.bar1, .bar2 {
width: 35px;
height: 4px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: rotate(-45deg) translate(0px, 0px) ;
background-color: gray;
}
.change .bar2 {
transform: translate(1px, -10px) rotate(45deg);
background-color: gray;
}
<div id="myNav" class="overlay">
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<div class="container" onclick="myFunction(this), navChange()">
<div class="bar1"></div>
<div class="bar2"></div>
</div>

Codepen JQuery Code Doesn't Work In My Browser

I've searched online for a solution to this problem for a while now. Unfortunately, no luck. Here is the website I'm using the code from http://codepen.io/anon/pen/wagbYZ
Here is my code:
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Section 01</li>
<li>Section 02</li>
<li>Section 03</li>
<li>Section 04</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<div class="hero">
<h1><span>loser friendly</span><br>Batman nav.</h1>
<div class="mouse">
<span></span>
</div>
</div>
<div class="row content">
<h1 class="sec01">Section 01</h1>
<p>Hello World!</p>
<h1 class="sec02">Section 02</h1>
<p>Hello World!</p>
<h1 class="sec03">Section 03</h1>
<p>Hello World!</p>
<h1 class="sec04">Section 04</h1>
<p>Hello World!</p>
</div>
</body>
</html>
CSS:
#mixin small {
#media only screen and (max-width: 766px) {
#content;
}
}
$color: #8f8f8f;
$color2: #e8f380;
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
#include small {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
.mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid lighten($color, 30%);
}
.logo {
width: 50px;
font-size: 25px;
color: $color;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
#include small {
float: none;
}
}
nav {
float: right;
width: 60%;
#include small {
width: 100%;
}
ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
#include small {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
#include small {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
}
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
#include small {
display: block;
}
span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: $color;
display: block;
}
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: $color;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 50px;
line-height: 1.3;
span {
font-size: 25px;
color: $color2;
border-bottom: 2px solid $color2;
padding-bottom: 12px;
line-height: 3;
}
}
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid $color2;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: $color2;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
The HTML and CSS work fine, but the JQuery is giving me problems.

try wrapping the code in jquery document ready event
$(document).ready(function(){
//event listeners
});

How to add jQuery function to hover (show) and then click to show another menu

Hello I want to ask about jQuery
How to add jQuery hover (show) function to my jQuery? ( I want to show #menuwrap when hover that area)
2.I want to add jQuery function, when I click MENU, it will hide #menuwrap again and show another menu content
my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tes - Web Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/tes.js"></script>
<link rel="stylesheet" type="text/css" href="css/tes.css">
</head>
<body>
<div id="titletext">
<h1>... Test ...</h1>
</div>
<div id="menuwrap">
<div id="menu">
<div id="menu1">
</div>
</div>
<div id="menutext">
<h1 id="menucontent" a href="xxx">MENU</h1>
</div>
</div>
</body>
</html>
my CSS
#import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
margin: 0px !important;
padding: 0px !important;
height: 100%;
width: 100%;
overflow: hidden;
}
html {
min-width: 10%;
min-height: 10%;
}
body {
z-index: -1;
background-attachment: fixed;
background-color: #17807a;
}
#titletext {
position: fixed;
z-index: 1;
margin-top: 0px !important;
padding-top: 0px !important;
height: 70px;
background-color: #ffffff;
}
#titletext h1 {
margin: 0px auto;
text-align: center;
color: #0e4e4b;
font: 40px 'Montserrat';
}
#menuwrap {
position: fixed;
top: 550px;
left: 640px;
}
#menu {
display: block;
position: fixed;
height: 100px;
width: 100px;
border-radius: 70px;
border-width: 5px;
border-style: solid;
border-top-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: transparent;
border-right-color: transparent;
-moz-animation: cw;
-moz-animation: cw 5s infinite;
}
#menu1 {
position: absolute;
height: 70px;
width: 70px;
border-radius: 60px;
border-width: 5px;
border-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: #ffffff;
border-right-color: #ffffff;
top: 10px;
left: 10px;
-moz-animation: ccw;
-moz-animation: ccw 3s infinite;
}
#menutext {
position: absolute;
top: 27px;
left: 27px;
}
#menutext h1 {
position: absolute;
font-size: 12px;
color: #ffffff;
letter-spacing: 3px;
top: 19px;
left: 4px;
}
#-moz-keyframes cw {
0%{
-moz-transform: rotate(0deg); }
100%{
-moz-transform: rotate(360deg); }
}
#-moz-keyframes ccw {
0%{
-moz-transform: rotate(0deg); }
100%{
-moz-transform: rotate(-540deg); }
}
my jQuery
jQuery(function() {
setTimeout("jQuery('#menuwrap').fadeOut('2000');", 3000);
});
thanks in advance :)

You can use fadeTo() function for this task:
setTimeout(function () {
$('#menuwrap').fadeTo('slow', 0);
}, 3000);
$('#menuwrap').hover(function () {
$(this).fadeTo('slow', 1);
}, function () {
$(this).fadeTo('slow', 0);
});
Demo: https://jsfiddle.net/sruLsr37/2/

We Keep Coding

JavaScript is the programming language of the Web.

JS button click prompt from text to dropdown menu - javascript

The standard JS prompt is not going to cut it. You'll probably need to create your own modal which you can then add a dropdown menu to. Find more information here: How to create java script prompt with dropdown

Related

How to make pop-up div hide/show on click

how to start webkit animation after page load?

Why doesn't my Javascript if else work?

Codepen JQuery Code Doesn't Work In My Browser

How to add jQuery function to hover (show) and then click to show another menu

Categories

Resources