Why are the button elements not changing the pictures? - javascript

So I am in the middle of working on creating my own website. I just started working on the about me section of the website and I wanted to add a slideshow to showcase pictures of my life and interests. I used the code in the book "Jquery & Javascript by Jon Duckett" but for some reason when I click on the buttons to change to the next slide nothing happens.
/*jslint browser: true*/
/*global $, jQuery, alert*/
$('.slider').each(function () {
'use strict';
var $this = $(this), //For every slider
$group = $this.find('.slides'), //Gets the current slider
$slides = $this.find('.slide'), //Gets the slide-group(container)
buttonArray = [], //jQuery object to hold all slides
currentIndex = 0, //Create array to hold nav buttons
timeout; //Used to store the timer
function move(newIndex) {
var animateLeft, slideLeft; //Declare variables
//advance();
//if current slide is showing or a slide is animating, then do nothing
if ($group.is(':animated') || currentIndex === newIndex) {
return;
}
buttonArray[currentIndex].removeClass('active'); //Remove class from item
buttonArray[newIndex].addClass('active'); //Add class to new item
if (newIndex > currentIndex) {
slideLeft = '100%';
animateLeft = '-100%'; //Animate the current group to the left
} else {
slideLeft = '-100%';
animateLeft = '100%';
}
//Position new slide to left (if less) or right (if more) of current
$slides.eq(newIndex).css({left: slideLeft, display: 'block'});
$group.animate({left: animateLeft}, function () {
$slides.eq(currentIndex).css({display: 'none'});
$slides.eq(newIndex).css({left: 0});
$group.css({left: 0});
currentIndex = newIndex;
});
}
function advance() {
clearTimeout(timeout); //Clear timer stored in timeout
//Start timer to run an anonymous function every 4 seconds
timeout = setTimeout(function () {
if (currentIndex < ($slides.length - 1)) { //If not the last slide
move(currentIndex + 1); //Move to next slide
} else { //Otherwise
move(0); //Move to the first slide
}
}, 4000); //Milliseconds timer will wait
}
$.each($slides, function (index) {
//Create a button element for the button
var $button = $('<button type="button" class="slide-btn">•</button>');
if (index === currentIndex) {
$button.addClass('active');
}
$button.on('click', function () {
move(index);
}).appendTo($this.find('.slide-buttons'));
buttonArray.push($button);
});
advance();
});
html {
height: 100%;
}
h1 {
color: white;
text-align: center;
}
h2{
color: white;
}
h3 {
color: white;
}
body{ min-height:100%;
padding:0;
margin:0;
position: relative;
overflow-x:hidden;
}
#IDE{
background-color: white;
width: 60%;
}
#banner {
position: absolute;
top: -20px;
left: 0px;
right: 0px;
width: 100%;
height: 200px;
z-index: -1;
}
#picture {
/* border: 50px solid black;*/
border-radius: 10px;
display:block;
margin: 0px auto;
}
#Paragraph{
color:white;
font-size:130%;
}
#Navbar
{
/*list-style-type: none;*/
margin: 100px;
margin-right: -10px;
margin-left: 0px;
padding: 0;
overflow: hidden;
/*background-color: orange;*/
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/*background-image: url("https://www.transparenttextures.com/patterns/black-orchid.png");*/
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! ");*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#Navbar a {
display: block;
padding: 14px;
/* background: #e2e2e2;*/
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
/* background-color: dodgerblue;
background-image: url("https://www.transparenttextures.com/patterns/fake-brick.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
table {
margin-top: 260px;
color: white;
background-color: black;
}
#Navbar li {
display:inline-block;
margin-right:0px;
font-weight: bold;
color: white;
float: left;
border-right: 0px solid #bbb;
}
#Skillset{
list-style-type: disc;
color: white;
}
li a, .dropbtn{
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn{
/* background-color:#111;*/
background-color: black;
color: red;
text-shadow: 0 0 20px blue, 0 0 10px lime;
font-style: oblique;
text-decoration:underline;
background-color: green;
}
#Skillset ul li{
list-style-type: disc;
}
li.dropdown{
display:inline-block;
}
.active {
background-color: #4CAF50;
}
/* THe container <div> - needed to position the drop down content*/
/*.dropdown{
position: relative;
display: inline-block;
}*/
/*Drop down content hidden by default*/
.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: 1;
}
/*Links inside the dropdown*/
.dropdown-content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
/*Changes color of dropdown links hover*/
.dropdown-content a:hover {background-color:black;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
#sidebar_container
{ float: right;
width: 300px;}
.sidebar_base
{ width: 200px;
height: 14px;
background-color: black;}
.sidebar
{ float: right;
width: 290px;
padding: 0;
margin: 100px 0 16px 0;
}
.sidebar_item
{ background-color: black;
padding: 0 15px;
width: 250px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
height: 1000px;
}
.sidebar li a.selected
{ color: #444;}
.sidebar ul
{ margin: 0;}
.footer {
position: absolute;
bottom: -1100px;
padding: 1rem;
background-color: black;
text-align: center;
width: 100%;
}
.footer p
{ line-height: 1.7em;
padding: 0 0 10px 0;
color: white;
}
.footer a
{ color: #A8AA94;
text-decoration: none;
}
.footer a:hover
{ color: blue;
text-decoration:underline;
}
.slider {
max-height: 430px;
max-width: 940px;
margin: 0px auto 30px auto;}
slide-viewer {
position:relative;
overflow: hidden;
height: 300%;
}
.slide-group{
width:100%;
height:100%;
position:relative;
}
.slide{
width: 100%;
height: 100%;
display: none;
position: absolute;
}
.slide:first-child{
display: block;
}
.slide-buttons {
text-align: right;
}
.slide-btn {
border:none;
background: none;
color: red;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}
button {
font-size: 90%;
text-align: left;
text-transform: uppercase;}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
<!DOCTYPE HTML>
<html id="About Me">
<style>
body {
background-image: url("http://wallpaperrs.com/uploads/3d-abstract/blue-square-pattern-wide-wallpaper-13878.jpg");
background-size: auto;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, intial-scale-1">
<title>Bart Allen</title>
<h1>Bartholomew Allen</h1>
<ul id="Navbar">
<!-- Each of the linked list are referenced as links that lead to alterantive pages-->
<li>HOME</li>
<li>Purpose</li>
<li class="dropdown" >
My Projects
<div class="dropdown-content">
C++
Java
</div>
</li>
<li>LinkedIn Profile link</li>
<li style="float:right"><a class="active" href="About me.html">About me</a></li>
</ul>
<!--The '#' are used as text links, once the other pages are created then they will use urls-->
</head>
<body>
<link rel="stylesheet" href="main.css">
<img id="banner" src="https://math.columbusstate.edu/images/math_banner.jpg" alt="Banner Image"/>
<section>
<div class="slider">
<div class="slide-viewer">
<div class="slide-group">
<div class="slide slide-1">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\CCBC Essex Logo.jpg" height="350px" width="860px">
</div>
<div class="slide slide-2">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\Cross Country.jpg" height="350px" width="860px">
</div>
<div class="slide slide-3">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\TU Logo.jpg">
</div>
<div class="slide slide-4">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\Jessica And I.jpg">
</div>
</div>
</div>
<div class="slide-buttons">
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
</div>
</div>
</section>
<div id="sidebar_container">
<div class="sidebar">
<div class="sidebar_top"></div>
<div class="sidebar_item">
<h2>Skillset Currently</h2>
<h3>Programming languages known:</h3>
<div id="Skillset">
<ul>
<li>Java</li>
<li>C++</li>
<li>Javascript</li>
<li>JQuery</li>
<li>CSS</li>
<li>HTML</li>
</ul>
<br>
<h3>Mathematics taken</h3>
<ul>
<li>Linear Algebra</li>
<li>Calculus I</li>
<li>Calculus II</li>
<li>Discrete Mathematics</li>
</ul>
<br>
</div>
</div>
</div >
</div>
<footer>
<div id="content_footer"></div>
<div class="footer">
<p>HOME | Purpose | My Project
</p>
<p>Copyright© Bartholomew Allen</p>
</div>
</footer>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/slider.js"></script>
<!--<script type="text/jquery.cycle2.min.js" src="js/jquery.cycle2.min.js"> </script>
</body>
</html>
I'm trying to create exactly this Content Panels- Responsive Slider


Unless you want to re-invent the wheel itself, [see example implementations below] you can use jquery ui carousel
http://code.runnable.com/WY_gouUfKGNOY4ET/output
or bootstrap to create carousel.
https://getbootstrap.com/docs/3.3/examples/carousel/

Related

JavaScript not working in chrome but working in Firefox

I made a website in which content changes when the user clicks on a toggle switch, the price changes from monthly to annual, and vice versa when a user clicks on the toggle i.e. the h2 with the class monthly gets displayed when toggler is checked(true) and the h2 with class annual gets displayed when toggler is unchecked(false).
function refreshPage(){
window.location.reload();
}
const toggler = document.querySelector("#switch");
const annual = document.querySelectorAll(".annual");
const monthly = document.querySelectorAll(".monthly");
window.onload = function priceChange(){
if (toggler.checked === false) {
monthly.forEach(hideMonthly);
function hideMonthly(item) {
item.style.display = "none";
}
} else if (toggler.checked === true ) {
annual.forEach(hideAnnual);
function hideAnnual(item) {
item.style.display = "none";
}
}
}
:root {
--gradient: linear-gradient(to bottom right, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
--gradient-900: hsl(237, 63%, 64%);
--neutral-grey-100: hsl(240, 78%, 98%);
--neutral-grey-300: hsl(234, 14%, 74%);
--neutral-grey-600: hsl(233, 13%, 49%);
--neutral-grey-900: hsl(232, 13%, 33%);
--neutral-100: #fff;
--neutral-900: #000;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 15px;
font-family: 'Montserrat', sans-serif;
background: #F6F6FE url("../images/bg-top.svg") no-repeat;
background-position: top right -170px;
text-align: center;
}
.neutral-grey-100 {
color: var(--neutral-grey-100);
}
.neutral-grey-300 {
color: var(--neutral-grey-300);
}
.neutral-grey-600 {
color: var(--neutral-grey-600);
}
.neutral-grey-900 {
color: var(--neutral-grey-900);
}
h1 {
font-size: 2em;
margin-bottom: .8em;
}
h2 {
font-size: 3em;
margin: 1rem 0;
}
.container {
width: 85%;
margin: 0 auto;
}
.header {
padding: 2.4em;
}
.card {
display: flex;
flex-direction: column;
background-color: var(--neutral-100);
border-radius: .8em;
padding: 1em 2.6em;
margin-bottom: 2.5em;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
}
.card:nth-child(odd) {
background: var(--gradient);
color: var(--neutral-100);
}
.card > div:not(:last-child) {
border-bottom: 1px solid rgba(183, 184, 194, 0.45);
}
.card-inverse > div:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
section div {
padding: 1em 0;
}
.button {
text-transform: uppercase;
padding: 1em 2em;
margin: 2.6em 0 1.2em 0;
background: var(--gradient);
border: 1px solid var(--neutral-100);
border-radius: 6px;
text-decoration: none;
color: var(--neutral-100);
}
.button:hover, .button:focus {
background: var(--neutral-100);
border: 1px solid hsl(237, 63%, 24%);
color: var(--gradient-900);
outline: none;
}
.button-inverse {
background: var(--neutral-100);
text-decoration: none;
color: var(--gradient-900);
}
.button-inverse:hover, .button-inverse:focus {
background: hsl(237, 63%, 64%);
border: 1px solid var(--neutral-100);
color: var(--neutral-100);
outline: none;
}
.attribution {
font-size: 11px;
text-align: center;
margin-bottom: 1rem;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
/*-------- TOGGLER --------*/
.toggle {
display: flex;
justify-content: center;
align-items: center;
}
input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 65px;
height: 35px;
background: var(--gradient);
display: block;
border-radius: 100px;
position: relative;
margin: 1.4em;
}
label:after {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 27px;
height: 27px;
background: #fff;
border-radius: 110px;
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
transition: all 350ms;
}
input:checked + label {
background: var(--gradient);
}
input + label:hover, input + label:focus-within {
background: hsl(236, 72%, 81%)
}
input:checked + label:after {
transform: translate3d(114%, 0, 0);
}
#media (min-width: 1440px) {
body {
font-size: 16px;
background-image: url("../images/bg-top.svg"), url("../images/bg-bottom.svg");
background-repeat: no-repeat, no-repeat;
background-position: 100% 0%, 0% 130%;
background-size: 24%, 24%;
}
.container {
display: grid;
grid-template-areas:
"header header header"
"basic professional master"
"attribution attribution attribution";
align-items: center;
width: 65%;
}
.header {
grid-area: header;
}
h2 {
font-size: 4em;
}
h3 {
font-size: 1.3033333333333335em;
}
.card-inverse {
padding: 3em 2em;
}
.card {
margin-bottom: 0;
}
#basic {
grid-area: basic;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#professional {
grid-area: professional;
}
#master {
grid-area: master;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.attribution {
grid-area: attribution;
margin-top: 4em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#700&display=swap" rel="stylesheet">
<script defer src="js/script.js"></script>
<title>Frontend Mentor | Pricing component with toggle</title>
</head>
<body>
<div class="container">
<section class="header">
<h1 class="neutral-grey-900">Our Pricing</h1>
<div class="toggle neutral-grey-300">
Annually
<input type="checkbox" id="switch" onClick="refreshPage()"/><label for="switch">Toggle</label>
<!-- <label class="switch"><input type="checkbox" name="toggler" id="toggler" onClick="refreshPage()"/> <figure></figure>
</label> -->
Monthly
</div>
</section>
<section class="card" id="basic">
<div>
<h3 class="neutral-grey-600">Basic</h3>
<h2 class="neutral-grey-900 monthly">&dollar;19.99</h2>
<h2 class="neutral-grey-900 annual">&dollar;199.99</h2>
</div>
<div class="neutral-grey-600">500 GB Storage</div>
<div class="neutral-grey-600">2 Users Allowed</div>
<div class="neutral-grey-600">Send up to 3 GB</div>
<a class="button button-main" href="">Learn More</a>
</section>
<section class="card card-inverse" id="professional">
<div>
<h3>Professional</h3>
<h2 class="monthly">&dollar;24.99</h2>
<h2 class="annual">&dollar;249.99</h2>
</div>
<div>1 TB Storage</div>
<div>5 Users Allowed</div>
<div>Send up to 10 GB</div>
<a class="button button-inverse" href="">Learn More</a>
</section>
<section class="card" id="master">
<div>
<h3 class="neutral-grey-600">Master</h3>
<h2 class="neutral-grey-900 monthly">&dollar;39.99</h2>
<h2 class="neutral-grey-900 annual">&dollar;399.99</h2>
</div>
<div class="neutral-grey-600">2 TB Storage</div>
<div class="neutral-grey-600">10 Users Allowed</div>
<div class="neutral-grey-600">Send up to 20 GB</div>
<a class="button button-main" href="">Learn More</a>
</section>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Sachin Jadhav.
</div>
</div>
</body>
</html>
The toggle is working in Firefox but not in Chrome, I am not able to figure out what's wrong with my javascript.

Your code is relying on Firefox remembering the state of the input and restoring it before the load handler fires on subsequent page loads. That's not something you can rely on cross-browser.
Instead, just handle the toggle without refreshing. And instead of manually looping the items, you can use a class on their container (or even body) to control them:
toggler.addEventListener("click", () => {
document.body.classList.toggle("show-monthly", toggler.checked);
});
(And removing refreshPage entirely.)
With this additional CSS:
body .monthly {
display: none;
}
body.show-monthly .monthly {
display: block;
}
body.show-monthly .annual {
display: none;
}
(Note that the second argument of classList.toggle doesn't work on obsolete browsers like IE, so you may need an if/else for those.)
const toggler = document.querySelector("#switch");
const annual = document.querySelectorAll(".annual");
const monthly = document.querySelectorAll(".monthly");
toggler.addEventListener("click", () => {
document.body.classList.toggle("show-monthly", toggler.checked);
});
body .monthly {
display: none;
}
body.show-monthly .monthly {
display: block;
}
body.show-monthly .annual {
display: none;
}
:root {
--gradient: linear-gradient(to bottom right, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
--gradient-900: hsl(237, 63%, 64%);
--neutral-grey-100: hsl(240, 78%, 98%);
--neutral-grey-300: hsl(234, 14%, 74%);
--neutral-grey-600: hsl(233, 13%, 49%);
--neutral-grey-900: hsl(232, 13%, 33%);
--neutral-100: #fff;
--neutral-900: #000;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 15px;
font-family: 'Montserrat', sans-serif;
background: #F6F6FE url("../images/bg-top.svg") no-repeat;
background-position: top right -170px;
text-align: center;
}
.neutral-grey-100 {
color: var(--neutral-grey-100);
}
.neutral-grey-300 {
color: var(--neutral-grey-300);
}
.neutral-grey-600 {
color: var(--neutral-grey-600);
}
.neutral-grey-900 {
color: var(--neutral-grey-900);
}
h1 {
font-size: 2em;
margin-bottom: .8em;
}
h2 {
font-size: 3em;
margin: 1rem 0;
}
.container {
width: 85%;
margin: 0 auto;
}
.header {
padding: 2.4em;
}
.card {
display: flex;
flex-direction: column;
background-color: var(--neutral-100);
border-radius: .8em;
padding: 1em 2.6em;
margin-bottom: 2.5em;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
}
.card:nth-child(odd) {
background: var(--gradient);
color: var(--neutral-100);
}
.card > div:not(:last-child) {
border-bottom: 1px solid rgba(183, 184, 194, 0.45);
}
.card-inverse > div:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
section div {
padding: 1em 0;
}
.button {
text-transform: uppercase;
padding: 1em 2em;
margin: 2.6em 0 1.2em 0;
background: var(--gradient);
border: 1px solid var(--neutral-100);
border-radius: 6px;
text-decoration: none;
color: var(--neutral-100);
}
.button:hover, .button:focus {
background: var(--neutral-100);
border: 1px solid hsl(237, 63%, 24%);
color: var(--gradient-900);
outline: none;
}
.button-inverse {
background: var(--neutral-100);
text-decoration: none;
color: var(--gradient-900);
}
.button-inverse:hover, .button-inverse:focus {
background: hsl(237, 63%, 64%);
border: 1px solid var(--neutral-100);
color: var(--neutral-100);
outline: none;
}
.attribution {
font-size: 11px;
text-align: center;
margin-bottom: 1rem;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
/*-------- TOGGLER --------*/
.toggle {
display: flex;
justify-content: center;
align-items: center;
}
input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 65px;
height: 35px;
background: var(--gradient);
display: block;
border-radius: 100px;
position: relative;
margin: 1.4em;
}
label:after {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 27px;
height: 27px;
background: #fff;
border-radius: 110px;
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
transition: all 350ms;
}
input:checked + label {
background: var(--gradient);
}
input + label:hover, input + label:focus-within {
background: hsl(236, 72%, 81%)
}
input:checked + label:after {
transform: translate3d(114%, 0, 0);
}
#media (min-width: 1440px) {
body {
font-size: 16px;
background-image: url("../images/bg-top.svg"), url("../images/bg-bottom.svg");
background-repeat: no-repeat, no-repeat;
background-position: 100% 0%, 0% 130%;
background-size: 24%, 24%;
}
.container {
display: grid;
grid-template-areas:
"header header header"
"basic professional master"
"attribution attribution attribution";
align-items: center;
width: 65%;
}
.header {
grid-area: header;
}
h2 {
font-size: 4em;
}
h3 {
font-size: 1.3033333333333335em;
}
.card-inverse {
padding: 3em 2em;
}
.card {
margin-bottom: 0;
}
#basic {
grid-area: basic;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#professional {
grid-area: professional;
}
#master {
grid-area: master;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.attribution {
grid-area: attribution;
margin-top: 4em;
}
}
<div class="container">
<section class="header">
<h1 class="neutral-grey-900">Our Pricing</h1>
<div class="toggle neutral-grey-300">
Annually
<input type="checkbox" id="switch"/><label for="switch">Toggle</label>
<!-- <label class="switch"><input type="checkbox" name="toggler" id="toggler" onClick="refreshPage()"/> <figure></figure>
</label> -->
Monthly
</div>
</section>
<section class="card" id="basic">
<div>
<h3 class="neutral-grey-600">Basic</h3>
<h2 class="neutral-grey-900 monthly">&dollar;19.99</h2>
<h2 class="neutral-grey-900 annual">&dollar;199.99</h2>
</div>
<div class="neutral-grey-600">500 GB Storage</div>
<div class="neutral-grey-600">2 Users Allowed</div>
<div class="neutral-grey-600">Send up to 3 GB</div>
<a class="button button-main" href="">Learn More</a>
</section>
<section class="card card-inverse" id="professional">
<div>
<h3>Professional</h3>
<h2 class="monthly">&dollar;24.99</h2>
<h2 class="annual">&dollar;249.99</h2>
</div>
<div>1 TB Storage</div>
<div>5 Users Allowed</div>
<div>Send up to 10 GB</div>
<a class="button button-inverse" href="">Learn More</a>
</section>
<section class="card" id="master">
<div>
<h3 class="neutral-grey-600">Master</h3>
<h2 class="neutral-grey-900 monthly">&dollar;39.99</h2>
<h2 class="neutral-grey-900 annual">&dollar;399.99</h2>
</div>
<div class="neutral-grey-600">2 TB Storage</div>
<div class="neutral-grey-600">10 Users Allowed</div>
<div class="neutral-grey-600">Send up to 20 GB</div>
<a class="button button-main" href="">Learn More</a>
</section>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Sachin Jadhav.
</div>
</div>
If you want to remember the setting for future visits, store it in localStorage and use it when loading the page:
const updatePriceDisplay = () => {
document.body.classList.toggle("show-monthly", toggler.checked);
};
toggler.checked = localStorage.getItem("show-monthly") === "Y";
updatePriceDisplay();
toggler.addEventListener("click", () => {
updatePriceDisplay();
localStorage.setItem("show-monthly", toggler.checked ? "Y" : "N");
});

You set onClick="refreshPage()" on your switch. So the page always reloads when someone tries to change its value (en-/disable it).
The default behavior of chrome is to loose/forget all the data that was entered before a reload for a formular, while firefox normally asks (or if the user wants it without a popup, defaults) to reenter all the data the user entered after the reload.
Thats why the reload is resetting the value in chrome and keeping it in firefox.
I would recommend to just not reload the page. That also brings better usablity.

Waypoints not working properly with my sidenav

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`

progress bar change back ground when clicked and change back

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7
I made a progress bar that looks like the screenshot
and it turns to green when I hover on it.
I want to make make the bg-color changed to green
and change it back to white when I click another bar.
Please help!

I will suggest you use jquery, add click event to all <a> under element with class breadcrumb:
$('.breadcrumb > a').on('click', function() {
$('.breadcrumb > a').removeClass('active');
$(this).addClass('active');
})
Use CSS rule active, when a tab clicked, remove all active then add class active to the one you just clicked.
$('.breadcrumb > a').on('click', function() {
$('.breadcrumb > a').removeClass('active');
$(this).addClass('active');
})
.active {
background: #444
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
display: none;
}
input[type="radio"] {
display: none;
}
.breadcrumb {
/*centering*/
display: inline-block;
background-color: white;
overflow: hidden;
border-radius: 5px;
/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
counter-reset: flag;
margin-bottom: 0px;
border: 1px solid #ccc !important;
padding: 0;
}
.breadcrumb a {
text-decoration: none;
outline: none;
display: block;
float: left;
line-height: 36px;
color: white;
/*need more margin on the left of links to accomodate the numbers*/
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
padding-left: 46px;
}
.breadcrumb a:first-child:before {
left: 14px;
}
.breadcrumb a:last-child {
padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb a.active,
.breadcrumb a:hover {
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after,
.breadcrumb a:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -18px;
/*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
/*we need to prevent the arrows from getting buried under the next link*/
z-index: 1;
/*background same as links but the gradient will be rotated to compensate with the transform applied*/
background: linear-gradient(135deg, #666, #333);
/*stylish arrow design using box shadow*/
box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
/*some styles now*/
border-radius: 100%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
background: #444;
background: linear-gradient(#444, #222);
font-weight: bold;
}
.flat a,
.flat a:after {
background: white;
color: black;
transition: all 0.5s;
}
.flat a:hover,
.flat a.active,
.flat a:hover:after,
.flat a.active:after {
color: white;
background: #369F00;
}
.flat input[type="radio"]:checked~label {
background: #369F00;
color: white;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="breadcrumb flat">
<a href="#">
Invite a New Applicant
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="new" data-bind="checked: applicationsFilter" class="" name="ko_unique_9"> New Applicants (
<span data-bind="text: newApplicationsCount">4</span>)
</label>
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="shortlisted" data-bind="checked: applicationsFilter" name="ko_unique_10"> Shortlisted Applicants (
<span data-bind="text: shortlistedApplicationsCount">0</span>)
</label>
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="connected" data-bind="checked: applicationsFilter" name="ko_unique_11"> Connected Applicants (
<span data-bind="text: connectedApplicationsCount">0</span>)
</label>
</a>
</div>
<div class="breadcrumb flat">
<a href="#">
<label class="radio-inline" data-bind="visible: applications().length > 0">
<input type="checkbox" data-bind="checked: showHiddenApplications">
Hidden
</label>
</a>
</div>
</div>
</div>
</body>
</html>

JQuery UI Tabs - Custom animation

I need to create animation like this - CODEPEN
Using JQuery UI Tabs - jQuery UI Tabs
Problem occur when I need to create animation for container. There is only show/hide option and don't support fx option in newest version. How I can accomplish it?
Main question: can somebody provide codepen/fiddle with custom function animation (so everybody will benefit) like function inside show/hide method? It is possible?.
$(document).ready(function() {
// Variables
var clickedTab = $(".tabs > .active");
var tabWrapper = $(".tab__content");
var activeTab = tabWrapper.find(".active");
var activeTabHeight = activeTab.outerHeight();
// Show tab on page load
activeTab.show();
// Set height of wrapper on page load
tabWrapper.height(activeTabHeight);
$(".tabs > li").on("click", function() {
// Remove class from active tab
$(".tabs > li").removeClass("active");
// Add class active to clicked tab
$(this).addClass("active");
// Update clickedTab variable
clickedTab = $(".tabs .active");
// fade out active tab
activeTab.fadeOut(250, function() {
// Remove active class all tabs
$(".tab__content > li").removeClass("active");
// Get index of clicked tab
var clickedTabIndex = clickedTab.index();
// Add class active to corresponding tab
$(".tab__content > li").eq(clickedTabIndex).addClass("active");
// update new active tab
activeTab = $(".tab__content > .active");
// Update variable
activeTabHeight = activeTab.outerHeight();
// Animate height of wrapper to new tab height
tabWrapper.stop().delay(50).animate({
height: activeTabHeight
}, 500, function() {
// Fade in active tab
activeTab.delay(50).fadeIn(250);
});
});
});
// Variables
var colorButton = $(".colors li");
colorButton.on("click", function() {
// Remove class from currently active button
$(".colors > li").removeClass("active-color");
// Add class active to clicked button
$(this).addClass("active-color");
// Get background color of clicked
var newColor = $(this).attr("data-color");
// Change background of everything with class .bg-color
$(".bg-color").css("background-color", newColor);
// Change color of everything with class .text-color
$(".text-color").css("color", newColor);
});
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
color: #50555a;
}
.main{
padding: 100px 20px;
}
nav {
z-index: 9;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0;
text-align: center;
}
.bg-color {
background-color: #46a1de;
transition-duration: .5s;
}
.text-color {
color: #46a1de;
transition-duration: .5s;
}
footer {
padding: 40px 0;
text-align: center;
opacity: .33;
color: white;
}
.wrapper {
min-width: 600px;
max-width: 900px;
margin: 0 auto;
}
.tabs {
display: table;
table-layout: fixed;
width: 100%;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
.tabs > li {
transition-duration: .25s;
display: table-cell;
list-style: none;
text-align: center;
padding: 20px 20px 25px 20px;
position: relative;
overflow: hidden;
cursor: pointer;
color: white;
}
.tabs > li:before {
z-index: -1;
position: absolute;
content: "";
width: 100%;
height: 120%;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition-duration: .25s;
border-radius: 5px 5px 0 0;
}
.tabs > li:hover:before {
-webkit-transform: translateY(70%);
transform: translateY(70%);
}
.tabs > li.active {
color: #50555a;
}
.tabs > li.active:before {
transition-duration: .5s;
background-color: white;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.tab__content {
background-color: white;
position: relative;
width: 100%;
border-radius: 5px;
}
.tab__content > li {
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
list-style: none;
}
.tab__content > li .content__wrapper {
text-align: center;
border-radius: 5px;
width: 100%;
padding: 45px 40px 40px 40px;
background-color: white;
}
.content__wrapper h2 {
width: 100%;
text-align: center;
padding-bottom: 20px;
font-weight: 300;
}
.content__wrapper img {
width: 100%;
height: auto;
border-radius: 5px;
}
.colors {
text-align: center;
padding-top: 20px;
}
.colors > li {
list-style: none;
width: 50px;
height: 50px;
border-radius: 50%;
border-bottom: 5px solid rgba(0, 0, 0, 0.1);
display: inline-block;
margin: 0 10px;
cursor: pointer;
transition-duration: .2s;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
.colors > li:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
border-bottom: 10px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.colors > li.active-color {
-webkit-transform: scale(1.2) translateY(-10px);
transform: scale(1.2) translateY(-10px);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
border-bottom: 20px solid rgba(0, 0, 0, 0.15);
}
.colors > li:nth-child(1) {
background-color: #2ecc71;
}
.colors > li:nth-child(2) {
background-color: #D64A4B;
}
.colors > li:nth-child(3) {
background-color: #8e44ad;
}
.colors > li:nth-child(4) {
background-color: #46a1de;
}
.colors > li:nth-child(5) {
background-color: #bdc3c7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<div class="bg-color main">
<nav class="bg-color">Adaptive tabs</nav>
<section class="wrapper">
<ul class="tabs">
<li class="active">Colors</li>
<li>Favorite movies</li>
<li>About</li>
</ul>
<ul class="tab__content">
<li class="active">
<div class="content__wrapper">
<h2 class="text-color">Pick a color</h2>
<ul class="colors">
<li data-color="#2ecc71"></li>
<li data-color="#D64A4B"></li>
<li data-color="#8e44ad"></li>
<li class="active-color" data-color="#46a1de"></li>
<li data-color="#bdc3c7"></li>
</ul>
</div>
</li>
<li>
<div class="content__wrapper">
<h2 class="text-color">Her</h2>
<img src="http://lewihussey.com/codepen-img/her.jpg">
</div>
</li>
<li>
<div class="content__wrapper">
<h2 class="text-color">About</h2>
<p>Created by <a class="text-color" href="http://lewihussey.com" target="_blank">Lewi Hussey</a>
</p>
</div>
</li>
</ul>
</section>
<footer>By Lewi Hussey</footer>
</div>

PHP file redirects/leaves main page

In my PHP code, I just want to connect to MySql database, then check for length values, but when I do this, it redirects the page to the PHP file. How can I show the alerts only through the main page?
<?php
$servername = "localhost";
$username = "root";
$password = "abc123";
$dbname = "redstonegaming";
$ip = get_client_ip();
$datetime = date("l jS \of F Y h:i:s A");
$temp1 = $_GET["name"];
$temp2 = $_GET["comment"];
$comment = "";
$commentname = "";
if (strlen($temp1) < 1)
{
echo "<script>alert('Your message must be more than 0 characters!');</script>";
}
else if (strlen($temp2) > 300)
{
echo "<script>alert('Your message must be less than 300 characters!');</script>";
}
else {
send();
}
function get_client_ip() {
$ipaddress = '';
if (getenv('HTTP_CLIENT_IP'))
$ipaddress = getenv('HTTP_CLIENT_IP');
else if(getenv('HTTP_X_FORWARDED_FOR'))
$ipaddress = getenv('HTTP_X_FORWARDED_FOR');
else if(getenv('HTTP_X_FORWARDED'))
$ipaddress = getenv('HTTP_X_FORWARDED');
else if(getenv('HTTP_FORWARDED_FOR'))
$ipaddress = getenv('HTTP_FORWARDED_FOR');
else if(getenv('HTTP_FORWARDED'))
$ipaddress = getenv('HTTP_FORWARDED');
else if(getenv('REMOTE_ADDR'))
$ipaddress = getenv('REMOTE_ADDR');
else
$ipaddress = 'UNKNOWN';
return $ipaddress;
}
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
{
echo "<script>alert('Connection failed: ' . $conn->connect_error);</script>";
}
function send()
{
$sql = "INSERT INTO comments(Name, Message, Ip_Address, dateTime) VALUES ('$commentname','$comment','$ip','$datetime')";
}
if ($conn->query($sql) === TRUE)
{
echo "<script>alert('New Record Created Successfully!');</script>";
}
else
{
echo "<script>alert('Error: ' . $sql . '<br>' . $conn->error');</script>";
}
$conn->close();
?>
var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
kkeys = []; // <-- Change here
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.pause(); // <-- another issue
}
}
});
/*Some Fonts Here:*/
#font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
font-family: Rusty;
font-weight: Lighter;
}
.background
{
background-image: url(0.jpg);
background-attachment: fixed;
background-size: 100% auto;
background-color: f7f7f7;
background-repeat: no-repeat;
background-position:absolute;
}
.menubar {
position: relative;
height: 2.8vw;
opacity: 0.85;
background-color: #CCCCCC;
z-index: 1;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 50%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
.menu {
width: 100%;
margin: 0px auto;
text-align: center;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Ek Mukta';
}
.menu a {
transition: all linear 0.15s;
color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: rgba(189, 34, 34, 1);
}
.menu .arrow {
font-size: 0.95vw;
line-height: 0%;
}
.menu > ul > li {
float: middle;
display: inline-block;
position: relative;
font-size: 1.2vw;
}
.menu > ul > li > a {
padding: 0.7vw 5vh;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
.menu li:hover .sub-menu {
display: block;
}
.sub-menu {
width: 100%;
padding: 0px 0px;
position: absolute;
top: 100%;
left: 0px;
display: none;
transition: opacity linear 5.8s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 1.2vw;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: #3e3436;
}
.Rusty
{
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
display: inline;
}
.content
{
opacity: .85;
position: relative;
margin: auto;
width: 80%;
z-index: 0;
background-color: #CCCCCC;
padding: 10px;
height: 100%;
text-align: center;
}
.menu > ul > .login
{
position: absolute;
top: 0;
right: 0;
}
.video-container {
position:relative;
padding-bottom: 5%;
padding-top: 30px;
width: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position: relative;
top:15%;
width: 27vw;
height:27vh;
}
.title
{
text-align: center;
font-size: 7vh;
text-decoration: underline;
-moz-text-decoration-color: inherit;
text-decoration-color: inherit;
}
.feed-column
{
width: 50%;
height: 100%;
}
.border-right
{
border-right: thick solid rgba(189, 34, 34, 1);
}
.text-center
{
text-align: center;
}
.footer
{
background: #CCCCCC;
position:fixed;
bottom:0px;
height: 50px;
width: 100%;
opacity: .85;
}
.yt-title
{
font-size: 3.3vh;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css"
name="www-subscribe-widget" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="script.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<title>RG - Home</title>
<style>
#comment_form input, #comment_form textarea {
border: 4px solid rgba(0,0,0,0.1);
padding: 8px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
outline: 0;
}
#comment_form textarea {
width: 350px;
}
#comment_form input[type="submit"] {
cursor: pointer;
background: -webkit-linear-gradient(top, #efefef, #ddd);
background: -moz-linear-gradient(top, #efefef, #ddd);
background: -ms-linear-gradient(top, #efefef, #ddd);
background: -o-linear-gradient(top, #efefef, #ddd);
background: linear-gradient(top, #efefef, #ddd);
color: #333;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
border: 1px solid #ccc;
}
#comment_form input[type="submit"]:hover {
background: -webkit-linear-gradient(top, #eee, #ccc);
background: -moz-linear-gradient(top, #eee, #ccc);
background: -ms-linear-gradient(top, #eee, #ccc);
background: -o-linear-gradient(top, #eee, #ccc);
background: linear-gradient(top, #eee, #ccc);
border: 1px solid #bbb;
}
#comment_form input[type="submit"]:active {
background: -webkit-linear-gradient(top, #ddd, #aaa);
background: -moz-linear-gradient(top, #ddd, #aaa);
background: -ms-linear-gradient(top, #ddd, #aaa);
background: -o-linear-gradient(top, #ddd, #aaa);
background: linear-gradient(top, #ddd, #aaa);
border: 1px solid #999;
}
.align-middle
{
position: absolute;
}
</style>
</head>
<body class="background">
<div class="menubar">
<nav class="menu">
<ul class="clearfix">
<li>
<a href="aboutme.html">About Me
<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>
Gaming
</li>
<li>
Programming
</li>
<li>
YouTube
</li>
<li>
Other
</li>
</ul>
</li>
<li>
Schedule
</li>
<li class="current-item">
<a href="#">
<img style="width: 2.3vh; height: 1.6vw;" align="left" src="favicon.ico" />
<p align="middle" class="rusty">RedstoneGaming</p>
<img style="width: 2.3vh; height: 1.6vw;" align="right" src="favicon.ico" />
</a>
</li>
<li>
Equipment
</li>
<li>
Contact Me
</li>
<li class="login">
Login/Sign Up
</li>
</ul>
</nav>
</div>
<div class="content">
<h1 class="rusty title">RedstoneGaming Comments</h1>
<div class="border-right feed-column align-middle">
<div id="comment_form">
<form action="welcome.php" method="get">
<input type="text" name="name" id="name" value="" placeholder="Name" />
<textarea rows="10" name="comment" id="comment" placeholder="Enter your message here"></textarea>
<input type="submit" name="submit" value="Add Comment" /></form>
</div>
</div>
<div class="feed-column"></div>
</div>
<div class="footer">vv</div>
</body>
</html>

You didn't include action="" tag in form.
So when you press submit, script doesn't know where to execute.
Fix it by
<form action="welcome.php" method="get" action="">
And most easiest solution for your problem is to include that PHP script into top of HTML document with empty action="" tag. It will look up for php script on that page.
Note it is a bad practice. If you are using some other page in action tag, make sure you add header() function in PHP to redirect (somewhere if needed).
And one more notice.
Your function send() will not execute SQL, it basicaly just storing sql statement in variable.
Hope it helps,

Categories

Resources