We Keep Coding

How can I add different event handlers for outer and inner elements?

I am working on a project for an upcoming exhibition and need your help with some of the script. I used jQuery to implement a transition on click for the images and it works really well.
Now I want to implement some kind of lightbox gallery which enlarges the images on a second click on a specific image. Afterwards, when clicked anywhere but the enlarged image the lightbox gallery should close. All I know it that I need another onClick event in jQuery... but honestly I am pretty lost!
I hope someone can help me here.
This is the code I use right now:
jQuery(document).ready(function($){
$('ul.cards').on('click', function(){
$(this).toggleClass('transition');
});
});
ul.cards{
width: 1500px; margin: 0 auto 20px;
height: 450px;
list-style-type: none;
position: relative;
padding: 50px 0;
cursor: pointer;
li.title{ margin: 0 0 20px;
h2{ font-weight: 700; }
}
li.card{
background: #FFF; overflow: hidden;
height: 300px; width: 250px;
border-radius: 7.5px;
position: absolute; left: 0px;
box-shadow: 1px 2px 2px 0 #aaa;
transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
img{
max-width: 100%; height: auto;
}
div.content{
padding: 5px 10px;
h1{
}
p{
}
}
&.card-1{
z-index: 10; transform: rotateZ(-2deg);
}
&.card-2{
z-index: 9; transform: rotateZ(-7deg);
transition-delay: 0.05s;
}
&.card-3{
z-index: 8; transform: rotateZ(5deg);
transition-delay: 0.1s;
}
}
&.transition{
li.card{
transform: rotateZ(0deg);
&.card-1{
left: 560px;
}
&.card-2{
left: 280px;
}
&.card-3{
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards">
<li class="title">
<h2>Foncemagne, Étienne Lauréault</h2>
</li>
<li class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
</li>
<li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
</li>
<li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
</li>
</ul>

im not sure enough, but I just tried, maybe the meaning is more or less like this.
I change ul.card to double click, so that the image can also be clicked.
if you use second way maybe there will be less coding no need to use function if ($ ('li.card'). css ('transform', 'scale (1)')) on javascript,
but I can't use second way, maybe because it's css on element
.li there is have a transform property.
jQuery(document).ready(function($){
$('ul.cards').on('dblclick', function(){
$(this).toggleClass('transition');
$('li.card').css("transform","");
/* $('li.card').removeClass('transformation'); -- second way*/
$('li.card').off('click'); //delete the event listener click from li.card, so that when the collapsed cant be clicked
if ($('ul.cards').hasClass('transition')){
$('li.card').on('click', function(){
/* $(this).toggleClass('transformation');
-- second way */
if ($('li.card').css('transform','scale(1)'))
{
$(this).css('transform','scale(1.5)');
} else {
$(this).css('transform','scale(1)');
}
});
}
});
});
$(document).mouseup(function (e) { // when clicked anywhere the image close/back to default scale
if ($('ul.cards').hasClass('transition')){
if ($(e.target).closest('li.card').length
=== 0) {
$('li.card').css('transform','scale(1)');
}
}
});
ul.cards{
width: 1500px; margin: 0 auto 20px;
height: 450px;
list-style-type: none;
position: relative;
padding: 50px 0;
cursor: pointer;
li.title{ margin: 0 0 20px;
h2{ font-weight: 700; }
}
li.card{
background: #FFF; overflow: hidden;
height: 300px; width: 250px;
border-radius: 7.5px;
position: absolute; left: 0px;
box-shadow: 1px 2px 2px 0 #aaa;
transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
img{
max-width: 100%; height: auto;
}
div.content{
padding: 5px 10px;
h1{
}
p{
}
}
/* &.transformation {
transform: scale(1.5);
} -- second way */
&.card-1{
z-index: 10; transform: rotateZ(-2deg);
}
&.card-2{
z-index: 9; transform: rotateZ(-7deg);
transition-delay: 0.05s;
}
&.card-3{
z-index: 8; transform: rotateZ(5deg);
transition-delay: 0.1s;
}
}
&.transition{
li.card{
transform: rotateZ(0deg);
&.card-1{
left: 560px;
}
&.card-2{
left: 280px;
}
&.card-3{
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards" id="cardsParent">
<li class="title">
<h2>Foncemagne, Étienne Lauréault</h2>
</li>
<li id="card-1" class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
</li>
<li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
</li>
<li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
</li>
</ul>
<div style="height:100px;background-color:grey;color:white;text-align:center;">
click here or anywhere for close/change to default image
</div>
u can see in this link
https://jsfiddle.net/Lzp74drj/2/
I hope this is useful.

Header fixed with border - the border should only shown by scrolling

I have coded my index.html with bootstra4 and have the header with border and the class sticky. I want the border only shown when the page is scrolled.
HTML
<!-- TOP NAV -->
<header id="topNav">
<div class="container">
.....
</div>
CSS
#header.shadow-after-3:before {
content: ' ';
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 60px;
bottom: -60px;
background-image: url(../images/misc/shadow3.png);
background-size: 100% 100%;
}
JS
The code of my js will not insert here - if it is nessasary i will try it again

With Javascript you can solve it easily.
$(window).scroll(function() {
if ($(this).scrollTop() > 250){
$('header').addClass("borderClass");
}
else{
$('header').removeClass("borderClass");
}
});

Remove the box-shadow attribute from #header:
Should be like this:
#header {
position: relative;
left: 0;
top: 0;
right: 0;
z-index: 1000;
font-size: 14px;
background-color: #fff;
border-bottom: rgba(0,0,0,0.05) 1px solid;
-webkit-transition: all .800s;
-moz-transition: all .800s;
-o-transition: all .800s;
transition: all .800s;
}
Then change border-bottom attribute in #header.transparent to border-bottom: none;
Should be like this:
#header.transparent {
position: absolute;
background-color: transparent;
border-bottom: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Lastly, find and replace #header.shadow-after-3:before to #header.fixed.shadow-after-3:before in your CSS.
When the page is scrolled it adds the fixed class to header element that's why we should style this class.

CSS Header effect (change background and color) when scrolling down

I am trying to do a nice effect when the header leaves the current block. I want the background color and the color of the text to change when scrolling down.
html:
<header class="green">Logo</header>
<header class="red">Logo</header>
<section id='content1'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
<section id='content2'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
css:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
width: 100%;
position: fixed;
display: block;
top: 0;
font-size: 20pt;
padding: 15px 10px
}
.green {
background: green;
color: #000;
z-index: 2
}
.red {
background: red;
color: #fff;
z-index: 1
}
section {
position: relative;
height: 500px;
padding: 100px 10px
}
#content1 {
background: #D9D9D9;
z-index: 1
}
#content2 {
background: #9FDAD0;
z-index: 2
}
An example serves best, something like this https://www.dropbox.com/
Thanks!

So i redid it with some Javascript.
This effect is awesome, feel free to improve it if you like!
Is this possible to accomplish without Javascript?
const secondBlock = document.getElementById('content2')
const header = document.getElementsByTagName('header')
const headerHeight = 61
function setHeader () {
const scrollPoint = window.pageYOffset + headerHeight
let blockPoint = 61 - (scrollPoint - secondBlock.offsetTop)
if (blockPoint <= 0) { blockPoint = 0 }
if (scrollPoint > secondBlock.offsetTop) {
header[0].style = `max-height: ${blockPoint}px;`
} else {
header[0].style = `max-height: ${headerHeight}px;`
}
window.requestAnimationFrame(setHeader)
}
window.requestAnimationFrame(setHeader)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: block;
font-size: 20pt;
height: 61px;
line-height: 61px;
padding-left: 10px;
position: fixed;
top: 0;
width: 100%;
}
header#first {
background: #8292C3;
color: #000;
overflow: hidden;
z-index: 10;
}
header#second {
background: #82C3B9;
color: #fff;
z-index: 9;
}
section {
height: 500px;
padding: 100px 10px;
position: relative;
}
#content1 {
background: #96A6D5;
}
#content2 {
background: #99D6CC;
}
<header id='first'>Logo - <small>scroll down to see the magic!</small></header>
<header id='second'>Logo - <small>scroll down to see the magic! COOL!</small></header>
<section id='content1'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
<section id='content2'>
<h1>Content</h1>
<p>Goes here!</p>
</section>

