I am currently having trouble with a project that I am currently working on, where i have to create a quote machine with 5 quotes. I need to have a forward and backward button for the quotes. i currently have it mostly all done but when i push the forward button and reach the last quote, if i keep clicking, I get undefined written in my element which i just want it to stop at the last one or loop back to the first one, and the same thing happens when i push the back button.
please help.
Here is my code.
var quoteArray = ["If you're already a front-end developer, well, pretend you're also wearing a pirate hat. - Ethan Marcotte, Responsive Web Design",
"Website without visitors is like a ship lost in the horizon. - Dr. Christopher Dayagdag",
"If there's one thing you learn by working on a lot of different Web sites, it's that almost any design idea--no matter how appallingly bad--can be made usable in the right circumstances, with enough effort.” - Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability",
"The true ENTREPRENEUR is a risk taker, not an excuse maker. - VDEXTERS",
"Being first in the search result organically in Google is the dream of all website owners. ― Dr. Chris Dayagdag"];
var i = 0;
var backButton = document.getElementById("back");
var forwardButton = document.getElementById("forward");
document.querySelector(".quote")
.innerHTML = quoteArray[0];
setInterval(function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++];
if (i == quoteArray.length) i = 0;
},5000);
backButton.addEventListener("click", function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i--];
if(quoteArray.length == -1) {
document
.querySelector(".quote")
.innerHTML = quoteArray[4];
}
})
forwardButton.addEventListener("click", function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++];
if(quoteArray.length == 5) {
document
.querySelector(".quote")
.innerHTML = quoteArray[0];
}
})
body {
width: 100%;
height: 100%;
}
a, .hero{
color: rgb(255, 255, 255);
}
#back, #forward {
font-size: 30px;
}
.nav {
display: flex;
justify-content: space-between;
align-items:center;
color: rgb(255, 255, 255);
width: 100%;
}
.hero {
background-image: linear-gradient(
rgb(0, 0, 0, 0.3) 10%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.3) 80%
),
url(./images/landscape-3969127_1280.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
height: 400px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 70%;
}
#back, #forward {
padding-left: 10px;
padding-right: 10px;
}
.buttons {
padding: 20px;
}
.quote {
font-size: 18px;
font-weight: bold;
}
.logo {
margin: 0 50px;
}
ul {
display: flex;
justify-content: center;
margin-right: 50px;
padding: 0px;
}
ul a {
padding-left: 30px;
padding-right: 30px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
li {
list-style: none;
}
.nav a {
color: rgb(255, 255, 255)
}
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="nav">
<div class="logo"><h1>Logo</h1></div>
<ul>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
</div>
<div class="row">
<div class="quote"></div>
</div>
<div class="buttons">
<i id="back" class="far fa-arrow-alt-circle-left"></i></i>
<i id="forward" class="far fa-arrow-alt-circle-right"></i></i>
</div>
</div>
<script src="./quote.js"></script>
</body>
</html>
% is your friend. You're getting undefined because you try accessing an element outside of the list. Let i go up as high as you want and as low as you want and just implement these calculations
increasing:
quoteArray[i++ % quoteArray.length]
decreasing:
i = (i - 1 + quoteArray.length) % quoteArray.length;
quoteArray[i]
var quoteArray = ["If you're already a front-end developer, well, pretend you're also wearing a pirate hat. - Ethan Marcotte, Responsive Web Design",
"Website without visitors is like a ship lost in the horizon. - Dr. Christopher Dayagdag",
"If there's one thing you learn by working on a lot of different Web sites, it's that almost any design idea--no matter how appallingly bad--can be made usable in the right circumstances, with enough effort.” - Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability",
"The true ENTREPRENEUR is a risk taker, not an excuse maker. - VDEXTERS",
"Being first in the search result organically in Google is the dream of all website owners. ― Dr. Chris Dayagdag"];
var i = 0;
var backButton = document.getElementById("back");
var forwardButton = document.getElementById("forward");
document.querySelector(".quote")
.innerHTML = quoteArray[0];
setInterval(function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++ % quoteArray.length];
}, 5000);
backButton.addEventListener("click", function() {
i = (i - 1 + quoteArray.length) % quoteArray.length;
document
.querySelector(".quote")
.innerHTML = quoteArray[i];
})
forwardButton.addEventListener("click", function() {
document
.querySelector(".quote")
.innerHTML = quoteArray[i++ % quoteArray.length];
})
body {
width: 100%;
height: 100%;
}
a, .hero{
color: rgb(255, 255, 255);
}
#back, #forward {
font-size: 30px;
}
.nav {
display: flex;
justify-content: space-between;
align-items:center;
color: rgb(255, 255, 255);
width: 100%;
}
.hero {
background-image: linear-gradient(
rgb(0, 0, 0, 0.3) 10%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.3) 80%
),
url(./images/landscape-3969127_1280.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
height: 400px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 70%;
}
#back, #forward {
padding-left: 10px;
padding-right: 10px;
}
.buttons {
padding: 20px;
}
.quote {
font-size: 18px;
font-weight: bold;
}
.logo {
margin: 0 50px;
}
ul {
display: flex;
justify-content: center;
margin-right: 50px;
padding: 0px;
}
ul a {
padding-left: 30px;
padding-right: 30px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
li {
list-style: none;
}
.nav a {
color: rgb(255, 255, 255)
}
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="nav">
<div class="logo"><h1>Logo</h1></div>
<ul>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
</div>
<div class="row">
<div class="quote"></div>
</div>
<div class="buttons">
<a><i id="back" class="far fa-arrow-alt-circle-left"></i></a>
<a><i id="forward" class="far fa-arrow-alt-circle-right"></i></a>
</div>
</div>
<script src="./quote.js"></script>
</body>
</html>
Related
I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}
As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
My website scales dynamically on desktop without creating scrollbars perfectly, but when I try using safari or google chrome on a mobile device to use it, it seems it may be fitting to the full device length (including under the address bar) rather than just the usable viewing space.
I've uploaded it to this domain-
http://asterisk.best/
index.js
import styles from '../styles/sliderpage.module.css'
import Head from 'next/head'
import './api/mouseListener'
import './api/colorChange'
export default function Home() {
return (
<div className={styles.slide_wrap}>
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, user-scalable=no" />
<div className={styles.main}>
<Head>
<title>Asterisk Digital Consulting</title>
<meta name="description" content="Site under construction." />
<link rel="icon" href="/favicon.svg" />
</Head>
<div id="left-side" className="side">
<h2 className="title">
Asterisk Digital <br />will
<span className="fancy"> brb.</span>
</h2>
</div>
<div id="right-side" className="side">
<h2 className="title">
Asterisk Digital <br />will
<span className="fancy"> brb.</span>
</h2>
</div>
</div>
</div>
)
}
globals.css
#import url('https://fonts.googleapis.com/css2?family=Lobster&family=Rubik&display=swap');
:root {
--dark: rgb(20, 20, 20);
--yellow: rgb(253, 216, 53);
--blue: rgb(98, 0, 234);
--c1: rgb(18, 39, 6);
--c2: rgb(131, 204, 124);
--left-color: var(--c1);
--right-color: var(--c2);
}
body {
background-color: var(--dark);
margin: 0px;
}
.side {
display: grid;
height: 100vh;
overflow: hidden;
place-items: center;
position: absolute;
width: 100%;
}
.side .title {
font-family: "Rubik", sans-serif;
font-size: 8vw;
margin: 0px 10vw;
width: 80vw;
}
.side .fancy {
font-family: "Lobster", cursive;
font-size: 1.3em;
line-height: 0.8em;
}
#left-side {
background-color: var(--left-color);
width: 60%;
z-index: 2;
}
#left-side .title {
color: white;
}
#left-side .fancy {
color: var(--right-color);
}
#right-side {
background-color: var(--right-color);
}
#right-side .title {
color: var(--dark);
}
#right-side .fancy {
color: white;
}
sliderpage.module.css
#import url('https://fonts.googleapis.com/css2?family=Lobster&family=Rubik&display=swap');
.slide_wrap {
--dark: rgb(20, 20, 20);
--c1: rgb(6, 21, 39);
--c2: rgb(124, 145, 204);
--left-color: var(--c1);
--right-color: var(--c2);
}
.main {
background-color: var(--dark);
margin: 0px;
}
I tried using a viewport meta tag suggested elsewhere
if you want to disable scroll completely , add overflow hidden to your body tag such as
body {
overflow: hidden;
text-align: center;
}
So I am trying to change the navigation style of my Navbar as I scroll from the top section to the next and other sections, but I am having trouble with the js code and I don't know why it is not working the way I want it to. I am using Intersection Observer but somehow, it doesn't apply in my website.
/* About Us JavaScript */
const header = document.querySelector("header");
const top_section = document.querySelector(".top_section");
const top_sectionOptions = {
rootMargin: "-200px 0px 0px 0px"
};
const top_sectionObserver = new IntersectionObserver(function(
entries, top_sectionObserver){
entries.forEach(entry =>{
if (!entry.isIntersecting) {
header.classList.add("nav-scrolled");
} else {
header.classList.remove("nav-scrolled");
}
})
}, top_sectionOptions);
top_sectionObserver.observe(top_section);
* {
padding: 0;
margin: 0;
font-family: "Times New Roman", Times, serif;
}
*::before,
*::after {
padding: 0;
margin: 0;
font-family: "Times New Roman", Times, serif;
}
a {
text-decoration: none;
}
.top_section {
background: rgba(0, 0, 0, 0.7) url(../images/balcony.jpg);
position: relative;
width: 100%;
height: 500px;
background-attachment: fixed;
background-blend-mode: darken;
background-repeat: no-repeat;
background-size: cover;
}
.nav_brand {
color: skyblue;
font-size: 30px;
margin-left: 100px;
}
header {
display: flex;
position: fixed;
justify-content: space-between;
align-items: center;
padding-top: 20px;
width: 100%;
z-index: 10;
transition: 0.5s ease-in-out;
}
.nav_middle_section {
margin-left: 100px;
}
.middle_section_link {
position: relative;
color: white;
margin-right: 55px;
font-weight: 300;
justify-content: space-between;
}
.middle_section_link::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
width: 0%;
height: 2px;
background: skyblue;
transition: 0.3s ease-out;
}
.middle_section_link:hover,
.middle_section_link:active {
color: skyblue;
}
.middle_section_link:hover::after {
left: 0;
width: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: skyblue;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
.nav-scrolled {
background-color: red;
box-shadow: 0 3px 20px rgb(0, 0, 0, 0.2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/about.css" />
<script src="javascript/ctrl.js"></script>
<title>About Us</title>
</head>
<body>
<div class="top_section">
<!-- Navigation Bar and Brand -->
<header>
<h2 class="nav_brand">BK-Lodge</h2>
<div class="nav_middle_section">
Home
About
Account
Room Services
Developers
</div>
</header>
<!-- Section Tag -->
<div class="caption">
<span class="border">About Us</span>
</div>
</div>
<!-- First Body -->
<div class="body_section">
<h2>About this Area</h2>
<h3>Madina</h3>
<p>
Bonsukoda Lodge is located in Madina. The area's natural beauty can be
seen at Labadi Beach and Achimota Forest, while Wheel Story House and
National Theatre of Ghana are cultural highlights. Legon Botanical
Gardens and Accra Zoo and Endangered Primate Breeding Centre are also
worth visiting.
</p>
<img src="images/front-elevation.jpg" alt="hall" />
</div>
<hr />
<!-- Second Body -->
<div class="middle_section">
<h2>About this property</h2>
<h3>Bonsukoda Lodge</h3>
<p>
3-star guesthouse near Madina Market Along with a bar/lounge, this
guesthouse has laundry facilities and a 24-hour front desk. Free WiFi in
public areas and free self parking are also provided. All 24 rooms offer
free WiFi, refrigerators, and room service. Other amenities available to
guests include rainfall showerheads, showers, and desks. Bonsukoda Lodge
offers 24 air-conditioned accommodations with complimentary toiletries.
Guests can surf the web using the complimentary wireless Internet
access. Bathrooms include showers with rainfall showerheads.
Housekeeping is offered daily and irons/ironing boards can be requested.
</p>
<img src="images/lodge-front.jpg" alt="lodge front" />
</div>
<hr />
<!-- Grid Section -->
<div class="grid_section">
<h2>Cleaning and safety</h2>
<h3>Enhanced cleanliness measures</h3>
<p>
Disinfectant is used to clean the property High-touch surfaces are
cleaned and disinfected Sheets and towels are washed at 60°C/140°F or
hotter Follows industry cleaning and disinfection practices of COVID-19
Guidelines (WHO)
</p>
<h3>Social distancing</h3>
<p>Guest rooms kept vacant for 48 hours between stays</p>
<h3>Safety measures</h3>
<p>
Personal protective equipment worn by staff Temperature checks given to
staff Temperature checks available for guests Masks and gloves available
Masks are required at the property Hand sanitizer provided
</p>
</div>
<!-- Footer -->
<footer class="white-section" id="footer">
<div class="container-fluid">
<i class="social-icon fab fa-facebook-f"></i>
<i class="social-icon fab fa-twitter"></i>
<i class="social-icon fab fa-instagram"></i>
<i class="social-icon fas fa-envelope"></i>
<p>© Copyright 2022 Bonsukoda Lodge</p>
</div>
</footer>
</body>
</html>
I have been trying/learning to use fullpagejs to create a website but i'm having problem creating autoplay slider. i've only been able to create
horizontal scroll which isnt really what i wanted to achieve here. Any help on how to achieve this without using horizontal scroll?
Hi guys, I have been trying/learning to use fullpagejs to create a website but i'm having problem creating autoplay slider. i've only been able to create
horizontal scroll which isnt really what i wanted to achieve here. Any help on how to achieve this without using horizontal scroll?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!--Custom script -->
<script type="text/javascript" src="js/fullpage.js"></script>
<script type="text/javascript">
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
$(document).ready(function(){
// $('#fullpage').fullpage({
// sectionSelector: '.vertical-scrolling',
// slideSelector: '.horizontal-scrolling',
// controlArrows: false
// // more options here
// });
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
// fullpage customization
$('#fullpage').fullpage({
sectionsColor: ['firstSection'],
// sectionSelector: '.vertical-scrolling',
// slideSelector: '.horizontal-scrolling',
navigation: true,
slidesNavigation: true,
controlArrows: false,
afterLoad: function(anchorLink, index) {
$header_top.css('background', 'rgba(0, 47, 77, .3)');
$nav.css('background', 'rgba(0, 47, 77, .25)');
if (index == 5) {
$('#fp-nav').hide();
}
},
});
});
</script>
#homepage {
position: relative; }
#homepage .slider {
background-size: cover !important; }
#homepage .slider .hero {
padding: 0 25px;
display: flex;
flex-direction: column;
height: calc(100vh - 10%); }
#homepage .slider .hero .header {
padding-top: 20px;
flex: 1 1 70px;
display: flex;
align-items: center;
justify-content: space-between; }
#homepage .slider .hero .header .logo img {
cursor: pointer;
image-rendering: -webkit-optimize-contrast; }
#homepage .slider .hero .header i {
color: #fff;
cursor: pointer; }
#homepage .slider .hero .welcome {
display: flex;
justify-content: center;
flex: 10 10 300px;
text-align: center;
align-items: center; }
#homepage .slider .hero .welcome div {
align-self: flex-end; }
#homepage .slider .hero .welcome div .hero-headings {
line-height: 90px;
font-size: 155px;
color: #fff;
font-family: '__ITC Avant Garde Gothic Pro_5';
font-weight: 700;
letter-spacing: -5px;
text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); }
#homepage .slider .hero .welcome div .hero-description {
padding-bottom: 50px;
font-family: Georgia;
font-size: 20px;
line-height: 22px;
font-weight: bold;
letter-spacing: 5px;
color: #fff;
text-transform: uppercase;
/*text-shadow: 0px 0px 15px rgba(0,0,0,0.8);*/ }
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>branding</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" />
</head>
<body>
<div class="container">
<div id="homepage" class="main">
<div id="fullpage">
<section class="slider section" style="background: url('http://neonrobot.com/wp-content/uploads/2014/09/unsplash-1.jpg') center center;">
<div class="hero">
<div class="header">
<div class="logo"><img src="assets/img/logo.png" alt="logo"></div>
<i id="menu-open" class="fa fa-bars fa-lg"></i>
</div>
<div class="welcome">
<div>
<div class="hero- headings">Hello.</div>
<div class="hero-description"></div>
</div>
</div>
</div>
<div class="clients">
<div class="padding25">
<div class="clients-intro">Our Clients. <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></div>
<div class="clients-logos">sds</div>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
You need to change your afterLoad callback function like this:
I have used setInterval function to make it automated by calling moveSlideRight function at interval of 1 sec.
afterLoad: function(anchorLink, index) {
$header_top.css('background', 'rgba(0, 47, 77, .3)');
$nav.css('background', 'rgba(0, 47, 77, .25)');
setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 1000);
if (index == 5) {
$('#fp-nav').hide();
}
},
Here is an example link: codepen link
I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.