So I want to build a modal that contains 3 pages and a progress bar that changes whenever I click on a button. The problem is when I resize my browser the progress bar goes out from the modal.
Here is my code:
$( document ).ready(function() {
$('.trigger').click(function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
});
$('.go').click(function () {
$('.pg2').toggleClass('active') ;
}) ;
$('.gg').click(function () {
$('.pg3').toggleClass('active') ;
}) ;
});
var pageIndex = 1;
showPages(pageIndex);
function nextPage(n) {
showPages(pageIndex += n);
}
function showPages(n) {
var i;
var pages = document.getElementsByClassName("pop");
if (n > pages.length) {pageIndex = 1}
if (n < 1) {pageIndex = pages.length}
for (i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
pages[pageIndex-1].style.display = "block";
}
#import url(https://fonts.googleapis.com/css?family=Courgette|Oswald);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html, body{
width:100%;
height:100%;
margin:0;
}
.sent{
font-family: Dancing Script, Georgia, Times, serif;
font-size :35px ;
text-align: center;
color:#01bce5 ;
}
.page-wrapper{
width:100%;
height:100%;
background:url(http://feelgrafix.com/data/background/background-1.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;
background:rgba(217,67,86,1);
}
a.go{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:60%; left:80%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
a.gg{
width:200px;
height: 10px;
display:block;
margin:-25px 0 0 -250px;
padding:1em 0;
position:absolute;
top:70%; left:80%;
font:1.125em 'Arial', sans-serif;
font-weight:400;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
.modal-wrapper{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:rgba(255,257,153,0.75);
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;
overflow: hidden;
list-style-position: inside;
}
.modal-wrapper.open{
opacity:1;
visibility:visible;
overflow: hidden;
list-style-position: inside;
}
.modal{
width:600px;
height:600px;
display:block;
margin:50% 0 0 -300px;
position:relative;
top:40%; 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;
overflow: hidden;
word-break:break-all;
}
.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%;
}
.flat-button {
position: relative;
width: 150px; height: 60px;
background: #E74C3C;
margin: 0 auto;
margin-top: 40px;
overflow: hidden;
z-index: 1;
cursor: pointer;
transition: color .3s;
/* Typo */
line-height: 60px;
text-align: center;
color: #fff;
}
.flat-button:after {
position: absolute;
top: 90%; left: 0;
width: 100%; height: 100%;
background: #C0392B;
content: "";
z-index: -2;
transition: transform .3s;
}
.flat-button:hover::after {
transform: translateY(-80%);
transition: transform .3s;
}
.round-image{
border-radius:100%;
height: 280px;
margin: 0 auto;
overflow:hidden;
width: 280px;
}
.descrip{
padding:1em 0;
position:absolute;
top:40%;
left:70%;
font:1.125em 'Arial', sans-serif;
text-align:center;
text-decoration:none;
margin:-25px 0 0 -75px;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:350px;
height: 10px;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 5px solid #7d7d7d;
display: block;
text-align: center;
margin: 200px auto 10px auto;
border-radius: 50%;
}
.progressbar li:after {
width: 100%;
height: 7px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 215px;
left: -50%;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #01bce5;
}
.progressbar li.active + li:after {
background-color: #01bce5;
}
.titre{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./main.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http:////fonts.googleapis.com/css?family=Dancing+Script">
<title></title>
</head>
<body>
<div class="page-wrapper">
<a class="btn trigger" href="javascript:;">Popup!</a>
</div>
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a class="btn-close trigger" href="javascript:;"></a>
</div>
<div class="content">
<div class="container">
<div class="pop fade">
<div class="text">
<h1 class='sent'>FIRST PAGE </h1>
</div>
<img src="http://i.imgur.com/2ZgHKbQ.jpg" alt="Beach in your dream" class="round-image" >
<p class='descrip'>Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
<a class="btn go" href='javascript:;' onclick='nextPage(1);'>GO!</a>
</div>
<div class="pop fade">
<div class="text">
<h3 class="titre">Lorem ipsum dolor sit amet</h3>
</div>
<a class="btn gg" href='javascript:;' onclick='nextPage(1);'>GO!</a>
</div>
<div class="pop fade">
<div class="text">
<h1 class='sent'>Inscription</h1>
</div>
</div>
</div>
</div>
</div>
<ul class="progressbar">
<li class="active"></li>
<li class='pg2'></li>
<li class="pg3"></li>
</ul>
</div>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"> </script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="./index.js" type="text/javascript"></script>
</html>
I think your issue is here:
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:350px;
height: 10px;
}
The left:350px; property is hardcoding a value that is pushing the progress bar to the right... I would recommend to use a percentage. Also the list that creates the progress bar is outside of the modal view. Maybe would be better that is inside.
Finally if you are testing responsive design add this meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in your head. It will help your site when it renders on mobile devices
In your HTML code add
<div style="clear:both"></div>
before
<ul class="progressbar">
<li class="active"></li>
<li class='pg2'></li>
<li class="pg3"></li>
</ul>
Then change left:350px to left:x%.
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:20%;
height: 10px;
}
if you want your design work for every size of browser then making different css for different display size must help you.
use following meta tag in head of your code
<meta name="viewport" content="width=device-width, initial-scale=1">
then import two css using media query
<link rel="stylesheet" media="screen and (max-width:768px)" type="text/css" href="./mobile.css">
<link rel="stylesheet" media="screen and (min-width:769px)" type="text/css" href="./desktop.css">
if your browser screen resolution is less than 768px browser will render mobile.css
if resolution is more than 768 browser will render destop.css you can check your browser css here. check resolution for different screen size will clear you more.
Learn more about responsive web design here
Note now most of modern browser support % as input for size elements like width margin height etc use this instead of px will also help you to make html more responsive for more device and screen size.
FYI, you can also use internal media query for css like
body
{
width: 75%;
}
#media only screen and (max-width: 500px) {
body {
width: 91.66%;
}
}
Related
I am a beginner in web design and development and I am trying to make the navigation bar be more responsive when it is viewed on phones and tablets but for some reason it appears really buggy on the phone, I have used a meta tag so that the browser renders it correctly but it doesn't, it comes out all buggy like the picture below:
Click on the link to see picture -> As you can see it's coming out half and half
I have enabled overflow-x:hidden but some how am still able to browse towards the right and see the nav bar which isn't meant to be visible unless clicked, I don't understand why that's happening.
Click on the link to see picture -> This is how it is when you load it.
I have also tried to put the screen resolution as follows:
`#media screen and (max-width:1024px){
.nav-links
{
width:48%;
}
}
#media screen and (max-width:768px)`
This is also running on my firebase server and is available to view through this link:https://test-response-5f60c.web.app/PAGES/quotes.html
I am sorry for any code inconsistencies and mistakes, please help me out, I don't understand what I am doing wrong in the CSS. This is the tutorial I followed: Click on the link -> Tutorial
Following is my code:
function navSlide() {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener("click", () => {
//Toggle Nav
nav.classList.toggle("nav-active");
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ""
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
navSlide();
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #000000;
color: #f9f9f9;
font-family: 'Open Sans', sans-serif;
font-size: large;
}
.logo{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 20px;
}
.nav-links {
list-style-type: none;
padding: 1.2%;
margin:0;
overflow: hidden;
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
}
.nav-links li a {
font-size: 18px;
font-weight: bold;
display: inline-block;
color: white;
text-align: center;
padding: 26px 26px;
text-decoration: none;
transition: 0.3s;
}
li a:hover {
background-color: #3498DB ;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: #f9f9f9;
margin: 5px;
}
.head {
font-family: sans-serif;
font-weight: bold;
margin: auto;
width: 60%;
border: 3px solid #3498DB ;
padding: 40px;
text-align: center;
opacity: 5.9;
animation-duration: 3s;
animation-name: fadein;
}
#media screen and (max-width:1024px){
.nav-links{
width:48%;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden !important;
}
.nav-links{
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #000000;
display: flex;
flex-direction: column;
align-items:center;
width: 50%;
transform: translate(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.nav-active {
transform: translate(0%);
}
}
#keyframes navLinkFade {
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
#googleForm {
margin-left: 20px;
text-align: center;
margin-top: 20px;
}
<!doctype html>
<html>
<head>
<style>
body {
background-image: url('../IMG/land2.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: auto ;
}
</style>
<title> Quotes </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
<h4> Edge Concreting and Landscaping </h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Quotes</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div id="googleForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5uy_5vc6ozsY1kcGRliC8hYH9w_WqEU1acN0tJQ6rrqEJmg/viewform?embedded=true" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
<script src="../JS/app.js"></script>
</body>
</html>
Set your media queries to a lower max width and position absolute.
For example.
#media (max-width: 768px){.logo h4 {position: absolute;
right: 50px;}}
That should enable you to select your logo and adjust it for mobile device.
#media (max-width: 768px){.nav-links{position: absolute;
right: 50px;}}
Should enable you to select and adjust your dropdown. You can change or substitute rightor left or top or bottom or width within the same media query.
Try reducing the width of nav-links.
This worked for me:
html, body {
overflow-x: hidden;
}
body {
position: relative;
}
I am creating an eCommerce site. I have a header and a sidebar. And then I have the main body section. In the main body section, I have a heading for Featured Products. And then I have some images below the Featured Products heading which I will replace with actual images. But when I add the image, and then I also add the Add the Add to Cart button below each image. But when I add a button, it is coming right to the image instead of below it. Even though I have a line break tag.
Some help will be really appreciated
Thanks
The index.php
<?php
require_once 'Partials/header.php';
?>
<br><br><br><br>
<link rel="stylesheet" type="text/css" href="Styles/Style.css">
<div class="main_wrapper">
<?php
require_once 'Partials/sidebar.php';
?>
<!--The main body section start here-->
<div class="main">
<!--Featured Products List Starts Here-->
<h2 style="text-align: center;">Featured Products</h2>
<div class="container">
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
</div>
<h2 style="text-align: center;">New Arrivals</h2>
<div class="container 2">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<h2 style="text-align: center;">Clothes</h2>
<div class="container 3">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<h2 style="text-align: center;">Brands</h2>
<div class="container 4">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: auto;
justify-content: space-between;
}
.container > img {
display: block;
margin-top: 5px;
}
</style>
<!--Featured Products List Ends Here-->
<button name="Black">Black</button>
</div>
<!--The main body section ends here-->
<!--Back To Top Coding Starts Here-->
<head>
<style>
#back-to-top-btn{
display: none;
position: fixed;
bottom: 20px;
right: 20px;
font-size: 20px;
width: 50px;
height: 50px;
background-color: #fff;
color: #333;
cursor: pointer;
outline: none;
border: 3px solid #333;
border-radius: 50%;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-property: background-color, color;
}
#back-to-top-btn:hover, #back-to-top-btn:focus{
background-color: #333;
color: #fff;
}
/* Animations */
.btnEntrance {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: btnEntrance;
}
/* zoomIn */
/* #keyframes btnEntrance {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 1;
}
} */
/* fadeInUp */
#keyframes btnEntrance {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.btnExit {
animation-duration: 0.25s;
animation-fill-mode: both;
animation-name: btnExit;
}
/* zoomOut */
/* #keyframes btnExit {
from {
opacity: 1;
}
to {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
} */
/* fadeOutDown */
#keyframes btnExit {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
</style>
</head>
<button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
<script src="js/Back_To_Top.js"></script>
<!--Back To Top Coding Ends Here-->
</div>
</body>
</html>
And then this is the header.php
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home - Diamond Collections</title>
<script src="https://kit.fontawesome.com/1cde82a3ba.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
/*background-image: radial-gradient(circle, red, yellow, green);*/
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.content {
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, .75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
height: 76px
}
.logo {
grid-column: 2 / 3;
position: absolute;
height: 200px;
//transform: scale(2,2);
}
nav {
// all: unset; /* this causes issues with Edge, since it's unsupported */
position: relative;
text-align: left;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
/* end Edge support stuff */
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: '';
display: block;
height: 5px;
background: black;
position: absolute;
top: 1.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1,1);
}
}
h1 {
margin:0
}
.logo a {
display: flex;
justify-content: center;
}
.logo img {
height: 74px;
margin-top: 1.1px;
}
</style>
</head>
<body>
<header>
<h1 class="logo"><img src="Images/Logo5.JPG"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<form action="" method="" class="search" style="margin-top: 24px;">
<input type="" name="search" placeholder="Search..." style="padding: 5px; font-size: 15px">
</form>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
And then this is the sidebar.php
<style>
.sidenav {
height: 100%;
width: 160px;
margin-top: 6.1%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<div class="sidenav">
New Arrivals
Featured
Clothes
Brands
</div>
I reviewed your code and the reason you're not getting the result you want is because you put everything inside the div CONTAINER.
You put IMG BUTTON IMG BUTTON IMG BUTTON IMMG BUTTON so when the code runs it displays everything in a straight line as it actually is.
in order to get the result you want you need to structure your code with more divs inside the container div.
EXAMPLE:
<div class="container">
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
</div>
Let me know if you need more help.
And P.S keep your style code inside the style.css and not html files.
I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`
im trying to add this image to the bottom left but it keeps heading underneather the header. any tips to fix this? or where I am going going wrong? the last code is the one i am trying to get alined.
http://imgur.com/a/toq5V < how the website normaly looks
http://imgur.com/a/2Gb9F < when i add the img code
Jsfiddle
https://jsfiddle.net/fecr9w0t/#&togetherjs=ODnAazMkx8
HTML
<!DOCTYPE html>
<html>
<head>
<title> Home - A.Willi A.G</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<h1 align="center">
<img src="logo.png" alt="A.Willi A.G" />
</h1>
<div class="menu_div">
<ul>
<li>Home</li>
<li class="dropdown">
Bewerber
<div class="dropdown-content">
Info
Jobs
</div>
</li>
<li class="dropdown">Kunde
<div class="dropdown-content">
Personalverleih
Werkzeuge Mieten
Referenzen
Qulität, Sicherheit und Weiterbildung
</div>
</li>
<li>Kontakt</li>
</ul>
</div>
<div class="fadein">
<img src="welder1.png">
<img src="welder2.png">
<img src="welder3.png">
</div>
<div class="fadein img">
</div>
<img src="swissstaffing_sqs_logo_cmyk.png" alt="Swiss Staffing" >
</body>
</html>
CSS
body { font-family: verdana; background:white ; color: white; }
.menu_div{background-color: #333; width:100%;}
ul {
list-style-type: none;
margin: 0 auto;
display:table;
padding: 0;
z-index: 100;
overflow: hidden;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
#keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}
.fadein { position:absolute; height:102px; width:50px; outline: 1px solid blue; }
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }
.menu_div {
position: relative;
z-index: 0;
border: dashed;
height: 2.9em;
margin-bottom: 0em;
margin-top: 0em;
z-index:1000;
}
.fadein {
position: relative;
z-index: 3;
background: ;
width: 100%;
left: 1px;
top: 0em;
}
.fadein img{
margin:0 auto;
width: 100%;
max-width: 4060px;
min-width: 900px;
max-height: 500%;
}
Javascipt
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
Below is the code I am trying to fix
<img src="swissstaffing_sqs_logo_cmyk.png" alt="Swiss Staffing" >
I have tried using the code below but it didnt work when trying to align it
.container {
position: relative;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>
<div class="container">
<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="bottomright">Bottom Right</div>
</div>
If you want to align an image to always be in a certain position on the page then you must give it "position:absolute" then you could define "bottom:0;" and "left:0" this will solve your positioning problem.
If you just give it that it will be positioned relative to the page, if you want it to be positioned absolutely within a container then you must give the parent container "position:relative"
Hope that helps! :)
managed to fix it by adding
<img src="swissstaffing_sqs_logo_cmyk.png" height=80 style="position:fixed;bottom:0px;left:0px;z-index:999" />
cheers for the help folks
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.