The smooth transition you're looking for can be done in CSS, but you'll need some JavaScript in order to initiate the animation.
window.onscroll = function(){
var top = window.scrollY;
console.log('Top: ' + top);
var header = document.getElementsByTagName('header');
var offset = header.innerHeight; //changed offset to be dynamic, so it works on mobile screens.
if(top > offset){
header[0].classList.remove('top');
header[0].classList.add('scrolled');
} else {
header[0].classList.remove('scrolled');
header[0].classList.add('top');
}
};
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
position: relative;
}
header {
width: 100%;
position: fixed;
height: 75px;
display: block;
top: 0;
z-index: 100;
font-size: 20pt;
padding: 15px 10px
}
header.top {
background: #222;
color: #fff;
transition: all 0.3s ease;
}
header.scrolled {
background: #555;
color: #e0e0e0;
transition: all 0.3s ease;
}
.green {
background: green;
color: #000;
z-index: 2
}
.red {
background: red;
color: #fff;
z-index: 1
}
section {
position: relative;
height: 800px;
padding: 100px 10px
}
#content1 {
background: #D9D9D9;
z-index: 1
}
#content2 {
background: #9FDAD0;
z-index: 2
}
<header class="top">Logo</header>
<section id='content1'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
<section id='content2'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
This basically says that when we scroll passed the height of the header (in this case 50px), remove the "top" class from it, and add the "scrolled" class from it. You can use the css selectors header.top and header.scrolled to do your transition animations. Be sure to use transition: background-color (time) (timing function), color (time) (timing function); to achieve the smoothness you're looking for.

