Recently i switched to materialize (it's based on Bootstrap i guess) and i'm trying to make modal work. it just doesn't show up. the button is there but it triggers nothing. I'm using starter template from Materialize website.
All i did was copy and paste modal code from Materialize modal page. I put the code in starter template but it doesn't work. i also tested it on another theme based on materialize but that didn't work either.
also jQuery is loaded properly.
edit: it's index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right">
<li>Navbar Link</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<button data-target="#modal1" class="btn modal-trigger">Modal</button>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script> $(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});</script>
</body>
</html>
modal code:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
Here's a demo of Starter template
Here's download link of template
In the version v0.97.8 (October 30th, 2016) modal plugin has been refactored according to the updates from github. Now, the initialization of the plugin is done differently, like in the example below.
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
I think you forgot to attach the plugin to the button.
$(document).ready(function() {
$('.modal-trigger').leanModal();
});
Also change this line data-target="#modal1"
<button data-target="#modal1" class="btn modal-trigger">Modal</button>
In to this line data-target="modal1", you inserted # by mistake, a loudy error noticed me in console.
<button data-target="modal1" class="btn modal-trigger">Modal</button>
See the snippet below for working example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right">
<li>Navbar Link</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<button data-target="modal1" class="btn modal-trigger">Modal</button>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<script>
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
For updated code you should initialize
$(document).ready(function() {
$('.modal').modal();
});
Related
I have a one page template that i am trying to modify so that on clicking particular links the user goes to a new page rather than scroll to a different section. I still want to keep the scroll to a section navigation but I have call to action buttons in those sections that need to go to different pages. The website is a wordpress site
Here is my js code:
$(document).ready(function() {
if ($("a" != ".external")){
$("a").on('click', function(event) {
if ((this.hash !== "/membership-form/") && (this.hash !== "#wood-grain") && (this.hash !== "#gifting") && (this.hash !== "#non-slip") && (this.hash !== "#wpcf7-f4-o1") && (this.hash !== "#carousel-control-next") && (this.hash !== "#carousel-control-prev") && (this.hash !== "#carouselExampleControls")) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
}, 800, function() {});
}
});
}
});
So on this line if ($("a" != ".external")) I added a class called external to the <a> tags that need to leave the page. I also tried this.hash !== "/membership-form/" to try and target particular <a> tags but it only seems to work with my forms and image gallery that have # references.
How can I get the site to navigate away from the home page to my other pages?
Thanks
UPDATED JS CODE
AOS.init();
var $ = jQuery;
$(document).ready(function() {
$("a").on('click', function(event) {
if (!($(location).attr('href', '/BDWest/membership-form/'))){
if ((this.hash !== "/membership-form/") && (this.hash !== "#wood-grain") && (this.hash !== "#gifting") && (this.hash !== "#non-slip") && (this.hash !== "#wpcf7-f4-o1") && (this.hash !== "#carousel-control-next") && (this.hash !== "#carousel-control-prev") && (this.hash !== "#carouselExampleControls")) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
}, 800, function() {});
}
}
});
});
UPDATED WITH THE PHP CODE
HEADER.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title><?php bloginfo('name');?> | <?php wp_title(); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url');?>" />
<!-- Bootstrap core CSS -->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="loader">
<img alt="first image" src="<?php print IMAGES;?>/3.gif">
</div>
<div class ="parallax-full" id="soon">
<div class="banner-center">
<div class="sticky-top">
<img src="https://via.placeholder.com/468x60?text=Advert" class="img-fluid"/>
</div>
</div>
<div class="hero-textBG">
<div class="logo">
<h1>CLUB BD WEST</h1>
<h2>Logo can be here</h2>
<a class="external" href="/membership-form/"><button type="button" class="btn btn-default">Register Today</button></a>
</div>
<div data-aos="fade-up" data-aos-offset="0">
<div class="scroll-button">
<a href="#home">
<img class="img-fluid" alt="scroll-button" src="<?php print IMAGES;?>/button-down.png">
</a>
<h6>Scroll down</h6>
</div>
</div>
</div>
</div>
navigation.php
<!-- Navigation -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#home"> <img src="https://via.placeholder.com/70x40?text=Very+Small+Logo" class="img-fluid"/> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section5">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
index.php
<!-- Header --><?php get_header(); ?><!--Menu -->
<?php get_template_part('navigation');?><!--Home Section -->
<div class ="parallax" id="BG-2">
<div class="container-fluid">
<div id="home">
<div class="row">
<div class="col-sm-12 text-center">
<div class="content">
<div class="mt-2 col-md-12">
<div data-aos="fade-up">
<h1 class="mt-1">CLUB BD WEST</h1>
<p class="lead">There are no winners or losers, ours is a philosophy of enjoyment through participation and we have organized a range of activities to suit all ages, fitness levels and activity choices.</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"> </div>
<section class="top-section">
<div data-aos="fade-up">
<div class="container">
<div class="row">
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/weights-icon.png"></img>
<h3>Badminton</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/staff-icon.png"></img>
<h3>Football</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/aerobics-icon.png"></img>
<h3>Cricket</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/spinning-icon.png"></img>
<h3>Recreational Cycling</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/aerobics-icon.png"></img>
<h3>Kayaking</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/spinning-icon.png"></img>
<h3>Nature rambling</h3>
</div>
</div>
<div class="row">
<div class="col text-center">
<img src="https://via.placeholder.com/500x60?text=Call+to+action+Club+Sports" class="img-fluid"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<div class="content">
<div class="mt-2 col-md-12">
<div data-aos="fade-up">
<p class="lead">The list of activities is growing, fueled by suggestions from our members. It’s your club and responds to your needs..</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col text-center">
<h3>Our Goals</h3>
<p>To build an online social platform bringing together a diversity of people sharing a common purpose of interaction through sport and recreation.</p>
</div>
<div class="col text-center">
<h3>Our Mission</h3>
<p>To continue growth of both membership and activities developing a multicultural community with a social conscience. </p>
</div>
<div class="col text-center">
<h3>Our Vision</h3>
<p>To add to the quality of life, build cohesion in communities and enrich society.</p>
</div>
</div>
</div>
</section>
</div>
</div><!-- Container End -->
<hr class="content-seperator"></hr>
<div id="section2">
<div data-aos="fade-up">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h1>Our Story</h1>
<p>It all started when a group of friends got together for an impromptu game of badminton. The shared love of the game and the company of friends was a compelling mix and very quickly these random get togethers developed into a regular event.</p> <p>The group began to grow rapidly, first from within the circle of friends and later extending to others that were exposed to the group and drawn to it. At this point it was evident that a structure was required to communicate with group members and so BD West was formed.</p> <p>BD West is now a not for profit social club with over 200 members and plans to grow into a multicultural community of like-minded people brought together by the love of sport, recreation and the harmony of social connection. </p>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center">
<h2>Our Management Team</h2>
</div>
<div class="col-sm-12 text-center">
<img src="https://via.placeholder.com/500x60?text=Call+to+action+Management+Team" class="img-fluid"/>
</div>
</div>
</div>
</div>
</div>
<hr class="content-seperator"></hr>
</div><!-- BG End -->
<div class ="parallax" id="BG-3"> <div class="col-sm text-center"> <img src="https://via.placeholder.com/468x60?text=Advert" class="img-fluid"/> </div>
<div id="section3">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-sm-0 text-center">
<div class="content">
<div data-aos="fade-up">
<h3 class="mt-2">Events</h3>
<p class="lead">Here are some of our latest events</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
</div>
</div>
</div><!--./container -->
</div> <!-- ./section3 -->
<hr class="content-seperator"></hr>
</div><!--./ BG3 --> <!-- Pricing Table -->
<div class ="parallax" id="BG-1">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-3 mb-sm-0 text-center">
<div id="section4">
<div class="content">
<div data-aos="fade-up">
<h3 class="mt-2">Gallery</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="content-seperator-yellow"></hr>
</div> <!-- Contact Form and Location -->
<div class ="parallax" id="BG-2">
<div id="section5">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<div class="content">
<h3 class="mt-2">Contact Us</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<?php echo do_shortcode('[contact-form-7 id="16" title="Contact Us"]');?>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<p class="lead">BD West Incorporated</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Footer Section -->
<?php get_footer();?>
if you want to link through jQuery it would be like this:
$(location).attr('href', 'http://stackoverflow.com')
But it is highly recommended to do this with pure Javascript it best simulates an HTTP redirect, and it would go like this:
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
It's better to use window.location.replace(...), because the replace() doesn't keep the page they'd come from in the session history, which avoids having the users stuck in a never-ending back-button loop.
For some reason, Smooth scroll is not working. I believe that there is something in my HTML causing the problem. Click on Food delivery or anything in that list to test it, in the code. I appreciate any extra eyes on this :)
$(document).ready(function() {
/* For the sticky navigation */
$('.js--section-features').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
}, {
offset: '60px;'
});
/* Scroll on buttons*/
$('.js--scroll-to-plans').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-plans').offset().top
}, 1000);
});
$('.js--scroll-to-start').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-features').offset().top
}, 1000);
});
/* Navigation scroll*/
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
/* Animations on scroll */
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-2').waypoint(function(direction) {
$('.js--wp-2').addClass('animated fadeInUp');
}, {
offset: '50%'
});
$('.js--wp-3').waypoint(function(direction) {
$('.js--wp-3').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-4').waypoint(function(direction) {
$('.js--wp-4').addClass('animated pulse');
}, {
offset: '50%'
});
/* Map */
var map = new GMaps({
div: '.map',
lat: 38.7436266,
lng: -9.07,
zoom: 12
});
map.addMarker({
lat: 38.7436266,
lng: -9.1602037,
title: 'Lima',
infoWindow: {
content: '<p>Our Lisbon Headquarters</p>'
}
});
});
<!Doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Healthy foods is the #1 meal prep company in 2017!">
<link rel="stylesheet" type="text/css" href="css/v/normalize.css">
<link rel="stylesheet" type="text/css" href="css/v/grid.css">
<link rel="stylesheet" type="text/css" href="css/v/ionicons.min.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="css/r/style.css">
<link rel="stylesheet" type="text/css" href="css/r/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/img/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/img/favicons/manifest.json">
<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg">
<link rel="shortcut icon" href="/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- Favicons -->
<!-- Goolge Analytics -->
<!-- Goolge Analytics -->
<title>Healthy Foods</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="img/logo-white.png" alt="Omni Food Logo" class="logo">
<img src="img/logo.png" alt="Omni Food Logo" class="logo-black">
<ul class="main-nav">
<li>Food delivery
</li>
<li>How it works
</li>
<li>Our cities
</li>
<li>Sign up
</li>
<li>Conact Us
</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#plans">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#features">Show me more</a>
</div>
</header>
<!-- Food Fast Section Title -->
<section class="js--section-features" id="features">
<div class="row">
<center>
<h2>Get food fast — not fast food.</h2>
</center>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</div>
<!-- Get Food Fast Section Content -->
<br>
<div class="row js--wp-1">
<div class="col span-1-of-4 box">
<i class="ion-calendar icon-big"></i>
<h3>Up to 365 days/year</h3>
<p class="section-content">Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-clock icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p class="section-content">You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% organic</h3>
<p class="section-content">All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-android-cart icon-big"></i>
<h3>Order anything</h3>
<p class="section-content">We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<!-- Get Food Fast Section Content -->
<!-- Favorite Meals Section -->
<section class="section-meals">
<!-- Row 1 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/3.jpg" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<!-- Row 2 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<!-- Favorite Meals Section End -->
<!-- How it works Section -->
<section class="section-steps" id="works">
<div class="row">
<h2>How it works - Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="img/app-iPhone.png" alt="Omifood app on iPhone" class="app-screen js--wp-2">
</div>
<div class="col span-1-of-2 steps-box">
<div class="work-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="work-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="work-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
</div>
</div>
<!-- How it works Section End -->
<section class="section-cities js--wp-3" id="cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<!-- Lisbon -->
<div class="row">
<div class="col span-1-of-4 box">
<img src="img/lisbon-3.jpg" alt="Lisbon">
<h3>Lisbon</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
1600+ happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
60+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_lx
</div>
</div>
<!-- San Francisco -->
<div class="col span-1-of-4 box">
<img src="img/san-francisco.jpg" alt="San Francisco">
<h3>San Francisco</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+3700 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
160+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_sf
</div>
</div>
<!-- Berlin -->
<div class="col span-1-of-4 box">
<img src="img/berlin.jpg" alt="Berlin">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+2300 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
110+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_berlin
</div>
</div>
<!-- London -->
<div class="col span-1-of-4 box">
<img src="img/london.jpg" alt="London">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+1200 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
50+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_london
</div>
</div>
</div>
</section>
<!-- Cities Section End -->
<!-- Testimonials Section Start -->
<section class="section-testimonials">
<div class="row">
<h2>Our customers can't live without us</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
<cite><img src="img/customer-1.jpg" alt="Customer 1">Alberto Duncan</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
<cite><img src="img/customer-2.jpg" alt="Customer 2">Joana Silva</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
<cite><img src="img/customer-3.jpg" alt="Customer 3">Milton Chapman</cite>
</blockquote>
</div>
</div>
</section>
<!-- Testimonials Section End -->
<!-- Signup Section Start -->
<section class="section-plans js--section-plans" id="plans">
<div class="row">
<h2>Start eating healthy today</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Premium</h3>
<p class="plan-price">$399 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 13.30$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Pro</h3>
<p class="plan-price">$149 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 14.90$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal 10 days/month</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Starter</h3>
<p class="plan-price">19$ <span>/ meal</span>
</p>
<p class="plan-price-meal"> </p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 pm</li>
<li><i class="ion-ios-close-empty icon-small"></i>
</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section End -->
<!-- Form Section Section -->
<div class="map-box">
<div class="map"></div>
<div class="form-box" id="contact">
<div class="row">
<h2>We're happy to hear from you</h2>
</div>
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="find-us">How did you find us?</label>
</div>
<div class="col span-2-of-3">
<select name="find-us" id="find-us">
<option value="friends" selected>Friends</option>
<option value="search">Search engine</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Newsletter?</label>
</div>
<div class="col span-2-of-3">
<input type="checkbox" name="news" id="news" checked>Yes, please
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form Section End -->
<!-- Footer Start -->
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li>About us
</li>
<li>Blog
</li>
<li>Press
</li>
<li>iOS App
</li>
<li>Android App
</li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-icons">
<li><i class="ion-social-facebook"></i>
</li>
<li><i class="ion-social-twitter"></i>
</li>
<li><i class="ion-social-googleplus"></i>
</li>
<li><i class="ion-social-instagram"></i>
</li>
</ul>
</div>
</div>
<div class="row">
<p>
Healthy Foods © 2016-2017
</p>
</div>
</footer>
<!-- Footer End -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
<script src="js/jquery-3.1.1.slim.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/gmaps.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Please find below snippet just uncomment
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
this min js it'll required to other js work.
$(document).ready(function() {
debugger;
$('.js--section-features').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
}, {
offset: '60px;'
});
/* Scroll on buttons*/
$('.js--scroll-to-plans').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-plans').offset().top
}, 1000);
});
$('.js--scroll-to-start').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-features').offset().top
}, 1000);
});
/* Navigation scroll*/
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
/* Animations on scroll */
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-2').waypoint(function(direction) {
$('.js--wp-2').addClass('animated fadeInUp');
}, {
offset: '50%'
});
$('.js--wp-3').waypoint(function(direction) {
$('.js--wp-3').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-4').waypoint(function(direction) {
$('.js--wp-4').addClass('animated pulse');
}, {
offset: '50%'
});
});
<script src="//code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<div class="row">
<img src="img/logo-white.png" alt="Omni Food Logo" class="logo">
<img src="img/logo.png" alt="Omni Food Logo" class="logo-black">
<ul class="main-nav">
<li>Food delivery
</li>
<li>How it works
</li>
<li>Our cities
</li>
<li>Sign up
</li>
<li>Conact Us
</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#plans">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#features">Show me more</a>
</div>
</header>
<!-- Food Fast Section Title -->
<section class="js--section-features" id="features">
<div class="row">
<center>
<h2>Get food fast — not fast food.</h2>
</center>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</div>
<!-- Get Food Fast Section Content -->
<br>
<div class="row js--wp-1">
<div class="col span-1-of-4 box">
<i class="ion-calendar icon-big"></i>
<h3>Up to 365 days/year</h3>
<p class="section-content">Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-clock icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p class="section-content">You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% organic</h3>
<p class="section-content">All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-android-cart icon-big"></i>
<h3>Order anything</h3>
<p class="section-content">We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<!-- Get Food Fast Section Content -->
<!-- Favorite Meals Section -->
<section class="section-meals">
<!-- Row 1 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/3.jpg" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<!-- Row 2 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<!-- Favorite Meals Section End -->
<!-- How it works Section -->
<section class="section-steps" id="works">
<div class="row">
<h2>How it works - Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="img/app-iPhone.png" alt="Omifood app on iPhone" class="app-screen js--wp-2">
</div>
<div class="col span-1-of-2 steps-box">
<div class="work-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="work-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="work-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
</div>
</div>
<!-- How it works Section End -->
<section class="section-cities js--wp-3" id="cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<!-- Lisbon -->
<div class="row">
<div class="col span-1-of-4 box">
<img src="img/lisbon-3.jpg" alt="Lisbon">
<h3>Lisbon</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
1600+ happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
60+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_lx
</div>
</div>
<!-- San Francisco -->
<div class="col span-1-of-4 box">
<img src="img/san-francisco.jpg" alt="San Francisco">
<h3>San Francisco</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+3700 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
160+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_sf
</div>
</div>
<!-- Berlin -->
<div class="col span-1-of-4 box">
<img src="img/berlin.jpg" alt="Berlin">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+2300 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
110+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_berlin
</div>
</div>
<!-- London -->
<div class="col span-1-of-4 box">
<img src="img/london.jpg" alt="London">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+1200 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
50+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_london
</div>
</div>
</div>
</section>
<!-- Cities Section End -->
<!-- Testimonials Section Start -->
<section class="section-testimonials">
<div class="row">
<h2>Our customers can't live without us</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
<cite><img src="img/customer-1.jpg" alt="Customer 1">Alberto Duncan</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
<cite><img src="img/customer-2.jpg" alt="Customer 2">Joana Silva</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
<cite><img src="img/customer-3.jpg" alt="Customer 3">Milton Chapman</cite>
</blockquote>
</div>
</div>
</section>
<!-- Testimonials Section End -->
<!-- Signup Section Start -->
<section class="section-plans js--section-plans" id="plans">
<div class="row">
<h2>Start eating healthy today</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Premium</h3>
<p class="plan-price">$399 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 13.30$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Pro</h3>
<p class="plan-price">$149 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 14.90$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal 10 days/month</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Starter</h3>
<p class="plan-price">19$ <span>/ meal</span>
</p>
<p class="plan-price-meal"> </p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 pm</li>
<li><i class="ion-ios-close-empty icon-small"></i>
</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section End -->
<!-- Form Section Section -->
<div class="map-box">
<div class="map"></div>
<div class="form-box" id="contact">
<div class="row">
<h2>We're happy to hear from you</h2>
</div>
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="find-us">How did you find us?</label>
</div>
<div class="col span-2-of-3">
<select name="find-us" id="find-us">
<option value="friends" selected>Friends</option>
<option value="search">Search engine</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Newsletter?</label>
</div>
<div class="col span-2-of-3">
<input type="checkbox" name="news" id="news" checked>Yes, please
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form Section End -->
<!-- Footer Start -->
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li>About us
</li>
<li>Blog
</li>
<li>Press
</li>
<li>iOS App
</li>
<li>Android App
</li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-icons">
<li><i class="ion-social-facebook"></i>
</li>
<li><i class="ion-social-twitter"></i>
</li>
<li><i class="ion-social-googleplus"></i>
</li>
<li><i class="ion-social-instagram"></i>
</li>
</ul>
</div>
</div>
<div class="row">
<p>
Healthy Foods © 2016-2017
</p>
</div>
</footer>
I've searched and searched and can't seem to find my issue. I apologize if this is answered somewhere else. I inherited a "simple" site that needs scrollspy implemented and I can't get anything to work for the life of me.
Here are some excerpts from the code:
HTML NAV
<div class="row" style="width:100%" id="topnav">
<nav id="anchored" role="navigation">
<ul class="nav top-menu fade-in">
<li class="mission_anchor">SERVICES</li>
<li class="stories">ABOUT</li>
<li class="supporters_anchor">REQUEST DEMO</li>
</ul>
</nav>
</div>
<br />
SAMPLE OF FIRST "SERVICES DIV"
<section class="module content">
<div id="services" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>HOW SUPER AGENT MARKETING CAN HELP YOUR AGENTS</h1>
<br />
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#topnav").on("activate.bs.scrollspy", function(){
alert('smomething happened')
});
$('#topnav').affix({
offset: {
top: 0
}
});
$('body').scrollspy({ target: '#topnav' });
<br />
Full demo site can be found here:Demo Site
Any help would be greatly appreciated as I'm sure it is probably something minor I am overlooking but haven't been able to find in 6 hours of playing with it.
in order to use bootstrap scrollspy your navigation have to be as bootstrap's navigation .
build your NAV as this link below and it will work
http://getbootstrap.com/components/#navbar
try the below example.
$(function(){
$('body').scrollspy({ target: '#myNav' })
})
section > div[id]{
height:800px;
padding-top:50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav id="myNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="mission_anchor active">SERVICES</li>
<li class="stories">ABOUT</li>
<li class="supporters_anchor">REQUEST DEMO</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="module content">
<div id="services" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Services Section</h1>
</div>
</div>
<section>
<section class="module content">
<div id="about" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>About Section</h1>
</div>
</div>
<section>
<section class="module content">
<div id="demo" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Demo Section</h1>
</div>
</div>
<section>
So I'm trying to do this example from Zurb, but when I create the pie chart (even when I copy and paste the code they have to show the example), the chart goes crazy and tries to fill up the entire page. I know that it tries to take up the entire width of the element it's under, but then when I resize the width of the element, the chart only shrinks in size, but doesn't move back up, so ultimately, it's still taking up the entire space.
This is the main code:
<div style="margin-left: 15px">
<h4>Points: 3.75</h4>
<span>Rank 4</span>
<div class="progress success basic">
<span class="meter" style="width: 97%">Top: 97%</span>
</div>
<span>Tutored 7 times</span>
<span>Missed 2 tutoring sessions</span>
<div class="row graphs">
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example1">
<li data-value="60">Water Buffalo</li>
<li data-value="20">Bison</li>
<li data-value="12">Sheep</li>
<li data-value="32">Goat</li>
<li data-value="50">Shetland Pony</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example2" data-options="{"donut":"true"}">
<li data-value="60">Pepperoni</li>
<li data-value="20">Sausage</li>
<li data-value="12">Cheese</li>
<li data-value="32">Mushroom</li>
<li data-value="50">Chicken</li>
<li data-value="24">Other</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example2"></div>
</div>
</div>
</div>
</div>
</div>
My css which is under the head:
<link href="/res/css/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css"/>
And js which is on the bottom of the page:
<script src="/res/js/pizza.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/res/js/vendor/snapsvg.min.js"></script>
This is how it looks like:
Edit: Ok, so apparently when I name the id of the pie chart to 'donut', it works for some reason. I tested it by changing the ids, and only donut seems to work right now, but this won't work for me, because I have multiple pie charts needing to be shown.
Edit2: Seems like adding the style max-height: 480px seems to be a temporary fix.
`
Points: 3.75
Rank 4
<div class="progress success basic">
<span class="meter" style="width: 97%">Top: 97%</span>
</div>
<span>Tutored 7 times</span>
<span>Missed 2 tutoring sessions</span>
<div class="row graphs">
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example1">
<li data-value="60">Water Buffalo</li>
<li data-value="20">Bison</li>
<li data-value="12">Sheep</li>
<li data-value="32">Goat</li>
<li data-value="50">Shetland Pony</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example2" data-options="{"donut":"true"}">
<li data-value="60">Pepperoni</li>
<li data-value="20">Sausage</li>
<li data-value="12">Cheese</li>
<li data-value="32">Mushroom</li>
<li data-value="50">Chicken</li>
<li data-value="24">Other</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example2"></div>
</div>
</div>
</div>
</div>
'donut' is in your code in data-options
Your css class 'large-10 small-8 columns' is not defined in the pizza.css, maybe you need another file like : foundation.css.
If you don't want to add that big file, try to replace or just create a new css class
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
By
<div style="width: 200px; height: 200px;">
<div id="example1"></div>
</div>
or by the size that you want.
I want to stick a div on top when scrolling the window.
Looks like Magellan of Foundation provides similar behavior. But I want to stick my custom elements(the div with attribute data-magellan-expedition="fixed") on top instead of Sub-Nav in Magellan's example.
<body>
<!-- Header and Nav -->
<nav id="nav" class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Foundation Magellan
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Sitemap</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active" >Item1</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Login</li>
</ul>
</section>
</nav>
<!-- End Header and Nav -->
<!-- Main Feed -->
<div data-magellan-expedition="fixed" >
<div id="calendar" class="row">
<dl id="calendar-per-day" class="sub-nav">
<script>
someCodeToCreateCalendar();
</script>
</dl>
<hr>
</div>
<div class="row">
<div class="large-12 columns">
<div id="baidumap"
style="height:300px; overflow: hidden; margin: 0;"></div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns">
<p>
very long content can be scrolled............
</p>
</div>
<div class="large-3 columns">
<div class="row">
<div class="large-11 large-centered columns">
<h4>Right side content</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-5 columns">
<p>© 2013 All Rights Reserved</p>
</div>
<div class="large-7 columns">
<ul class="inline-list right">
<li>About</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is full my code to try my thought. I want the calendar and map always stick on top when scrolling the window. But it does not work at all. Does anybody know how to do it?
Use CSS
.div-to-stick {
postion:fixed;
}
This will stick it to the top of the page on scroll.