Hey there I took inspiration from this article for my slideshow. I worked with the source code from the website to make it my own and when I copy/pasted the html & css over to my project html & css files it doesn't seem to load.
I went over my code again and again but still haven't managed to solve the problem. It's working perfectly in the seperate html file but just not in my project file.
I would appreciate any help to solve this issue I'm having.
Screenshots:
Working in seperate file:
http://gyazo.com/712175106aeeb7b636b19937cf2c09c8
Project File where it doesn't appear to load or display:
http://gyazo.com/cc41a9cd0636c71dac6bb71edc4eff1a
Code for my project verision:
HTML
<!DOCTYPE html>
The Dark Lanes
<!-- Page Styling -->
<link href="css/Index.css" rel="stylesheet" type="text/css" />
<!-- Navigation -->
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<!-- Slideshow -->
<link href="css/Slider.css" rel="stylesheet" type="text/css" />
<!-- jmpress plugin -->
<script type="text/javascript" src="JavaScript/jmpress.min.js"></script>
<!-- jmslideshow plugin : extends the jmpress plugin -->
<script type="text/javascript" src="JavaScript/jmslideshow.js"></script>
<script type="text/javascript" src="JavaScript/autoplay.js"></script>
<!-- JQuery Plugin -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="JavaScript/modernizr.js"></script>
<!-- Twitter Plugin -->
<script type="text/javascript" src="JavaScript/Twitter.js"></script>
<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<div id="wrapper">
<!--<header>
<img src="Images/DarkLanes-Logo.png" alt="header"/>
</header> -->
<!-- Navigation -->
<ul id="menu">
<li>Home</li>
<li>News</li>
<li>Gigs</li>
<li>Music</li>
<li>
Biography
<ul>
<li>Band Profile</li>
<li>Member Profiles</li>
</ul>
</li>
`<li>
Media
<ul>
<li>Images</li>
<li>Videos</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- End of Nav -->
<div class="left">
<h3>The Dark Lanes</h3>
</div>
<div class="right"></div>
<!-- Start of Slideshow -->
<section id="jms-slideshow" class="jms-slideshow">
<div class="step" data-color="color-2">
<div class="jms-content">
<h3>Just when I thought...</h3>
<p>From fairest creatures we desire increase, that thereby beauty's rose might never die</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes.jpg" alt="image1 />
</div>
<div class="step" data-color="color-3" data-y="900" data-rotate-x="80">
<div class="jms-content">
<h3>Holy cannoli!</h3>
<p>But as the riper should by time decease, his tender heir might bear his memory</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/Stage.jpg" alt="image2" />
</div>
<div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">
<div class="jms-content">
<h3>The Rocker</h3>
<p>But as the riper should by time decease, his tender heir might bear his memory</p>
<a class="jms-link" href="videos.html">View Video!</a>
</div>
<img src="images/Darlanes.jpg" alt="image3" />
</div>
<div class="step" data-color="color-5" data-x="3000">
<div class="jms-content">
<h3>Supercool!</h3>
<p>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes2.jpg" alt="image4" />
</div>
<div class="step" data-color="color-1" data-x="4500" data-z="1000" data-rotate-y="45">
<div class="jms-content">
<h3>Did you know that...</h3>
<p>Thou that art now the world's fresh ornament and only herald to the gaudy spring</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes3.jpg" alt="image5" />
</div>
</section>
<div id="content">
<!-- Social Media Plugins -->
<div id="facebook">
<iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTDLmusic%2Fposts%2F634412299948671&width=300&height=258&colorscheme=dark&show_faces=true&header=false&stream=false&show_border=false&appId=1407117389534500"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:245px; background-color:#373737;">
</iframe>
</div>
<div class="twitter-timeline">
<a class="twitter-timeline" href="https://twitter.com/TheDarkLanes" data-widget-id="422456331014901760">Tweets by #TheDarkLanes</a>
</div>
<!-- End of Social Media Plugins -->
<div class="video">
<iframe width="600" height="480" src="https://www.youtube.com/embed/hEkpJMxci2Y" frameborder="0">
</iframe>
</div>
<!--Social Media Logos -->
<div class="social-mediabg">
<h3>The Dark Lanes</h3>
</div>
<div class="social-media">
<ul>
<li><img src="Images/facebook.png" alt="facebook"/></li>
<li><img src="Images/twitter.png" alt="twitter"/></li>
<li><img src="Images/youtube.png" alt="youtube"/></li>
<li><img src="Images/soundcloud.png" alt="soundcloud"/></li>
</ul>
</div>
</div>
<div id="footer">
<div class="SiteMap">
<ul>
<li>Home</li>
<li>News</li>
<li>Gigs</li>
<li>Music</li>
<li>Band Profile</li>
<li>Member Profiles</li>
<li>Images</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="copyright">
<div class = "copyright">
<h5>© 2014 - The Dark Lanes. All Rights Reserved.</h5>
</div>
</div>
</div>
</body>
CSS
.jms-slideshow {
position: relative;
width: 100%;
height: 650px;
margin-top: 10px;
margin: 0 auto;
}
.jms-wrapper {
width: 995px;
height: 650px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
border: 2px solid #fff;
border: 2px solid rgba(255, 255, 255, 0.9);
outline: none;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.color-1 {
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.color-2 {
background-color: #EBBBBC;
background-color: rgba(235, 187, 188, 1);
}
.color-3 {
background-color: #EED9C0;
background-color: rgba(238, 217, 192, 1);
}
.color-4 {
background-color: #DFEBB1;
background-color: rgba(223, 235, 177, 1);
}
.color-5{
background-color: #C1E6E5;
background-color: rgba(193, 230, 229, 1);
}
.step {
width: 995px;
height: 650px;
display: block;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.jms-content{
margin: 0px 0px 300px 20px;
position: relative;
clear: both;
}
.step:not(.active) {
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}
.step h3{
color: grey;
font-size: 52px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
margin: 0;
padding: 60px 0 10px 0;
}
.step p {
color: grey;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-size: 34px;
font-weight: normal;
position: relative;
margin: 0;
}
a.jms-link{
color: #fff;
text-transform: uppercase;
background: #969696; /* Old browsers */
background: -moz-linear-gradient(top, #969696 0%, #727272 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#727272)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #969696 0%,#727272 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #969696 0%,#727272 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #969696 0%,#727272 100%); /* IE10+ */
background: linear-gradient(top, #969696 0%,#727272 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#727272',GradientType=0 ); /* IE6-9 */
padding: 8px 15px;
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #444;
border-radius: 4px;
opacity: 1;
margin-top: 40px;
clear: both;
-webkit-transition: all 0.4s ease-in-out 1s;
-moz-transition: all 0.4s ease-in-out 1s;
-ms-transition: all 0.4s ease-in-out 1s;
-o-transition: all 0.4s ease-in-out 1s;
transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
opacity: 0;
margin-top: 80px;
}
.step img{
position: absolute;
right: 0px;
top: 0px;
}
.jms-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 0px;
z-index: 2000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.jms-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #777;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.3);
}
.jms-dots span.jms-dots-current:after{
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
.jms-arrows{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.jms-arrows span{
position: absolute;
top: 50%;
margin-top: -40px;
height: 80px;
width: 30px;
cursor: pointer;
z-index: 2000;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
left: -10px;
}
.jms-arrows span.jms-arrows-next{
background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
right: -10px;
}
/* Not supported style */
.jms-wrapper.not-supported{
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.jms-wrapper.not-supported:after{
content: 'The slideshow functionality is not supported on your device.';
padding: 0px 0px 30px 0px;
text-align: center;
display: block;
}
.jms-wrapper.not-supported .step{
display: none;
position: relative;
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
margin: 20px auto;
}
.jms-wrapper.not-supported .step:first-of-type{
display: block;
}
.jms-wrapper.not-supported .step:not(.active) a.jms-link{
opacity: 1;
margin-top: 40px;
}
You should be loading the jQuery before the jmpress plugin :)
jmpress is a jQuery plugin, and therefore wont work if you haven't loaded it before!
<!DOCTYPE html>
<head>
<title>RosePam Solutions Ltd</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="style_ie.css" />
<![endif]-->
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
<!-- load jQuery and the plugin -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>
<!-- jmpress plugin -->
<script type="text/javascript" src="js/jmpress.min.js"></script>
<!-- jmslideshow plugin : extends the jmpress plugin -->
<script type="text/javascript" src="js/jquery.jmslideshow.js"></script>
<script type="text/javascript" src="js/modernizr.custom.48780.js"></script>
<noscript>
<style>
.step {
width: 100%;
position: relative;
}
.step:not(.active) {
opacity: 1;
filter: alpha(opacity=99);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}
.step:not(.active) a.jms-link{
opacity: 1;
margin-top: 40px;
}
</style>
</noscript>
</head>
<body class="body">
<div class="content">
<section id="jms-slideshow" class="jms-slideshow">
<div class="step" data-color="color-2">
<img src="images/The Dark Lanes.jpg" alt="image1 />
<div class="jms-content">
<h3><span>Just when I thought...</span></h3>
<p><span>From fairest creatures we desire increase, that thereby beauty's rose might never die</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-3" data-y="900" data-rotate-x="80">
<img src="images/Stage.jpg" alt="image2" />
<div class="jms-content">
<h3><span>Holy cannoli!</span></h3>
<p><span>But as the riper should by time decease, his tender heir might bear his memory</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">
<img src="images/Darlanes.jpg" alt="image3" />
<div class="jms-content">
<h3><span>Supercool!<span></h3>
<p><span>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-5" data-x="3000">
<img src="images/The Dark Lanes3.jpg" alt="image5" />
<div class="jms-content">
<h3><span>Did you know that...</span></h3>
<p><span>Thou that art now the world's fresh ornament and only herald to the gaudy spring</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
</section>
<script type="text/javascript">
$(function() {
var jmpressOpts = {
animation : { transitionDuration : '0.8s' }
};
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
autoplay : true,
bgColorSpeed: '0.8s',
arrows : false
}));
});
</script>
</div>
</body>
Related
I am building currently my web-page on Github (Githug Page), and I am having some troubles with the top-nav menu. As you can see, when you scroll down, the menu disappears, and when you scroll up, it appears again. Nevertheless, I would like to make the behaviour much more simpler, and that is, to make it fixed with respect the header. In other words, I just want the menu to appear on top of the page, like another element more. I do not want the menu to follow the scrolling. Looks simple but I do not end up getting the result.
This is my current main.js.
(function($) {
var $window = $(window),
$body = $('body');
// Breakpoints.
breakpoints({
xlarge: [ '1141px', '1680px' ],
large: [ '981px', '1140px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ '321px', '480px' ],
xxsmall: [ null, '320px' ]
});
// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});
// Scrolly.
$('.scrolly').scrolly();
})(jQuery);
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header_nav").style.top = "0";
} else {
document.getElementById("header_nav").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
The index.html file, where you can see, the important sections are header and header_nav.
<!DOCTYPE HTML>
<!--
Photon by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Eduardo Alvarado</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="is-preload">
<!-- Header Menu -->
<section id="header_nav">
<nav id="nav">
<div id="navbar">
<ul>
<li><p style="color:white">Home</p></li>
<li><p style="color:white">Research</p></li>
<li><p style="color:white">Game-dev</p></li>
<li><p style="color:white">Photography</p></li>
</ul>
</div>
</nav>
</section>
<!-- Header -->
<section id="header">
<div class="inner">
<span><img src="/images/car_final_256_header.gif"></span>
<h1>Hi, I'm <strong>Eduardo Alvarado</strong>.</h1>
<h1>A passionate software engineer who develops intelligent<br />
cars during the day and loves to design<br />
game-focus art and applications in his spare-time.</h1>
<br />
<p>Want to contact me? Send me a message at alvaradopinero.eduardo#gmail.com.</p>
<ul class="actions special">
<li>Discover</li>
</ul>
</div>
</section>
<!-- One -->
<section id="one" class="main style1">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium imp-medium">
<header class="major">
<h2>Background</h2>
</header>
<p align="justify">I am a first year PhD Researcher at <a href='https://www.daimler.com/career/about-us/insights/research-development/'>Daimler AG</a> in Stuttgart, Germany. My research is centered on robust perception for human activity recognition. Prior joininig Daimler, I graduated with a master's degree in <b>Embedded Systems Engineering</b>, with a major in Artificial Intelligence and Autonomous Intelligent Systems from <a href='https://www.uni-freiburg.de/'>Albert-Ludwigs-Universität Freiburg</a>, and with a bachelor's degree in <b>Electronics and Automation Engineering</b> from <a href='https://www.uc3m.es/home'>Universidad Carlos III</a> in Madrid.</p>
</div>
<div class="col-6 col-12-medium">
<span class="image fit"><img src="images/profile_bg_1920_1080.png" alt="" style="padding-top: 12px" /></span>
</div>
</div>
</section>
<!-- Two -->
<section id="two" class="main style2">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium">
<ul class="major-icons">
<li><span class="icon solid style4 major fa-laptop-code"></span></li>
<li><span class="icon solid style2 major fa-microchip"></span></li>
<li><span class="icon solid style3 major fa-brain"></span></li>
<li><span class="icon solid style5 major fa-gamepad"></span></li>
</ul>
</div>
<div class="col-6 col-12-medium">
<p align="justify">I have dedicated my academic career to the field of robotics, with special interest in AI-based Perception and Behavior Planning applied to intelligent-mobility. I wrote my master's thesis at <a href='https://www.bosch.com/research/'>Robert Bosch GmbH</a> on DL sensor-fusion architectures for Object Detection and Tracking, under the supervision from <a href='https://scholar.google.com/citations?user=2mv2dDkAAAAJ&hl=en'>Prof. Dr. Joschka Boedecker</a> and <a href='https://scholar.google.com/citations?user=LcARjz0AAAAJ&hl=en'>Prof. Dr. Abnihav Valada</a>. I also worked as development-intern at <a href='https://www.zf.com/mobile/en/homepage/homepage.html'>ZF Friedrichshafen</a> on the design of ROS SW-tools for self-driving vehicles. Additionally, I have been working as research assistant for Autonomous Intelligent Systems at the university, on the development of SLAM algorithms and Autonomous Driving simulations.</p>
<p align="justify">I dedicate my day to day to my other great passion too, game-related development and 2D/3D design. Since I was a child, I have always loved bringing to reality dream worlds, characters and landscapes only possible in one's imagination. Little by little, I try to learn more about design, gameplay and visual programming.</p> </div>
</div>
</div>
</div>
</section>
<!-- Three -->
<section id="three" class="main style1 special">
<div class="container">
<header class="major">
<h2>My work</h2>
</header>
<div class="row gtr-150">
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic02.jpg" alt="" /></span>
<h3>Research and Academic Service</h3>
<p>Publications, preprints, SW/HW proyects and news.</p>
<ul class="actions special">
<li>More</li>
</ul>
</div>
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic03.jpg" alt="" /></span>
<h3>Game Development</h3>
<p>Game applications, 2D/3D design and visual programming.</p>
<ul class="actions special">
<li>More</li>
</ul>
</div>
<div class="col-4 col-12-medium">
<span class="image fit"><img src="images/pic04.jpg" alt="" /></span>
<h3>Photography</h3>
<p>A small portfolio of my favorite trips and places.</p>
<ul class="actions special">
<li>More</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Four -->
<!--
<section id="four" class="main style2 special">
<div class="container">
<header class="major">
<h2>Ipsum feugiat consequat?</h2>
</header>
<p>Sed lacus nascetur ac ante amet sapien.</p>
<ul class="actions special">
<li>Sign Up</li>
<li>Learn More</li>
</ul>
</div>
</section>
-->
<!-- Footer -->
<section id="footer">
<ul class="icons">
<li><span class="label">CV</span></li>
<li><span class="label">Email</span></li>
<li><span class="label">GitHub</span></li>
<li><span class="label">Google Scholar</span></li>
</ul>
<ul class="copyright">
<li>© Untitled</li><li>Design: HTML5 UP</li>
</ul>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
And finally, the respective part of the css.
/* Header */
#header {
padding: 9em 0 9em 0 ;
background-color: #4686a0;
color: rgba(255, 255, 255, 0.75);
background-attachment: fixed, fixed, fixed;
background-image: url("images/overlay2.png"), url("images/overlay3.svg"), linear-gradient(45deg, #9dc66b 5%, #4fa49a 30%, #4361c2);
background-position: top left, center center, center center;
background-size: auto, cover, cover;
overflow: hidden;
position: relative;
text-align: center;
}
#header a {
border-bottom-color: rgba(255, 255, 255, 0.5);
}
#header a:hover {
color: #ffffff;
}
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header strong, #header b {
color: #ffffff;
}
#header header p {
color: #ffffff;
}
#header header.major:after {
background: #ffffff;
}
#header input[type="submit"],
#header input[type="reset"],
#header input[type="button"],
#header button,
#header .button {
box-shadow: inset 0 0 0 1px #ffffff;
color: #ffffff !important;
}
#header input[type="submit"]:hover,
#header input[type="reset"]:hover,
#header input[type="button"]:hover,
#header button:hover,
#header .button:hover {
background-color: rgba(255, 255, 255, 0.125);
}
#header input[type="submit"]:active,
#header input[type="reset"]:active,
#header input[type="button"]:active,
#header button:active,
#header .button:active {
background-color: rgba(255, 255, 255, 0.25);
}
#header input[type="submit"].primary,
#header input[type="reset"].primary,
#header input[type="button"].primary,
#header button.primary,
#header .button.primary {
background-color: #ffffff;
box-shadow: inset 0 0 0 1px #ffffff !important;
color: #4686a0 !important;
}
#header input[type="submit"].primary:hover,
#header input[type="reset"].primary:hover,
#header input[type="button"].primary:hover,
#header button.primary:hover,
#header .button.primary:hover {
background-color: rgba(255, 255, 255, 0.125) !important;
color: #ffffff !important;
}
#header input[type="submit"].primary:active,
#header input[type="reset"].primary:active,
#header input[type="button"].primary:active,
#header button.primary:active,
#header .button.primary:active {
background-color: rgba(255, 255, 255, 0.25) !important;
}
#header ul.major-icons li .icon {
border-color: #ffffff;
}
#header .icon.major {
color: #ffffff;
}
#header h1 {
margin: 0;
}
#header p {
margin: 1em 0 0 0;
}
#header .actions {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
margin-top: 2.5em;
margin-left: 0;
position: relative;
}
#header .actions li:first-child {
padding-left: 0;
}
#header .actions:after {
background: #ffffff;
content: '';
height: 100vh;
left: 50%;
position: absolute;
top: 100%;
width: 1px;
}
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#header .inner .actions {
-moz-transition: -moz-transform 1.25s ease;
-webkit-transition: -webkit-transform 1.25s ease;
-ms-transition: -ms-transform 1.25s ease;
transition: transform 1.25s ease;
-moz-transition-delay: 1s;
-webkit-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
#header:after {
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
background-image: linear-gradient(45deg, #4fa49a, #4361c2);
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
body.is-preload #header .inner {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: 0;
}
body.is-preload #header .inner .actions {
-moz-transform: translateY(30em);
-webkit-transform: translateY(30em);
-ms-transform: translateY(30em);
transform: translateY(30em);
opacity: 0;
}
body.is-preload #header:after {
opacity: 1;
}
/* Header_nav */
#page-wrapper {
padding-top: 3.5em;
}
#header_nav {
background: rgba(0, 0, 0, 0);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0);
cursor: default;
height: 3.5em;
left: 0;
line-height: 3.5em;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
#header_nav h1 {
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
position: absolute;
top: 0;
}
#header_nav nav {
position: absolute;
right: 1em;
top: 0;
}
#header_nav nav ul {
margin: 0;
}
#header_nav nav ul li {
display: inline-block;
margin-left: 1em;
}
#header_nav nav ul li a, #header_nav nav ul li span {
border: 0;
color: inherit;
display: inline-block;
height: inherit;
line-height: inherit;
outline: 0;
}
#header_nav nav ul li a.button, #header_nav nav ul li span.button {
height: 2em;
line-height: 2em;
padding: 0 1.25em;
}
#header_nav nav ul li a:not(.button):before, #header_nav nav ul li span:not(.button):before {
margin-right: 0.5em;
}
#header_nav nav ul li.active > a, #header_nav nav ul li.active > span {
color: #e44c65;
}
#header_nav nav ul li > ul {
display: none;
}
body.landing #page-wrapper {
padding-top: 0;
}
body.landing #header_nav {
background: transparent;
box-shadow: none;
position: absolute;
}
To summarize, I would like the menu to be only on the top of the page, over the header, nothing more. I would really appreciate your help. I have tried several things but I still not very experimented in web-design, I am sorry.
Thank you very much in advance.
In the styling for #header_nav, set position to absolute instead of fixed. Then remove the following from main.js:
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header_nav").style.top = "0";
} else {
document.getElementById("header_nav").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
This way, the menu will render over the header but not stay at the top of the page when the user scrolls down.
Edit: If you want the menu to render above the header, not on top of it, remove the position line completely.
In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker
Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.
I have a webpage but it looks different on different browsers. Even the amount of padding and margin I gave are way off and let's not talk about the JS stuff.
I also have it live here:
https://iam-shivam.github.io/DrumPad/drumpad.html
How do I make sure that they look the same on all browsers? Some way to automate this or manual tips?
I even tried a prefix-free script, but it didn't seem to do any good. Maybe I'm using it wrong. Here's the link:
http://leaverou.github.io/prefixfree/
HTML File:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual DrumPad</title>
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\drumpad.css">
<link rel="prefetch" href="sounds\">
<script type="text/javascript" src="https://raw.githubusercontent.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row middle">
<div class="header" style="">
<img src="images/logo.png" alt="Logo" width="300px" height="118px">
</div>
<div class="container col-xs-12 col-md-8 col-md-offset-2 buttonGroup">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 big">
<button data-key="65" class="drumpad">A<br><sub>CLAP</sub></</button>
<button data-key="83" class="drumpad">S<br><sub>HIHAT</sub></</button>
<button data-key="68" class="drumpad">D<br><sub>KICK</sub></</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 big">
<button data-key="70" class="drumpad">F<br><sub>OPENHAT</sub></</button>
<button data-key="71" class="drumpad">G<br><sub>BOOM</sub></</button>
<button data-key="72" class="drumpad">H<br><sub>RIDE</sub></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 big">
<button data-key="74" class="drumpad">J<br><sub>SNARE</sub></</button>
<button data-key="75" class="drumpad">K<br><sub>TOM</sub></</button>
<button data-key="76" class="drumpad">L<br><sub>TINK</sub></button>
</div>
</div>
</div>
</div>
</div>
<script src="scripts\jquery-3.2.1.min.js"></script>
<script src="scripts\bootstrap.min.js"></script>
<script>
function playIt(e){
var keys = document.querySelector('[data-key="'+e.keyCode+'"]');
if(keys == null)return;
mainStuff(keys);
}
function mainStuff(keys){
keys.classList.add('playing');
var sname = keys.querySelector('sub').innerHTML.toLowerCase();
var audio = new Audio("sounds\\"+sname+".wav");
audio.play();
keys.addEventListener('transitionend',function(){
keys.classList.remove('playing');
});
}
document.addEventListener('keydown',playIt);
var all = document.querySelectorAll('.drumpad');
all.forEach(key => key.addEventListener('click', function(){
mainStuff(this);
}));
</script>
</body>
</html>
CSS File:
:root {
--bcolor: black;
}
body {
margin: 0;
padding: 0;
background-color: #000000;
}
.middle {
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
height: 100vh;
border-left: 4px solid var(--bcolor);
border-right: 4px solid var(--bcolor);
}
.header {
text-align: center;
color: white;
}
.drumpad {
padding: 8%;
float: left;
margin: 0.5%;
background-color: #020202;
background-color: rgba(2, 2, 2, 0.6);
color: white;
border: 2px solid white;
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
font-size: 1.7rem;
transition: all 0.07s;
-moz-transition: all 0.07s;
-ms-transition: all 0.07s;
-o-transition: all 0.07s;
-webkit-transition: all 0.07s;
font-weight: bold;
width: 150px;
text-align: center;
}
.playing ,
.drumpad:active {
background-color: #020202;
background-color: rgba(2, 2, 2, 0.8);
border: 2px solid #1A0000;
border: 2px solid rgba(26, 0, 0, 0);
transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
}
.big {
display: flex;
justify-content: center;
}
.buttonGroup {
margin-top: 3%;
}
#media screen and (orientation:portrait) {
.buttonGroup button{
padding: 10%;
}
.buttonGroup{
margin-top: 10%;
}
.drumpad{
margin: 1%;
width: 120px;
}
}
I have an overlay. If the user clicks on a box the overlay slides up. My problem now is, that the overlay works without any issues in Mozilla Firefox and Chrome. But in Explorer the overlay goes all over the display. How can I solve this problem for IE? Is there something I didnt see? Or do I need a plugin for that?
This picture shows the normal version which I want to work in IE.
At the Moment it looks like this in IE.
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.overlay').slideUp();
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
$('.overlay').on('click', function() {
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
.services-section {
background-color: #E6E6E6;
height: auto;
}
.services-section hr {
border-bottom: hidden;
width: 42px;
margin-left: 0px;
}
.services-section .services-detail {
border-radius: 4px;
transition: all 0.3s ease-in-out;
position: relative;
top: 0px;
padding: 60px 40px 60px 40px;
margin-top: 32px;
background-color:rgba(237, 238, 239, 0.8);
height: 500px;
}
.services-section .services-detail:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
top: -2px;
background-color:#FAFAFA;
color:#000;
}
.services-section .services-detail {
font-size: 60px;
color: #000;
margin-bottom: 10px;
}
.services-section .services-detail:hover .fa {
color: #fd2034;
}
.services-detail h5 {
color: #000;
font-size: 25px;
font-family: 'Poppins', sans-serif;
}
.services-detail:hover h5 {
color: #000;
}
.services-detail p {
color: #000;
font-size: 18px;
}
.services-detail:hover p {
color: #000;
}
.overlay{
display: none; /* Hidden by default*/
position: fixed; /* Stay in place*/
z-index: 1; /* Sit on top */
left: 0;
bottom: 2%;
width: 100%; /* Full width */
height: 92%; /* Full height */
border-radius: 10px;
overflow: auto; /* Enable scroll if needed
background-color: rgb(217,217,217); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
background-color: rgb(255,255,255);
-webkit-animation-name: slideIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
.overlay h3{
color: black;
text-align: left;
margin-left: 15%;
}
.overlay p {
font-size: 0.2em;
color: black;
float: left;
width: 100%;
}
.overlay a {
font-size: 0.8em;
color: black;
float:left;
}
.overlay-header {
padding: 1px 16px;
background-color: #fff;
color: black;
text-align: center;
border-bottom: 2px solid #ffcc00;
}
.overlay img{
width: 18%;
float: right;
margin: 1%;
margin-right: -20%;
}
.des{
margin: 15px;
font-size: 1em;
}
.overlay:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
background-color:#FAFAFA;
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provider Section Start -->
<section id="provider" class="services-section section-space-padding
mica-bg">
<div class="container">
<div class="section-title">
<i class="fa fa-paper-plane-o"></i>
<h3 class="white-color"><span>Blume</span></h3>
</div>
<div class="col-md-4 col-sm-6 3d-hover box">
<div class="services-detail hover-effect-2d top">
<i><img src="container/rfid/micarfid.png" alt="micarfid"
style="background-color:#ffcc00; border:5px solid #ffcc00; border-
radius: 10px; width:200px; margin-left:-15px;"></i>
<h5>Blume</h5>
<hr>
<p>This is a test for blume.</p>
</div>
<div class="overlay">
<div class="overlay-header">
<img src="test/blume.jpg" alt="blume" style="width:15%;float:right; margin-right:10%;margin-top:0.5%;background:#ffcc00;border:2px solid #ffcc00; border-radius: 10px;">
<h3>Blume</h3>
</div>
<div class="des">
<p>This is a test for blume.<</p>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Tutorial</p><i class="fa fa-youtubeOverlay fa-youtube-play"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">PDF-Doku</p><i class="fa fa-pdfOverlay fa-file-pdf-o" style="margin-top:-10px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Image Download</p><i class="fa fa-zipOverlay fa-file-archive-o" style="margin-top:-15px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:8px;">Application Download</p><i class="fa fa-imgOverlay fa-picture-o" style="margin-top:-80px;"></i>
<img src="images/application.png" alt="application" style="width:80%;float:left; margin-top:-20px;margin-left:50px;">
</div>
</div>
</div>
</div>
</section>
<!-- Provider Section End -->
<!-- Back to Top Start -->
<i class="fa fa-long-arrow-up"></i>
<!-- Back to Top End -->
<!-- All Javascript Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>
<!-- Main Javascript File -->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/js.js"></script>
It's likely that this issue is caused by the use of position: fixed in your overlay element.
Position fixed elements geometry historically relates to the initial containing block (most often the viewport).
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning
For a full cross browser implementation try using position:absolute instead, making sure the containing element (div.box) makes use of position:relative.
I'm trying to add "Back to top" button to my website. It is supposed to show up when user scrolls to the bottom of my website. But it won't fade in. It just won't. I have no idea what's wrong, I checked my code and everything should be working fine, but it doesn't. Back to top button codes are simple and so is mine... I don't know, just look at the code.
index.html - temporary I have my CSS styles here also:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Clockwork</title>
<link href='http://fonts.googleapis.com/css?family=Righteous|Titillium+Web:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="orange.ico">
<!-- Bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
background: url('retro-vintage-pink-city.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
color: white;
font-family: 'Titillium Web', 'Courier New', sans-serif;
}
html {
height: 100%;
}
.home-section {
height: 100%;
}
.about-section {
height: 80%;
padding-top: 24px;
text-align: justify;
background: rgba(16,16,16,0.9);
border-top: 2px solid white;
border-bottom: 2px solid white;
box-shadow: 0 0 20px #000;
}
.media-section {
height: 100%;
padding-top: 150px;
text-align: center;
}
.press-section {
height: 100%;
padding-top: 150px;
text-align: center;
}
.buy-section {
height: 100%;
padding-top: 150px;
text-align: center;
}
.paragraphs {
font-size: 16px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
}
.logo {
margin: 0 auto;
transform: translateY(50%);
}
.btn-md, .btn-md:hover, .btn-md:active, .btn-md:focus {
padding: 12px 24px;
border: none;
border-radius: 0px;
box-shadow: 0 0 28px #000;
color: #fff;
background: linear-gradient(45deg, #005387 0%, #005387 39%, #007387 100%);
font-size: 20px;
font-weight: bold;
}
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
top: 5px;
}
</style>
</head>
<body id="page-top" data-spy="scroll">
<i class="icon-chevron-up"></i>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<section id="home" class="home-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive logo" src="logo.png" />
</div>
</div>
</div>
</section>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="paragraphs">
<p style="text-align: center; font-size: 42px; font-weight: bold;">About</p>
<p style="text-align: center;"><strong>Lurk into the story and let it fill you up with an indescribable joy of exploring the fantastic and yet sometimes mysterious world of <span style="color: rgb(255, 163, 0)">Clockwork!</span></strong></p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="anna.png" />
</div>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-12 paragraphs">
<p>Set in a vastly mind-opening era of 60s the game features an <span style="color: rgb(255, 163, 0); font-weight: bold;">ensemble cast</span> of various and colorful characters with each one having his or her own motivations, plans and goals. Join them in their unknowingly, but surprisingly funny venture which would eventually lead to a truly astonishing final in... Well, let's leave that for you to discover! As it will come to the end of the story, all our heroes' paths will cross and therefore they'll together try to save us all from an unexpected, but sadly <span style="color: rgb(255, 163, 0); font-weight: bold;">inevitable doom</span>. This is the event that will be <span style="color: rgb(255, 163, 0); font-weight: bold;">remembered!</span></p>
<p>On their way stands a whole army of many, many, many very smart, as it often occurs, evil-geniuses and also a bunch of ordinary morons who shall do nothing, but only slow our heroes down. Let them not stop our <span style="color: rgb(255, 163, 0); font-weight: bold;">salvation!</span></p>
</div>
</div>
<div class="row">
<div class="col-lg-12 paragraphs text-center" style="transform: translateY(50%);">
BUY
</div>
</div>
</div>
</div>
</div>
</section>
<section id="media" class="media-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Media</h1>
</div>
</div>
</div>
</section>
<section id="press" class="press-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Press</h1>
</div>
</div>
</div>
</section>
<section id="buy" class="buy-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Buy</h1>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="jquery.easing.min.js"></script>
<script src="scrolling-nav.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.js:
// ===== Scroll to Top ====
$(document).ready(function(){
$("#return-to-top").hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
return false;
});
});
Here's jsfiddle:
http://jsfiddle.net/kjgeaeqc/