You can change it with the class. Like i use this website.
http://www.moumaachi.com/
it has class like this
<div class="header-v2 navbar-fixed-top">
but when scroll down to 50 px then it will showa this
<div class="header-v2 navbar-fixed-top top-nav-collapse">
and normal it has
<div class="thiswillhide">
but when scroll down more then it wil like this
<div class="thiswillhide hidesearch">
you can use this code
<script>
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".header-v2").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
if ($(".header-v2").offset().top > 600) {
$(".thiswillhide").addClass("hidesearch");
} else {
$(".thiswillhide").removeClass("hidesearch");
}
});
</script>
thanks

Slideout.js menu isnt smooth

I have been trying to get slideout.js to work properly for my site.
The issue is that when the menu is opened, the text appears before the fully opens and when the menu is closed, the text disappears after the menu is closed.
I have looked at the CSS and made sure that there are backgrounds to the menu and heights are correctly set.
Demo (view as mobile) - http://stefan.admark.co.uk/gates/index.php
JS:
window.onload = function() {
var slideout = new Slideout({
'panel': document.getElementById('main'),
'menu': document.getElementById('menu'),
'side': 'right',
'padding': 256,
'tolerance': 70
});
document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
slideout.toggle();
});
};
CSS:
.slideout-menu {
position: fixed;
top: 80px;
bottom: 0;
width: 256px;
/* min-height: 100vh; */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 999;
display: none;
padding-left:20px;
}
.slideout-menu-left {
left: 0;
}
.slideout-menu-right {
right: 0;
}
.slideout-panel {
position: relative;
z-index: 1;
will-change: transform;
background-color: #ffffff; /* A background-color is required */
min-height: 100%;
-webkit-box-shadow: 6px 0px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 6px 0px 5px 0px rgba(0,0,0,0.1);
box-shadow: 6px 0px 5px 0px rgba(0,0,0,0.1);
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
#media screen and (min-width: 1000px) {
.slideout-panel {
/* margin-left: 256px; */
}
.slideout-menu {
display: none;
}
}
.panel:before {
content: '';
display: block;
background-color: rgba(0,0,0,0);
transition: background-color 0.5s ease-in-out;
}
.panel-open:before {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: rgba(0,0,0,.5);
z-index: 99;
}

