Okay so my website has a video in the background of the actual content, example can be seen at my site here:
http://www.thespire.net/
How would I go around placing an image OVER the video while the video is still playing? I've tried incorporating it in JavaScript and within some of the tags but it always messes up the formatting of my webpage.
HTML:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href='https://fonts.googleapis.com/css?family=Poppins:400,600' rel='stylesheet' type='text/css'>
<title>The Spire Network | Home</title>
</head>
<body>
<div class="header_wrapper">
<div class="header">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>FORUMS</li>
</ul>
</div>
<div class="logo">
<a href="http://www.thespire.net/forums">
<img src="spirelogo.png" alt="LOGO" height="120px" width="120px" style="margin-left: 50px; margin-top: -25px; text-decoration: none; color: white;">
</a>
</div>
</div>
<div id="subheader" class="section bot light">
<div class="info">
</div>
<video poster="background.jpg" autoplay loop class="bgimage">
<source src="opvp.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
</div>
<div class="container">
<div class="section both light">
<div class="content_wrapper">
<div class="section group">
<div class="col span_4_of_4">
<h1>Welcome to The Spire Network!</h1>
<p>The Spire Network is one of the most ambitious servers in all of Minecraft. We have a wide range of plugins and features that will keep you greatly entertained! We also offer a wide-range of donation perks which are available on our donation page which you can purchase to support the server and get yourself some awesome rewards for showing your appreciation and supporting us in this great endeavor!<br>Why not check out The Spire Network by placing IP address found below into your Minecraft Client!</p>
<input type="text" value="mc.thespire.net" class="address_input" readonly></input>
</div>
</div>
</div>
</div>
<div class="section both dark">
<div class="content_wrapper">
<div class="section group">
<div class="col span_2_of_4 left">
<h1>Get the most of the server with ranks!</h1>
<p>Ranks in The Spire Network are the things that define you from other players, they show that you individually have stepped up and supported the server by donating! If you are interested in supporting the server, click the "Donate Now" button to get started!</p>
Donate now
</div>
<div class="col span_2_of_4">
</div>
</div>
</div>
</div>
<div class="section both light">
<div class="content_wrapper">
<div class="section group">
<div class="col span_2_of_4">
</div>
<div class="col span_2_of_4 left">
<h1>Looking for support?</h1>
<p>Didn't recieve your donation? Did you get banned without any reason or for something you didn't do? Did someone harass you or bully you and wasn't punished for it? Visit our TeamSpeak or click the button below to contact a member of staff about the problem you have and we will be more than happy to help.</p>
Get help
</div>
</div>
</div>
</div>
<div class="section both dark">
<div class="content_wrapper">
<div class="section group">
<div class="col span_4_of_4 center">
<h1>Got a great idea for our server?</h1>
<p>Ideas are great for the server! New ideas open up many different paths for the server and give you, the player, a new objective to aim for! Suggestions can be anything from new plugin suggestions to ways our website could be improved! Click the button below to send a recommendation for the server!</p>
Submit your idea
</div>
</div>
</div>
</div>
</div>
</body>
</html>
i can see that you have a div called info :
<div class="info"> </div>
if you add this css:
.info {
background: rgba(0, 0, 0, 0) url("http://www.thespire.net/spirelogo.png") no-repeat scroll 0 0;
}
If you want to fully cover the slider then you need more customization.
Related
I got a site form my html teacher, he asked me to check it and fix any problems if they are there. While I fixted some, there is still one big one that I can't figure out. It takes a long time (around 30 seconds) to load the site completly. Everything loads correctly, exapt the navigation menu and a youtube video. I found the source of the problem, it has something to do with the JavaScript code. I don't understand JavaScripy, so I can't figure out the problem. When I delete the JavaScript code, the site loads, but the navigation menu and the video don't, not at all to be exact. There is another JavaScript file, but I don't think it has anything to do with this, and it's to long to post here, so you can download the file here. Here is the css file.
The last 10 lines of JavaScript code is the problem.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magic-Fire® by Safretti - Home - Safretti Magic-Fire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png">
<link rel="stylesheet" href="./assets/css/style.css?v=1501504031">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1301951-24', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="viewport">
<div class="page" id="page-18027">
<header class="block-4-1 v-0" data-sticky="sticky"><div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div class="logo">
<a class="media-1" href="./index.html"><img src="./assets/images/safretti-magicfire-fireplaces-logo-white.svg"></a>
</div>
<div class="menu">
<a class="handler" href="#">
<div></div>
<div></div>
<div></div>
</a>
<div class="mobile-menu block-4-1-mobile-menu v-0">
<div class="outer">
<div class="inner">
<div class="menu-1 menu-menu-1"><ul> <li class="active">Home</li><li>Magic-Fire?</li><li class="">Mistero<ul class="" style="height: 179px;"><li>Mistero 500</li><li>Mistero 1000</li><li>Mistero 1500</li><li>Mistero 2000</li><li>Mistero customized</li></ul> </li><li class="">Incanto<ul class="" style="height: 179px;"><li>Incanto 1000</li><li>Incanto 1500</li><li>Incanto 2000</li><li>Incanto 2500</li><li>Incanto customized</li></ul></li><li>Customized</li><li>References</li><li>About Safretti</li><li>Contact</li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></header>
<section id="block-39-848428" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="//www.youtube.com/embed/U5RHhah4poI?enablejsapi=1&wmode=transparent" allowfullscreen></iframe>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-51-848431" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="https://www.youtube.com/embed/U5RHhah4poI?rel=0&autoplay=1&controls=0&showinfo=0" allowfullscreen></iframe>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-76-206454" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h1 class="heading-2">The greatest contrast in the world brought together by state of the art technique.</h1>
</div>
</div>
</div>
</div>
</section>
<section id="block-36-219665" class="v-0">
<div class="container">
<div class="row equalize">
<div class="col col-md-6">
<a class="media-2" data-size="480x0" href="./what-is-magic-fire-/incanto-old/index.html">
<img src="./assets/images/home-1c.480x0.jpg">
</a>
<h3 class="heading-3">INCANTO</h3>
<div class="text-2"><p>Incanto is the Magic-Fire Mistero (see description Mistero) provided with a housing so it can be easily integrated in several projects.
</p></div>
<a class="button-2" href="./incanto/index.html">more info ></a>
</div>
<div class="col col-md-6">
<a class="media-2" data-size="480x0" data-position="center-middle" href="./what-is-magic-fire-/mistero-old/index.html">
<img src="./assets/images/home-1b.480x0.jpg">
</a>
<h3 class="heading-3">MISTERO</h3>
<div class="text-2">
<p>Mistero is an electrical fire. The Magic-Fires are equipped with water reservoirs. An evapor<span style="color: #999999;">ator turns t</span>he water into fine water mist. By illuminating the mist you will get a truly realistic and lively smoke / flame effect.</p>
</div>
<a class="button-2" href="./mistero/index.html">Available in the following sizes</a>
</div>
</div>
</div>
</section>
<section id="block-76-956792" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h2 class="heading-2">
<span style="font-family: raleway-thin; color: #ffffff;">ON DEMAND - CUSTOM MADE</span>
</h2>
<div class="text-2">
<p><span style="font-family: raleway-regular; color: #ffffff; font-size: 12px;"><span style="color: #999999;">The Magic-Fire firespaces are also available in on demand custom made solutions. Specialy for you as furniture or interior designer or architect if you want something unique for your project. Interested? </span><br /><span style="color: #999999;">Please</span><span style="font-family: raleway-bold;"><strong><span style="color: #ffffff;"> click here</span></strong></span><span style="color: #999999;"> for more information or</span> <strong><span style="font-family: raleway-bold;"><span style="color: #ffffff;">contact</span></span></strong> <span style="color: #999999;">us for more information.</span></span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="block-8-2 v-0">
<div class="container">
<div class="row">
<div class="col">
<h3 class="heading-3">Safretti BV - Metaalstraat 3a/3c - 7483 PD Haaksbergen - The Netherlands - ICC nr.: 08130256 - VAT nr.: NL8138.45.245.B01</h3>
</div>
</div>
</div>
</section>
<section class="block-55-1 v-0">
<div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div>
<div>
<div class="media-1">
<img src="./assets/images/icon-phone.svg">
</div>
<div class="text-6"><p>0031 (0)53 574 2554
</p></div>
</div>
<div>
<div class="media-1">
<img src="./assets/images/icon-email.svg">
</div>
<div class="text-6"><p><u>info#safretti.com</u>
</p></div>
</div>
</div>
<div>
<div>
<a class="media-1" href="http://www.facebook.com/safretti" target="_blank">
<img src="./assets/images/icon-facebook.svg">
</a>
<a class="media-1" href="http://nl.linkedin.com/in/safretti-bv-23172931" target="_blank">
<img src="./assets/images/icon-linkedin.svg">
</a>
<a class="media-1" href="http://nl.pinterest.com/safretti/" target="_blank">
<img src="./assets/images/icon-pinterest.svg">
</a>
<a class="media-1" href="http://www.youtube.com/channel/UCkN0NWaLeQts786gy6XkSkQ" target="_blank">
<img src="./assets/images/icon-youtube.svg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="./assets/js/script.js?v=1501504031"></script>
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
<script>$(window).on('load', function() {
new Menu({selector: '#page-18027 .block-4-1 .menu, [data-page_id="page- 18027"] .block-4-1 .menu'});
new Cover({selector: '#page-18027 #block-51-848431 .media-4, [data- page_id="page-18027"] #block-51-848431 .media-4'});
new Sticky({selector: '#page-18027 [data-sticky], [data-page_id="page- 18027"] [data-sticky]'});
new Scale({selector: '#page-18027 [class*="heading-"], [data-page_id="page-18027"] [class*="heading-"], #page-18027 [class*="text-"], [data-page_id="page-18027"] [class*="text-"]'});
new Anchor({selector: '#page-18027 a[href^="#"], [data-page_id="page-18027"] a[href^="#"]'});
new Popup({selector: '#page-18027 .block-55-1 a[href][target="popup"], [data-page_id="page-18027"] .block-55-1 a[href][target="popup"]'});
new Equalize({selector: '#page-18027 #block-36-219665 .equalize, [data- page_id="page-18027"] #block-36-219665 .equalize'});
new Video({selector: '#page-18027 #block-51-848431 video, [data- page_id="page-18027"] #block-51-848431 video, #page-18027 #block-51-848431 iframe, [data-page_id="page-18027"] #block-51-848431 iframe'});
});
</script>
</body>
Check your style.css if you have many imports. That is something that can cause long loading times. Otherwise if your hosting it localy try to move it to somewhere else. Or check if you have many animations (js).
Edit: Actually the pageloaded very fast on my side. I mean I hadnt the CSS but it lokks like its not the html/js code. Could you post the CSS code too inside your question?
get rid of the large space in the URL in this line.
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
change to
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
it is best practice to not have spaces in URL
see Google Maps API Best Practices
I have a testimonial Slider that did slide beautifully a week ago and seems to have stopped working without my changing anything. The control-indicators are also not functioning. The carousel is stuck on the first item.
I've checked a million examples and validated the HTML and am going insane. Note that one carousel is inside another rather static carousel. When I separate them, the testimonials disappear. Any help would be appreciated.
Here's the HTML, the CSS is merely formatting and positioning and I have not altered the bootstrap.js
<!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">
<title>Wylie For Weight Loss</title>
<!-- Custom stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom stylesheet -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- ====== Header Section ====== -->
<header>
<!-- ====== Menu Section ====== -->
<div id="main-nav1" class="navbar navbar-default navbar-fixed-top navbar-fixed-carousel nav-bar-scroll" role="navigation">
<div class="navbar-collapse collapse navbar-right">
<ul id="ulnav" class="nav navbar-nav target-changer">
<li>For MedSpas</li>
<li><span style="color: #FFB718;">For WeightLoss Clinics</span></li>
</ul>
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="index.html"><img src="images/logo-dark.png" class="img-responsive" id="nav-img"></a>
<!-- end .navbar-header -->
</div>
<div class="navbar-collapse collapse navbar-right">
<ul id="ulnav" class="nav navbar-nav">
<li>Home</li>
<li>The System</li>
<li>Pricing</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
<!-- end .navbar-collapse -->
</div>
<!-- end .container -->
</div>
<!-- end #main-nav -->
<!-- ====== End Menu Section ====== -->
</header>
<!-- ====== End Header Section ====== -->
<div id="top">
<div id="myCarousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background: url('images/5.jpg') 50% 0 no-repeat fixed;">
<div class="center-container">
<div class="container" style="text-align:center;">
<div class="slider-content">
<h2 class="fadeInUp animated delayTwo" style="margin-bottom:0px;">Wylie Business System</h2>
<p class="fadeInUp animated delayThree">The only business management system your weight loss clinic will need.</p>
<form class="form-inline" action="weightloss_form-to-email.php" method="post" enctype="multipart/form-data">
<div class="col-md-6">
<input name="name" type="text" id="name" class="sm-form-control required" placeholder="Your name">
</div>
<div class="col-md-6">
<input name="email" type="text" id="email" class="required email sm-form-control" placeholder="Your email address">
</div>
<div style="text-align:center;">
<input type="submit" name="Send" value="Get a Demo" class="button button-orange" style="margin:0px; font-weight:bold;">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- end .top> .container -->
<div id="testimonialSlider" class="carousel slide" data-ride="carousel" style="margin-top: 0px;">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I was so happy to come across Will McKinty and Wylie Systems. The POS integrates so well into our clinic and any requested customizations have been implemented with ease. Once we transitioned our existing merchant account to one that
directly interfaces with Wylie POS, we were even able to save money on our credit transactions. Wylie always promptly responds to any communications which is also a big plus for me!</p>
<div class="testi-meta">
JASON SCHNEIDER
<span>Weight Loss Couture, St. Louis, Missouri</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I love how your POS has made our lives at our multiple locations easier to manage. It is user friendly for those that are not as technically inclined (like me). We love that we can do most record keeping and transactions in one place.
Prior to using your POS, we had to use many different types of software and applications. Now everything is more streamlined. As easy as it is to use, there are still some instances where I need a bit of advice on how to navigate or
improve upon our day to day record keeping, and you have demonstrated exemplary service by always responding to any 'emergencies' I may have in a friendly, quick and efficient manner!</p>
<div class="testi-meta">
JENNIVINE LEE
<span>Lumina Skin, San Francisco, CA</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>We purchased WyliePOS for our weight loss clinic here in Wyoming. The system has been a huge help in the operation of the business. Not only has it dramatically simplified things at the point of sale, the ‘back-end’ functionality has
made it easy to track inventories and financials (used to use QuickBooks). Also, ‘Wylie’ has added some very helpful custom features to the system, most notably a patient reporting tool, which tracks patient progress and enables automated
reporting to referring physicians.</p>
<div class="testi-meta">
SCOTT POPP
<span>Owner - Popp Chiropractic and Rehabilitation</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>Wylie’s Point of Sale system has been great for our business! They made sure we got up and going as quickly as possible and continue to have stellar after-service support. We also like that on an on-going basis they optimize the product
(recently added the ability to manage employee discounting)</p>
<div class="testi-meta">
TAMARA HAWK MPT
<span>Director of Therapies, Cardiac Rehab – Wyoming Medical Center</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I am glad that I connected with Wylie Systems, I think what I like most is their availability to help solve any concerns immediately– they have never let us down. In addition they have provided a constant stream of improvements to an
already great product. The POS is great – it really helps me keep track of and analyse sales without being tied to the office. Going back to the traditional cash register – or even the most modern version – would be a nightmare!</p>
<div class="testi-meta">
JOHN LESTER
<span>Point de Depart, Gatineau, Quebec</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>Wylie Systems Inc. has done several projects for Karrys to help us at the point of sale. The quality of their work and customer support following completion has been excellent.</p>
<div class="testi-meta">
PETER KERR
<span>VP Sales at Karrys Bros. Limited</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I was so happy to come across Will McKinty and Wylie Systems. The POS integrates so well into our clinic and any requested customizations have been implemented with ease. Once we transitioned our existing merchant account to one that
directly interfaces with Wylie POS, we were even able to save money on our credit transactions. Wylie always promptly responds to any communications which is also a big plus for me!</p>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#testimonialSlider" data-slide-to="0" class="active"></li>
<li data-target="#testimonialSlider" data-slide-to="1"></li>
<li data-target="#testimonialSlider" data-slide-to="2"></li>
<li data-target="#testimonialSlider" data-slide-to="3"></li>
<li data-target="#testimonialSlider" data-slide-to="4"></li>
<li data-target="#testimonialSlider" data-slide-to="5"></li>
<li data-target="#testimonialSlider" data-slide-to="6"></li>
</ol>
</div>
</div>
</div>
<!-- ====== End Footer ====== -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap 3.2.0 js -->
<script src="js/bootstrap.js"></script>
<!-- jQuery Parallax plugin -->
<script src="js/jquery.parallax-1.1.3.js"></script>
<!-- jQuery One Page Nav Plugin -->
<script src="js/jquery.nav.js"></script>
<script src="js/jquery.viewportchecker.js"></script>
<!-- Custom JS -->
<script src="js/site.min.js"></script>
</body>
</html>
Try to put this:
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 3000
});
});
replaced local copies of boostrap.css and bootstrap.js source with:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
and
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I have created a One page website, with a scroll down navbar. Meaning if I click on one of the links, the webpage will scroll down to the section based on which link was clicked on. The problem is if I were to click on the last navbar link which is contact us, the webpage will scroll all the way to the bottom of the page which it is supposed to do, however it buffers/or stalls at one point(meaning it does not scroll smoothly). How do I fix this?
I am using the latest version of google chrome.
The scrolling stall happens near the services section of the webpage. This only happens if I land on the page the first time or if I refresh the page. If I were to click on contact us, then go back to the top of the page where the navbar is located, and do this again, I do not get a scroll stall.
Below is the html code-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 traditional//EN">
<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>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('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
}, 950);
return false;
}
}
});
});
</script>
<link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bg">
<div class="topnav">
<a class="active" href="#Home">Home</a>
Who
Services
Portfolio
Contact
</div>
</div>
<div class="Who">
<h1 id="Who">Who are we ?</h1>
<p class="whodesc">Cabin is a website theme I created to demonstrate my skills as a front-end web developer. This website uses stock photos free of property and commercial rights.
</p>
<p class="whodesc">Cabin is a single page website that uses a scrollspy to navigate to different sections of the website.
</p>
<p class="whodesc">
Cabin is seperated into different sections, the first being home page with Navbar. Following straight after is the Who are we section which details what this website is about. After that we have a portfolio section where I have created an image gallery
with modal popup. When the user clicks on an image, a model is shown with both an image and brief description of the property.
</p>
<p class="whodesc">
Following after the portfolio section, the user is now brought over to see our services. Here we describe to the viewer/user what we do etc....
</p>
<p class="whodesc">
After scrolling some more, the user is then brought to our contact us page, which has a contact form. This contact form is split into a two columns, the first housing the google maps api, the second showing contact us form.
</p>
<p class="whodesc">Lastly we have the footer...</p>
<div class="Services">
<h1 id="Services">Services</h1>
<div class="leftcol">
<h2>Design/Build</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div>
<img src="houseOne.jpeg" class="img" alt="" >
</div><div class="rightcol">
<h2>Pre-construction Design and Estimating</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div>
<img src="design.jpg" class="img" alt="" ></div><div class="leftcol">
<h2>Construction Services</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div><img src="construction.jpeg" class="img" alt="" ></div>
</div>
<div class="Portfolio">
<h1 id="Portfolio">Portfolio</h1>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" class="thumbnail" alt="" style="width:100%">
<h3>26 Elgin Street</h3>
<p>Click picture for more information</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" class="thumbnail" alt="" style="width:100%">
<h3>26 Elgin Street</h3>
<p>Click picture for more information</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>
<div class="Contactus">
<h1 id="Contact">Contact Us</h1>
<div class="con">
<div style="text-align:Center">
<h3>Contact Form</h3>
<div style="text-align:Center">
<div style="text-align:left">
<div class="rws">
<div class="cols">
<div id="map" style="width:100%;height:500px"></div>
</div>
<div class="cols">
<form action="/action_page.php">
<label class="fname" for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label class="email" for="email">Email</label>
<input type="text" id="email" name="email" placeholder="Your email....">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p id="ft">Website created by Andrew B <br> Date created: 03/04/2016</p>
</div>
</div>
</body>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(25.7616798, -80.1917902);
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: myCenter,
zoom: 12
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlu8CXtmhjEntaf3I_IS0dMJQDRFvpw6U&callback=myMap"></script>
</html>
I want the header to stick on scroll as shown here. (http://davist11.github.io/jQuery-Stickem/)
Source site (https://github.com/davist11/jQuery-Stickem)
I have a full screen video at the top of the page playing and I want to scroll and have the header stick when it hits it. Similarly there is a small border at the top on the other pages I want the scroll to miss then stick when it reaches this point.
Here is what it currently looks like
http://jsfiddle.net/wp7ornmv/
EDIT: Scroll on the HTML window
<div id="logo">
</div>
<div id="intro">
<video autoplay loop poster="images/work/bluesky.jpg" id="bgvid">
<source src="video/Peri_CloudLoop_BlueTV.webm" type="video/webm">
<source src="video/Peri_CloudLoop_BlueTV_3.mp4" type="video/mp4">
</video>
</div>
<div id="container">
<div id="content">
<div id="Mbackground">
<div id="Ncontainer">
<div id="Ncontain">
<div id="Nlogo">Logo
</div>
<div id="Nmenu">
<div class="Nlink">Contact
</div>
<div class="Nlink">About
</div>
<div class="Nlink">Work
</div>
</div>
</div>
</div>
</div>
<div id="Mbackground">
<div id="Mbody">
<div class="Mrow">
<div class="Mcontainer">
<a href="project.html" class="transition">
<span class="link-spanner"></span>
</a>
<div id="Mimageone" class="Mimage">
</div>
<div id="Mborderone" class="Mborder">
</div>
<div id="Mboxone" class="Mbox">
<div class="Mtext">
<div class="Mtitle">Title
</div>
<div class="Msubtitle">Subtitle
</div>
<div class="Mdescrip">Descript
</div>
</div>
<div class="Meye">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footerhalf1">
</div>
<div id="footerhalf2">
<div id="footercontents">Made by
</div>
</div>
</div>
This is a javascript supported behavior by stickem. You may find it HERE
Just make sure your container has a position relative and your sidebar has a position:fixed; top:0; left:auto and you will have it done.
This technique is quite common on websites running advertisements on a side panel. There is a lot more intricate information about this online and I assure you, using the source for the demo you provided along with the stickem jquery library, you will be done in no time.
Good luck
Alright, I followed all the instructions on the page, or so I thought, but I still can't get the Off Canvas to work in my Foundation?
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script>
$(document).foundation();
</script>
That's how I'm instructed to put it in, as per the website. http://foundation.zurb.com/docs/components/offcanvas.html
Or so I thought? Also
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<section class="main-section">
<!-- content goes here -->
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
That's all done as per instructed?
What I end up with is the menu showing, but when I click on the button for the off canvas to pop, it doesn't pop?
EDIT
Alright, so I tried what you suggested, and it did pop. BUUUT rather than pop out from the side, it popped, shoving everything DOWN, and made this tiny scroll bar?
Alright, this was what it looked like, upon entering your code. THen...
When I clicked it, this happened...
See all that white space? The heading Welcome to Foundation is one mouse scroll down. See the little bitty scroll bar next to the popped menu? =/
Ok i got it.
Move $(document).foundation(); to onload in the body tag. Or at least put it last inside body tags. You can leave the .js references inside head tags. I did this way:
<html>
<head>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<link rel="stylesheet" href="css/foundation.css">
</head>
<body onload="$(document).foundation();">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<section class="main-section">
<!-- content goes here -->
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</body>
I hope it works!
PD: It's really frustrating that i had 2 comments trying to correct my mistake, and zero answers trying to solve the question.
I would suggest copy and pasting all the following code into a brand new html page and checking it. Then you can either just build off it or figure out what the problem is on your old code.
Make sure that all the linked files (css and js) are getting loaded. You might need to change the paths on the example. It is absolutely essential to make sure they are getting accessed. Use your web browser inspector to see if your getting any 404 (not found) errors.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h3>We’re stoked you want to try Foundation! </h3>
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<div class="row">
<div class="large-4 medium-4 columns">
<p>Foundation Documentation<br />Everything you need to know about using the framework.</p>
</div>
<div class="large-4 medium-4 columns">
<p>Foundation on Github<br />Latest code, issue reports, feature requests and more.</p>
</div>
<div class="large-4 medium-4 columns">
<p>#foundationzurb<br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
just add this CSS code:
.inner-wrap {
min-height: 100vh;
}