I want to create a menu for one page site but I'm not very good at JavaScript and I have this code for open and close the menu but I want it to open like with a easy transition because but it just appear.
How can I add fade-in-out or something like that:
<script>
function w3_open() {
document.getElementById("mySidebar").style.visibility = "visible";
}
function w3_close() {
document.getElementById("mySidebar").style.visibility = "hidden";
}
</script>
w3-button{
position:fixed;
width: 42px;
height: 42px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
line-height:1.1;
text-align:center;
top:6.5px;
left: 8px;
background-color: #f2bd66;
z-index:11;
background-position:center;
cursor: pointer;
color: white;
margin-top: 0.7%;
margin-left: 0.7%;
}
.w3-button{
width: 42px;
height: 42px;
margin-top: 0.7%;
margin-left: 0.7%;
}
.w3-button::before {
content:"☰";
font-size:32px;
color:white;
text-align: center;
}
.w3-button:hover{
opacity: 0.6;
}
.w3-sidebar {
position: absolute;
z-index:12;
width:188px;
left: -188px;
line-height:2;
position:fixed;
border-bottom:.5px solid rgba(204, 158, 90, 1);
border-top:.5px solid rgba(204, 158, 90, 1);
background-color:#f2bd66;
font-family: 'Libre Baskerville', serif;
font-weight: 400;
text-align:center;
color: #5b5f5e;
height: 100vh;
border-right:4px solid #af874b;
}
.w3-bar-item {
width: 188px;
margin:0 auto;
line-height:2;
border-bottom:.5px solid rgba(204, 158, 90, 1);
border-top:.5px solid rgba(204, 158, 90, 1);
background-color:transparent;
font-family: 'Libre Baskerville', serif;
font-weight: 400;
text-align:center;
color: #5b5f5e;
float: left;
}
#close-menu{
background-color: #5b5f5e;
color: white;
}
#close-menu:hover{
opacity: 0.7;
}
.nav a:hover {
background-color: #292446;opacity: 0.9;
color: white;
}
<div class="w3-sidebar " style="visibility:hidden" id="mySidebar" >
<button onclick="w3_close()" class="w3-bar-item w3-large" id="close-menu"> Close ×</button>
<nav class="nav">
Inicio
Sobre mí
Galería
Booktubers GT
Recursos E-stela
Redes Sociales
</nav>
</div>
<div class="w3-teal">
<button class="w3-button" onclick="w3_open()"></button>
</div>
If you don't know how to do that in js, you can make it in pure css :
Toggle class on HTML element without jQuery
If you still want to use js to achive that, you can toggle a class on your menu container when the button is clicked, and make transition with css based on the toggled class. If you use jquery you can do that with simple jquery fade or slide function :
<script>
$('#my-menu-button').click(function(){
$('#my-menu').slideToggle();
})
</script>
I wrote a demo for you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.test {
width: 100px;
height: 100px;
background: #000;
display: block;
transition: 1s;
opacity: 0
}
.active {
opacity: 1
}
</style>
</head>
<body>
<div class="test"></div>
<button onclick="show()">show</button>
<button onclick="hide()">hide</button>
<script>
var test = document.querySelector('.test')
function show () {
test.className = 'test active'
}
function hide () {
test.className = 'test'
}
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
How to open iframe only on when the button is clicked without using jquery <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'></script>
here when we open a website the iframe should not load it should load only when the button is clicked
My present code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
it is my present code if I add the above-mentioned jquery its works fine but here I removed it now it's not working
so I want to work it without jquery
That sticky sidebar should auto-scroll with the main content but when I used to frame the sidebar not scrolling down. It also block my comment frame
Check this, Is this what do you need?
const btn = document.querySelector("button.openIframe");
const frame = document.getElementById("frame");
btn.addEventListener("click", toggleIframe);
function toggleIframe(){
var src = "https://www.jqueryscript.net/";
frame.classList.toggle("d-none");
btn.classList.toggle("opened");
if(btn.classList.contains("opened")){
btn.innerHTML = "Close IFrame";
src = prompt("Enter a Source :", "https://www.jqueryscript.net/");
}
else{
btn.innerHTML = "Open IFrame";
}
frame.src = src;
}
.d-none{ display:none; }
<button class="openIframe">Open IFrame</button>
<iframe id=frame class="d-none" width="100%" height="60%">
</iframe>
Or Same in a Better Way ( Update )
const btn = document.querySelector("#load");
const src = document.querySelector("#src");
const frame = document.querySelector("#frame");
btn.addEventListener("click", toggleFrame);
function toggleFrame(){
frame.src = "about:blank";
if(src.value !== null){
src.classList.toggle("d-none");
btn.classList.toggle("opened");
frame.src = src.value;
frame.classList.toggle("d-none");
if(btn.classList.contains("opened"))
btn.innerHTML = "Close";
else
btn.innerHTML = "Load";
}
}
.d-none{ display:none; }
<input id=src placeholder="Enter a SRC" value="https://www.jqueryscript.net/"><button id=load>Load</button>
<iframe id=frame class=d-none width="100%"></iframe>
iFrame
I have a button which flips when the user click it.
The problem is that I don't want the text to flip with the button.
(I use js to apply a little bit of css when the user click the button)
function clickFunction() {
var change = document.getElementById("btn");
if (change.innerText == "Send")
{
change.innerText = "Sent!";
change.style.border = "4px solid #fff";
change.style.background = "#00E676";
change.style.animation = "anim 1s";
}
}
button {
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 40px;
color: #fff;
background: #01579B;
border: 4px solid #01579B;
border-radius: 100px;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
#keyframes anim {
0% {}
100% { transform: rotateX(180deg)}
}
<body>
<button id="btn" onclick="clickFunction()" type="button">Send</button>
<script src="click.js"></script>
</body>
The simplest way might be, to put a div behind the button.
The button itself then only gets the text, and click changes the divs background.
So you would have something like:
<body>
<div class="btn">
<div id="bg-button" class="bg-button"></div>
<button id="btn" onclick="clickFunction()" type="button">Send</button>
</div>
<script src="click.js"></script>
</body>
Css:
.btn{
position: relative;
height:80px;
overflow:hidden;
}
button {
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 40px;
background-color:rgba(0, 0, 0, 0);
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
position: absolute;
border: none;
top:0;
color: #fff;
width: 100%;
height:100%;
}
.bg-button {
background: #01579B;
border-radius: 100px;
top:0;
width: 100%;
height: 100%;
}
#keyframes anim {
0% {}
100% { transform: rotateX(180deg)}
}
Js:
function clickFunction() {
var change = document.getElementById("btn");
var bg = document.getElementById("bg-button");
if (change.innerText == "Send")
{
change.innerText = "Sent!";
bg.style.background = "#00E676";
bg.style.animation = "anim 1s";
}
}
What I did was add a div before the button just like #cagcoach said and then i added the onClick function on it and removed it from the button. After that I removed the text from the button and added it inside the div. Then made a variable on the js file for that div and made it so that the text inside the div would change on click and not the button's text and finally added the animation (called anim) on the div too.
TLDR; correct snippets
function clickFunction() {
var butn = document.getElementById("btn");
var divi = document.getElementById("div");
if (divi.innerText == "Send")
{
divi.innerText = "Sent!";
divi.style.animation = "anim 1.5s";
butn.style.border = "4px solid #fff";
butn.style.background = "#00E676";
butn.style.animation = "anim 1.5s";
}
}
#keyframes anim {
0%{transform: rotateX(0deg)}
50%{transform: rotateX(180deg)}
100%{transform: rotateX(0deg)}
}
body {background: #0091EA;}
button {
background: #01579B;
border: 4px solid #01579B;
border-radius: 100px;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
width: 160px;
height: 70px;
z-index: 0;
}
div#div {
position: absolute;
left: 30px;
right: 0;
top: 17px;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 40px;
color: #fff;
z-index: 1;
}
<body>
<div onclick="clickFunction()" id="div">Send</div>
<button id="btn" type="button"></button>
<script src="click.js"></script>
</body>
Hi I am trying to have 20 customize audio players though I could only make the first one work. As soon as I copy and paste the new audio in html it does not start playing. I am not sure if the only way is by giving a unique id to each audio or if there is a way to avoid doing that by changing the javascript code.
thanks!!!
it is also online here http://musictext.yt/audio/audio.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio" width="400" height="400">
<source src="rout.mp3">
</audio>
<nav>
<div id="botones">
<button class="button" id="reproducir" >play</button>
</div>
<div id="barra">
<div id="progreso">
</div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
JS
function iniciar() {
maximo=80;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click', presionar, false);
barra.addEventListener('click', mover, false);
}
function presionar(){
if(!medio.paused && !medio.ended) {
medio.pause();
reproducir.innerHTML='play';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='pause';
bucle=setInterval(estado, 1000);
}
}
function estado(){
if(!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='play';
window.clearInterval(bucle);
}
}
function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}
window.addEventListener('load', iniciar, false);
CSS
body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display : block;
}
#reproductor{
width: 100px;
height: 100px;
margin: 60px auto;
padding: 5px;
background: blue;
border: 1px solid #666666;
}
nav{
margin: 1px 0px;
}
.button {
font-family: arial;
background-color: black;
border: none;
color: white;
padding: ;
text-align: center;
font-size: 12px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
#botones{
background-color: black;
width: 100px;
height: 20px;
}
#barra{
position: relative;
width: 88px;
height: 66px;
padding: 4px;
border: 1px solid black;
background: white;
}
#progreso{
position: absolute;
width: 0px;
height: 60px;
background: black;
}
what i am trying to do is as follows:
Get data from json file on button click.
Show the data in separate boxes,different for each element of array. For example, if my json gives me 3 rows of data, there should be 3 boxes.
Place the boxes in a grid of 2X2.
Exactly like in this imageWireframe for foodcourts
Step 1 i achieved easily. I can also generate boxes on button click but not as shown in image. Also, each time the button is clicked, it adds to the div.I would really appreciate some help. Here is my code:
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Untitled Document
</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style>
.shape{
text-align:center;
background-image:url(dark-triangles.png);
width:200px;
height:60px;
line-height:60px;
color:white;
margin:10px;
position:relative;
transition-property: background;
transition-duration: -10s;
transition-timing-function: linear;
}
.shape:before{
content:"";
width:0px;
height:0px;
border-top:60px solid rgba(107,255,55,105);
border-left:60px solid transparent;
position:absolute;
right:0%;
top:0px;
}
.shape:hover{
background: #ff7b29;
cursor: pointer;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-image: url("doodles.png");
background-color: #cccccc;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
/*.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}*/
/*.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}*/
/*.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}*/
/*#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}*/
.div1
{
width:400px;
height:auto;
background:none;
margin:auto;
border:2px solid black;
margin-top:70px;
}
.divcontent
{
width:auto;
height:auto;
background:none;
margin:auto;
border:2px solid black;
margin-top:70px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<body ng-controller="myController" background="cloudy-day.png" style="color:black;">
<div id="mySidenav" class="sidenav">
<!-- ×!-->
<input value={{len}}>
</input>
<button class="shape" id="orders" >
Orders
<button class="shape" id="users">
Users
<button class="shape" ng-click="fcclicked()">
Food Courts
<button class="shape">
Delivery Locations
</div>
<div class="div1"; id="d1">
<p align="center">Click one of the buttons to load content.....
</p>
<div ng-repeat="x in names">
{{ x.id}}
{{ x.name }}
{{ x.address }}
</div>
<!-- <script language="javascript">
function cdiv()
{
/* var nums=document.getElementById();
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";
div.style.display="inline-block";
div.style.margin="10px";
document.getElementById("d1").appendChild(div);*/
}
</script>!-->
</div>
<script>
angular.module('myApp', [])
.controller('myController', function($scope,$http) {
$scope.fcclicked= function(){
alert("hiii");
$http.get('http:/18.220.71.157:8080/foodcourt/foodcourt/list')
.success(function(response) {
$scope.names = response.foodCourts;
$scope.len=response.foodCourts.length;
//var newEle = angular.element("<table class='square'></div>");
//var target = document.getElementById('d1');
//angular.element(target).append(newEle);
/*for( i =1 ; i <$scope.len ;i++){
var newEle = angular.element("<div class='square' id='myddiv'></div>");
angular.element(target).append(newEle);
}*/
}
);
}
}
);
</script>
<style>
.square {
width: 100px;
height: 100px;
background: red;
display:inline-block;
margin:10px;
}
</style>
<!--<script>
$(document).ready(function(){
$(document).click(function(e){
if(e.target.id=="orders")
{
//$("#d1").append('');
}
if(e.target.id=="users")
{
}
// $("#d1").fadeIn();
//$("#div2").fadeIn("slow");
//$("#div3").fadeIn(3000);
});
});
</script>
<!--<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>!-->
<style>
.minidiv
{
}
</style>
</body>
</html>
Okay, there were a lot of problems
The style tag should b always in the head
The button must be closed <button></button>
The input tag should be closed like this <input />
the script tag resides preferably in the head or in the bottom of the
body
I fixed some styling to float the divs and so you can have the same idea that you wanted, you modify the code as you want now:
angular.module('myApp', [])
.controller('myController', function($scope, $http) {
$scope.fcclicked = function() {
alert("hiii");
$http.get('http:/18.220.71.157:8080/foodcourt/foodcourt/list')
.success(function(response) {
$scope.names = response.foodCourts;
$scope.len = response.foodCourts.length;
});
};
})
.shape {
text-align: center;
background-image: url(dark-triangles.png);
width: 200px;
height: 60px;
line-height: 60px;
color: white;
margin: 10px;
position: relative;
transition-property: background;
transition-duration: -10s;
transition-timing-function: linear;
}
.shape:before {
content: "";
width: 0px;
height: 0px;
border-top: 60px solid rgba(107, 255, 55, 105);
border-left: 60px solid transparent;
position: absolute;
right: 0%;
top: 0px;
}
.shape:hover {
background: #ff7b29;
cursor: pointer;
}
body {
font-family: "Lato", sans-serif;
box-sizing: border-box;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-image: url("doodles.png");
background-color: #cccccc;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.div1 {
box-sizing: border-box;
width: 400px;
height: auto;
background: none;
margin: auto;
border: 2px solid black;
margin-top: 70px;
overflow: hidden;
}
.divcontent {
width: auto;
height: auto;
background: none;
margin: auto;
border: 2px solid black;
margin-top: 70px;
}
.square {
box-sizing: border-box;
width: 48%;
height: 100px;
background: red;
display: inline-block;
margin: 1%;
float: left;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Untitled Document
</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<body ng-controller="myController" background="cloudy-day.png" style="color:black;">
<div id="mySidenav" class="sidenav">
<input value={{len}} />
<button class="shape" id="orders">Orders</button>
<button class="shape" id="users">Users</button>
<button class="shape" ng-click="fcclicked()">Food Courts</button>
<button class="shape">Delivery Locations</button>
</div>
<div class="div1" id="d1">
<p align="center">Click one of the buttons to load content.....
</p>
<div class="square" ng-repeat="x in names">
{{ x.id}} {{ x.name }} {{ x.address }}
</div>
</div>
</body>
</html>
I am attempting to build a demo site to help others learn to code. I am having a problem with evaluating a users input from code. I know that I can use the eval() function, but I am going to have a lot of examples and having many eval() functions doesn't seem very optimal or concise. If I were to use eval(), what would be the best way to implement this for best practices?
Or, is there a way that I can implement a simple compiler or a generic function and assign a button click to run said function that will evaluate the code in the editor and display it on the page somewhere.
I am currently using Ace for my editor. Maybe there is a function in their api that does this, but I couldn't find it. I also know that I can use code mirror, but unsure of their solutions also. Any help would be greatly appreciated.
Here is a link to the JSBIN (Note: the code editor doesn't show up here as I can't require the library.
Here is a link to the site that I have the functioning version on.
If you need to see the code I have posted it below:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Learn to Code with Codesmith</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>
<style type="text/css" media="screen">
</style>
</head>
<body>
<!-- <div class="page-wrapper">
<a class="btn trigger" href="javascript:;">Click Me!</a>
</div> -->
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a class="btn-close trigger" href="javascript:;"></a>
</div>
<div class="content">
<form class="" action="" method="post">
<input id="username" type="text" name="name" value="" placeholder="Username">
<input id="password" type="text" name="name" value="" placeholder="Password">
<button id="login-submit" type="button" name="button">LOGIN</button>
</form>
</div>
</div>
</div>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!-- Menu -->
<ul>
<li class="main-cat">FOUNDATIONS</li>
<ul>
<li class="sub-cat">Intro to Javascript</li>
<li class="sub-cat">Algorithms</li>
<li class="sub-cat">Data Structures</li>
<li class="sub-cat">Data Types</li>
<li class="sub-cat">Syntax</li>
<li class="sub-cat">Variables</li>
<li class="sub-cat">Strings</li>
<li class="sub-cat">Arrays</li>
<li class="sub-cat">Objects</li>
<li class="sub-cat">Functions</li>
<li class="sub-cat">Scope</li>
</ul>
<li class="main-cat">Intermediate</li>
<li class="main-cat">Advanced</li>
</ul>
</div>
<!-- Main body -->
<div class="nav">
<button class="sign-up" type="button" name="button" onclick="">SIGN UP</button>
<!-- <a class="btn trigger" href="javascript:;">Click Me!</a> -->
<!-- <button class="login trigger" type="button" name="button" onclick="">LOGIN</button> -->
<a class="login trigger" type="button" name="button" onclick="" href="javascript:;">LOGIN</a>
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JeyH_8pWVJ4" frameborder="0" allowfullscreen></iframe>
</div>
<div class="code-snippet sandbox">
<pre id="editor"> // Write your code here and when finished, click the run button below...
<!-- function greeting() {
console.log("Hello, World!");
} -->
</pre>
<div id="run-code">
<button class="run-code" type="button" name="button" onclick="evaluate()" >RUN</button>
</div>
</div>
<!-- <textarea class="code-eval" name="output" rows="8" cols="40"></textarea> -->
<!-- <a class="jsbin-embed" href="http://jsbin.com/iwovaj/73/embed?html,output&height=315px&width=700px"></a>
<script src="http://static.jsbin.com/js/embed.js"></script> -->
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chaos");
editor.session.setMode("ace/mode/javascript");
editor.session.getLength(true);
document.getElementById('editor').style.fontSize='14px';
editor.getSession().setUseWrapMode(true);
editor.setHighlightActiveLine(true);
</script>
<script src="sandbox.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></script>
<script src="app.js"></script>
</body>
</html>
CSS
html, body{
width:100%;
height:100%;
margin:0;
}
body {
overflow: hidden;
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
#editor {
margin: 0;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 700px;
height: 315px;
}
.code-snippet {
margin:0 auto;
display: block;
float: right;
padding: 40px 40px;
}
.run-code {
background-color: #1fbad6;
border: 3px solid #1fbad6;
padding: 10px 20px;
margin-top: 40px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
border-radius:5px;
float: right;
}
.video {
position: relative;
float: left;
padding: 40px 40px;
}
/*.jsbin-embed {
position: relative;
float: right;
width: 700px;
height: 315px;
padding: 40px 40px;
}*/
/* Initial menu */
.menu {
background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.nav {
/*background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');*/
background-color: #202020;
height: 75px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.main-cat {
border-bottom: 1px solid #636366;
color: #03A3EA;
}
.sub-cat li {
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #1fbad6;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
.login {
position: relative;
float: right;
margin-top: 18px;
margin-right: 20px;
padding: 5px 15px;
font-size: 18px;
color: #1fbad6;
background: none;
border: 3px solid #1fbad6;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
border-radius:5px;
}
.sign-up {
position: relative;
float: right;
margin-top: 18px;
margin-right: 20px;
padding: 5px 15px;
font-size: 18px;
color: #1fbad6;
background: none;
border: 3px solid #1fbad6;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
border-radius:5px;
}
/* ============ MODAL ========== */
.page-wrapper{
width:100%;
height: 100%;
/* //background:url(http://i.imgur.com/2ZgHKbQ.jpg) center no-repeat;
//background-size:cover;*/
}
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
a.btn{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:50%; left:50%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
border-radius:5px;
background:rgba(217,67,86,1);
}
.modal-wrapper{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:rgba(64,64,64,1);
visibility:hidden;
opacity:0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
z-index: 999;
}
.modal-wrapper.open{
opacity:1;
visibility:visible;
}
.modal{
width:600px;
height:400px;
display:block;
margin:50% 0 0 -300px;
position:relative;
top:50%; left:50%;
background:#fff;
opacity:0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.modal-wrapper.open .modal{
margin-top:-200px;
opacity:1;
}
.head{
width:90%;
height:32px;
padding:1.5em 5%;
overflow:hidden;
background:#01bce5;
}
.btn-close{
width:32px;
height:32px;
display:block;
float:right;
}
.btn-close::before, .btn-close::after{
content:'';
width:32px;
height:6px;
display:block;
background:#fff;
}
.btn-close::before{
margin-top:12px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.btn-close::after{
margin-top:-6px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.content{
padding:5%;
}
#username {
width: 95%;
background: none;
border: 3px solid #1fbad6;
padding: 12px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-decoration:none;
border-radius:5px;
color: #202020;
}
#password {
width: 95%;
background: none;
border: 3px solid #1fbad6;
padding: 12px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-decoration:none;
border-radius:5px;
color: #202020;
}
#login-submit {
background-color: #1fbad6;
border: 3px solid #1fbad6;
padding: 10px 20px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
border-radius:5px;
float: right;
}
JAVASCRIPT
var main = function() {
/* Push the body and the nav over by 285px over */
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 100);
$('body').animate({
left: "285px"
}, 100);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 100);
$('body').animate({
left: "0px"
}, 100);
});
};
/* ========== Evaluate Code ========== */
var app = {};
// go through the application and find every single instance of a div
// with the class of 'sandbox'
app.bootstrap = function() {
var sandboxes = document.getElementsByClassName('sandbox');
// for each sandbox, run the createSandbox function
[].forEach.call(sandboxes, app.createSandbox);
};
// given a parent element, find the first textarea inside and
// create a sandbox around it
app.createSandbox = function(parent) {
var textarea = parent.getElementsByTagName('textarea')[0],
// create an instance of Sandbox using this textarea
sandbox = Sandbox(textarea);
parent.appendChild(sandbox.label);
};
// when the DOM loads bootstrap the application
window.addEventListener('load', app.bootstrap);
// Sandbox class
// This class is based around a textarea element, which will contain
// the code. However, it could just as easily be the DOM element for
// an Ace/Codemirror editor.
function Sandbox(textarea) {
var sandbox = {};
// create a label to show output
sandbox.label = document.createElement('label');
sandbox.label.setAttribute('class', 'output');
sandbox.label.addEventListener('click', evaluate);
// evaluate code whenever there is input into the textarea
textarea.addEventListener('input', evaluate);
sandbox.textarea = textarea;
// initial resize and evaluation
resize();
evaluate();
// resize to within the appropriate height for the textarea
function resize() {
var scrollHeight = textarea.scrollHeight;
if(scrollHeight > Sandbox.MAX_HEIGHT) {
height = Sandbox.MAX_HEIGHT;
} else if(scrollHeight < Sandbox.MIN_HEIGHT) {
height = Sandbox.MIN_HEIGHT;
} else {
height = scrollHeight;
}
textarea.style.height = height + 'px';
}
// evaluate the code within the textarea
function evaluate() {
// get the code
var src = textarea.value,
// create a console proxy (for logging to the label)
console = Sandbox.consoleProxy(sandbox.label);
// clear the output first
sandbox.label.innerText = '';
// try the eval and catch errors to send to the console
try {
/* jshint ignore:start */
eval(src);
/* jshint ignore:end */
} catch(err) {
console.error(err);
}
}
return sandbox;
}
// config
Sandbox.MAX_HEIGHT = 500;
Sandbox.MIN_HEIGHT = 50;
// A function which spoofs the native console object, by writing
// text to output elements, rather than the dev tools console.
Sandbox.consoleProxy = function(element) {
return {
log: function(message) {
message = [].join.call(arguments, ' ');
element.innerText += (message + '\n');
element.setAttribute('disabled', false);
// write to the original console too
console.log.apply(console, arguments);
},
error: function(message) {
element.setAttribute('disabled', true);
element.innerText = message;
}
};
};
/* ========== Modal ========== */
$('.trigger').click(function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
});
$(document).ready(main);
eval is the defacto way to run code. It has a less than great reputation because of its affiliation with security vulnerabilities, however, if that's not a concern and users will be running their own code in a sandbox, that is exactly what eval is designed to do and it does it well.
Implementing a simple compiler for Javascript is no small undertaking, however if you were confident that this was the right approach, you can make use of open source projects such as esprima to do some of the heavy lifting for you, when it comes to parsing and evaluating code.
I developed a generic code evaluation widget for a project I worked on in the past, simply using <textarea> and eval. It supports sandboxing of the console for logs and errors. It might be helpful to look through the code.