I have a website where i have added AOS animation.
<div class="row-div">
<div class="inner-row-div" data-aos="fade-up" data-aos-duration="1200" data-aos-easing="ease-in-out">
<div class="teams" style="background-image: url('assets/images/sample.jpg');">
</div>
<div class="img-div">
Sample Text<br>Sample Text
</div>
</div>
<div class="inner-row-div" data-aos="fade-up" data-aos-duration="1000" data-aos-easing="ease-in-out">
<div class="teams" style="background-image:url('assets/images/sample.jpg');">
</div>
<div class="img-div">
sample<br>sample
</div>
</div>
and in the script tag :
<script>
AOS.init();
</script>
whenever i minimize the browser window it started working, but if i refresh my site it never work, i also have used latest CDN and js
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
Related
I'm just starting to learn the code, going through the courses.
I've made the react app, and have a basic HTML template to show up before the bundled.js is loading (for slow connection)
<link href="https://fonts.googleapis.com/css?family=Public+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="..." crossorigin="anonymous" />
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="..." crossorigin="anonymous"></script>
<div id="app">
<header class="header-bar bg-primary mb-3">
<div class="container d-flex flex-column flex-md-row align-items-center p-3">
<h4 class="my-0 mr-md-auto font-weight-normal"><a class="text-white" href="/">ComplexApp</a></h4>
</div>
</header>
<div class="py-5 my-5 text-center">
<div class="dots-loading">
<div></div>
</div>
</div>
<footer class="border-top text-center small text-muted py-3">
<p>
<a class="mx-1" href="/">Home</a>
<!-- -->|
<!-- -->
<a class="mx-1" href="/about-us">About Us</a>
<!-- -->|<a class="mx-1" href="/terms">Terms</a>
</p>
<p class="m-0">
Copyright © 2020
<!-- -->
ComplexApp. All rights reserved.
</p>
</footer>
</div>
In Chrome, it loads nicely:
But for some reason in Firefox, the page is blank until the js is fully loaded.
Network tab shows that CSS and fonts are loading all the time in parallel with js
What might be the problem? is it some Firefox-specific stuff? Can it be fixed somehow?
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 got problem with modals in my portfolio website. They dont show up. Trying to search for similar issues but non of answer help me in this case. I'm using bootstrap and jquery 3.3.1 and on that config modal dont show up. However when I change jquery to older for example 2.2.4 modals working fine but in my portfolio gallery with images sorting by class using script i written animation slideUp/slideDown stop working even when they was working on jquery 3.3.1.
Here is the head:
<head >
<!-- HTML -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- SKRYPTY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/filtr.js"></script>
<script src="js/scroll.js"></script>
<!-- CZCIONKI -->
<link href="https://fonts.googleapis.com/css?family=Nova+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet">
Portfolio part of body:
<div class="container" id="portfolioSection">
<h1>PORTFOLIO<br>-----</h1>
<div class="kategorie">
<p class="kategoria" id="all">All</p>
<p class="kategoria" id="www">Web Design</p>
<p class="kategoria" id="logos">Logo</p>
<p class="kategoria" id="opak">Opakowania</p>
<p class="kategoria" id="druk">Materiały do druku</p>
<p class="kategoria" id="3d">3D</p>
</div>
<div class="portfolio-container">
<div class="portfolio-item-container portfolio-item druk">
<img class="img-responsive" src="img/lordis.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item www">
<img class="img-responsive" src="img/strona.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item logos">
<img class="img-responsive" src="img/sr.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item 3d ">
<img class="img-responsive" src="img/butelka.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item opak">
<img class="img-responsive" src="img/Opakowania.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
</div>
</div>
And script for gallery fillter:
$(document).ready(function () {
$('.kategoria').click(function () {
var kategorie = $(this).attr('id');
if (kategorie == 'all') {
$('.portfolio-item').slideUp(390);
setTimeout(function () {
$('.portfolio-item').slideDown(390);
}, 400);
} else {
$('.portfolio-item').slideUp(390);
setTimeout(function () {
$('.' + kategorie).slideDown(390);
}, 400);
}
});
Right now I was trying just to add a regular modal example from bootstrap site.
Maybe anyone had a similar issue and is able to help.
--EDIT--
And here is modal button:
<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>
But i cant past modal as it is because showing me some error in code but i dont see it. I just copy the example modal from bootstrap page -> components -> modal.
The edistor showing only that:
Modal title × ... Close Save changes
First post. I've been web designing as a minor part of my role for quite some time and rely on using CSS templates extra. Just to give you an idea of where I am. I've recently utilised a template that contains a "mini menu" (a dropdown navigiation menu that only shows when the width of the page is narrow). For some reason the navigation is not working. If I select a page in the list, it does not navigate to the page. This is probably a real newbie question, but I've tried playing with the code, and I can't for the life of me get it too work.
Below is the HTML I have. Any suggestions would be very much appreciated.
<!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="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.mi
</body>
</html>
The JS folder contains,
bootstrap.js
html5shiv.js
jquery-1.9.1.js
modernizr-2.6.2-respond-1.1.0.min.js
respond.min.js
I get the following errors when using Inspect in Google Chrome;
Failed to load resource: the server responded with a status of 404
(Not Found)
index.html:28 Uncaught ReferenceError: $ is not defined
at index.html:28 /favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found)
Not sure since your code is not complete here, but I think you are using document.ready, before jQuery is loaded. Your
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
must be at the end of the document, after you imported all your libraries. And jQuery has to be the very first one of the list (even before jquery.mobilemenu), since the others will use it.
You can open the console to check if there is an error like $ is unknown, that means either your code or the libraries are loaded before jQuery.
Here an updated version of your code with the librairies in the right order.
<!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="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</body>
</html>
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.