List / Grid / Tile view transitions using jquery or javascript - javascript

I want to achieve list / grid / tile view using Jquery/JS.
I have surfed a lot regarding grid/list view with animation, but got only grid/list view solutions. but i need grid/list view along with animation(i,e tranistion effect). I have attached sample video of the transition effect.

Code
https://codepen.io/shahriarkh/pen/NWvOyry?editors=0110
Click the "Change Style" button above the grid to toggle animation.
Here it is!
I used grid because it's animateable, since it's a 2d grid while both block and flex are 1d.
However, there's a problem with the appearing scroll bar on the right. It's damn annoying and I couldn't find a way to fix it. In line 9 of JS code, every card should move to left by 120px * N, but when the scrollbar appears, it's no longer 120 and becomes a bit larger than 120 (like 126). I don't know where it is coming from... although 120 works fine when you add overflow-y: hidden to body, it's not an applicable workaround (you need the scroll!).
Update
I found the solution! Using overflow-y: scroll + scrollbar-width: none does the trick. However, you need to somehow let users know the page is scrollable.
BTW, what's the original video? I'm wondering if it's a webpage and somebody already did this :)
Also, Framer Motion might be a good choice instead of harcoding.

Here is my basic implementation. I've tried to create output like the video. The idea is to wrap list item in a wrapper. Wrappers are statically placed and list items are absolutely placed. When view changes wrapper gets arranged automatically as per stylesheet or container rules. But move list items after with animations.
var pos = [];
var offs = null;
function init() {
offs = $(".container").first().offset();
$(".wrapper").each(function (i) {
updatePositions();
$(this).children(0).css({
top: pos[i].top,
left: pos[i].left
});
});
}
$(document).ready(function () {
init();
});
$(window).resize(function () {
init();
})
function updatePositions() {
$(".wrapper").each(function(index) {
var tp = $(this).offset().top - offs.top;
var lf = $(this).offset().left - offs.left;
pos[index] = {
top: tp,
left: lf
};
});
}
function grid() {
if ($(".wrapper").first().hasClass("gv-wrapper")) return;
updatePositions();
$(".wrapper").each(function(index) {
$(this).removeClass("dv-wrapper cv-wrapper");
$(this).addClass("gv-wrapper");
$(this).children(0).css({
opacity: 0.8,
top: pos[index].top,
left: pos[index].left
});
});
updatePositions();
$(".wrapper").each(function(index) {
$(this).children(0).children(0).removeClass("dv-video cv-video");
$(this).children(0).children(1).removeClass("dv-details cv-details");
$(this).children(0).children(0).first().addClass("gv-video");
$(this).children(0).children(1).last().addClass("gv-details");
$(this).children(0).animate({
height: "100px",
width: "200px",
opacity: 1,
top: pos[index].top,
left: pos[index].left
}, 1000, "swing");
});
}
function detailed() {
if ($(".wrapper").first().hasClass("dv-wrapper")) return;
updatePositions();
$(".wrapper").each(function(index) {
$(this).removeClass("gv-wrapper cv-wrapper");
$(this).addClass("dv-wrapper");
$(this).children(0).css({
opacity: 0.8,
top: pos[index].top,
left: pos[index].left
});
});
updatePositions();
$(".wrapper").each(function(index) {
$(this).children(0).children(0).removeClass("gv-video cv-video");
$(this).children(0).children(1).removeClass("gv-details cv-details");
$(this).children(0).children(0).first().addClass("dv-video");
$(this).children(0).children(1).last().addClass("dv-details");
$(this).children(0).animate({
height: "100px",
width: "95%",
opacity: 1,
top: pos[index].top,
left: pos[index].left
}, 1000, "swing");
});
}
function collapsed() {
if ($(".wrapper").first().hasClass("cv-wrapper")) return;
updatePositions();
$(".wrapper").each(function(index) {
$(this).removeClass("dv-wrapper gv-wrapper");
$(this).addClass("cv-wrapper");
$(this).children(0).css({
opacity: 0.8,
top: pos[index].top,
left: pos[index].left
});
});
updatePositions();
$(".wrapper").each(function(index) {
$(this).children(0).children(0).removeClass("dv-video gv-video");
$(this).children(0).children(1).removeClass("dv-details gv-details");
$(this).children(0).children(0).first().addClass("cv-video");
$(this).children(0).children(1).last().addClass("cv-details");
$(this).children(0).animate({
height: "50px",
width: "94%",
opacity: 1,
top: pos[index].top,
left: pos[index].left
}, 1000, "swing");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
counter-reset: number;
background-color: #ffffff;
padding: 24px;
}
i.fas {
margin: 5px;
}
i.fas:hover {
background-color: white;
}
.container {
width: 500px;
min-height: 90vh;
margin: 0 auto;
background-color: #ADC2A9;
border: 1px dotted gray;
font-size: 0.7em;
position: relative;
}
.wrapper {
margin: 10px 10px;
/* to debug enable the color */
/*background-color: darkcyan;*/
}
.record {
position: absolute;
width: 95%;
top: 0px;
left: 0px;
background-color: #D3E4CD;
}
.record:first-child:before {
counter-increment: number;
content: counter(number);
position: absolute;
top: 10%;
left: 10%;
font-size: 23px;
color: blue
}
.video {
width: 200px;
height: 100px;
background: linear-gradient(white 40%, #5e819ef8);
}
/* list view */
.dv-wrapper {
height: 100px;
width: 95%;
float: left;
}
.dv-video {}
.dv-details {
position: absolute;
width: calc(100% - 200px);
top: 0px;
right: 0px;
float: right;
padding-left: 10px;
overflow: hidden;
}
/* grid view */
.gv-wrapper {
height: 100px;
width: 200px;
float: left;
}
.gv-video {
float: left;
}
.gv-details {
position: absolute;
left: 0px;
bottom: 0px;
padding-left: 10px;
overflow: hidden;
}
/* collapsed view */
.cv-wrapper {
height: 50px;
width: 80%;
}
.cv-video {
float: left;
display: none;
}
.cv-details {
padding-left: 10px;
overflow: hidden;
}
.details p {
width: 100%;
text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<div style="margin: 0 50%; width: 100px; transform: translate(-50%);">
<i class="fas fa-list" onclick="detailed()"></i>
<i class="fa fa-th" onclick="grid()"></i>
<i class="fas fa-bars" onclick="collapsed()"></i>
</div>
<div class="container">
<div class="dv-wrapper wrapper">
<div class="record">
<div class="video dv-video"></div>
<div class="details dv-details">
<p>1 Lorem ipsum dolor sit amet consectetur adipiorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dolor.</p>
</div>
</div>
</div>
<div class="dv-wrapper wrapper">
<div class="record">
<div class="video dv-video"></div>
<div class="details dv-details">
<p>2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dolor.</p>
</div>
</div>
</div>
<div class="dv-wrapper wrapper">
<div class="record">
<div class="video dv-video"></div>
<div class="details dv-details">
<p>3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dolor.</p>
</div>
</div>
</div>
<div class="dv-wrapper wrapper">
<div class="record">
<div class="video dv-video"></div>
<div class="details dv-details">
<p>4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dolor.</p>
</div>
</div>
</div>
<div class="dv-wrapper wrapper">
<div class="record">
<div class="video dv-video"></div>
<div class="details dv-details">
<p>5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dolor.</p>
</div>
</div>
</div>
</div>
This is just a demo code. It can be improved in many ways. We can put wrappers in existing grid or flex containers and animate content items like shown above.
Let me know if any readymade third party available that will reduce or improve above code.

I know this does not exactly look like your desired result, but maybe it´s suitable for u or you can build up on it. i just used a transition on width and an interval to have a small delay in the transform.
function toggle(){
var k= 0;
var i = setInterval(function(){
t = $('.test').length;
if(k>t){
clearInterval(t)
}
$('.test').eq(k).toggleClass("test2");
k++;
},120)
}
setTimeout(function(){
toggle()
},1000)
.wrap {
width:500px;
min-height:100vh;
position:relative;
margin: 0 auto;
}
.test {
color:white;
margin:10px;
background:black;
width:100px;
height:100px;
float:left;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.test2 {
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
If u wanted it to be exactly like in the video u would probably have to work with translate-x translate-y

Related

Highlight an image on click in grid layout and bring it to front

I'm really stuck and hope someone can help me.
I'm using a grid layout (flexbox later as a fallback solution but that should make no difference) and have serveral images that on click need to be in front, behind that should be a pop up (overlapping) and behind that an overlay where you can see the background through, i.e. the grid layout.
So far I've managed to open the pop up and the overlay div on click and close it after another click. I can't see how I could work with changing e.g. the z-index to create the order I need.
All I need is that donut on top of anything else when I click on it...
Any thoughts?
HTML
<div class="parent">
<div class="div1">div1 </div>
<div class="div2 popup">
<img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png" width="100px" onclick="myFunction()">
<span class="popuptext" id="myPopup">Popup text...</span>
</div>
<div class="div3">div3 </div>
<div class="div4">div4 </div>
<div class="div5">div5 </div>
<div class="div6">div6 </div>
<div class="div7">div7 </div>
<div class="div8">div8 </div>
<div class="div9">div9 </div>
</div>
<div id="overlay" onclick="remove()">
CSS
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
min-height: 100vh;
}
.div1 { grid-area: 1 / 1 / 3 / 2; background-color: yellow;}
.div2 { grid-area: 1 / 2 / 2 / 3; background-color: red;}
.div3 { grid-area: 1 / 3 / 2 / 4; background: blue;}
.div4 { grid-area: 1 / 4 / 2 / 5; background: grey;}
.div5 { grid-area: 3 / 1 / 5 / 2; background: pink;}
.div6 { grid-area: 2 / 2 / 4 / 4; background: white;}
.div7 { grid-area: 2 / 4 / 4 / 5; background: purple;}
.div8 { grid-area: 4 / 2 / 5 / 4; background: black;}
.div9 { grid-area: 4 / 4 / 5 / 5; background: green;}
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
left: 50%;
margin-left: -80px;
}
.popuptext.show {
visibility: visible;
}
#overlay{
visibility: hidden;
width: 100%;
height: 100vh;
background: rgba(0,0,0,.5);
position: absolute;
top:0;
left: 0;
}
#overlay.show{
visibility: visible;
}
JavaScript
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.add("show");
var overlay = document.getElementById("overlay");
overlay.classList.add("show");
}
function remove(){
var overlay = document.getElementById("overlay");
overlay.classList.remove("show");
var popup = document.getElementById("myPopup");
popup.classList.remove("show");
}
Any help is highly appreciated.
https://jsfiddle.net/3L20ndw7/
have you tried fancybox? its an excellent tool you can use.
just add the data-fancybox attribute to your image `
<div class="div1">div1 </div>
<div class="div2 popup">
<img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png" width="100px" data-fancybox >Popup text...</span>
</div>
<div class="div3">div3 </div>
<div class="div4">div4 </div>
<div class="div5">div5 </div>
<div class="div6">div6 </div>
<div class="div7">div7 </div>
<div class="div8">div8 </div>
<div class="div9">div9 </div>
`
make sure you add the references to the library
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css
If anyone's interested, I've solved it. I don't know if this is the best way but it seems to work:
HTML
<div class="parent">
<div class="div1">div1 </div>
<div class="div2">
<div class="absolute">
<img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png" width="100px" onClick="zIndex()">
<div id="myPopup">
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
</div>
</div>
</div>
<div class="div3">div3 </div>
<div class="div4">div4 </div>
<div class="div5">div5</div>
<div class="div6">div6</div>
<div class="div7">div7 </div>
<div class="div8">div8 </div>
<div class="div9">div9 </div>
</div>
<div id="overlay">
</div>
<div id="cover" onClick="remove()">
</div>
CSS
.z-index{
z-index: 4 !important;
}
.absolute{
position: absolute;
z-index: 2;
}
#myPopup{
width: 300px;
background: red;
}
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
min-height: 100vh;
}
.parent div{
width: auto;
}
.div1 { grid-area: 1 / 1 / 3 / 2; background-color: yellow;}
.div2 { grid-area: 1 / 2 / 2 / 3; background-color: red;}
.div3 { grid-area: 1 / 3 / 2 / 4; background: blue;}
.div4 { grid-area: 1 / 4 / 2 / 5; background: grey;}
.div5 { grid-area: 3 / 1 / 5 / 2; background: pink;}
.div6 { grid-area: 2 / 2 / 4 / 4; background: white;}
.div7 { grid-area: 2 / 4 / 4 / 5; background: purple;}
.div8 { grid-area: 4 / 2 / 5 / 4; background: black;}
.div9 { grid-area: 4 / 4 / 5 / 5; background: green;}
#img:hover{
cursor: pointer;
}
#overlay{
visibility: hidden;
width: 100%;
height: 100vh;
background: rgba(0,0,0,.5);
position: absolute;
top:0;
left: 0;
}
#overlay.show{
visibility: visible;
z-index: 3;
}
#cover{
visibility: hidden;
width: 100%;
height: 100vh;
background: transparent;
position: absolute;
top:0;
left: 0;
}
#cover.show{
visibility: visible;
z-index: 5;
}
#myPopup{
visibility: hidden;
}
#myPopup.show{
visibility: visible;
}
JavaScript
function zIndex(){
$( "div.absolute" ).toggleClass( "z-index" );
var overlay = document.getElementById("overlay");
overlay.classList.add("show");
var cover = document.getElementById("cover");
cover.classList.add("show");
var popup = document.getElementById("myPopup");
popup.classList.add("show");
}
function remove(){
var overlay = document.getElementById("overlay");
overlay.classList.remove("show");
var cover = document.getElementById("cover");
cover.classList.remove("show");
var popup = document.getElementById("myPopup");
popup.classList.remove("show");
$( "div.absolute" ).removeClass( "z-index" );
}
https://jsfiddle.net/wxgo0tky/4/

