So I made a pretty simple function that causes a dropdown-menu to show up. It worked fine on my PC but not on my mobile devices. When I click the element which should show the dropdown menu, the dropd. menu doesn't show up. Actually nothing happens.
After some debugging it seems that this loop makes some trouble:
for (i=0;i <= faecher.length;i++) {$(id(faecher[i])).html(faecher[i]+" ▼");}
Here a snippet:
function getMouseX() {
return (event.clientX + document.body.scrollLeft);
}
function getMouseY() {
return (event.clientY + document.body.scrollTop);
}
// Position of an element relative to left --> x coordinate
function getLiX(element) {
var pos = $(element).position();
return pos.left;
}
// Position of an element relative to top --> y coordinate
function getLiY(element) {
return $(element).height();
}
// Just a name list for my elements
var faecher = ["physik", "mathematik", "chemie", "latein", "info", "profil"];
// Sets a # before an element name
function id(id) {
return "#" + id;
}
// The main dropdown function
function dd(ex) {
var jId = id(ex);
document.getElementById("agenda").innerHTML = "1";
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i])).html(faecher[i] + " ▼");
}
document.getElementById("agenda").innerHTML = "2";
$(jId).html(ex + " ▲");
document.getElementById("agenda").innerHTML = "3";
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i])).css({
"background": "none",
"color": "#ffffff"
});
}
document.getElementById("agenda").innerHTML = "4";
$(jId + "DD").css('position', 'absolute');
document.getElementById("agenda").innerHTML = "5";
$(jId + "DD").css('top', getLiY(jId));
document.getElementById("agenda").innerHTML = "6";
$(jId + "DD").css('left', getLiX(jId));
document.getElementById("agenda").innerHTML = "7";
if ($(jId + "DD").css("display") != "none") {
$(jId).css({
"background": "none",
"color": "#ffffff"
});
$(jId).html(ex + " ▼");
} else {
$(jId).css({
"background": "rgba(255, 255, 255, 0.97)",
"color": "#000000"
});
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i] + "DD")).slideUp(250);
}
}
document.getElementById("agenda").innerHTML = "8";
$(jId + "DD").outerWidth($(jId).outerWidth());
document.getElementById("agenda").innerHTML = "9";
$(jId + "DD").slideToggle(500);
document.getElementById("agenda").innerHTML = "10";
}
function physikClick() {
document.getElementById("agenda").innerHTML = "Click";
dd("physik");
} // .innerHTML just for debugging
function mathematikClick() {
dd("mathematik");
}
function chemieClick() {
dd("chemie");
}
function lateinClick() {
dd("latein");
}
function infoClick() {
dd("info");
}
function profilClick() {
dd("profil")
}
#font-face {
font-family: "aspace";
src: local("../media/font/aspace.otf"), url("../media/font/aspace.otf") format("OpenType")
}
#font-face {
font-family: "Nero";
src: local("../media/font/nero.otf"), url("../media/font/nero.otf") format("OpenType")
}
#font-face {
font-family: "MOONBEAM";
src: local("../media/font/moonbeam.ttf"), url("../media/font/moonbeam.ttf") format("TrueType")
}
#font-face {
font-family: "GOOD TIMES";
src: local("../media/font/goodtimes.ttf"), url("../media/font/goodtimes.ttf") format("TrueType")
}
#font-face {
font-family: "Induction";
src: local("../media/font/induction.ttf"), url("../media/font/induction.ttf") format("TrueType")
}
#font-face {
font-family: "Ethnocentric";
src: local("../media/font/ethnocentric.ttf"), url("../media/font/ethnocentric.ttf") format("TrueType")
}
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
body {
background-size: cover;
overflow: auto;
background-repeat: repeat-x;
font-family: Arial, Helvetica;
text-align: justify;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #335588;
/*background-image:url(../media/img/wa3.jpg),url(../media/img/wa2.jpg),url(../media/img/wa1.jpg),url(../media/img/wa4.jpg),url(../media/img/wa5.jpg);*/
}
h1 {
color: #FFFFFF;
font-family: "NEON CLUB MUSIC", "aspace", "MOONBEAM";
text-align: center;
}
h2,
h3,
h4,
h5,
h6 {
color: #FFFFFF;
font-family: "GOOD TIMES", "aspace", "MOONBEAM";
text-align: center;
letter-spacing: 2em;
}
a {
text-decoration: none;
color: #ffffff;
}
button,
input[type=submit],
input[type=reset] {
outline: none;
text-align: center;
padding-top: 5px;
font-family: "Good Times";
font-size: 17px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #ffffff;
border-radius: 0.2em;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
box-shadow: .05em .05em .3em #ffffff;
text-shadow: 0.1em 0.1em 0.3em rgba(255, 255, 255, 0.5)
}
button:hover,
input[type=submit]:hover,
input[type=reset]:hover {
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
box-shadow: .25em .25em .5em #eeeeee;
cursor: pointer;
text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 1);
}
input[type=button] {
width: 25px;
height: 25px;
outline: none;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: .05em .05em .3em #ffffff;
}
input[type=button]:hover {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 1);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
box-shadow: .25em .25em .5em #eeeeee;
cursor: pointer;
}
input[type=password],
input[type=file],
select,
option,
input[type=text],
input[type=search],
input[type=date],
input[type=number],
input[type=email],
textarea {
transition: all 0.5s;
-webkit-transition: all 0.5s;
outline: none;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.7);
color: #ffffff;
padding: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
input[type=password]:focus,
input[type=file]:focus,
select:focus,
option:focus,
input[type=text]:focus,
input[type=date]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus {
border: 1px solid #ffffff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
input[type=password]::-webkit-input-placeholder,
input[type=file]::-webkit-input-placeholder,
select::-webkit-input-placeholder,
option::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder {
color: rgba(50, 50, 50, 0.9);
text-shadow: none;
-webkit-text-fill-color: initial;
}
option: {
background: #ffffff;
color: rgba(0, 0, 0, .6)
}
table {
border-spacing: 0.5em;
display: table;
border-collapse: collapse;
border-color: #ffffff;
padding: 0.3em;
empty-cells: hide;
table-layout: auto;
width: 100%;
overflow: auto;
font-weight: normal;
text-align: left;
}
table th,
table td {
border: 1px solid #ffffff;
padding: 0.3em;
height: 1em;
overflow: auto;
font-weight: normal;
}
table .alt td {} #title {
position: relative;
text-align: center;
z-index: 5;
margin-top: 4em;
background: transparent;
}
#menubar {
left: 0;
right: 0;
position: fixed;
background: rgba(0, 0, 0, .8);
z-index: 10;
top: 0;
height: 3em;
vertical-align: middle;
line-height: 3em;
overflow: auto;
box-shadow: 0 .1em .9em #000000;
}
.mb {
margin: 0;
list-style-type: none;
font-family: "Good Times", "Arial";
vertical-align: middle;
}
.mb li {
display: inline;
-webkit-transition: all 0.7s;
transition: all 0.7s;
height: 100%;
padding-left: 1em;
padding-right: 1em;
float: left;
vertical-align: middle;
}
.mb li:hover {
background: rgba(255, 255, 255, 0.97) !important;
color: #000000 !important;
}
.dropdown {
z-index: 11;
/*border-radius:0.2em;
-webkit-border-radius:0.2em;
-moz-border-radius:0.2em;*/
background: rgba(255, 255, 255, 0.92);
display: none;
padding: 0.2em;
padding-left: 0.3em;
padding-top: 0.3em;
font-size: 1.2em;
background-clip: border-box;
text-align: left;
overflow: auto;
}
.dropdown a {
background-clip: border-box;
padding: 0 0;
}
.dropdown a:hover {
/*text-shadow: 0.5em 0.5em 1em #000000;*/
/*font-size:1.05em;*/
font-weight: bold;
}
#profil {
float: right;
}
.prlxcntr {
position: absolute;
top: 0;
margin: 0;
padding: 0;
}
#main {
background: rgba(0, 0, 0, 0);
color: #ffffff;
padding: 1px;
position: relative;
display: block;
border-top: 1px solid #ffffff;
width: 100%;
left: 0;
right: 0;
text-align: center;
margin: 0 auto;
z-index: 5;
}
#main h2 {
color: #ffffff;
font-family: "GOOD TIMES";
}
.text {
text-align: justify;
padding: 1em;
font-size: 1.3em;
}
#footer {
bottom: 0;
position: fixed;
background: rgba(0, 0, 0, .8);
left: 0;
right: 0;
text-align: center;
color: #ffffff;
padding: 0.2em;
overflow: auto;
z-index: 10;
}
.ddp {
color: rgba(0, 0, 0, 1);
}
.mainNav {
overflow: auto;
width: 98%;
}
.mainNav ul {
list-style-type: none;
}
.mainNav ul li {
display: inline;
transition: all 0.0s;
-webkit-transition: all 0.0s;
}
.mainNav ul li:hover {
display: inline;
border-bottom: 1px solid #ffffff;
cursor: pointer;
}
.div[id^="woerterliste"] {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: red;
}
#menubar2 {
left: 0;
right: 0;
position: fixed;
background: rgba(255, 255, 255, .8);
z-index: 9;
top: 3em;
height: 3em;
vertical-align: middle;
line-height: 3em;
overflow: auto;
color: #000000;
box-shadow: 0 .1em .9em #000000;
}
.mb2 {
margin: 0;
list-style-type: none;
font-family: "Good Times", "Arial";
vertical-align: middle;
color: #000000;
}
.mb2 li {
display: inline;
-webkit-transition: all 0.7s;
transition: all 0.7s;
height: 100%;
float: left;
padding-left: 1em;
padding-right: 1em;
vertical-align: middle;
color: #000000;
}
.mb2 li:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.97) !important;
color: #ffffff !important;
}
.ueberschrift {
font-family: Ethnocentric;
text-shadow: .1em .1em .5em #000000;
}
<!DOCTYPE html>
<html lang="ch_DE">
<head>
<title>My Site</title>
<meta charset="UTF-16" />
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="css/universal.css"></link>
<link rel="stylesheet" type="text/css" href="css/idsAndClasses.css"></link>
<link rel="icon" href="media/img/logo.png" type="image/x-icon"></link>
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>
<script type='text/javascript' src='js/jquery.marquee.min.js'></script>
<script src="js/bitballoon.js"></script>
<script src="js/forms.js"></script>
<script src="js/client.js"></script>
<script src="js/functions.js"></script>
<!--<script src="js/styleManagement.js"></script>-->
<script src="js/clientManagement.js"></script>
<script src="js/parallax.js"></script>
<script>
$(document).on('beforeunload', function() {
$(document).scrollTop(0);
});
</script>
</head>
<body background="media/img/wa2.jpg" onload="scrollToTop()">
<!--<div class="prlxcntr" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="media/img/doubleNebula.jpg" data-natural-width="1400" data-natural-height="900">-->
<!-- http://i.imgur.com/kJiOdp8.jpg -->
<nav id="menubar">
<ul class="mb">
<a href="index.html" title="Home">
<li id="home">Home
</li>
</a>
<a href="#physik" onclick="physikClick()" title="Physik">
<li id="physik">Physik ▼
</li>
</a>
<a href="#mathematik" onclick="mathematikClick()" title="Mathematik">
<li id="mathematik">Mathematik ▼
</li>
</a>
<a href="#chemie" onclick="chemieClick()" title="Chemie">
<li id="chemie">Chemie ▼
</li>
</a>
<a href="#latein" onclick="lateinClick()" title="Latein">
<li id="latein">Latein ▼
</li>
</a>
<a href="#info" onclick="infoClick()" title="Info">
<li id="info">Info ▼
</li>
</a>
<a href="#profil" onclick="profilClick()" title="Profil">
<li id="profil">Profil ▼
</li>
</a>
</ul>
</nav>
<div class="parallax-window" id="title">
<h1 style="letter-spacing: 2em;" title='"Insert Easter Egg here."'>My Site</h1>
</div>
<!-- DROP DOWN DIV CONTAINERS -->
<div id="physikDD" class="dropdown"><a class="ddp" href="doc/physik/startseite.html">Theorie
</a>
<br /><a class="ddp" href="#formellehre">Formellehre
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="mathematikDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
</a>
<br /><a class="ddp" href="#formellehre">Formellehre
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="chemieDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="infoDD" class="dropdown"><a class="ddp" href="#agenda">Agenda
</a>
<br /><a class="ddp" href="doc/info/kontakt.html">Kontakt
</a>
<br /><a class="ddp" href="#ueber">Über
</a>
</div>
<div id="lateinDD" class="dropdown"><a class="ddp" href="#grammatik">Grammatik
</a>
<br /><a class="ddp" href="doc/latein/woerter.html">Wörter
</a>
</div>
<div id="profilDD" class="dropdown">
<!--<span id="profilName" style="color:white;text-decoration:underline;">Profil:</span><br />
Anmelden<br />Registrieren
--><b style="color: #ff7777;">IN ARBEIT</b>
</div>
<!-- MAIN DIV CONTAINER -->
<section class="text">
<h4 id="agenda">Debug Text</h4>
</section>
<!-- FOOTER DIV CONTAINER -->
<!--</div>-->
</body>
</html>
Do you know why this won't work with a mobile device?
Related
I'm looking for a solution to a little problem, complete novice, built my first site. I have utilized the "Summary-Details" feature, and included an image, which meant the stock dropdown arrow was moved, to which I couldn't position where I wanted it to be. I added an icon from material-icons, and I would like this to rotate when the whole image/section is clicked. I won't include any JS as I'm probably miles away from where I should be. Any help much appreciated.
.card {
width: 18em;
justify-self: center;
margin: 0;
padding: 2em 1em 0;
}
.card img {
margin: 0 0 5px 0;
width: 18em;
height: auto;
}
summary {
width: 18em;
font-weight: bold;
font-family: monospace;
font-size: 1.2rem;
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 0;
color: #202020;
background: #808080;
cursor: pointer;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
summary::-webkit-details-marker {
display: none;
}
.card i {
margin: 0;
padding: 0;
font-variant-position: sub;
color: #101010;
}
.card i:active{
transform: rotate(180deg);
color: #fef;
}
summary:focus {
outline-style: none;
background: #404040;
color: #fef;
}
details {
width: 17.55em;
color: #fef;
background: #212529;
border-bottom: 1px solid rgba(250, 224, 66, .45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0;
margin: -.25em 0 2em;
border-right: solid 1px #b5b5b5;
border-bottom: solid 1px #b5b5b5;
}
.contentul li {
padding: 1em;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="card" id="card" >
<details>
<summary><img id="img1" src="https://images.unsplash.com/photo-1503708928676-1cb796a0891e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80" alt="ex1">Excavators<br><i class="fas fa-chevron-down"></i></summary>
<ul class="contentul">
<li>180° Wheeled</li>
<li>360° Wheeled</li>
<li>360° Tracked</li>
</ul>
</details>
</div>
You don't need JavaScript to accomplish this. The translateY bit is used to keep the icon from rotating away from its starting position. The value 0.5em means half the height of the box containing the chevron.
.fas.fa-chevron-down {
transition: .15s transform ease-in-out;
}
details[open] .fas.fa-chevron-down {
transform: rotate(180deg) translateY(-0.5em);
}
Demo
.card {
width: 18em;
justify-self: center;
margin: 0;
padding: 2em 1em 0;
}
.card img {
margin: 0 0 5px 0;
width: 18em;
height: auto;
}
summary {
width: 18em;
font-weight: bold;
font-family: monospace;
font-size: 1.2rem;
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 0;
color: #202020;
background: #808080;
cursor: pointer;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
summary::-webkit-details-marker {
display: none;
}
.card i {
margin: 0;
padding: 0;
font-variant-position: sub;
color: #101010;
}
.card i:active {
transform: rotate(180deg);
color: #fef;
}
summary:focus {
outline-style: none;
background: #404040;
color: #fef;
}
details {
width: 17.55em;
color: #fef;
background: #212529;
border-bottom: 1px solid rgba(250, 224, 66, .45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0;
margin: -.25em 0 2em;
border-right: solid 1px #b5b5b5;
border-bottom: solid 1px #b5b5b5;
}
.contentul li {
padding: 1em;
}
.fas.fa-chevron-down {
transition: .15s transform ease-in-out;
}
details[open] .fas.fa-chevron-down {
transform: rotate(180deg) translateY(-0.5em);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="card" id="card">
<details>
<summary><img id="img1" src="https://images.unsplash.com/photo-1503708928676-1cb796a0891e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80" alt="ex1">Excavators<br><i class="fas fa-chevron-down"></i></summary>
<ul class="contentul">
<li>180° Wheeled</li>
<li>360° Wheeled</li>
<li>360° Tracked</li>
</ul>
</details>
</div>
I need to load get images and use them in the js justify plugin that I am using on my page.
This is my script:
$(document).ready(function(){
var folder = "img/people";
$.ajax({
url : folder,
success: function (data) {
console.log(data);
}
});
});
var showPhotos = function(photos){
$('.image-container').empty().justifiedImages({
images : photos,
rowHeight: 500,
maxRowHeight: $('.gallery').height(),
thumbnailPath: function(photo, width, height){
var purl = photo.url_s;
if( photo.url_n && (width > photo.width_s * 1.2 || height > photo.height_s * 1.2) ) purl = photo.url_n;
if( photo.url_m && (width > photo.width_n * 1.2 || height > photo.height_n * 1.2) ) purl = photo.url_m;
if( photo.url_z && (width > photo.width_m * 1.2 || height > photo.height_m * 1.2) ) purl = photo.url_z;
if( photo.url_l && (width > photo.width_z * 1.2 || height > photo.height_z * 1.2) ) purl = photo.url_l;
return purl;
},
getSize: function(photo){
return {width: photo.width_s, height: photo.height_s};
},
margin: 1
});
}
But, when I do console.log(data) I get the this:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>listing directory /img/people/</title>
<style>* {
margin: 0;
padding: 0;
outline: 0;
}
body {
padding: 80px 100px;
font: 13px "Helvetica Neue", "Lucida Grande", "Arial";
background: #ECE9E9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ECE9E9));
background: #ECE9E9 -moz-linear-gradient(top, #fff, #ECE9E9);
background-repeat: no-repeat;
color: #555;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-size: 22px;
color: #343434;
}
h1 em, h2 em {
padding: 0 5px;
font-weight: normal;
}
h1 {
font-size: 60px;
}
h2 {
margin-top: 10px;
}
h3 {
margin: 5px 0 10px 0;
padding-bottom: 5px;
border-bottom: 1px solid #eee;
font-size: 18px;
}
ul li {
list-style: none;
}
ul li:hover {
cursor: pointer;
color: #2e2e2e;
}
ul li .path {
padding-left: 5px;
font-weight: bold;
}
ul li .line {
padding-right: 5px;
font-style: italic;
}
ul li:first-child .path {
padding-left: 0;
}
p {
line-height: 1.5;
}
a {
color: #555;
text-decoration: none;
}
a:hover {
color: #303030;
}
#stacktrace {
margin-top: 15px;
}
.directory h1 {
margin-bottom: 15px;
font-size: 18px;
}
ul#files {
width: 100%;
height: 100%;
overflow: hidden;
}
ul#files li {
float: left;
width: 30%;
line-height: 25px;
margin: 1px;
}
ul#files li a {
display: block;
height: 25px;
border: 1px solid transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
white-space: nowrap;
}
ul#files li a:focus,
ul#files li a:hover {
background: rgba(255,255,255,0.65);
border: 1px solid #ececec;
}
ul#files li a.highlight {
-webkit-transition: background .4s ease-in-out;
background: #ffff4f;
border-color: #E9DC51;
}
#search {
display: block;
position: fixed;
top: 20px;
right: 20px;
width: 90px;
-webkit-transition: width ease 0.2s, opacity ease 0.4s;
-moz-transition: width ease 0.2s, opacity ease 0.4s;
-webkit-border-radius: 32px;
-moz-border-radius: 32px;
-webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03);
-moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03);
-webkit-font-smoothing: antialiased;
text-align: left;
font: 13px "Helvetica Neue", Arial, sans-serif;
padding: 4px 10px;
border: none;
background: transparent;
margin-bottom: 0;
outline: none;
opacity: 0.7;
color: #888;
}
#search:focus {
width: 120px;
opacity: 1.0;
}
/*views*/
#files span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
text-indent: 10px;
}
#files .name {
background-repeat: no-repeat;
}
#files .icon .name {
text-indent: 28px;
}
/*tiles*/
.view-tiles .name {
width: 100%;
background-position: 8px 5px;
}
.view-tiles .size,
.view-tiles .date {
display: none;
}
/*details*/
ul#files.view-details li {
float: none;
display: block;
width: 90%;
}
ul#files.view-details li.header {
height: 25px;
background: #000;
color: #fff;
font-weight: bold;
}
.view-details .header {
border-radius: 5px;
}
.view-details .name {
width: 60%;
background-position: 8px 5px;
}
.view-details .size {
width: 10%;
}
.view-details .date {
width: 30%;
}
.view-details .size,
.view-details .date {
text-align: right;
direction: rtl;
}
/*mobile*/
#media (max-width: 768px) {
body {
font-size: 13px;
line-height: 16px;
padding: 0;
}
#search {
position: static;
width: 100%;
font-size: 2em;
line-height: 1.8em;
text-indent: 10px;
border: 0;
border-radius: 0;
padding: 10px 0;
margin: 0;
}
#search:focus {
width: 100%;
border: 0;
opacity: 1;
}
.directory h1 {
font-size: 2em;
line-height: 1.5em;
color: #fff;
background: #000;
padding: 15px 10px;
margin: 0;
}
ul#files {
border-top: 1px solid #cacaca;
}
ul#files li {
float: none;
width: auto !important;
display: block;
border-bottom: 1px solid #cacaca;
font-size: 2em;
line-height: 1.2em;
text-indent: 0;
margin: 0;
}
ul#files li:nth-child(odd) {
background: #e0e0e0;
}
ul#files li a {
height: auto;
border: 0;
border-radius: 0;
padding: 15px 10px;
}
ul#files li a:focus,
ul#files li a:hover {
border: 0;
}
#files .header,
#files .size,
#files .date {
display: none !important;
}
#files .name {
float: none;
display: inline-block;
width: 100%;
text-indent: 0;
background-position: 0 50%;
}
#files .icon .name {
text-indent: 41px;
}
}
</style>
<script>
function $(id){
var el = 'string' == typeof id
? document.getElementById(id)
: id;
el.on = function(event, fn){
if ('content loaded' == event) {
event = window.attachEvent ? "load" : "DOMContentLoaded";
}
el.addEventListener
? el.addEventListener(event, fn, false)
: el.attachEvent("on" + event, fn);
};
el.all = function(selector){
return $(el.querySelectorAll(selector));
};
el.each = function(fn){
for (var i = 0, len = el.length; i < len; ++i) {
fn($(el[i]), i);
}
};
el.getClasses = function(){
return this.getAttribute('class').split(/\s+/);
};
el.addClass = function(name){
var classes = this.getAttribute('class');
el.setAttribute('class', classes
? classes + ' ' + name
: name);
};
el.removeClass = function(name){
var classes = this.getClasses().filter(function(curr){
return curr != name;
});
this.setAttribute('class', classes.join(' '));
};
return el;
}
function search() {
var str = $('search').value
, links = $('files').all('a');
links.each(function(link){
var text = link.textContent;
if ('..' == text) return;
if (str.length && ~text.indexOf(str)) {
link.addClass('highlight');
} else {
link.removeClass('highlight');
}
});
}
$(window).on('content loaded', function(){
$('search').on('keyup', search);
});
</script>
</head>
<body class="directory">
<input id="search" type="text" placeholder="Search" autocomplete="off" />
<div id="wrapper">
<h1>~ / img / people / </h1>
<ul id="files" class="view-tiles"><li><span class="name">..</span><span class="size"></span><span class="date"></span></li>
<li><span class="name">1.jpg</span><span class="size">57195</span><span class="date">5/19/2017 2:02:18 PM</span></li>
<li><span class="name">2.jpg</span><span class="size">83345</span><span class="date">5/19/2017 2:02:18 PM</span></li>
<li><span class="name">3.jpg</span><span class="size">77362</span><span class="date">5/19/2017 2:02:18 PM</span></li>
<li><span class="name">4.jpg</span><span class="size">71906</span><span class="date">5/19/2017 2:02:18 PM</span></li>
<li><span class="name">5.jpg</span><span class="size">90691</span><span class="date">5/19/2017 2:02:18 PM</span></li></ul>
</div>
</body>
</html>
How can I get the images from the folder and then use them in this plugin?
#leff because of browser security framework we cant get location of file.
You will get file path as "C:\fakepath\Capture.PNG". So to resolve that that fakepath. I found one solution, may be this one work.
So what you can do a simple trick that take a variable and assigned it the base address of you file location. After that append the file name with the base address this will give you file location.
Hope this one solve your problem
<!doctype html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<input type="file" id="imageFile">
<button id="getFileNameButton">GET-FILE-NAME</button>
</body>
<script type="text/javascript">
$( "#getFileNameButton" ).click(function() {
var baseAddress = "fixed/file/location";
var name = document.getElementById("imageFile").files[0].name; /* get
file name*/
console.log(baseAddress+'/'+name);
});
</script>
</html>
I created simple website, by used HTML5, CSS3, JS and Bootstrap. I have conflict with jumbotron and img-responsive. When I minimize the screen aprox. below 760, I see two wallpapers the div.jumbotron, and img-responsive. but I want to see only the img-responsive.
I was checking many times what's going on, but I have no idea.
Do somebody can review the code. I will be really grateful.
Link to this web -https://magdalena-dering.github.io/RWD-Coffee-Corner/
/*BODY*/
body {
background-color: #ffeee6;
font-family: 'Mirza', cursive;
}
/*HEADER*/
#header-nav {
background-color: #ffffff;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand a:focus,
.navbar-brand a:hover {
text-decoration: none;
}
.navbar-brand h1 {
/* Restaurant name */
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
line-height: .75;
}
.navbar-brand span {
font-size: 1em;
color: #4d0000;
}
#nav-list a {
font-size: 1.6em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin-top: 5px;
margin-left: 5px;
background-color: #ffeee6;
border: 1px solid #ffffff;
box-shadow: 0 0 30px #ff9999;
}
#nav-list a:hover {
background: #ffeee6;
box-shadow: 3px 3px 3px #ff9999;
}
.navbar-header button.navbar-toggle,
.navbar-header .icon-bar {
border: 1px solid #661400;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -30px;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
/*HOME PAGE*/
.container .jumbotron {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #4d1a00;
padding: 0;
border: 1px solid #ffffff;
}
#menu-tile,
#specials-tile,
#map-tile {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 280px;
margin: 30px;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#menu-tile:hover,
#specials-tile:hover,
#map-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
#menu-tile {
background: url('../images/menu.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#specials-tile {
background: url('../images/specials1.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
/* FOOTER */
.panel-footer {
background-color: #ffffff;
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 20px;
}
.visible-xs {
border-top: 1px solid #800000;
}
#hours span,
#address span,
#sentence span {
color: #4d0000;
text-align: center;
text-shadow: 3px 3px 3px #ff9999;
font-size: 1.3em;
}
/***********MENU SIDE*********/
.category-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
.category-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.category-tile+div {
margin-bottom: 50px;
}
#menu-title {
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
}
span {
font-size: 1.4em;
text-align: center;
}
.text-center {
margin-top: 0px;
margin-bottom: 30px;
}
/***********COFFEE CATEGORY SIDE*********/
.coffee-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 180px;
height: 180px;
margin: 0 auto 15px;
margin-bottom: 120px;
}
.coffee-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.coffee-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.row {
margin-right: 0px;
margin-left: 0px;
}
.coffee-price {
font-size: 1.2em;
text-align: center;
margin-top: -110px;
margin-bottom: 20px;
}
.menu-item-tile .menu-item-price span {
font-size: .6em;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 230px;
height: 230px;
margin: 0 auto 15px;
}
.sweets-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.sweets-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.3em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.sweet-price {
font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 35px;
}
/***********SPECIALS SIDE*********/
.specials-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/bday.jpg') no-repeat;
}
.specials-tile2 {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/catering.jpg') no-repeat;
}
.specials-tile:hover,
.specials-tile2:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.specials-tile span,
.specials-tile2 span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
h4 {
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text1,
.text2 {
font-size: 1.3em;
text-align: center;
margin-top: 10px;
position: relative;
border: solid 1px #ffcccc;
padding: 5px;
background-color: #ffe6e6;
}
.text1 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text2 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
/***********CONTACT SIDE*********/
#map-contact {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 250px;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#map-contact:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.head-text {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
margin: 20px;
}
.contact-description {
font-size: 1.3em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin: 30px;
}
}
/********** Large devices only **********/
#media (min-width: 1200px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
}
.container .jumbotron {
background: url(../images/coffee-wallpapers-1200.jpg) no-repeat;
height: 675px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
/* Home Page */
.container .jumbotron {
background: url(../images/coffee-wallpapers-992.jpg) no-repeat;
height: 558px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
margin: 5px;
}
/* Home Page */
.container .jumbotron {
background: url('../images/coffee-wallpapers-768.jpg') no-repeat;
height: 432px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand {
padding-top: 10px;
}
.navbar-brand h1 {
/* Restaurant name */
padding-top: 10px;
font-size: 5vw;
/* 1vw = 1% of viewport width */
margin-top: -10px;
}
#nav-list a {
font-size: 4vw;
}
.navbar-brand span {
font-size: 3vw;
color: #4d0000;
}
/*Home Page*/
#logo-img {
background: url('../images/md.png') no-repeat;
height: 76px;
width: 210px;
}
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
/*Footer*/
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: vw;
}
.panel-footer {
font-size: 3vw;
}
#hours span,
#address span,
#sentence span {
font-size: 4vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 4vw;
}
#menu-title {
font-size: 4vw;
}
span {
font-size: 3vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 4vw;
}
.coffee-price {
font-size: 4vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 4vw;
}
.sweet-price {
font-size: 4vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 4vw;
}
.text1,
.text2 {
font-size: 3vw;
margin: 15px;
}
.text-center span {
font-size: 4vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 4vw;
}
}
/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
#media (max-width: 479px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 6vw;
margin-left: 10px;
}
#nav-list a {
font-size: 5vw;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 6vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 6vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
/********** Super EXTRA (created by me) extra small devices Only :-)**********/
#media (max-width: 423px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 7vw;
}
#nav-list a {
font-size: 6vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
width: 150px;
height: 54px;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 5vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 5vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
}
<!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>responsive design - coffee corner</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Mirza:400,500,600,700" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-xs visible-sm visible-md visible-lg">
<div id="logo-img"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>coffee corner</h1><span> Magdalena Dering ©<br> RWD</span></a>
</div>
<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li id="navMenuButton">
<a href="menu.html " onclick="$dc.loadMenuCategories();">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> menu</a>
</li>
<li>
<a href="specials.html">
<span class="glyphicon glyphicon-star-empty"></span><br class="hidden-xs"> specials</a>
</li>
<li>
<a href="contact.html">
<span class="glyphicon glyphicon-envelope"></span><br class="hidden-xs"> contact</a>
</li>
</ul>
<!-- #nav-list -->
</div>
<!-- .collapse .navbar-collapse -->
</div>
<!-- .container -->
</nav>
<!-- #header-nav -->
</header>
<div id="main-content" class="container">
<div class="jumbotron">
<img src="images/coffee-wallpapers-768.jpg" alt="Picture of restaurant" class="img-responsive visible-xs">
</div>
</div>
<div class="row"></div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu.html">
<div id="menu-tile"><span>menu</span></div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="specials.html">
<div id="specials-tile"><span>specials</span></div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="https://www.google.pl/maps/place/1211+6th+Ave,+New+York,+NY+10036,+Stany+Zjednoczone/#40.7586101,-73.9841164,17z/data=!3m1!4b1!4m5!3m4!1s0x89c258ff14d2b811:0x3569ce18f2731425!8m2!3d40.7586101!4d-73.9819277" target="_blank">
<div id="map-tile">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.155246285712!2d-73.98411638459368!3d40.75861007932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258ff14d2b811%3A0x3569ce18f2731425!2s1211+6th+Ave%2C+New+York%2C+NY+10036%2C+Stany+Zjednoczone!5e0!3m2!1spl!2spl!4v1482304685186"
width=315 height="280" frameborder="0" style="border:0" allowfullscreen></iframe>
<span>map</span>
</div>
</a>
</div>
</div>
<!-- End of #home-tiles -->
</div>
<!-- End of #main content -->
<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span><b>hours:</b><br></span> monday - friday: 11am- 8pm<br> saturday - sunday: 10am - 9pm<br>
<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span><b>address:</b><br></span> 1211 6th Ave, New York<br> NY 10036
<hr class="visible-xs">
</section>
<section id="sentence" class="col-sm-4">
<span><b>quots:</b><br></span><i>
“Let me wake up next to you, have coffee in the morning and wander through<br>the city with your hand in mine, and I'll be happy for the rest of my fucked<br> up little life.”</i><br> ― Charlotte Eriksson
<hr class="visible-xs">
</section>
</div>
</div>
</footer>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Best,
Megi
add background for 760 media without url & height 100% to your custom style css
#media (max-width: 767px) {
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
background: url('');
height: 100%;
}
}
Hello does anyone know why my it doesn't display 3 instead of {{remain}} ? I got the error :
"Error: $injector:nomod Module Unavailable".
My snippet work here but I don't know why it does not work to my side
/index.html
/app.js
/MyTodoList.js
/style.css
//Inside app.js
var app = angular.module("myapp", []);
//Inside MyTodoList.js
app.controller('TodoCtrl', ['$scope', function ($scope) {
$scope.remain = 3;
}]);
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
color: #4d4d4d;
width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.sapUiTv, .sapUiBtnS {
font: inherit;
font-size: inherit;
}
#todoapp {
background: #fff;
background: rgba(255, 255, 255, 0.9);
margin: 130px 0 40px 0;
border: 1px solid #ccc;
position: relative;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
#todoapp:before {
content: '';
border-left: 1px solid #f5d6d6;
border-right: 1px solid #f5d6d6;
width: 2px;
position: absolute;
top: 0;
left: 40px;
height: 100%;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#todoapp input:-moz-placeholder {
font-style: italic;
color: #a9a9a9;
}
#todoapp h1 {
position: absolute;
top: -120px;
width: 100%;
font-size: 70px;
font-weight: bold;
text-align: center;
color: #b3b3b3;
color: rgba(255, 255, 255, 0.3);
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
#header {
padding-top: 15px;
border-radius: inherit;
}
#header:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 15px;
z-index: 2;
border-bottom: 1px solid #6c615c;
background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px;
border-top-right-radius: 1px;
}
#main {
position: relative;
z-index: 2;
border-top: 1px dotted #adadad;
}
#new-todo,
.sapUiTfBrd.sapUiTfRo.todo,
.sapUiTfBrd.sapUiTfStd.todo {
position: relative;
margin: 0;
margin-right: 153px;
width: 100%;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
background-color: transparent;
border: 0;
outline: none;
color: #4D4D4D;
padding: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.sapUiTfBrd.sapUiTfStd.todo {
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
}
.sapUiTfBrd.sapUiTfRo.todo[data-completed="true"] {
color: #a9a9a9;
text-decoration: line-through;
}
#toggle-all {
display: block;
outline: none;
}
#toggle-all input {
z-index: 3;
position: absolute;
text-align: center;
top: 9px;
left: -15px;
width: 65px;
height: 41px;
-webkit-transform: rotate(90deg);
/* transform: rotate(90deg); */
-webkit-appearance: none;
appearance: none;
}
#toggle-all input:before {
content: '»';
font-size: 28px;
color: #d9d9d9;
padding: 0 25px 7px;
}
#toggle-all input:checked:before {
color: #737373;
}
#new-todo {
padding: 15px 15px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.02);
z-index: 2;
box-shadow: none;
}
#todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.checkbox-align {
padding-top: 7px;
margin-bottom: 0;
vertical-align: middle;
}
#todo-list li {
position: relative;
font-size: 24px;
border-top: 1px dotted #ccc;
}
#todo-list input[type='checkbox'] {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
/*
position: absolute;
top: 0;
bottom: 0;
*/
margin: auto 0;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
#todo-list input[type='checkbox']:after {
content: '✔';
line-height: 62px;
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}
#todo-list input[type='checkbox']:checked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
}
#todo-list input:not([type='checkbox']) {
word-break: break-word;
padding: 15px;
margin-left: 45px;
display: block;
line-height: 1.2em;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#todo-list li .destroy {
outline: none;
background-color: transparent;
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 22px;
color: #a88a8a;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#todo-list li .destroy:hover {
text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
#todo-list li .destroy:after {
content: '✖';
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list .sapUiRrNoData,
#todo-list .sapUiRrPtb,
#todo-list .sapUiRrFtr {
display: none;
}
#footer {
color: #777;
padding: 0 15px;
position: absolute;
right: 0;
bottom: -31px;
left: 0;
height: 20px;
z-index: -1;
text-align: center;
}
#footer:before {
content: '';
position: absolute;
right: 0;
bottom: 31px;
left: 0;
height: 50px;
z-index: -1;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 6px 0 -3px rgba(255, 255, 255, 0.8),
0 7px 1px -3px rgba(0, 0, 0, 0.3),
0 43px 0 -6px rgba(255, 255, 255, 0.8),
0 44px 2px -6px rgba(0, 0, 0, 0.2);
}
#footer #AllTodos, #footer #ActiveTodos, #footer #CompletedTodos {
color: #83756f;
}
#footer #clear-completed {
color: inherit;
}
#footer .sapUiHLayoutChildWrapper:nth-of-type(1) {
float: left;
text-align: left;
}
#todo-count {
vertical-align: 1px;
}
#todo-count:first-letter {
font-weight: bold;
}
#filters {
margin: 0;
padding: 0 2px 0 0;
position: absolute;
right: 0;
left: 0;
outline: none;
}
#filters .sapUiBtnStd,
#filters .sapUiBtnFoc {
background-color: transparent;
font-weight: normal;
outline: none;
padding-right: 3px;
margin-top: -1px;
}
#filters .sapUiSegButtonSelected.sapUiBtnStd,
#filters .sapUiSegButtonSelected.sapUiBtnAct.sapUiBtnFoc {
font-weight: bold;
}
#footer .sapUiHLayoutChildWrapper:nth-of-type(3) {
float: right;
}
#clear-completed {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
font-size: 11px;
padding: 0 10px;
border-radius: 3px;
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
height: 20px;
outline: none;
}
#-moz-document url-prefix() {
#clear-completed {
top: -22px;
}
}
#clear-completed:hover {
background: rgba(0, 0, 0, 0.15);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}
#info {
margin: 65px auto 0;
color: #a6a6a6;
font-size: 12px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
text-align: center;
}
#info a {
color: inherit;
}
.hidden{
display:none;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px dashed #C5C5C5;
border-bottom: 1px dashed #F7F7F7;
}
.learn a {
font-weight: normal;
text-decoration: none;
color: #b83f45;
}
.learn a:hover {
text-decoration: underline;
color: #787e7e;
}
.learn h3,
.learn h4,
.learn h5 {
margin: 10px 0;
font-weight: 500;
line-height: 1.2;
color: #000;
}
.learn h3 {
font-size: 24px;
}
.learn h4 {
font-size: 18px;
}
.learn h5 {
margin-bottom: 0;
font-size: 14px;
}
.learn ul {
padding: 0;
margin: 0 0 30px 25px;
}
.learn li {
line-height: 20px;
}
.learn p {
font-size: 15px;
font-weight: 300;
line-height: 1.3;
margin-top: 0;
margin-bottom: 0;
}
.quote {
border: none;
margin: 20px 0 60px 0;
}
.quote p {
font-style: italic;
}
.quote p:before {
content: '“';
font-size: 50px;
opacity: .15;
position: absolute;
top: -20px;
left: 3px;
}
.quote p:after {
content: '”';
font-size: 50px;
opacity: .15;
position: absolute;
bottom: -42px;
right: 3px;
}
.quote footer {
position: absolute;
bottom: -40px;
right: 0;
}
.quote footer img {
border-radius: 3px;
}
.quote footer a {
margin-left: 5px;
vertical-align: middle;
}
.speech-bubble {
position: relative;
padding: 10px;
background: rgba(0, 0, 0, .04);
border-radius: 5px;
}
.speech-bubble:after {
content: '';
position: absolute;
top: 100%;
right: 30px;
border: 13px solid transparent;
border-top-color: rgba(0, 0, 0, .04);
}
/**body*/.learn-bar > .learn {
position: absolute;
width: 272px;
top: 8px;
left: -300px;
padding: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, .6);
transition-property: left;
transition-duration: 500ms;
}
#media (min-width: 899px) {
/**body*/.learn-bar {
width: auto;
margin: 0 0 0 300px;
}
/**body*/.learn-bar > .learn {
left: 8px;
}
/**body*/.learn-bar #todoapp {
width: 550px;
margin: 130px auto 40px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<section id = "todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form">
<input type="text" id="new-todo" placeholder="New task" autofocus autocomplete="off" ng-model="remain">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li>
<div class="view">
<input type="checkbox" class="toggle">
<label>Etendre le linge</label>
<button class="destroy"></button>
</div>
</li>
</u1>
</section>
<footer id="footer">
<span id="todo-count"><strong> {{ remain }} </strong> Tasks remaining
</span>
</footer>
</section>
<script src="MyTodoList.js"></script>
<script src="app.js"></script>
</body>
</html>
The problem is with your cdn as it gives error. Use the below angularjs cdn. It will solve your problem.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js
See plunkr demo for this :
https://plnkr.co/edit/S6RYmyJE1BPIRpXtldRg?p=preview
I´ve trying to implement this simple slideshow: http://codepen.io/rafaelcastrocouto/pen/doZNMo
But im not having sucess and i dont know what the problem is, the only thing that shows up is the last image of the slideshow, i added the path to the js file, checked if the name are correct, but stil no luck.
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function() {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
button.click(function() {
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function() {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function() {
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/slider.js"></script>
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>
I believe your jquery wasn't included. Here is the same code with jquery included and the slideshow working.
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function() {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
button.click(function() {
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function() {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function() {
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/slider.js"></script>
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>