I'm a newbie and I'm using fullpage.js for the first time. I hope you can help me.
So my goal is to rotate my logo by 60deg each time I enter a new section. I have 5 sections.
I've been trying some stuff but its not what i desired. Right now I use this.
But it only applies to the section0, section1 and resets at section3.
Why isnt it working?
$(document).ready(function(){
$('#fullpage').fullpage({
//options
sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
easingcss: 'cubic-bezier(.31,.87,.89,.48)',
loopTop: true,
loopBottom: true,
navigation: true,
navigationPosition: 'right',
afterLoad: function(anchor, index) {
$('#logo').toggleClass('rotate1');
},
onLeave: function(index, nextIndex, direction) {
$('#logo').toggleClass('rotate2');
}
});
});
#logo {
position: fixed;
width:80px;
height:80px;
top: 20px;
left: 20px;
z-index: 100;
}
#logo.rotate1 {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#logo.rotate2 {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="assets/css/fullpage.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<script type="text/javascript">
</script>
</head>
<body>
<img id="logo" src="assets/img/logo.svg">
<div id="fullpage">
<div class="section"><h3>Section</h3>1</div>
<div class="section"><h3>Section</h3>2</div>
<div class="section"><h3>Section</h3>3</div>
<div class="section"><h3>Section</h3>4</div>
<div class="section"><h3>Section</h3>5</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/fullpage.min.js" type="text/javascript"></script>
<script src="assets/js/function.js" type="text/javascript"></script>
</body>
</html>
Using jquery data() and css() method
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
easingcss: 'cubic-bezier(.31,.87,.89,.48)',
loopTop: true,
loopBottom: true,
navigation: true,
navigationPosition: 'right',
afterLoad: function(anchor, index) {
let angle = +$('#logo').data('angle') + 60;
$('#logo')
.css({'transform': `rotate(${angle}deg)`})
.data('angle', angle);
}
});
});
#logo {
position: fixed;
width: 80px;
height: 80px;
top: 20px;
left: 20px;
z-index: 100;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.as-console {
display: none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.css" />
<img id="logo" src="https://via.placeholder.com/80" data-angle="-60">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.js"></script>
<div id="fullpage">
<div class="section">
<h3>Section</h3>1</div>
<div class="section">
<h3>Section</h3>2</div>
<div class="section">
<h3>Section</h3>3</div>
<div class="section">
<h3>Section</h3>4</div>
<div class="section">
<h3>Section</h3>5</div>
</div>
Related
can you help me with this please? I tried the tips of other questions but unfortunately that didn't help. I want to change the color of my custom burger menu (with hover effect) depending on the background color of different sections. Here is my HTML and CSS:
https://jsfiddle.net/s4gh8cw9/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<style>
.section {
width: 100%;
height: 450px;
background-color: white;
}
.section-black {
width: 100%;
height: 450px;
background-color: black;
}
.special-con {
cursor: pointer;
display: inline-block;
}
.bar {
display: block;
height: 2px;
width: 20px;
background: #000000;
margin: 5px auto;
}
.col {
display: inline-block;
width: 24%;
text-align: center;
height: auto;
position: fixed;
}
.bar {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.con:hover .arrow-top-fall {
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
.con:hover .arrow-bottom-fall {
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
}
.special-con {
margin: 0 auto;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.special-con:hover .arrow-top-fall {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
.arrow-bottom-fall,
.arrow-top-fall {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.special-con:hover .arrow-bottom-fall {
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
</style>
<body>
<div class="section">
<div class="col">
<div class="special-con">
<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjE0MDYiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D">
<div class="bar arrow-top-fall"></div>
<div class="bar arrow-middle-fall"></div>
<div class="bar arrow-bottom-fall"></div>
</a>
</div>
</div>
</div>
<div class="section-black">
</div>
<div class="section">
</div>
<div class="section-black">
</div>
<div class="section">
</div>
<div class="section-black">
</div>
<div class="section">
</div>
</body>
</html>
Thank you very very much!
I hope this code will work for you.
$(window)
.scroll(function () {
var scroll = $(window).scrollTop() + $(window).height() / 3;
$('.panel').each(function () {
var $this = $(this);
if (
$this.position().top <= scroll &&
$this.position().top + $this.height() > scroll
) {
$('body').removeClass(function (index, css) {
return (css.match(/(^|\s)color-\S+/g) || []).join(' ');
});
$('body').addClass('color-' + $(this).data('color'));
}
});
})
.scroll();
body {
color: #000;
background-color: #ffffff;
transition: all 0.4s linear;
text-align: center;
font-size: 120%;
line-height: 1.618;
}
.panel {
min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
font-family: sans-serif;
position: relative;
}
.color-black .hamburger {
color: #fff;
}
.hamburger {
position: fixed;
top: 10px;
left: 10px;
color: #000;
}
.color-black {
background-color: #000000;
color: #fff;
}
h1 {
font-size: 4em;
line-height: 140%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel" data-color="white">
<div>
<h1>Hamburger Color Change</h1>
<a class="hamburger" href="javascript:void(0)">Hamburger</a>
</div>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 01</h2>
</div>
<div class="panel" data-color="white">
<h2>Light Area 01</h2>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 02</h2>
</div>
<div class="panel" data-color="white">
<h2>Light Area 02</h2>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 03</h2>
</div>
<div class="panel" data-color="white">
<h2>Light Area 03</h2>
</div>
<div class="panel" data-color="black">
<h2>Dark Area 04</h2>
</div>
You can use Intersection Observer API and some others library..
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Or
Way Points Library
https://github.com/imakewebthings/waypoints
I hope, it's useful for u
The animation doesn't work. I could not fint what I am wrong.
Here is the code.
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-messages.js"></script>
<script src="js.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<div ng-hide="hidden == true" ng-animate="'slide'">
<h1>Come and get it!</h1>
</div>
<div ng-hide="hidden == false" ng-animate="'slide'">
<h1>Fine.</h1>
</div>
<div>
<button ng-click="hidden=true">I don't want it</button>
<button ng-click="hidden=false">I want it</button>
</div>
</div>
</body>
</html>
CSS
.slide-container {
height: 100px;
position: relative;
}
.slide-container > * {
display:block;
width:100%;
top:0;
left:0;
right:0;
bottom:0;
padding:10px;
}
.slide-hide, .slide-show {
-webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: absolute;
}
.slide-hide {
background: red;
display: none;
}
.slide-hide.slide-hide-active {
background: red;
display: none;
}
.slide-show {
background: red;
position: relative;
left: 100px;
}
.slide-show.slide-show-active {
background: red;
position: relative;
left: 0px;
}
JS
angular.module('myApp', [])
.controller('AppCtrl', function ($scope) {
$scope.hidden = false;
});
I got this code from http://jsfiddle.net/elthrasher/Uz2Dk/. In the fiddle, It works perfectly, but once I moved the code in my editor, I doesn't work! I just want to get the function that when a button is clicked, the contents are changed with an animation. For example, left flying animation.
Was trying to put a left push menu on my site, but when I try to add more than 4 sidebar-item they just don't follow the animation. Otherwise the last item follow, so how can i fix it?
Click Run code and Full page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Left Push Menu</title>
<style>
/*#import url(https://fonts.googleapis.com/css?family=roboto); */
body, html {
height: 100%;
padding: 0;
margin: 0;
font-family: 'roboto', sans-serif;
}
h1 { text-align:center; margin:50px auto; color:#fff;}
main {
z-index: 2;
position: relative;
height: 100%;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.sidebar {
height: 100%;
width: 400px;
position: fixed;
top: 0;
z-index: 1;
left: 0;
background-color: #000000;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #008e00;
margin: 10px auto;
}
.button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-left{
position: fixed;
left: 40px;
top: 20px;
}
.nav-right.visible-xs { z-index: 3; }
.hidden-xs { display: none; }
.middle { margin: 0 auto; }
/*nada*/
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
/*nada*/
.nav-right.visible-xs .active .bar {
background-color: #000;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
/*nada*/
.button.active .top {
-webkit-transform: translateY(15px) rotateZ(45deg);
-moz-transform: translateY(15px) rotateZ(45deg);
-ms-transform: translateY(15px) rotateZ(45deg);
-o-transform: translateY(15px) rotateZ(45deg);
transform: translateY(15px) rotateZ(45deg);
}
/*nada*/
.button.active .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
/*nada*/
.button.active .middle { width: 0; }
.move-to-right {
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
-ms-transform: translateX(400px);
-o-transform: translateX(400px);
transform: translateX(400px);
}
nav { padding-top: 30px; }
.sidebar-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin-top: 150px;
text-align: center;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
}
/*-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);*/
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item.active {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #008E00;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
right: 0;
background-color: #008e00;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before { width: 100%; }
#media (min-width: 480px) {
.nav-list { display: block; }
}
#media (min-width: 768px) {
.nav-right { position: absolute; }
.hidden-xs { display: block; }
.visible-xs { display: none; }
}
</style>
</head>
<body>
<!--<div class="nav-left visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>-->
<!-- nav-right -->
<main>
<nav>
<div class="nav-left hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
<h1>Left Push Menu</h1>
<div class="jquery-script-ads" align="center">
</div>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Home</li>
<li class="sidebar-item">Consumption</li>
<li class="sidebar-item">Historic</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-right");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</body>
</html>
You have just applied only for 1st,2nd, 3rd and the last element in the css styling.
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
Just add the above remove the others
The transition styling explicitly applies to only the following "child" elements:
.sidebar-item:first-child {
/*...*/
}
.sidebar-item:nth-child(2) {
/*...*/
}
.sidebar-item:nth-child(3) {
/*...*/
}
.sidebar-item:last-child {
/*...*/
}
So if there's, say an nth-child(4), and nth-child(5), and so on then those don't have any transitions applied to them.
Add them:
.sidebar-item:nth-child(4) {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .8s ease-in-out;
}
/* and so on, changing values as necessary... */
I am trying to align the image to the right when clicked. I have a lightbox script but cannot figure out how to move the image from the center to the right.
Here is the script:
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
a.fancybox img {
border: none;
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative;
z-index: 999; -o-transform:
scale(1.03,1.03);
-ms-transform: scale(1.03,1.03);
-moz-transform: scale(1.03,1.03);
-webkit-transform: scale(1.03,1.03);
transform: scale(1.03,1.03);
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = true;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
Any help would be greatly appreciated. Also, if there is a way to make the lightbox cover the whole page, that would be cool too.
Thanks in advance.
Try the below in css
#fancybox-wrap{
left:auto !important;
right:0 !important;
}
$(function($) {
var addToAll = true;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function() {
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
a.fancybox img {
border: none;
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative;
z-index: 999;
-o-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-moz-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
#fancybox-wrap {
left: auto !important;
right: 0 !important;
}
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<section class="main clearfix">
<section class="top">
<div class="wrapper content_header clearfix">
<div class="work_nav">
<h1 class="title">Map Gallery</h1>
</div>
</section>
<!-- end top -->
<section class="wrapper">
<div class="content">
<p align="center">Click to enlarge any map.</p>
<ul id="movieposters">
<li>
<img class="fancybox" src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" width=200px height=200px />
</li>
<li>
<img class="fancybox" src="https://risehighershinebrighter.files.wordpress.com/2014/11/magic-of-blue-universe-images.jpg" width=200px height=200px />
</li>
</ul>
</div>
<!-- end content -->
</section>
</section>
<!-- end main -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
I have an animation that expands a tiled div tag when you click the div, however I can't seem to get the active class to hold after the click, I have to hold down the mouse button or it will revert to its previous size, im not sure why.
I didn't create a jfiddle because its to hard to get everything to work right with out my custom stuff
http://snomada.com/angular_test/
is a live example.
My friend helped me out with a jsfiddle and it works but when i replicated with my code it doesnt work
http://jsfiddle.net/inpursuit/g6pf2ye1/3/
solved
body{
background: url(../images/banner.jpg);
background-size: 2000px 2000px;
background-repeat: no-repeat;
}
#content{
top:55px;
position:absolute;
margin:0px;
left:7%;
}
.tile-container{
float:left;
margin:5px;
width:400px;
height:200px;
overflow:hidden;
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
}
/*.tile-container:active,
.tile-container .test {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
width:450px;
height:350px;
}
/*.tile-container:active > .tile,
.tile-container .test > .tile {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
background-size: 450px 350px;
}
*/
.tile-container{
float:left;
margin:5px;
width:400px;
height:200px;
background-color: #0000FF;
overflow:hidden;
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
background-size: 450px 350px;
}
.tile-container.beenclicked {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
background-size: 450px 350px;
width:450px;
height:350px;
}
.tile-container.beenclicked > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
background-size: 450px 350px;
}
.tile{
background:inherit;
width:inherit;
height:inherit;
float:left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding:10px;
color:#fff;
}
.circular {
width: 50px;
height: 50px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.circular img {
opacity: 0;
filter: alpha(opacity=0);
border:10px;
border-color:#fff;
}
/*
.active-tile > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
}
*/
<html>
<head>
<title>Relic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/MetroJs.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/cover.css" rel="stylesheet">
<script src="js/MetroJs.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
$( document ).ready(function() {
$(".tile-container").click(function(){
$(this).toggleClass("beenclicked");
});
});
</script>
</head>
<body class="metro" ng-app="userProfile" ng-controller="ProfileController as post">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Relic</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="content">
<div class="tile-container" ng-repeat="userpost in post.userPost" >
<div class="tile" style="background-image: url('{{userpost.image}}');" >
<div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
<div class="weather-text">
<span class="location">{{userpost.title}}</span>
</div>
</div>
<div class="tile" style="background-image: url('{{userpost.image}}');" >
<div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
<div class="weather-text">
<span class="temperature">{{userpost.message}}</span>
</div>
</div>
</div>
</div>
</body>
</html>
You need to stop using the "active" pseudo class similar to what #AmuletxHeart is saying. Remove the .tile-container:active selector from your CSS and change the classname that you're adding on click to something other than "active" to remove confusion. I've created a jsfiddle that shows what you want:
http://jsfiddle.net/inpursuit/g6pf2ye1/3/
$('.tile-container').on('click', function() {
$(this).toggleClass('beenclicked');
});
.tile-container.beenclicked {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
width:450px;
height:350px;
}
Almost there.
In your css, you are only defining the :active pseudo-class.
Try out:
.tile-container:active,
.tile-container.active {}
.tile-container:active > .tile,
.tile-container.active > .tile {}
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes for more info on pseudo-classes.
I think I see the problem. Use Google Chrome, inspect element to debug your website. Press F12, click on the magnifying glass icon, then select the element you want to debug.
Basics of jQuery, check if DOM is fully loaded before running any scripts.
$( document ).ready(function() {
$(".tile").click(function(){
$(this).addClass("active");
});
});
The "active" css state is triggered when your mouse is held down. Depressing the button removes the "active" state from an element.
What you want to do is use the ".active" class instead:
Original
.tile-container :active {...}
Corrected
.tile-container .active {...}
When clicking on the square tiles, you are actually click the element with class "tile". I found that out by using the magnifying glass thing.
Also, I think you are confused between "tile-container" and "title-container". Notice the additional "t".
You need to change the jQuery to add the active class to the element with class "tile"
Original
$(".title-container").click(function(){
$(this).addClass("active");
});
Corrected
$(".tile").click(function(){
$(this).addClass("active");
});