I'm trying to create a canvas on top of some text, how do I make it so that the canvas doesn't push away the text?
In my code I would like to make something fly from one side to the other in random size and place. I want the text in the middle but every time I add the canvas it pushes the text down to create space.
Here is the code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 40) {
$(".woord").css({
"opacity": "0"
})
} else {
$(".woord").css({
"opacity": "1"
})
}
})
})
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: white;
background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #33D7FF);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 20px;
overflow: auto;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/*witte div*/
#div1 {
width: 100%;
height: 1000px;
margin-left: -10px;
margin-right: 220px;
padding: 50px, 50px, 50px, 50px;
background-color: white;
border-radius: 100px 100px 0px 0px;
}
#div1 h1 {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
#div1 p {
color: black;
font-family: lucida console, monospace;
font-size: 50px;
text-align: center;
}
h1 {
color: black;
font-family: lucida console, monospace;
font-size: 150px;
text-align: center;
margin-top: 300px;
}
.woord {
transition: 0.5s;
border: 0px;
height: 550px;
margin-left: -10px;
margin-bottom: -22px;
}
li {
font-size: 30px;
font-family: lucida console, monospace;
display: inline;
text-align: center;
}
a {
transition: ease-in-out .2s;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
border: 1px solid;
zoom: 1.1;
}
.nav {
border: 1px solid;
border-width: 1px;
height: 64px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
box-sizing: border-box;
width: 1000px;
margin-left: 220px;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woord">
<h1>website</h1>
<canvas id="canvas" width="200" height="100"></canvas>
</div>
<div id="div1">
<h1>main</h1>
<ul class="nav">
<li>Biografie</li>
<li>fotos</li>
<li>heuristiek</li>
<li>buienradar</li>
<li>Contact</li>
</ul>
<p>hoi</p>
<p>dit is mijn website <br /> over mijzelf </p>.
</div>
A possible solution is using position absolute, on the canvas itself.
canvas {
position: absolute;
}
Let me prefix that I'm not very skilled nor know many good practices, I'm learning by doing as projects come about.
I'm using Swiper for a game list slider, but when its put inside another Div it just disappears. I can position and size it correctly outside the Div, but I can't make it responsive that way and its very unorganized.
Below is the section, with the schedule to be on the left and the game slider to be on the right. When outside of the Games Div it will show, but when inside the Div it entirely disappears.
<!-- Start of schedule container -->
<div id="info-wrapper">
<section id="info">
<div id="schedule" class="container">
<div class="row">
<div class="col">
<h1 id="title"> Stream Schedule</h1>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Mondays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Tuesdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Wednesdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Thursdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Fridays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
</div>
<!-- Container for game list -->
<div id="games" class="container">
<h1 id="title"> What I've been playing </h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</section>
Full CSS below for main stylesheet. All other styles for Swiper can be found at http://idangero.us/swiper/
body, html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
color: #fff;
font-size: 100%;
line-height: 1.25em;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: inherit;
}
.clear:after, .clear:before, .container:after, .container:before {
content: "";
display: table;
}
.clear:after, .container:after {
clear: both;
}
.clear, .container {
zoom: 1;
}
#header ul #nav li a:hover, .accent, .btn:hover {
background: #rgba(62, 24, 82, 1);
color: #fff;
}
.forum {
padding: 3px 8px 4px 8px !important;
}
.btn:hover {
border-color: #6246a3;
}
.container {
padding: 0 3%;
}
#header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 40px 35px;
}
#header #displayname {
margin: 0;
padding: 0;
font-size: 137%;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.label {
font-family: Arial, sans-serif;
font-size: 54%;
letter-spacing: 1px;
padding: 0 8px;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
white-space: nowrap;
vertical-align: middle;
font-weight: 700;
margin-top: -4px;
display: inline-block;
}
#header ul#nav {
margin: 2px 0 0;
padding: 0;
}
#header ul#nav li {
display: inline-block;
list-style: none;
font-size: 120%;
}
#header ul#nav li a {
padding: 3px 8px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
transition: background .3s ease;
outline: none;
}
#content {
box-sizing: border-box;
padding: 132px 0;
width: 100%;
height: 100%;
display: table;
text-align: center;
background: rgba(0, 0, 0, .7);
}
#content .container {
display: table-cell;
vertical-align: middle;
}
.avatar {
border-radius: 50%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom: 25px;
width: 145px;
height: 145px;
}
.name {
color: #eee;
font-size: 104%;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 7px;
line-height: 1.5em;
}
.status {
font-size: 220%;
line-height: 1.3em;
font-weight: 300;
letter-spacing: 0;
margin: 0 0 20px;
}
.btn {
padding: 15px 24px;
border: 1px solid #FFF;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
font-size: 100%;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
white-space: nowrap;
vertical-align: middle;
display: inline-block;
transition: background ease .3s;
}
.live {
background: rgba(62, 24, 82, 1);
border: none;
-webkit-animation: pulse 2s infinite;
-moz-animation: pulse 2s infinite;
-o-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
.label .live-status {
font-size: 20px;
line-height: 19px;
vertical-align: middle;
margin-right: 3px;
}
#footer {
position: absolute;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 14px 30px;
}
#footer p {
font-size: 80%;
color: #FFF;
font-weight: 600;
opacity: .4;
transition: opacity ease .3s;
line-height: 1em;
}
#footer p:hover {
opacity: .8;
}
#footer .left {
float: left;
}
#footer .right {
float: right;
}
#media (min-width: 801px) {
#header #displayname {
float: left;
}
#header ul#nav {
float: right;
}
#header ul#nav li {
margin-left: 21px;
}
}
#media (max-width: 800px) {
#header {
padding: 24px 20px 20px;
}
#header #displayname {
text-align: center;
}
#header ul#nav {
margin: 20px auto 0;
text-align: center;
}
#header ul#nav li {
margin: 0 4px 12px;
}
}
#media (max-width: 750px) {
.name {
font-size: 100%;
}
.status {
font-size: 200%;
}
.btn {
width: 80%;
}
.avatar {
width: 120px;
height: 120px;
}
#footer p {
font-size: 60%;
padding: 0px 0px;
}
.accent, .btn:hover, #header ul#nav li a:hover {
background: #330066;
}
.btn:hover {
border-color: #330066;
}
.live {
background: #330066;
border: none;
}
#-webkit-keyframes pulse {
from {
opacity: 1.0;
-webkit-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-webkit-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-webkit-box-shadow: 0 0 15px #330066;
}
}
#-moz-keyframes pulse {
from {
opacity: 1.0;
-moz-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-moz-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-moz-box-shadow: 0 0 15px #330066;
}
}
#-o-keyframes pulse {
from {
opacity: 1.0;
-o-box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
-o-box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
-o-box-shadow: 0 0 15px #330066;
}
}
#keyframes pulse {
from {
opacity: 1.0;
box-shadow: 0 0 15px #330066;
}
50% {
opacity: 0.8;
box-shadow: none;
0 0 0px #330066;
}
to {
opacity: 1.0;
box-shadow: 0 0 15px #330066;
}
}
}
#content {
background: rgba(0, 0, 0, .8)
}
#live {
background: url("http://www.tokkoro.com/picsup/2860789-batman-the-dark-knight-joker-messenjahmatt___movie-wallpapers.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
#info-wrapper {
background: url("../img/cell.jpg") no-repeat center center;
}
#info {
height: 60vh;
width: 100%;
padding: 0;
margin: 0;
background-color: rgba(39, 0, 59, .8);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#schedule {
background-color: rgba(0, 0, 0, .4);
display: inline-flex;
flex-direction: column;
width: 30vh;
height: auto;
float: left;
}
#dates {
font-size: 80%;
}
#dates .p {
font-size: 100%;
}
/* Games Section Wrapper */
.swiper-container {
width: 50%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#title {
color: #fff;
font-size: 150%;
font-weight: 600;
letter-spacing: 2px;
}
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
/* Pulse Animations Min */
#-webkit-keyframes pulse {
from {
opacity: 1;
-webkit-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-webkit-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-webkit-box-shadow: 0 0 12px #6246a3;
}
}
#-moz-keyframes pulse {
from {
opacity: 1;
-moz-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-moz-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-moz-box-shadow: 0 0 12px #6246a3;
}
}
#-o-keyframes pulse {
from {
opacity: 1;
-o-box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
-o-box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
-o-box-shadow: 0 0 12px #6246a3;
}
}
#keyframes pulse {
from {
opacity: 1;
box-shadow: 0 0 12px #6246a3;
}
50% {
opacity: .8;
box-shadow: none;
: 0 0 0 #6246a3;
}
to {
opacity: 1;
box-shadow: 0 0 12px #6246a3;
}
}
/* Querying additional screen sizes. */
#media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
Please let me know if I'm lacking any more information here and I'll update! Scratching my head with this, so thank you in advance for any help!
Add CSS:
#games{
height: 100%;
}
i'm developing an app that should show a cookie bar and if the user click on the "X" it should to close, i've thinked to do it with the onclick attribute but it is ignored.
This is my code:
console.log("Ready !");
var close = function () {
console.log("close");
}
.cookie-bar {
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #800000;
color: white;
font-size: 14px;
font-family: "Lato", sans-serif;
font-weight: 100;
transition: .8s;
animation: slideIn .8s;
animation-delay: .8s;
.message {
white-space: nowrap;
text-shadow: 0 1px 0 darken(red, 10%);
#media (max-width: 767px){
display: none;
}
}
.mobile {
display: none;
#media (max-width: 767px){
display: inline-block;
}
}
}
#keyframes slideIn {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.close-cb {
border: none;
color: white;
background: darken(red, 20%);
position: absolute;
display: inline-block;
right: 10px;
top: 0;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 0 0 3px 0 rgba(0,0,0,.2);
line-height: 30px;
height: 30px;
width: 30px;
font-size: 16px;
font-weight: bold;
&:hover {
background: darken(red, 10%);
}
}
.checkbox-cb {
display: none;
&:checked + .cookie-bar {
transform: translateY(-50px);
}
}
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" onclick="close()"/>
<div class="cookie-bar" id="cookie">
<span class="message">Questo sito utilizza i cookies</span>
<label for="checkbox-cb" class="close-cb" >x</a>
</div>
Can i solve it?
Thank's
I'm working on this web page at http://helpir-staging.herokuapp.com. It isn't perfect but it scrolls fine on Safari. In Firefox it only scrolls using the arrow keys (no mouse scroll), and in Chrome I don't get any scroll at all.
There must be something horrifically wrong in my CSS. Any help would be really appreciated.
I'm using bootstrap, bootcards, angularjs and angular-dynamic-layout.
app.scss:
$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
$hero-image: "../assets/images/slider.jpg";
#import '../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
#import '../bower_components/bootstrap-social/bootstrap-social.scss';
$fa-font-path: "../bower_components/font-awesome/fonts";
#import '../bower_components/font-awesome/scss/font-awesome';
// App-wide Styles
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
// KAREL CSS
$heynay-background: #FAFAFA;
$heynay-peach: #f27949;
$helpir-gray: rgba(255,255,255,0.5);
html, body {
height: 100%;
width: 100%;
// background-color: blue;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.85em;
}
hr {
display: none;
}
body {
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}
.alert {
margin: 10px 0px;
}
.margined {
margin: 5px;
}
.navbar-default,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-text
{
color: #eeeeee;
background-color: transparent;
}
.footer > p,
.footer > p > a,
{
color: #888888;
background-color: transparent;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a.active,
.navbar-default .navbar-nav>li>a:focus ,
.navbar-default .navbar-nav>li>a>p.active ,
.navbar-default .navbar-nav>li>a>p:focus {
border-radius: 3px;
color: #111111;
background-color: $helpir-gray;
}
#profile-button {
margin: 0px;
padding: 12px 5px;
height: 50px;
}
#profile-button:hover,
#profile-button.active {
border-radius: 3px;
color: white;
background-color: $heynay-peach;
}
.navbar-default .navbar-nav>li>a>p {
color: white;
background: none;
margin: 0px;
padding: 0px;
}
.navbar-default .navbar-nav>li>a>p>img {
height: 30px;
width: 30px;
padding: 3px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.btn-default {
color: #000;
background-color: $heynay-peach;
}
.btn-default {
color: #f00;
background-color: $heynay-peach;
}
.btn-default[disabled] {
background-color: #9B9B9B;
}
.btn-default:hover {
background-color: $heynay-background;
color: white;
}
.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 0px solid transparent;
border-radius: 4px;
}
.icon-brand {
color: $heynay-background;
}
.heynay-legal {
text-align: left;
}
.panel-default > .panel-heading {
background: $heynay-background;
}
.panel-title > a,
.panel-title > a {
text-decoration: none;
color: white;
}
.panel-title > a:hover,
.panel-title > a.active {
text-decoration: none;
color: black;
}
[ng-click],
[data-ng-click],
[x-ng-click] {
cursor: pointer;
}
// GLOBAL STYLES
footer {
height: 60px;
text-align: center;
background-color: $heynay-background;
padding-top:20px;
padding-bottom:20px;
font-size: 0.8em;
}
#heynay-logo {
font-size: 25px;
color: #000000;
}
.navbar-toggle {
background-color: $heynay-peach;
border-color: transparent;
}
.desktop-footer {
display : none;
}
.mobile-footer {
display : inline;
}
// not sure if tyhis is used.
.general-section {
text-align: left;
padding: 50px 10px;
min-height: 75%;
font-size: 0.9em;
}
.floating-pane-holder {
display: none;
z-index:1000;
color: white;
background-color: $heynay-peach;
position: fixed;
height: 50px;
width: 90px;
top: 100px;
left: 48%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.floating-pane-content {
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
position: absolute;
}
#media(min-width: 450px) {
.navbar-default,
.navbar-default .navbar-nav>li>a,
.footer > p,
.footer > p > a
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
font-size: 0.95em;
border-color: transparent;
}
h1 {
font-size: 3em;
}
p {
font-size: 1em;
}
hr {
display: block;
}
}
#media(min-width:1000px) {
.navbar-default,
.navbar-default .navbar-nav>li>a,
.footer > p,
.footer > p > a
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
font-size: 1em;
border-color: transparent;
}
#heynay-logo {
font-size: 35px;
}
}
// TABLES
.desktop-table {
display : none;
}
.mobile-table {
display : inline;
}
// TABLES END
// MODAL BEGIN
.ngdialog.ngdialog-theme-default
.ngdialog-content {
width: 700px;
}
// MODAL END
#media(min-width:750px) {
.navbar {
padding: 20px 0;
background-color: transparent;
-webkit-transition: background .35s ease-in-out,padding .5s ease-in;
-moz-transition: background .35s ease-in-out,padding .5s ease-in;
transition: background .35s ease-in-out,padding .5s ease-in;
border-color: transparent;
}
.desktop-footer {
display : inline;
}
.mobile-footer {
display : none;
}
.top-nav-collapse {
padding: 0;
background-color: $heynay-background;
}
footer {
height: 60px;
font-size: 1em;
bottom:0;
height:2em;
}
.general-section {
padding: 100px 10px;
font-size: 1em;
}
.navbar-default .navbar-nav>li>p {
padding: 15px;
margin: 0px;
border-color: transparent;
}
}
#media(min-width: 900px) {
.desktop-table {
display : inline;
}
.floating-pane-holder {
top: 150px;
left: 10px;
transform: none;
-webkit-transform: none;
}
.mobile-table {
display : none;
}
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
// SPINNER
.spinner {
margin: 100px auto 0;
margin-bottom: 100px;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: $heynay-background;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
// Prevent first frame from flickering when animation starts
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
#keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
// Component styles are injected through grunt
// injector
#import 'admin/admin.scss';
#import 'main/main.scss';
#import '../components/category-tile/category-tile.scss';
#import '../components/footer/footer.scss';
#import '../components/modal/modal.scss';
#import '../components/oauth-buttons/oauth-buttons.scss';
// endinjector
category-tile.css
// dynamic layout bits...
#media (min-width: 1000px) {
[dynamic-layout] {
width: 1000px;
margin-top: 25px;
}
.dynanamic-layout-col-4 {
width: 250px;
margin-top: 20px;
}
.dynamic-layout-col-8 {
width: 500px;
}
}
#media (min-width: 900px) {
[dynamic-layout]{
width: 900px;
margin-top: 20px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 600px;
}
}
#media (min-width: 600px) and (max-width: 900px){
[dynamic-layout]{
width: 600px;
margin-top: 8px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 600px;
}
}
#media (max-width: 600px){
[dynamic-layout]{
width: 300px;
margin-top: 6px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 300px;
}
}
.dynamic-layout-item {
padding: 10px;
width: auto;
}
.move-items-animation{
transition-property: left, top;
transition-duration: .25s;
transition-timing-function: ease-in-out;
}
.dynamic-layout-item-parent.ng-enter{
transition: .25s ease-in-out;
opacity:0;
}
.dynamic-layout-item-parent.ng-enter.ng-enter-active{
opacity:1;
}
.dynamic-layout-item-parent.ng-leave{
transition: .5s ease-in-out;
opacity:1;
}
.dynamic-layout-item-parent.ng-leave.ng-leave-active{
opacity:0;
}
[dynamic-layout]{
// float: left;
position: absolute;
// overflow: hidden;
// height: 1000px;
}
.container-fluid{
position: absolute;
left: 50%;
transform: translate(-50%);
height:auto;
}
.title {
// margin-bottom: 50px;
}
main.css
.thing-form {
margin: 20px 0;
}
#banner {
border-bottom: none;
margin-top: -45px;
}
#banner h1 {
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
}
.hero-unit {
background-image: url("#{$hero-image}");
position: relative;
# padding: 30px 15px;
color: #F5F5F5;
# background: #4393B9;
background-size:cover;
background-repeat: no-repeat;
color: #fff;
cursor: default;
padding: 1em 0 0 0;
}
.header-text {
text-align: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
cursor: default;
position: relative;
}
.navbar-text {
margin-left: 15px;
}
.privacy-terms {
margin-top: 75px;
}
.support-section {
padding-top: 150px;
text-align: center;
min-height: 85%;
}
#media(min-width: 400px) {
.intro-section {
// background: url("#{$hero-image}") no-repeat 98% 30%;
}
}
#media(min-width: 750px) {
.intro-section {
padding-top: 150px;
}
}
Your script vendor (idk what it is) is breaking it, in chrome under inspect I see this:
body, html {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
change hidden to visible and it works, at least in chrome. initialize your custom css file after the vendor script and the css property should be fixed.
I am attempting to make a image slider, using the design my client is already using. But I have never made an image slider that changes images every 6 seconds, and you can choose to go to image 1, 2, or 3. Right now I am using 3 <div>'s and each one has the image assigned to them with the background.
Please excuse my sad attempt of Javascript, I am very new with it, and only know a few ways to work with it and jQuery.
And yes, I do have jQuery included on my page.
Oh, and all the <div>'s are display:none;, so to make them visible, I am adding a class called .active.
Here's a jsFiddle to my current work - http://jsfiddle.net/377Ma/4/
And here's the code.
HTML
<div class="art-slider art-slidecontainerheader" data-width="800" data-height="250">
<div class="art-slider-inner">
<div class="art-slide-item art-slideheader0 active" style="" id="img1">
</div>
<div class="art-slide-item art-slideheader1 active" style="" id="img2">
</div>
<div class="art-slide-item art-slideheader2" style="" id="img3">
</div>
</div>
</div>
<div class="art-slidenavigator art-slidenavigatorheader" data-left="92">
</div>
<div class="art-shapes">
</div>
</header>
<nav class="art-nav desktop-nav">
<ul class="art-hmenu menu-3">
<li class="menu-item-45"><a title="shop" href="http://www.iamsotare.storenvy.com">shop</a>
</li>
<li class="menu-item-116"><a title="blog" href="http://iamsotare.com/blog/">blog</a>
</li>
<li class="menu-item-115"><a title="story" href="http://iamsotare.com/story/">story</a>
</li>
<li class="menu-item-114"><a title="connect" href="http://iamsotare.com/connect/">connect</a>
</li>
<li class="menu-item-113"><a title="FAQs" href="http://iamsotare.com/faqs/">FAQs</a>
</li>
</ul>
</nav>
</div>
CSS - sorry, I couldn't find the exact spots needed, it's a bit long.
#content{
margin-left:auto;
margin-right:auto;
width:100%;
max-width:800px;
}
.active{
display:block;
}
.a
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-hmenu a, .art-vmenu a, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
}
header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position: inside;
}
html, body
{
height: 100%;
}
body
{
padding: 0;
margin:0;
color: #303F50;
}
.art-header:before, #art-header-bg:before, .art-layout-cell:before, .art-layout-wrapper:before, .art-footer:before, .art-nav:before, #art-hmenu-bg:before, .art-sheet:before
{
width: 100%;
content: " ";
display: table;
}
.art-header:after, #art-header-bg:after, .art-layout-cell:after, .art-layout-wrapper:after, .art-footer:after, .art-nav:after, #art-hmenu-bg:after, .art-sheet:after,
.cleared, .clearfix:after {
clear: both;
font: 0/0 serif;
display: block;
content: " ";
}
.art-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 0;
}
.art-slider-inner {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.art-slidenavigator > a {
display: inline-block;
vertical-align: middle;
outline-style: none;
font-size: 1px;
}
.art-slidenavigator > a:last-child {
margin-right: 0 !important;
}
.art-slidecontainerheader {
position: relative;
width: 100%;
height: 100%;
}
.art-slidecontainerheader .art-slide-item {
-webkit-transition: 800ms ease-in-out opacity;
-moz-transition: 800ms ease-in-out opacity;
-ms-transition: 800ms ease-in-out opacity;
-o-transition: 800ms ease-in-out opacity;
transition: 800ms ease-in-out opacity;
position: absolute;
display: none;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.art-slidecontainerheader .active, .art-slidecontainerheader .next, .art-slidecontainerheader .prev {
display: block;
}
.art-slidecontainerheader .active {
opacity: 1;
}
.art-slidecontainerheader .next, .art-slidecontainerheader .prev {
width: 100%;
}
.art-slidecontainerheader .next.forward, .art-slidecontainerheader .prev.back {
opacity: 1;
}
.art-slidecontainerheader .active.forward {
opacity: 0;
}
.art-slidecontainerheader .active.back {
opacity: 0;
}
.art-slideheader0 {
background-image: url('slideheader0.jpg');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader1 {
background-image: url('slideheader1.jpg');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slideheader2 {
background-image: url('slideheader2.jpg');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
.art-slidenavigatorheader {
display: inline-block;
position: absolute;
direction: ltr !important;
top: 226px;
left: 92%;
z-index: 101;
line-height: 0 !important;
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
}
.art-slidenavigatorheader
{
background: #B9C2CB;background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -webkit-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -moz-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -o-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: -ms-linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;-svg-background: linear-gradient(top, rgba(232, 235, 238, 0.6) 0, rgba(138, 153, 168, 0.6) 100%) no-repeat;
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;
padding:7px;
}
.art-slidenavigatorheader > a
{
background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;background: #728597;-svg-background: #728597;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
margin:0 10px 0 0;
width: 10px;
height: 10px;
}
.art-slidenavigatorheader > a.active
{
background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;background: #FA681E;-svg-background: #FA681E;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
margin:0 10px 0 0;
width: 10px;
height: 10px;
}
.art-slidenavigatorheader > a:hover
{
background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;background: #455B73;-svg-background: #455B73;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
margin:0 10px 0 0;
width: 10px;
height: 10px;
}
.art-sheet
{
background: #FFFFFF;
-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25);
box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.25);
margin:0 auto;
position:relative;
cursor:auto;
width: 800px;
z-index: auto !important;
}
.art-header
{
margin:0 auto;
height: 250px;
background-image: none;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
z-index: auto !important;
}
.responsive .art-header
{
background-image: none;
background-position: center center;
}
.art-header>.widget
{
position:absolute;
z-index:101;
}
.art-nav
{
margin:0 auto;
position: relative;
z-index: 499;
text-align: center;
}
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}
ul.art-hmenu, ul.art-hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}
ul.art-hmenu li:hover
{
z-index: 10000;
white-space: normal;
}
ul.art-hmenu:after, ul.art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.art-hmenu, ul.art-hmenu ul
{
min-height: 0;
}
ul.art-hmenu
{
display: inline-block;
vertical-align: bottom;
}
.art-nav:before
{
content:' ';
}
.art-hmenu-extra1
{
position: relative;
display: block;
float: left;
width: auto;
height: auto;
background-position: center;
}
.art-hmenu-extra2
{
position: relative;
display: block;
float: right;
width: auto;
height: auto;
background-position: center;
}
.art-menuitemcontainer
{
margin:0 auto;
}
ul.art-hmenu>li {
margin-left: 11px;
}
ul.art-hmenu>li:first-child {
margin-left: 5px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
margin-right: 5px;
}
ul.art-hmenu>li>a
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 20px;
margin:0 auto;
position: relative;
display: block;
height: 55px;
cursor: pointer;
text-decoration: none;
color: #33ADFF;
line-height: 55px;
text-align: center;
}
.art-hmenu a,
.art-hmenu a:link,
.art-hmenu a:visited,
.art-hmenu a.active,
.art-hmenu a:hover
{
font-size: 28px;
font-family: KidTYPEPaintregular, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
}
ul.art-hmenu>li>a.active
{
background: #FFFFFF;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 20px;
margin:0 auto;
color: #33ADFF;
text-decoration: none;
}
ul.art-hmenu>li>a:visited,
ul.art-hmenu>li>a:hover,
ul.art-hmenu>li:hover>a {
text-decoration: none;
}
ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 20px;
margin:0 auto;
}
ul.art-hmenu>li>a:hover,
.desktop ul.art-hmenu>li:hover>a {
color: #FF05CD;
text-decoration: none;
}
ul.art-hmenu>li:before
{
position:absolute;
display: block;
content:' ';
top:0;
left: -11px;
width:11px;
height: 55px;
background: url('menuseparator.png') center center no-repeat;
}
ul.art-hmenu>li:first-child:before{
display:none;
}
ul.art-hmenu li li a
{
background: #B9C2CB;
background: transparent;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0 10px;
margin:0 auto;
}
ul.art-hmenu li li
{
float: none;
width: auto;
margin-top: 2px;
margin-bottom: 2px;
}
.desktop ul.art-hmenu li li ul>li:first-child
{
margin-top: 0;
}
ul.art-hmenu li li ul>li:last-child
{
margin-bottom: 0;
}
.art-hmenu ul a
{
display: block;
white-space: nowrap;
height: 24px;
min-width: 7em;
border: 0 solid transparent;
text-align: left;
line-height: 24px;
color: #6A7D90;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
margin:0;
}
.art-hmenu ul a:link,
.art-hmenu ul a:visited,
.art-hmenu ul a.active,
.art-hmenu ul a:hover
{
text-align: left;
line-height: 24px;
color: #6A7D90;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
margin:0;
}
ul.art-hmenu li li:after
{
display: block;
position: absolute;
content: ' ';
height: 0;
top: -1px;
left: 0;
right: 0;
z-index: 1;
border-bottom: 1px dotted #C6D1DD;
}
.desktop ul.art-hmenu li li:first-child:before,
.desktop ul.art-hmenu li li:first-child:after
{
display: none;
}
ul.art-hmenu ul li a:hover, .desktop ul.art-hmenu ul li:hover>a
{
background: #FFFFFF;
background: transparent;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:0 auto;
}
.art-hmenu ul a:hover
{
text-decoration: none;
}
.art-hmenu ul li a:hover
{
color: #F05305;
}
.desktop .art-hmenu ul li:hover>a
{
color: #F05305;
}
ul.art-hmenu ul:before
{
background: #EFF2F5;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px dotted rgba(207, 216, 226, 0.9);
margin:0 auto;
display: block;
position: absolute;
content: ' ';
z-index: 1;
}
/* Begin Additional CSS Styles */
#font-face {
font-family: 'kidtypepaintregular';
src: url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.eot');
src: url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.woff') format('woff'),
url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.ttf') format('truetype'),
url('http://www.exhibitadrian.com/iamsotare/CustomFonts/kidtypep-webfont.svg#kidtypepaintregular') format('svg');
font-weight: normal;
font-style: normal;
}
.BLUE {
font-family: 'KidTypepaintregular';
color: #0000FF;
font-weight: normal;
}
/* End Additional CSS Styles */
And my sad excuse of Javascript... Haha
var imgcount = 1;
if(imgcount = 1){
$('#img1').addClass("active")
var $this = $(this);
setTimeout(function() {
}, 6000);
imgcount = 2;
}
else if(imgcount = 2){
$('#img1').removeClass("active")
$('#img2').addClass("active")
var $this = $(this);
setTimeout(function() {
}, 6000);
imgcount = 3;
}
else if(imgcount = 3){
$('#img2').removeClass("active")
$('#img3').addClass("active")
var $this = $(this);
setTimeout(function() {
}, 6000);
imgcount = 1;
}
This is not the edit of your posted fiddle.It is the fiddle that i created before and edited for this answer now.
Try this fiddle:
http://jsfiddle.net/kzQFQ/77/
var check=0;
var timer;
var Wwidth=$(window).width()-9;
$(document).ready(function () {
$('.contentContainer').css({'width':''+Wwidth+'px'});
$('.three').click(function () {
$('.container').animate({
'left': '-1120px'
});
clearTimeout(timer);
timer=setTimeout(function () {$('.one').click();}, 6000);
});
$('.two').click(function () {
$('.container').animate({
'left': '-560px'
});
clearTimeout(timer);
timer=setTimeout(function () {$('.three').click();}, 6000);
});
$('.one').click(function () {
$('.container').animate({
'left': ''+0+'px'
});
clearTimeout(timer);
timer=setTimeout(function () {$('.two').click();}, 6000);
});
timer=setTimeout(function () {$('.two').click();}, 6000);
});