Onclick isn't being registered, keep telling me it's undefined

Onclick isn't being registered, keep telling me it's undefined - javascript

I'm trying to have a menu slide in whenever the 'menu' icon is clicked. Now I can't see where I went wrong. I'm getting the 'menu is not defined' error in the console.
<!DOCTYPE html>
<html>
<head>
<title>Menu rechts</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<section class="web_wrapper">
<header>
<main style="width: 100%;">
<button class="material-icons" id="menu_toggle" onclick="menu()">menu</button>
</main>
</header>
</section>
<section class="menu_show">
<nav style="right: -20%;">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<nav>
</section>
<script src"toggle.js" type="text/javascript"></script>
</body>
</html>
The used javascript
function menu()
{
var menu = document.querySelector("nav");
var main = document.querySelector("main");
if(menu.style.right != '-20%')
{
menu.style.right='-20%';
main.style.width='100%';
}
else
{
menu.style.right='0%';
main.style.width='80%';
}
}
The css
After getting comments it seems it might be a css issue. Because of this reason i'm also posting the css.
* {
font-size: 12pt;
padding: 0px;
margin: 0px;
outline: 0;
border: 0; }
body {
width: 100%;
color: #212121; }
a {
text-decoration: none; }
li {
list-style-type: none; }
.web_wrapper {
float: left;
width: 100%;
height: auto; }
header {
width: 100%;
height: 100%; }
header main {
height: 75px; }
header main button#menu_toggle.material-icons {
position: relative;
top: 50px;
left: 1000px;
background: transparent;
transition: transform 0.3s, color 0.3s;
font-size: 24pt !important; }
header main button.active {
transform: rotate(90deg);
color: #536DFE; }
.menu_show {
height: 100vh;
float: right;
background: #607D8B; }
.menu_show nav {
width: 20%; }
.menu_show nav ul {
width: 100%; }
.menu_show nav ul li {
width: 100%;
text-align: center; }

Try the below,
You can simply archive this with jQuery animate function
Read This animate
var click = 0; //keep this flag to identify the click
function menu() {
var menu = $("nav");
$(menu).animate({
width: 'toggle'
},"slow","easeOutElastic");
if (click == 0) {
$(".web_wrapper").animate({"width": "100%"},"slow","easeOutElastic");
click = 1;
} else {
$(".web_wrapper").animate({"width": "80%"},"slow","easeOutElastic");
click = 0;
}
console.log(click);
}
nav {
color: 'black';
background-color: #ddd;
text-align: justify;
width: 20%;
float: right;
margin-top: -20px;
}
.web_wrapper {
width: 80%;
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<section class="web_wrapper">
<header>
<div style="width: 100%;" id="main">
<button class="material-icons" id="menu_toggle" onclick="menu();">menu</button>
</div>
</header>
</section>
<section class="menu_show">
<nav style="right:-20%;" id="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</section>

use
<script src"toggle.js" type="text/javascript"></script>
in top of your codes and check again.

ideally you need to use jQuery but i am also a JS fan.Here you just have to define menu function anywhere but before its called ,ideally in head section,check this fiddle
http://jsfiddle.net/r0d09wcr/1/
<head>
<script>
function menu()
{
alert('dsff');
var menu = document.querySelector("nav");
var main = document.querySelector("main");
if(menu.style.right != '-20%')
{
menu.style.right='-20%';
main.style.width='100%';
}
else
{
menu.style.right='0%';
main.style.width='80%';
}
}
</script>
</head>

First, next time please fiddle your code.
Second, I think this fiddle does what you want:
JSFIDDLE:http://jsfiddle.net/657oudrv/1/
$('#menu_toggle').click(function()
{
var menu = $("nav")
var main = $("main")
if(menu.css('right') !== '-20%')
{
menu.css('right','-20%')
main.css('width','100%')
//Just for test without your css:
menu.css('margin-left','20%')
}
else
{
menu.css('right','0%')
main.css('width','80%')
//This is also the part of the test
menu.css('margin-left','0%')
}
});

You should use CSS selector with .querySelector()
Try to add id="nav" to your nav HTML element and edit you selector in js accordingly.
in HTML file:
<nav id="nav" style="right: -20%;">
in toogle.js:
var menu = document.querySelector("#nav");
see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector for reference

Big wall of code coming up, prepare yourselves. Note that I move the Menu button into the menu section. I also changed the css a lot. Not sure if the text changes color when it's supposed to. The javascript now simply toggles a menu_show class on the body and css handles the rest... I ♥ html5
The fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type='text/css'>
* {
font-size: 12pt;
padding: 0px;
margin: 0px;
outline: 0;
border: 0;
}
body {
width: 100%;
color: #212121;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
section {
display: inline-block;
}
.web_wrapper {
transition: .3s;
float: left;
width: 95%;
height: auto;
}
.menu_show .web_wrapper {
width:80%;
}
.menu {
position: absolute;
right: 0px;
width: 5%;
overflow: hidden;
height: 100%;
transition: width .3s;
background: #607D8B;
}
.menu_show .menu {
overflow: show;
width: 20%;
}
.menu nav {
position: relative;
top: 30px;
white-space: nowrap;
}
.menu_show .menu nav {
white-space: normal;
top: 10px;
}
.menu_show .menu nav ul {
width: 100%;
}
.menu_show .menu nav ul li {
width: 100%;
text-align: center;
}
#menu_toggle {
text-align: left;
overflow: hidden;
position: relative;
background: transparent;
transition: 0.3s;
font-size: 12pt !important;
transform: rotate(90deg);
top: 20px;
right: 10px;
}
.menu_show .menu #menu_toggle {
color: #536DFE;
top: 0px;
right: 0px;
transform: rotate(0deg);
}
</style>
<script type='text/javascript'>
// console logs left in for science
function ready(fn) {
console.log('readying');
if (document.readyState != 'loading'){
console.log('loading...');
fn();
} else {
console.log('content not loaded');
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function() {
var body = document.querySelector("body");
var button = document.getElementById('menu_toggle');
var menuShowing = false;
button.addEventListener('click',toggleMenu);
function toggleMenu()
{
if(menuShowing === true)
{
body.classList.remove('menu_show');
}
else
{
body.classList.add('menu_show');
}
menuShowing = !menuShowing;
}
});
</script>
</head>
<body>
<section class="web_wrapper">
<main>
Some content
<p>more in this paragraph!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</section>
<section class="menu">
<button class="material-icons" id="menu_toggle">menu</button>
<nav>
<ul>
<li>1. This is some long stinking text</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</section>
</body>
</html>
I'll fix any mistakes and try to address any comments. Best way to figure out what something does is to remove the class, rule, w/e from the dev console and see what happens.
The fiddle
Credit where it's due:
position: absolute; right: 0px; for animation to work right (also height looks good with this set)
the ready function was off StackO... can't find the answer i pulled it from now :(
wikipedia for the lorem ipsum on the fiddle

Related

Active-indication in top menu to stay in sync while the user scrolls manually

I have a single HTML page with several sections to which the user can navigate by clicking the corresponding link at the top. That link will get highlighted when the user navigates via that link.
Now I would like that when the user scrolls up or down manually, and a different section comes into view, that the corresponding link in the top menu will get the highlight.
My attempt is in the scroll event handler, but I am facing an issue with finding the HTML section anchor id that corresponds to the current scroll position.
Note that I am required to produce the li dynamically -- so that cannot change: the ul must be empty as per requirements of my project so all list items and hyperlinks must be generated in JavaScript (as it is currently done).
Here is my page. My problem is in the scroll event handler:
/**
*
* Manipulating the DOM exercise.
* Exercise programmatically builds navigation,
* scrolls to anchors from navigation,
* and highlights section in viewport upon scrolling.
*
* Dependencies: None
*
* JS Version: ES2015/ES6
*
* JS Standard: ESlint
*
*/
/**
* Define Global Variables
*
*/
// All sections - Navigation Bar - Fragment & AllLinks
const navigationBar = document.getElementById('navbar__list');
var navigationBarContainer = document.getElementById("landing__container");
const fragment = document.createDocumentFragment();
const pagesections = document.querySelectorAll('section');
const navigationBarLi = document.querySelectorAll('nav .landing__container ul li');
// adding new classes to sections to match with anchor id for scroll purposes
//document.getElementById('li').className('section')
// for each single section
/*function retrieveElementsById(ids) {
var listIds = ids.split(" ");
var arrayresults = [], item;
for (var i = 0; i < listIds.length; i++){
item = document.getElementById(idList[i]);
if (item) {
results.push(item);
}
}
return(results);
}
allSectionsinSingFnct(querySelectorAll("section1 section2 section3 section4 section5 section6 section7"))
*/
//
function sectionsidattr() {
var sec1 = document.getElementById("section1");
var sec2 = document.getElementById("section2");
var sec3 = document.getElementById("section3");
var sec4 = document.getElementById("section4");
var sec5 = document.getElementById("section5");
var sec6 = document.getElementById("section6");
var sec7 = document.getElementById("section7");
}
const sectionsids = [
'section1', '#section1',
'section2', '#section2',
'section3', '#section3',
'section4', '#section4',
'section5', '#section5',
'section6', '#section6',
'section7', '#section7'
]
//const elements = document.querySelectorAll(ids.map(id => `#${id}`).join(', '));
//const sectionidelements = document.querySelectorAll(sectionids.map(id => `#${id}`).join(', '))
/**
* End Global Variables
* Start Helper Functions
*
*/
/**
* End Helper Functions
* Begin Main Functions
*
*/
/* Reference
https://stackoverflow.com/questions/65407419/how-to-add-active-class-to-the-list-href-that-equal-showed-in-the-viewport-sec
*/
// Building the Navigation Bar
for (let pagesection of pagesections) {
const pagelist = document.createElement('li');
const pagelinks = document.createElement('a');
const pagesectionId = pagesection.getAttribute('id');
const pagesectionTitle = pagesection.getAttribute('data-nav');
pagelinks.classList = 'menu__link';
pagelinks.setAttribute('href', `#${pagesectionId}`);
pagelinks.innerText = pagesectionTitle;
fragment.appendChild(pagelist);
pagelist.appendChild(pagelinks);
// Smooth Scroll
pagelinks.addEventListener('click', function (event) {
event.preventDefault();
window.scrollTo({
top: pagesection.offsetTop - 50,
behavior: 'smooth'
});
});
}
navigationBar.appendChild(fragment);
const allpageLinks = navigationBar.querySelectorAll('a');
//Scroll to using anchor ID
var scrollanchorid = document.querySelectorAll("section");
function scrollToAnchor() {
scrollToAnchor.scrollIntoView(true);
}
// Set the section as active when it is in the scope of the screen.
// vars at top pagesections & navigationBarLi
// when scrolling run the following function
window.addEventListener('scroll', () => {
let current = ''; // no current section at the beginning
//looping through all the sections
pagesections.forEach(section => {
const topSction = section.offsetTop;
//added for future reference that the logic loops through the values of the page
//console.log(topSction);
//retrieve sectionHeight
console.log(pageYOffset);
const sctionHeight = section.clientHeight;
if (pageYOffset >= (topSction - sctionHeight / 1)) {
current = section.getAttribute('id');
}
//Page Y Offset means how much we are scrolled here
})
//End of for each loop
// added for future refernce
//console.log(current);
navigationBarLi.forEach(li => {
li.classList.remove('active');
if (li.classList.contains('current')) {
li.classList.add('active')
}
})
// Add class 'active' to section when near top of viewport
// Another for each loop for active classes
const links = document.querySelectorAll('li');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function () {
var currenstate = document.getElementsByClassName("active");
currenstate[0].className = currenstate[0].className.replace("active", "");
this.className += "active";
});
};
});
//Set the menu item as active when the corresponding section is active.
/*Reference
https://www.w3schools.com/howto/howto_js_active_element.asp
*/
// Return Top Button
function scrollTopfunction() {
if (document.body.scrollTop > 25 ||
document.documentElement.scrollTop > 25) {
TopButton.style.display = "block";
} else {
TopButton.style.display = "none";
}
}
// At user click return to top of page for chrome , safari , firefox & most modern browsers
function pushtopfunction() {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
/* User time out function when idle at 500 seconds */
setTimeout(function () { alert("User Time Out Message : 5 minutes"); }, 500000);
/*
*
* CSS written based on SMACSS architecture.
* To learn more, visit: http://smacss.com/
*
* For simplicity, no reset or normalize is added.
* To learn more, visit: https://css-tricks.com/reboot-resets-reasoning/
*
*/
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
/* ---- Base Rules ---- */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-family: 'Roboto', sans-serif;
scroll-behavior: smooth;
}
body {
margin: 0;
background: linear-gradient(to bottom, #c31432, #240b36);
color: #fff;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to right top, #abbaab, #a34444);
}
section {
position: relative;
min-height: 100vh;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
}
button {
cursor: pointer;
border-radius: 12.5px;
}
/* Typeography General*/
header {
position: absolute;
top: 5px;
bottom: 5px;
align-items: center;
text-align: center;
background: transparent;
text-decoration: blanchedalmond;
text-shadow: black;
}
h1 {
font-family: 'Fira Sans', sans-serif;
border-radius: 50%;
border-color: black;
text-align: center;
align-items: center;
color: goldenrod;
background: linear-gradient(to right top, #8e0e00, #1f1c18);
}
.main__hero {
font-family: 'Fira Sans', sans-serif;
font-size: large;
top: 85px;
float: middle;
align-items: center;
border-color: black;
text-align: center;
color: black;
position: sticky;
}
#media only screen and (min-width: 35em) {
h1 {
font-size: large;
text-align: center;
align-items: center;
color: goldenrod;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: 'Oxygen', Sans-Serif;
font-size: 1.2em;
color: azure;
}
p {
line-height: 1.5em;
font-size: 0.9em;
color: #eee;
word-spacing: 0.1em;
}
/* ---- Layout Rules ---- */
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
/* Some sections features*/
section h2 {
display: sticky;
font-size: 7.7vh;
top: 10px;
bottom: 7px;
text-shadow: black;
color: cornsilk;
}
section h3 {
display: flex;
font-size: 2.0rem;
top: 10px;
bottom: 7px;
text-shadow: black;
color: burlywood;
}
/* ---- Module Rules ---- */
/* Return Top Button*/
.topbtnclass {
padding: 15px;
bottom: 20px;
right: 10px;
position: fixed;
text-align: center;
border-radius: 15px;
outline: none;
color: white;
z-index: 99;
font-size: 12.5px;
cursor: pointer;
align-items: center;
background: linear-gradient(to right bottom, #304352, #d7d2cc);
font-family: 'Oxygen', Sans-Serif;
}
/* Return Top Button Hover */
.topbtnclass:hover {
color: goldenrod;
display: flex;
background: linear-gradient(to right bottom, #870000, #190a05);
}
/* Adding an active class */
.active, .a:hover {
background: linear-gradient(to right bottom, #852121, #190a05);
color: goldenrod;
border-radius: 50%;
}
/* Navigation Styles*/
.navbar__menu {
position: fixed;
top: 0px;
float: middle;
background: linear-gradient(to right bottom, #304352, #d7d2cc);
width: 100%;
max-width: 2150px;
margin:0 auto;
text-align: center;
padding: 10px;
}
.navbar__menu ul {
position: relative;
padding-left: 1px;
padding-right: 1px;
text-align: center;
display: inline-block;
background: linear-gradient(to right bottom, #304352, #d7d2cc);
border-radius: 90%;
}
.navbar__menu li {
display: inline-block;
position: relative;
}
.navbar__menu li ul a {
display: inline-block;
padding: 7px 14px;
text-decoration: none;
}
.navbar__menu li ul.active{
background: linear-gradient(to right bottom, #c31432, #240b36);
color: goldenrod;
}
.navbar__menu .menu__link {
display: flex;
padding: 1em;
font-weight: bold;
text-decoration: none;
text-shadow: black;
color: goldenrod;
border-radius: 50%;
}
.navbar__menu .menu__link:hover {
color: wheat;
transition: ease 0.3s all;
}
/* Header Styles */
.page__header {
background: linear-gradient(to right bottom, #c31432, #240b36);
position: sticky;
font-size: 2vw;
width: 100%;
z-index: 50;
border-color: black;
}
/* Footer Styles */
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p {
color: #fff;
}
/* ---- Theme Rules ---- */
/* Landing Container Styles */
.landing__container {
padding: 1em;
text-align: center;
align-items: center;
}
#media only screen and (min-width: 35em) {
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
text-align: center;
align-items: center;
}
/* Background Circles */
/* Note that background circles are created with psuedo elements before and after */
/* Circles appear to be random do to use of :nth-of-type psuedo class */
section:nth-of-type(odd) .landing__container::before {
content: '';
background: rgba(255, 255, 255, 0.187);
position: fixed;
z-index: -5;
width: 50vh;
height: 50vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(even) .landing__container::before {
content: '';
background: rgb(255, 255, 255);
background: linear-gradient(0deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .2) 100%);
position: fixed;
top: 3em;
right: 3em;
z-index: -5;
width: 40vh;
height: 40vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n) .landing__container::after {
content: '';
background: rgb(255, 255, 255);
position: absolute;
right: 0;
bottom: 0;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n + 1) .landing__container::after {
content: '';
background: rgb(255, 255, 255);
position: absolute;
right: 20vw;
bottom: -5em;
z-index: -5;
width: 15vh;
height: 15vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
/* ---- Theme State Rules ---- */
/* Section Active Styles */
/* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */
section.active {
color: goldenrod;
background: linear-gradient(to right bottom, #870000, #190a05);
}
section.active .landing__container::before {
opacity: 1;
animation: rotate 4s linear 0s infinite forwards;
}
section.active .landing__container::after {
opacity: 1;
animation: rotate 5s linear 0s infinite forwards reverse;
}
/* Section Active Styles Keyframe Animations */
#keyframes rotate {
from {
transform: rotate(0deg) translate(-1em) rotate(0deg);
}
to {
transform: rotate(360deg) translate(-1em) rotate(-360deg);
}
}
/* Active Class */
li a.active {
color: goldenrod;
}
.active {
color: goldenrod;
background: linear-gradient(to right bottom, #870000, #190a05);
cursor: pointer;
position: relative;
}
.active:hover {
color: goldenrod;
background: linear-gradient(to right bottom, #870000, #190a05);
position: relative;
}
/*Page sections Gradients by id*/
#section1 {
/*border-radiuse at 25% to makesections more rounded*/
border-radius: 25%;
background-color: #fdb813;
background-image: linear-gradient(315deg, #fdb813 0%, #788cb6 74%);
}
#section2 {
border-radius: 25%;
background-color: #edd812;
background-image: linear-gradient(315deg, #edd812 0%, #766a65 74%);
}
#section3 {
border-radius: 25%;
background-color: #edd812;
background-image: linear-gradient(315deg, #edd812 0%, #766a65 74%);
}
#section4 {
border-radius: 25%;
background-color: #fdb813;
background-image: linear-gradient(315deg, #fdb813 0%, #788cb6 74%);
}
#section5 {
border-radius: 25%;
background-color: #edd812;
background-image: linear-gradient(315deg, #edd812 0%, #766a65 74%);
}
#section6 {
border-radius: 25%;
background-color: #b3cdd1;
background-image: linear-gradient(315deg, #b3cdd1 0%, #9fa4c4 74%);
}
#section7 {
border-radius: 25%;
background-color: #eaf818;
background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Manipulating the DOM</title>
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">
<!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet">
</head>
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<div class="menucontainer">
<ul id="navbar__list"></ul>
</div>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1">
<div class="landing__container">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam fugit nobis eaque sunt aperiam molestiae cum in sapiente placeat iusto debitis expedita alias non,
vitae velit cumque exercitationem, minima consectetur.
</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam fugit nobis eaque sunt aperiam molestiae cum in sapiente placeat iusto debitis expedita alias non,
vitae velit cumque exercitationem, minima consectetur.
</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam fugit nobis eaque sunt aperiam molestiae cum in sapiente placeat iusto debitis expedita alias non,
vitae velit cumque exercitationem, minima consectetur.
</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<img src="https://cdn.pixabay.com/photo/2015/01/15/16/16/staircase-600468_1280.jpg" alt=:"staircase-600468_1280"
width="150" height="150">
<img src="https://cdn.pixabay.com/photo/2015/12/08/00/39/steps-1081909_1280.jpg" alt=:"steps-1081909_1280"
width="150" height="150">
<img src="https://cdn.pixabay.com/photo/2014/03/08/22/32/escalator-283448_1280.jpg"
alt=:"escalator-5899073_1280" width="150" height="150">
</div>
</section>
<section id="section5" data-nav="Section 5">
<div class="landing__container">
<h2>Section 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam fugit nobis eaque sunt aperiam molestiae cum in sapiente placeat iusto debitis expedita alias non,
vitae velit cumque exercitationem, minima consectetur.
</p>
</div>
</section>
<section id="section6" data-nav="Section 6">
<div class="landing__container">
<h2>Section 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam fugit nobis eaque sunt aperiam molestiae cum in sapiente placeat iusto debitis expedita alias
non,
vitae velit cumque exercitationem, minima consectetur.
</p>
</div>
</section>
<section id="section7" data-nav="Section 7" class="active">
<div class="landing__container">
<h2>Section 7</h2>
<label for"email">Email:</label>
</br>
<input type="text" name="email">
</br>
<label for"Last_name.">Last Name:</label>
</br>
<input type="text" name="Last_name">
</br>
<label for"First_name.">First Name:</label>
</br>
<input type="text" name="First_name."></br>
</form>
</br>
</br>
<textarea class="text_area_class" rows="25" cols=50>
Enterinquiry here.
</textarea>
</br>
<input type="submit">
<br>
</div>
</section>
<button class="topbtnclass" onclick="pushtopfunction()">Top</button>
<script src="js/app.js">
</script>
</main>
<footer class="page__footer">
<p>&copy Udacity</p>
</footer>

There are some issues:
The expression pageYOffset >= (topSction - sctionHeight / 1) is not correct. Subtracting the height of the section from its top offset is without meaning. Instead, make your loop interruptable (use for instead of forEach) and check whether pageYOffset + top < topSction + sctionHeight. If so, break out of the loop as searching further is no longer needed: we found the section.
Take into account that the menu bar at the top makes part of the section invisible, so make sure that the logic of the point above takes this offset into account. Define top as menu.offsetTop + menu.clientHeight, where menu is the .navbar__menu element.
li.classList.contains('current') is a condition that is never true, as you don't have a current CSS class. You wanted to refer here to the variable current, but use a literal string instead. Moreover, the value of current (e.g. "section3") will not be found in the class list of the li element. You could look for it in the href attribute of the child a elements:
li.children[0].href.endsWith(current)
The navigationBarLi collection is empty because you initialise this variable at a moment that the menu is not built yet. Instead you could use navigationBar.children, which will dynamically find the li elements.
Taking this together, use this code in the first part of your scroll event handler:
let current = '';
const menu = document.querySelector('.navbar__menu');
const top = menu.offsetTop + menu.clientHeight; // Add this offset
for (let section of pagesections) { // make a for-loop, so you can break out
const topSction = section.offsetTop;
const sctionHeight = section.clientHeight;
if (pageYOffset + top < topSction + sctionHeight) { // compare with end of section
current = section.getAttribute('id');
break; // <-- add break
}
}
for (let li of navigationBar.children) { // the collection you had was empty
li.classList.remove('active');
if (li.children[0].href.endsWith(current)) { // This identifies the section's li
li.classList.add('active');
}
}

GSAP slider not working in IE11 and safari

I integrated this slider into my website after I find that it is not working on IE11 and safari :
Here is a link to the slider's code :
https://codepen.io/gvrban/pen/qjbpaa
IT works fine in Chrome and in IE11 I have tried changing the style but the problem persist. I think it is related to the flexbox.
HTML part (only one slide ):
<div class="slider">
<div class="slider-wrapper flex">
<div class="slide flex">
<div class="slide-image slider-link next"><img src="https://goranvrban.com/codepen/img6.jpg"><div class="overlay"></div></div>
<div class="slide-content">
<div class="slide-date">30.10.2017.</div>
<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex. </div>
<div class="slide-more">READ MORE</div>
</div>
</div>
</div>
<div class="arrows">
</div>
</div>
CSS part:
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {background-color: #0D1B2B; overflow-x: hidden; font-family: roboto; -webkit-font-smoothing: antialiased; margin: 0;}
.flex { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;}
.slider-wrapper div {position: relative;}
.slider-wrapper {margin-top: 5vw; margin-left: 11vw;}
.slide-image {height: 24vw;}
.slide-image img {width: 24vw; cursor: pointer;}
.slide-content {width: 25vw; color: #fff; padding:3vw 18vw 3vw 9vw;}
.slide-date {color: #0a8acb; font-size: 1.1vw; font-weight: 400; letter-spacing: 0.1vw; padding-bottom: 1.4vw;}
.slide-title {font-size: 1.2vw; font-weight: 400; letter-spacing: 0.1vw; line-height: 1.55vw; padding-bottom: 1.8vw;}
.slide-text {font-size: 0.80vw; line-height: 1.2vw; opacity: 0.8; padding-bottom: 4vw;}
.slide-more {font-weight: 400; letter-spacing: 0.1vw; float: left; font-size: 0.9vw;}
.slide-bullet {width: 0.5vw; height: 0.5vw; background-color: #0b8bcc; border-radius: 200%; position: relative; margin-left: 1.2vw;}
.slide-nav {margin-left: 64vw; margin-top: -5.5vw;}
div.overlay-blue {width: 100%; height: 100%; position: absolute; top: 0; transition: 0.5s ease all;}
div.overlay-blue:hover {background-color: rgba(13, 27, 43, 0.5);}
.arrows{width: 3.5vw; margin-top: -5.8vw; margin-left: 72vw; position: relative;}
.arrow {display: inline-block; position: absolute; width: 1.2vw; height: 1.2vw; background: transparent; text-indent: -9999px; border-top: 0.15vw solid #fff; border-left: 0.15vw solid #fff; transition: all .1s ease-in-out; text-decoration: none; color: transparent;
}
.arrow:hover {border-color: #0A8ACB; border-width: 0.25vw;
}
.arrow:before {display: block; height: 200%; width: 200%; margin-left: -50%; margin-top: -50%; content: ""; transform: rotate(45deg);}
.arrow.prev {transform: rotate(-45deg); left: 0;}
.arrow.next {transform: rotate(135deg); right: 0;}
JS part:
( function($) {
$(document).ready(function() {
var s = $('.slider'),
sWrapper = s.find('.slider-wrapper'),
sItem = s.find('.slide'),
btn = s.find('.slider-link'),
sWidth = sItem.width(),
sCount = sItem.length,
slide_date = s.find('.slide-date'),
slide_title = s.find('.slide-title'),
slide_text = s.find('.slide-text'),
slide_more = s.find('.slide-more'),
slide_image = s.find('.slide-image img'),
sTotalWidth = sCount * sWidth;
sWrapper.css('width', sTotalWidth);
sWrapper.css('width', sTotalWidth);
var clickCount = 0;
btn.on('click', function(e) {
e.preventDefault();
if( $(this).hasClass('next') ) {
( clickCount < ( sCount - 1 ) ) ? clickCount++ : clickCount = 0;
} else if ( $(this).hasClass('prev') ) {
( clickCount > 0 ) ? clickCount-- : ( clickCount = sCount - 1 );
}
TweenMax.to(sWrapper, 0.4, {x: '-' + ( sWidth * clickCount ) })
//CONTENT ANIMATIONS
var fromProperties = {autoAlpha:0, x:'-50', y:'-10'};
var toProperties = {autoAlpha:0.8, x:'0', y:'0'};
TweenLite.fromTo(slide_image, 1, {autoAlpha:0, y:'40'}, {autoAlpha:1, y:'0'});
TweenLite.fromTo(slide_date, 0.4, fromProperties, toProperties);
TweenLite.fromTo(slide_title, 0.6, fromProperties, toProperties);
TweenLite.fromTo(slide_text, 0.8, fromProperties, toProperties);
TweenLite.fromTo(slide_more, 1, fromProperties, toProperties);
});
});
})(jQuery);
$('.overlay').addClass('overlay-blue');
Many thanks.

Good morning,
you can console.log(sWidth, 'sWidth') under your variables declaration and see that your variable don't return the same value in different browsers.
The solution :
remove flex class from your slide html code and change the display to block to get the same calculation cross browsers and you should add another div inside it to keep your flex style.
change your HTML slide code to :
<div class="slide">
<div class="slide-container">
<div class="slide-image slider-link prev"><img src="https://goranvrban.com/codepen/img2.jpg">
<div class="overlay"></div>
</div>
<div class="slide-content">
<div class="slide-content-inner">
<div class="slide-date">30.07.2017.</div>
<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in
vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex.
</div>
<div class="slide-more">READ MORE</div>
</div>
</div>
</div>
</div>
and add these css styles :
.slide {
display:block;
}
.slide-container{
display: flex;
}
.slide-content-inner{
width:35vw;
padding: 5%;
}
And change these (remove the padding and change width) :
.slide-content {
width: 50vw; //changed to 50vw
color: #fff;
/*padding:3vw 18vw 3vw 9vw;*/ //removed
}
You get the solution with extra styling :)

How to make an image slideshow using CSS-Grid and javascript

I am trying to make a slideshow of images. But it does not seem to work I am not getting any errors when checking the javascript. Not sure what I am doing wrong
$( document ).ready(function() {
$('.work').scroll(function() {
var $this= $('h2');
$('.image').each(function () {
var hT = $(this).offset().top,
hH = $('h2').outerHeight(),
wH = $('.work').height(),
wS = $this.scrollTop();
console.log((hT-wH) , wS);
if (wS > (hT+hH-wH)){
$('#count').text($(this).data('index'));
}
});
});
});
function smallscreen() {
if (window.innerWidth < 959) {var workSlide = document.querySelector('.work');
var sliderImages = document.querySelectorAll('.work h2');
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
var counter = 1;
const size = sliderImages[0].clientWidth;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
nextButton.addEventListener('click', function next() {
if (counter >= sliderImages.length - 1) return;
workSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevButton.addEventListener('click', function prev() {
if (counter <=0) return;
workSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
workSlide.addEventListener('transitionend',function loopin() {
if (sliderImages[counter].class === 'clonelast') {
workSlide.style.transition = "none";
counter = workSlide.length -2;
}
if (sliderImages[counter].class === 'clonefirst') {
workSlide.style.transition = "none";
counter = workSlide.length -2;
}
});
}
}
window.onload = window.resize = smallscreen;
#media only screen and (max-width: 959px) /*and (orientation:portrait)*/ {
html,body {
max-width: 100%;
height: 100%;
}
.main{
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-gap: 1.5em;
}
.header {
grid-column: 1fr;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
grid-row: 1;
z-index: 2;
width: 100vw;
height: 60px;
}
.header h3 {
display: none;
}
.logo {
grid-column: 1;
max-width: 100%;
display: grid;
justify-items: center;
}
.logo embed{
display: block;
margin: auto;
max-width: 50%;
height: auto;
}
.body {
grid-row: 2/3;
display: grid;
grid-gap: 1.5em;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
margin: 0;
padding: 0;
z-index: 1;
}
.about{
max-width: 100vw;
}
h1 {
font-family: 'DM Sans', sans-serif, Arial, Helvetica;
font-size: 13.5pt;
line-height: 22pt;
font-weight: 500;
color: #000000;
}
.work {
grid-row: 2 / 4;
grid-column: 1;
display: flex;
width: 100%;
}
.image > img{
max-width: 100vw;
height: auto;
}
.buttons {
grid-row: 2 / 4;
grid-column: 1;
align-self: center;
padding: 0.75em;
display: grid;
grid-template-columns: 1fr 1fr;
transition: 0.5s ease 0s;
z-index: 4;
width: 100vw;
}
.prev {
justify-self: start;
}
.next {
justify-self: end;
}
button {
background: none;
color: inherit;
border: none;
font: inherit;
cursor: pointer;
outline: inherit;
display: flex;
}
.buttons :hover {
color: white;
}
.footer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
z-index: 3;
min-height: 80px;
grid-row: 3;
text-align: center;
max-width: 100vw;
}
.phone {
grid-row: 2;
align-self: center;
justify-self: center;
}
.media {
list-style-type: none;
display: flex;
justify-content: space-between;
padding: 1em 0 0;
grid-row: 1;
padding-bottom: 1em;
}
li > a {
text-decoration: none;
color: black;
}
li > a:hover {
font-weight: 800;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<title>DesignLover-Question</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<a href="https://www.walumozagba.com">
<embed src="https://collartocuff.files.wordpress.com/2010/01/chanel-logo-png-image-e1512737281632.png" alt="logo" width="500px">
</a>
</div>
<h3><span id="count">1</span>/17</h3>
</div>
<div class="body">
<div class="about">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
</div>
<div class="work">
<h2 class="image" data-index="0"></h2>
<h2 class="image clonefirst" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image clonelast" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="2"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="3"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="4"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="5"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="6"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="7"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="8"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="9"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="10"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="11"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="12"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="13"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="14"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="15"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="16"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
</div>
<div class="buttons">
<button class="prev">PREV</button>
<button class="next">NEXT</button>
</div>
</div>
<div class="footer">
<div class="phone">
<p>+31 123 12 12 12</p>
</div>
<ul class="media">
<li>Behance</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Email</li>
</ul>
</div>
</div>
<script src="JS/scriptscroll.js" type="text/javascript"></script>
</body>
</html>

You need to transition the elements within .work, not .work itself.
Heres a small working version of a image carousel:
(also available as JSFiddle)
class Slider {
constructor(el) {
this.el = el;
this.activeIndex = 0;
this.numItems = this.el.children().length;
// automatically advance slider
this.interval = setInterval(() => this.next(), 5000);
}
prev() {
this.activeIndex--;
if(this.activeIndex < 0)
this.activeIndex = this.numItems - 1;
this.updateDom();
}
next() {
this.activeIndex++;
if(this.activeIndex >= this.numItems)
this.activeIndex = 0;
this.updateDom();
}
updateDom() {
this.el.children().css('transform', `translateX(-${this.activeIndex}00%)`)
}
}
$(() => {
let slider = new Slider($(".work"));
$(".prev").click(() => slider.prev());
$(".next").click(() => slider.next());
});
.work {
/* Specify the size of the image box (can be in any unit you want)*/
width: 500px;
height: 300px;
overflow: hidden;
display: flex;
}
img {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
will-change: transform;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="work">
<img src="https://picsum.photos/500/300?1">
<img src="https://picsum.photos/500/300?2">
<img src="https://picsum.photos/500/300?3">
<img src="https://picsum.photos/500/300?4">
<img src="https://picsum.photos/500/300?5">
</div>
<button type="button" class="prev">
PREV
</button>
<button type="button" class="next">
NEXT
</button>
For production use i would recommend using an existing library though.
To name a few:
slick
swiper
lightslider
Owl Carousel
Edit:
Heres a working JsFiddle with your code.

Getting width of HTML document to resize with the browser window

I am new to web development and currently building a site for a friend that is being modeled after this one: http://fulton-demo.squarespace.com/
While I have most of the elements into code and styled, I cannot figure out how to get the images and content to fill 100% of the width AND resize when the browser window is resized. Like, take the first image on the link I provided for example...I would like it to look like this, meaning to not have any margins on either side and fill the browser window....and I can get it to do that, but it never shows 100% of the image and when I resize the window, nothing moves. Does that make sense?
I know this is probably a very elementary question, but I would love some insight on this. I can post any and all code if necessary. Thanks in advance guys!
EDIT: Here is my code:
HTML:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<meta charset="utf-8">
</head>
<body>
<main id="mainContent" role="main">
<article role="article">
<section>
<header>
<div class="container">
<div class="single-item-rtl" dir="rtl">
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg"height="600px" width="1400px" align= center/></div>
<div><img src="img/6.JPG" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
</div>
<div id=logo><img src="img/SJ_WHT.png" height="170px" width="220x" align=center</div>
<div id=text-top-carousel>
<h1>a better way to book creative spaces</h1>
</div>
</div>
</header>
</section>
<section id="info">
<div class="info">
<div class="icon"></div>
<h2>unique spaces <br> that inspire</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>hassle free <br> booking</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>share your <br>creative space</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="motto">
<h1>unleash your creativity</h1>
<p>We focus on your artistic expression at Studio Junkey. We believe that your creative process is limited when the necessary resources are not available to execute your vision. <br></nr> We want to ensure that you find the studio space that has the tools you need to express yourself and your vision</p>
</div>
</section>
<section id="contactForm">
<div class="form">
<h3>Want to list a studio space?</h3>
<p>We are looking for more studios.
Send us your information so we can connect.</p>
</div>
</section>
<footer role="footer">
</footer>
</article>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.single-item-rtl').slick({
rtl: true,
autoplay: true,
autoplaySpeed: 3000,
});
});
</script>
</body>
</html>
CSS:
#font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype");
}
html, body {
height: 100%;
width: 100%;;
padding:0;
margin: 0;
}
body {
font-family:"Brandon Grotesque";
}
#mainContent {
background: white;
width:1500px;
}
.container {
width: 100%;
max-width: 1400px;
height:600px;
text-align:center;
margin: 0 auto;
}
#logo {
position:relative;
top:-595px;
left:0em;
}
#text-top-carousel h1 {
position:relative;
top:-15px;
left:0em;
color:white;
font-size:55px;
padding: 10px;
}
#info {
margin: 0px;
clear:both;
}
.info {
width:466px;
height:400;
padding:10px;
background:white;
text-align: center;
color:#333333;
margin: 0px;
float:left;
clear: none;
}
.info.icon {
background:black;
border:1px solid white;
width:100px;
height:100px;
padding:10px;
margin-bottom: 25px;
}
.info h2 {
padding:300px 48px 10px 48px;
font-size: 45px;
margin-bottom: 0px;
margin-top: 0px;
line-height: 1em;
}
.info p {
padding:15px 50px 45px 50px;
margin: 0px;
font-size: 20px;
}
.motto {
background-image:url("img/6.jpg");
text-align: center;
color: white;
clear: both;
width:1400px;
margin:0 auto;
margin-bottom:0px;
height: 600px;
}
.motto h1 {
font-size: 60px;
padding-top: 90px;
margin-bottom: 20px;
}
.motto p {
font-size: 30px;
padding: 15px 100px 90px 100px;
}
#contactForm {
background: #EDEFED;
margin-top:0px;
width: 1400px;
height: 600px;
margin: 0 auto;
clear: both;
}
.form {
text-align: center;
margin: 0;
width:50%;
height:500px;
color:#333333;
clear:both;
}
.form h3 {
margin: 0;
font-size: 40px;
padding: 115px 185px 50px 185px;
}
EDIT 2: THANK YOU for all the help thus far everyone!....For those following along in the comments, the issue that I'm having now can be shown by this screenshot. The image carousel seems to be filling the left side completely fine, but the right side still isn't being filled at all, there's still some space between the right edge of the img carousel and the browser window when I scroll to the right.

Try adding this to your CSS..
.single-item-rtl img {
width: 100%;
height: auto;
max-height: 600px;
margin: auto;
}
Also remove the height width and align from the image tag or they'll override the CSS.
Slick tries to add arrows to the left and right side of the slider which is what is causing the issue. Since we're taking up 100% of the screen they have no place to go.
$('.single-item-rtl').slick({
rtl: true,
arrows: false
});
Edit:
Remove the width from #mainContent to make .container's with take up 100% of the screen.

Enclosing your content inside another element is helpful.
Note that you have to separate between enclosing elements required for your script to work, and those used to enchance your layout.
Also my solution implies you will ever be able to specify your image width in percent only. You can also add maximum and minimum properties.
.outer {
width: 5cm; // arbitrary
}
.full-width {
width: 100%;
}
.full-width img {
width: 15%;
max-width: 2cm;
min-width: 5mm;
}
<div class="outer">
<div class="full-width">
<img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"/>
</div>
</div>

Use Percentage widths!!!!
Something simple like this would do:
.myImageClass{
width: 50%;
/*by not setting height, it will auto scale*/
}
DEMO:
html,body{
margin:0;
padding:0;
}
.myFullImg{
width:100%;
}
.myHalfImage{
width:50%;
}
<img class="myFullImg" src="http://placekitten.com/g/200/200" alt=""/>
<img class="myHalfImage" src="http://placekitten.com/g/200/400" alt=""/>

How to generate a simple popup using jQuery

I am designing a web page. When we click the content of div named mail, how can I show a popup window containing a label email and text box?

First the CSS - tweak this however you like:
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
label {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
And the JavaScript:
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
And finally the html:
<div class="messagepop pop">
<form method="post" id="new_message" action="/messages">
<p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
<p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
<p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
</form>
</div>
Contact Us
Here is a jsfiddle demo and implementation.
Depending on the situation you may want to load the popup content via an ajax call. It's best to avoid this if possible as it may give the user a more significant delay before seeing the content. Here couple changes that you'll want to make if you take this approach.
HTML becomes:
<div>
<div class="messagepop pop"></div>
Contact Us
</div>
And the general idea of the JavaScript becomes:
$("#contact").on('click', function() {
if($(this).hasClass("selected")) {
deselect();
} else {
$(this).addClass("selected");
$.get(this.href, function(data) {
$(".pop").html(data).slideFadeToggle(function() {
$("input[type=text]:first").focus();
});
}
}
return false;
});

Check out jQuery UI Dialog. You would use it like this:
The jQuery:
$(document).ready(function() {
$("#dialog").dialog();
});
The markup:
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
Done!
Bear in mind that's about the simplest use-case there is, I would suggest reading the documentation to get a better idea of just what can be done with it.

I use a jQuery plugin called ColorBox, it is
Very easy to use
lightweight
customizable
the nicest popup dialog I have seen for jQuery yet

Visit this url
Jquery UI Dialog Demos

Try the Magnific Popup, it's responsive and weights just around 3KB.

I think this is a great tutorial on writing a simple jquery popup. Plus it looks very beautiful

There is a good, simple example of exactly this, here: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Extremely Lightweight Modal popup plugin.
POPELT - http://welbour.com/labs/popelt/
It is lightweight, supports nested popups, object oriented, supports dynamic buttons, responsive, and lot more.
Next update will include Popup Ajax form submissions etc.
Feel free to use and tweet feedback.

Let's try .... How to create a simple popup by using HTML, CSS, and jquery ...
$(function() {
// Open Popup
$('[popup-open]').on('click', function() {
var popup_name = $(this).attr('popup-open');
$('[popup-name="' + popup_name + '"]').fadeIn(300);
});
// Close Popup
$('[popup-close]').on('click', function() {
var popup_name = $(this).attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
});
// Close Popup When Click Outside
$('.popup').on('click', function() {
var popup_name = $(this).find('[popup-close]').attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
}).children().click(function() {
return false;
});
});
body {
font-family:Arial, Helvetica, sans-serif;
}
p {
font-size: 16px;
line-height: 26px;
letter-spacing: 0.5px;
color: #484848;
}
/* Popup Open button */
.open-button{
color:#FFF;
background:#0066CC;
padding:10px;
text-decoration:none;
border:1px solid #0157ad;
border-radius:3px;
}
.open-button:hover{
background:#01478e;
}
.popup {
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
width:100%;
height:100%;
display:none;
}
/* Popup inner div */
.popup-content {
width: 700px;
margin: 0 auto;
box-sizing: border-box;
padding: 40px;
margin-top: 100px;
box-shadow: 0px 2px 6px rgba(0,0,0,1);
border-radius: 3px;
background: #fff;
position: relative;
}
/* Popup close button */
.close-button {
width: 25px;
height: 25px;
position: absolute;
top: -10px;
right: -10px;
border-radius: 20px;
background: rgba(0,0,0,0.8);
font-size: 20px;
text-align: center;
color: #fff;
text-decoration:none;
}
.close-button:hover {
background: rgba(0,0,0,1);
}
#media screen and (max-width: 720px) {
.popup-content {
width:90%;
}
}
<!DOCTYPE html>
<html>
<head>
<title> Popup </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup
Preview</a>
<div class="popup" popup-name="popup-1">
<div class="popup-content">
<h2>Title of Popup </h2>
<p>Popup 1 content will be here. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aliquam consequat diam ut tortor
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat
convallis. Integer at metus eget neque hendrerit vestibulum.
Aenean vel mattis purus. Fusce condimentum auctor tellus eget
ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
</div>
</div>
</body>
</html>

Simple popup window by using html5 and javascript.
html:-
<dialog id="window">
<h3>Sample Dialog!</h3>
<p>Lorem ipsum dolor sit amet</p>
<button id="exit">Close Dialog</button>
</dialog>
<button id="show">Show Dialog</button>
JavaScript:-
(function() {
var dialog = document.getElementById('window');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('exit').onclick = function() {
dialog.close();
};
})();

Here is a very simple popup:
<!DOCTYPE html>
<html>
<head>
<style>
#modal {
position:absolute;
background:gray;
padding:8px;
}
#content {
background:white;
padding:20px;
}
#close {
position:absolute;
background:url(close.png);
width:24px;
height:27px;
top:-7px;
right:-7px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var modal = (function(){
// Generate the HTML and add it to the document
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#"></a>');
$modal.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($modal);
});
$close.click(function(e){
e.preventDefault();
$modal.hide();
$content.empty();
});
// Open the modal
return function (content) {
$content.html(content);
// Center the modal in the viewport
$modal.css({
top: ($(window).height() - $modal.outerHeight()) / 2,
left: ($(window).width() - $modal.outerWidth()) / 2
});
$modal.show();
};
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#popup').click(function(e){
modal("<p>This is popup's content.</p>");
e.preventDefault();
});
});
</script>
</head>
<body>
<a id='popup' href='#'>Simple popup</a>
</body>
</html>
More flexible solution can be found in this tutorial: http://www.jacklmoore.com/notes/jquery-modal-tutorial/
Here's close.png for the sample.

ONLY CSS POPUP LOGIC! TRY DO IT . EASY! I think this mybe be hack popular in future
OPEN
<div id="openModal" class="modalDialog">
<div>
X
<h2>MODAL</h2>
</div>
</div>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.modalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

Develop Reference

JavaScript is the programming language of the Web.

Onclick isn't being registered, keep telling me it's undefined - javascript

use <script src"toggle.js" type="text/javascript"></script> in top of your codes and check again.

Related

Active-indication in top menu to stay in sync while the user scrolls manually

GSAP slider not working in IE11 and safari

How to make an image slideshow using CSS-Grid and javascript

Getting width of HTML document to resize with the browser window

How to generate a simple popup using jQuery

Categories

Resources