HTML/CSS - How to place left and right divs outside container?

I'm developing a site built with Ribosome theme. What I would like are 3 divs outside the main container which has a responsive width, but I'm not sure how to get this done properly.
I want it to look something like this
I accomplished the above image by creating an invisible div between the left and right divs, that pushes them to the sides. I feel like this is a bad way to do it as it requires JavaScript or CSS to set the right width of the invisible div between them. The top div is placed inside the container, so it uses its width. This was the code:
<div class="outside-mid" style="background-color:#333;width:100%;height:300px;">Lorem ipsum dolor sit amet.</div>
<div id="outside-container" style="position:absolute;text-align:center;height:0;width:1144px;">
<div class="outside-left" style="background-color:#333;width:300px;height:600px;float:left;margin-left:-310px;">Lorem ipsum dolor sit amet.</div>
<div class="outside-right" style="background-color:#333;width:300px;height:600px;float:right;margin-right:-310px;">Lorem ipsum dolor sit amet.</div>
</div>
I set the width of outside-container using JS:
<script>
var width = document.getElementById('main').offsetWidth;
document.getElementById("outside-container").style.width = width + "px";
</script>
What I'm asking is if there's a way to just put the left and right divs inside the container and then, without using any invisible div to push them, just float them to the left and to the right outside the container. This way it would end up being responsive as it would always use the container width.
Set your html to look like this..
<div id="outside-container">
<div class="outside-left"></div>
<div class="main-div"></div>
<div class="outside-right"></div>
</div>
and try this css..
#outside-container { width: 100%; }
.outside-left { width: 20%; float: left; }
.outside-right { width: 20%; float: right; }
.main-div { width: 60%; float: left; }
please you can use this code.
Lorem ipsum dolor sit amet.
<div id="outside-container" style=" background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;display: table; height: 0; margin: 0 auto; text-align: center; width: 1144px;">
<div class="outside-left" style=" background-color: #333333;float: left; height: 600px; transform: translateX(-100%); width: 300px;">Lorem ipsum dolor sit amet.</div>
<div class="outside-right" style="background-color: #333333; display: inline-block; float: right; height: 600px; margin: 0 auto; transform: translateX(100%); width: 300px;">Lorem ipsum dolor sit amet.</div>
</div>
A lot of good answers here, but I found them quite hard to implement with the use of the same theme I already had installed. After looking through more solutions I found a way that worked for my case. I put the following inside the container, and it worked without altering the current layout.
<style>
#left:before, #right:before, #top:before {
position:absolute;
content: "Ads";
top:-20px;
color: #fff;
}
#left:before {
right:0;
}
.site {
overflow:visible;
position:relative;
top:340px;
}
</style>
<div id="top" style="position: absolute; width:100%; height:300px; top:0; background-color:#888;margin-top:-310px;"></div>
<div id="left" style="position: absolute; width:300px; height:600px; left: 0; top: 0; background-color:#888;margin-left:-310px;"></div>
<div id="right" style="position: absolute; width:300px; height:600px; right: 0; top: 0; background-color:#888;margin-right:-310px;"></div>
Note: .site refers to the parent (container)