It looks like your <nav> element on your page doesn't have any transition CSS on it.
For instance, your <main> element has the following transition applied to it:
transition: -webkit-transform 300ms ease 0s; transform: translateX(-256px)
Whatever javascript you have triggering the transition for your <main> element, if applied to <nav> should cause the text and everything inside <nav> to transition properly as well.

Fixed header shaking when scrolling down

When I use a fixed header, it's shaking when adding my is-sticky
CSS class. It's starting with top:0; for it's animation when scrolling down. I want it to stay fixed smoothly on top in a way that will not cause noticeable jitter. For Example: http://www.lazada.com.my/
Here is my demo.
$(window).load(function(){
$(window).scroll(function(){
if($(window).scrollTop()>0){
if( ! ($('#scroller').hasClass('is-sticky'))) {
$('#scroller')
.addClass('is-sticky')
.css('top',9)
.animate({
'top': 84
},'1000');
}
} else {
if($('#scroller').hasClass('is-sticky')) {
$('#scroller')
.removeClass('is-sticky')
.css('top',9)
.animate({
'top':84
},1000);
}
}
});
});
body{
height:1000px;
margin:0;
padding:0;
position:relative;
}
#scroller {
position: absolute;
left: 0;
top: 84px;
width: 100%;
z-index: 30;
background:#CCC;
height:20px;
}
#scroller.is-sticky {
position: fixed;
width: 100%;
left: 0;
top: 9px;
margin-top: -31px;
height: 53px;
z-index: 701;
background: #CCC;
opacity: .97;
filter: alpha(opacity = 97);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<body>
<div id="scroller">Some controls</div>
</body>

The effect, from the website you linked, is actually quite easy to do.
Firstly, you want your header element to have position: fixed; there is no need to add this dynamically via javascript. It should have this property by default (as it shows in the website you linked).
What they are doing is hiding the top navigation which is within the header at a certain scroll point.
You can use jquery to do this very simply.
DEMO
var $el = $('header .two');
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$el.addClass('hide');
} else {
$el.removeClass('hide');
}
});
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
header .one {
height: 20px;
width: 100%;
background: lime;
position: relative;
z-index: 10;
}
header .one.hide {
height: 0;
}
header .two {
background: red;
height: 40px;
position: relative;
z-index: 20;
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
}
header .two.hide {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
main {
background: lightblue;
height: 1200px;
width: 100%;
padding-top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<div class="one">div</div>
<div class="two">fixed</div>
</header>
<main>
content
</main>
<footer>footer</footer>

You have to check .scrollTop when is reached to 84. In addition, you don't need to use jquery .animate function, you can achieve that effect by css transition.
Jsfiddle

You can create a fixed navbar and divide it into two parts vertically and when user scroll just hide the above part with .slideUp() animation and when user again scrolls on top show it with .slideDown() animation.
Here is the code :
$(window).load(function(){
$(window).scroll(function(){
if($(window).scrollTop()>0){
//check if it is visisble
if($('#nav-part-to-hide').is(':visible')) {
//if yes then lets hide it
$('#nav-part-to-hide').slideUp();
}
} else {
if(!$('#nav-part-to-hide').is(':visible')) {
$('#nav-part-to-hide').slideDown();
}
}
});
});
body
{
height:1000px;
}
#sticky-navbar
{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
}
#nav-part-to-hide
{
height:40px;
width:100%;
background:#333;
color:#fff;
}
#nav-part-stays
{
height:40px;
width:100%;
background:#bbb;
color:#333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="sticky-navbar">
<div id="nav-part-to-hide">
this conetent hides
</div>
<div id="nav-part-stays">
this conetent stays on page
</div>
</div>
</body>