jquery display only 1 element active

I created this code, click on a picture and you'll come out the description below the image.
I would like to improve this code, so I want to be active only one description of a time, so if I click on a image see the description of that just clicked, and hide the last activated.
maybe with the code is more clear http://codepen.io/mp1985/pen/qOrpQX
$( ".spec").click(function() {
$(this).find(".image, .details-spec").toggle();
$(this).find(".block-content").toggleClass('white');
});
I tried with toggle(), toggleClass() and not() but without success.
any idea?
thanks
You can use not() here to avoid clicked element from selector
var $spec = $(".spec").click(function() {
// caching selector $(".spec") for future use
$spec
.not(this)
// avoiding clicked element
.find(".image")
// getting image selector
.show()
// showing back image
.end()
// back to previous selector
.find(".details-spec")
// getting details
.hide()
// hiding it
.end()
// back to previous selector
.find(".block-content")
// getting block content
.removeClass('white');
// removing class white
$(this)
.find(".image, .details-spec")
// getting elements by class
.toggle()
// toggling visibility
.end()
// back to previous selector
.find(".block-content")
// getting block content
.toggleClass('white');
// toggling class white
});
.block {
position: relative;
height: 300px;
width: 100%;
overflow: hidden;
background: #f9bda1;
margin-bottom: 1em;
}
.one-thirds > .block {
background-color: #484343;
cursor: pointer;
}
.block .image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.one-thirds {
width: 32%;
float: left;
margin-right: 1%;
}
.full {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
h3 {
font-size: 20px;
}
.details-spec {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.white {
color: white;
}
.active > .image {
visibility: hidden;
}
.active .details-spec {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<div class='one-thirds'>
<div class="block square spec">
<div class="full image" style="background-image:url('http://lorempixel.com/300/300/');"></div>
<div class="block-content full">
<h3>Title:</h3>
<div class="details-spec">
Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem LoremLorem
</div>
</div>
</div>
</div>
<div class='one-thirds'>
<div class="block square spec">
<div class="full image" style="background-image:url('http://lorempixel.com/300/300/sports/1/');"></div>
<div class="block-content full">
<h3>Title:</h3>
<div class="details-spec">
Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem LoremLorem
</div>
</div>
</div>
</div>
<div class='one-thirds last'>
<div class="block square spec">
<div class="full image" style="background-image:url('http://lorempixel.com/300/300/sports/3/');"></div>
<div class="block-content full">
<h3>Title:</h3>
<div class="details-spec">
Lorem Lorem Lorem Lorem LoremLorem
</div>
</div>
</div>
</div>
</div>
You don't need that over complex jQuery. Set the styles with css and toggle a single class on the root element.
CSS
.spec.active .image {
display: none;
}
.spec.active .details-spec {
display: block;
}
.spec.active .block-content {
color: white;
}
JavaScript
var $spec = $('.spec');
$spec.click(function() {
$spec.not($(this)).removeClass('active');
$(this).toggleClass('active');
});
DEMO: http://codepen.io/anon/pen/VvpXXe
First close all ($spec). Second open current.($this)
var $spec = $(".spec").click(function() {
$spec.find(".image, .details-spec").show();
$spec.find(".block-content").removeClass('white');
$(this).find(".image, .details-spec").hide();
$(this).find(".block-content").addClass('white');
});

Menu items centered on screen when clicking on 'menu', with fading background and border effect

So I just came across the site of http://www.dennisadelmann.de/
I want to recreate something similiar like his menu. So when I hover on it there is a black border, and when I click on it the screen fades to black with menu items centered on the screen. I tried to figure out how he got this working, but it's quite difficult. I couldn't find anything in a javascript file.
I noticed in the html his menu code is dynamic when clicked on it.
I'm just a beginner with javascript so that make things alot harder of course. At least I assume it's done with javascript..
I don't know where to search for in the internet, so maybe if this kind of menu has a specific name I can search for a tutorial?
If not..is it hard to recreate a menu like this?
Many thanks!
Below an example of his menu item in HTML in default state:
<div class="menu_overlay" style="display: none;">
<div class="close"><a>Close</a></div>
<div class="links_hover">
<p class="work_in" style="opacity: 0;">7 projects online</p>
<p class="about_in" style="opacity: 0;">About Dennis Adelmann</p>
<p class="journal_in" style="opacity: 0;">The digital sketchbook</p>
<p class="contact_in" style="opacity: 0;">Get in touch</p>
</div>
<div class="links_wrapper">
<ul class="links_overlay">
<li><a class="work" href="portfolio.php">Work</a></li>
<li><a class="about" href="about.php">About</a></li>
<li><a class="journal" href="journal.php">Sketchbook</a></li>
<li><a class="contact" href="contact.php">Contact</a></li>
</ul>
</div>
</div>
<header>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<nav>
<ul class="links">
<li><a>Menu</a></li>
</ul>
</nav>
</header>
And when clicked on the menu item, the one thing that is changing is:
<div class="menu_overlay" style="display: block;">
I made a simple example how it can be done. ( there is only a structure )
There is no code quality but I think you can improove it, here's all magic made by javascript:
var $menu = $( '.menu' );
var $body = $( 'body' );
var $nav = $( '.navigation' );
var $close = $( '.close' );
$menu.on('mouseover', function(){
$body.addClass( 'hovered' );
});
$menu.on('mouseleave', function(){
$body.removeClass( 'hovered' );
});
$menu.on( 'click', function(){
$body.addClass( 'open' );
})
$close.on( 'click', function(){
$body.removeClass( 'open' );
});
HTML:
<div class="menu">Menu</div>
<div class="navigation">
<div class="close">Close</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem a distinctio porro nulla vitae, id modi alias earum eos rerum quasi natus qui sunt, libero! Impedit, at. Accusantium, perferendis quod.
</p>
</div>
CSS:
.menu {
padding: 50px;
cursor: pointer;
display: inline-block;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
box-shadow: inset 0 0 0 10px transparent;
transition: box-shadow 0.3s;
}
.close {
cursor: pointer;
}
body.hovered {
box-shadow: inset 0 0 0 10px #000;
}
body .navigation {
padding: 50px;
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
opacity: 0;
box-sizing: border-box;
top: 0;
left: 0;
z-index: -1;
transition: opacity 0.3s;
color: #fff;
}
body.open .navigation {
opacity: 1;
z-index: 101;
}
All working example you can find here:
http://codepen.io/GomatoX/pen/WbGLmd
see fiddle
$('.link').click(function () {
$('.overlay').fadeIn();
});
$('.close').click(function () {
$('.overlay').fadeOut();
});
css
.overlay {
position:absolute;
width:100%;
height:100%;
background:#000;
color:#fff;
text-align:center;
display:none;
}
.link {
float:right;
font-size:16px;
color:#000;
margin-top:50px;
}
.close {
float:left;
color:#fff;
}

Make Text appears (Slide up) under an Image when you click on it

I want a text description to appear (slide up) under an image when you click on it, and hidden(slid down) again when you when you click on it when already showing.
JAVASCRIPT
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#image img").click(function () {
$("#image span").slideToggle();
});
});
</script>
CSS
#images {
width: 275px;
height: 200px;
}
#image div {
display: block;
width: 275px;
height: 200px;
}
#image img {
display: block;
width: 275px;
height: 200px;
}
#image span {
background: #000;
color: #ccc;
display: block;
width: 265px;
height: 40px;
padding: 5px;
display: none;
}
HTML
<div id="images">
<div id="image">
<div>
<img src="images/test-image.png" width="224px" height="224px" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
</div>
Those are the HTML above for the code I am trying to create, an example of this effect can be demonstrated when you click on any of the images on the site etchapps.com., any ideas how we can do this with JavaScript or jQuery. Or is there any other plugin that we could use to complete this.
The real trick for this effect is to make the containing wrapper position: relative, then the wrapper inside that position: absolute with top/right/bottom set at 0. That will anchor it to the bottom of the container regardless of the height of the caption when it's visible.
Then all you need to do is slideToggle the display of the caption element. At my work we just toggled a class and used CSS transitions to cover the display, but I've tweaked our method to fall inline with your code.
Here's a codepen example
HTML
<div id="images">
<div id="image">
<div>
<img src="http://placekitten.com/275/200" />
<div id="caption">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
CSS
#images {
width: 275px;
height: 200px;
}
#image {
position: relative;
width: 275px;
height: 200px;
overflow: hidden;
}
#image > div {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#image img {
display: block;
width: 275px;
height: 200px;
}
#caption {
background: #000;
color: #ccc;
display: none;
overflow: hidden;
}
#caption p {
padding: 5px;
margin: 0;
}
JS
$(document).ready(function () {
$("#image img").click(function () {
$("#caption").slideToggle();
});
});
I'd also recommend switching from the divs to a figcaption and caption element for more semantic markup and probably switching out the ids for classes. You might need to update the JS to target the nearest caption rather than just any caption though.
<div id="images">
<div>
<div id="thetext" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<img id="theimage" src="images/test-image.png" width="224px" height="224px" />
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#theimage").click(function () {
$("#thetext").slideToggle();
});
});
</script>
Its solved:
Take a look at this fiddle: http://jsfiddle.net/promatik/SFU4E/
I changed a bit the HTML:
<div id="images">
<div id="image">
<div class="image">
<img src="images/test-image.png" width="275px" height="200px" />
</div>
<div class="text">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
</div>
And CSS too:
#images, #image .image {
width: 275px;
height: 200px;
}
#image .text {
display: none;
background: #000;
}
#image span {
color: #ccc;
padding: 2px;
}

Categories