I've set up a animated masonry gallery with filters using this along with fancybox pop up.
What I'm trying to set up is a script that will remove the inline data-fancybox="gallery" which groups them together and allows users to scroll through the entire gallery.
When one of the filter links is clicked, it adds a "isotope-hidden" class to the images and hides them however it still belongs to the data-fancybox="gallery" so is still able to be accessed by when the pop up is enabled. I wanted to set up a script to remove this value if a specific class is found on the image.
Here is my attempted script.
How can i remove the data-fancybox="gallery" that's in the parent div of the image tag if "isotope-hidden" class is added to the image tag?
jq('.filterbutton').click(function () {
if (jq("isotope .item img").hasClass("isotope-hidden")) {
jq(".isotope .item .img").parent().attr("data-fancybox", "");
} else if (jq("sotope .itme .img").hasClass("isotope-item")) {
jq(".isotope .item .img").parent().attr("data-fancybox", "gallery");
}
});
#gallery-header-center-right{
display: inline-block;
width: 100%;
margin: 10px 0;
}
.gallery-header-center-right-links {
color: #333333;
float: left;
height: 35px;
padding-right: 20px;
padding-left: 20px;
margin-left: 20px;
font-size: 16px;
font-weight: 400;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
transition: background 0.5s;
}
.gallery-header-center-right-links:hover {
background-color: rgba(63,141,191,1);
color: rgba(255,255,255,1);
cursor: pointer;
}
.gallery-header-center-right-links-current {
color: #FFFFFF;
background-color: rgba(63,141,191,1);
}
.gallery-header-center-right-links-current:hover {
background-color: rgba(63,141,191,0.5);
}
.filterbutton{
margin: 5px;
float: left;
}
.item{
width: 320px;
float: left;
margin: 5px;
}
.item img{
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
<div id="gallery-header">
<div id="gallery-header-center">
<div id="gallery-header-center-right">
<div class="gallery-header-center-right-links filterbutton" id="filter-all">All</div>
<div class="gallery-header-center-right-links filterbutton" id="filter-kw17">KW17</div>
<div class="gallery-header-center-right-links filterbutton" id="filter-kw16">KW16</div>
</div>
</div>
</div>
<div id="gallery-content">
<div id="gallery-content-center">
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-jordan.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-jordan.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF2.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF2.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF3.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF3.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-remix-mag.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-remix-mag.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-sammy.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-sammy.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/BeautyEQLoveridge.png" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/BeautyEQLoveridge.png" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/kwwomensweekly.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/kwwomensweekly.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/kylie.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/kylie.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/myraboot.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/myraboot.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/next.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/next.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/nextj.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/nextj.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/snuggle.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/snuggle.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/sundaymag.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/sundaymag.jpg" class="all kw17"/>
</a>
</div>
</div>
</div>
Related
I'm very new to Javascript so appreciate your help! I created this Owl slider (there are 2 sliders in this code), but want the second carousel to slide in the opposite direction. So the first carousel should slide left to right, and the second from right to left. However, when I add the direction:rtl to the code, it affects both carousels instead of just the bottom one. How can I amend the code so that both carousels slide in opposite directions?
You can view the codepen here --> https://codepen.io/ellie-oop/pen/KKmWLOQ or the code is copied below (HTML, JS, CSS)
Thanks!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flip Carousel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>
<body>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
Javascript
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
center: true,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:false,
responsive:{
0:{
items:1,
nav:false
},
600:{
items:3,
nav:false
},
1000:{
items:3,
nav:false
}
}
})
})
</script>
CSS
*, *:before, *:after{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
body{
font-size: 16px;
}
.main-title{
color: #2d2d2d;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0;
}
.ewmcontainer{
padding: 1em 0;
float: left;
width: 100%;
}
#media screen and (max-width: 640px){
.ewmcontainer{
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px){
.ewmcontainer{
width: 100%;
}
}
.ewmcontainer .title{
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
.ewmcontent {
position: relative;
width: 95%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
.ewmcontent .ewmcontent-overlay {
background: #0070bb;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.ewmcontent:hover .ewmcontent-overlay{
opacity: 0.9!important;
z-index: 1;
}
.content-image{
width: 100%;
}
.content-details {
position: absolute;
z-index: 2;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.ewmcontent:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-top{
top: 20%;
}
You can create one $(document).ready(function() for each carousel, with a unique html element ID (<div id="example-carousel">) so each script call only one single carousel. You can also use unique class names (<div class="example-carousel">) Each carousel can now take in a different configuration object. For example:
$(document).ready(function(){
$("#carousel-top").owlCarousel({
config: etc
}
})
})
$(document).ready(function(){
$("#carousel-bottom").owlCarousel({
config: etc
}
})
})
I have a problem, where I wish to toggle two divs (each in a column of their own), when a mouse covers over an element on page.
At this point only div (.text_2) reacts when .item-2 is hovered, but I also need text.2.2 to react, and appear (this div is placed in the next column).
I have tried a couple of different things in order to make this work. for example this
$('.item-2').hover(function() {
$('.text_2').toggleClass('hide_default');
}, function(){
$('.button-rounded').toggleClass('hide_default') {
$('.text_2.2').toggleClass('hide_default');
});
});
Here's my code so far
$(".item-1").hover(function(){
$('#text_1').toggleClass('hide_default');
}, function(){
$('#text_1').toggleClass('hide_default');
});
$(".item-2").hover(function(){
$('.text_2').toggleClass('hide_default');
}, function(){
$('.text_2').toggleClass('hide_default');
});
/* Body */
* {
margin: auto;
padding: o;
}
html, body {
margin:0;
padding:0;
}
/* Header */
#main{
overflow: auto;
margin-top: 25px;
margin-bottom: 50px;
}
/* Contacts */
#contact{
text-align: center;
margin-bottom: 25px;
font-size: 27px;
font-family: 'Times New Roman';
color: red;
}
#About{
margin: 50px;
}
/* Slider */
.slider {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
background-color: white; color: #000;
font-size: 27px;
min-height: 100px;
margin-top: -100px;
clear: both;
transition: all 1s;
overflow: hidden;
border-top: 1px solid #e6e6e6;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0 18px;
transition: transform 300ms ease-out;
}
/* New slider */
#container_1{
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
justify-items: center;
grid-gap: 20px;
}
.hide_default {
display: none;
}
#hide_default_2 {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Sofia Bordoni</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="contact">
<div class="item item-1">
Sofia Bordoni
sofiabordoni#gmail.com
0045 9164 6938
About
</div>
</div>
<div id="container_1">
<div class="item" data-target="#text_2">
<img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="200px">
</div>
<div class="item" data-target="#text_3">
<img class="Image" src="Images/Merry Christmas NC-kopi.gif" width="175px">
</div>
<div class="item" data-target="#text_4">
<img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="250px">
</div>
<div class="item" data-target="#text_5">
<img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA-kopi 2.png" width="300px">
</div>
<div class="item" data-target="#text_6">
<img class="Image" src="Images/Sofia_Bordoni_Portfolio_Tassinari_Vetta-7.png" width="350px">
</div>
<div class="item" data-target="#text_7">
<img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="250px">
</div>
<div class="item" data-target="#text_8">
<img class="Image" src="Images/plakat.png" width="250px">
</div>
<div class="item" data-target="#text_9">
<img class="Image" src="Images/mani-sito_2.png" width="250px">
</div>
<div class="item" data-target="#text_10">
<img class="Image" src="Images/Sofia_Bordoni_Portfolio-3.png" width="250px">
</div>
<div class="item" data-target="#text_11">
<img class="Image" src="Images/Imprint Towel 70x1402-kopi.png" width="200px">
</div>
<div class="item" data-target="#text_12" >
<img class="Image" src="Images/Skærmbillede 2020-04-29 kl. 11.37.09 kopi.png" width="350px">
</div>
<div class="item" data-target="#text_13" >
<img class="Image" src="Images/Holiday_Greeting_Main_NY-kopi.jpg" width="175px">
</div>
<div class="item" data-target="#text_14" >
<img class="Image" src="Images/Skærmbillede 2020-04-15 kl. 14.49.35.png" width="350px">
</div>
<div class="item" data-target="#text_15" >
<img class="Image" src="Images/Betafactory.gif" width="450px">
</div>
<div class="item" data-target="#text_16" >
<img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.png" width="150px">
</div>
</div>
</div>
<div class="slider" style="max-height: 100vh max-height:70px;">
<div class="nav-item column column-1">
<p class="hide_default" id="text_1" style="color: #3333ff">
I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm.
</p>
<p class="hide_default" id="text_2" style="color: blue">
Category: Objects
</p>
</div>
<div class="nav-item column column-2">
<p class="hide_default" id="text_2.2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br>
Candle
</p>
</div>
<div class="nav-item column column-3">
</div>
<div class="nav-item column column-3">
</div>
</div>
<script src="Onhover.js"></script>
<script src="HoverColor.js"></script>
</body>
</html>
You've already got the structure in the HTML from the previous answer I provided to use the data-target to genericise the logic and keep it DRY.
As such you just need to amend the selector in the data-target to match both the #text_2 and #text_2.2 element. Note that the . in the latter selector will need to be escaped so that it's not interpreted as a class selector.
$(".item").hover(function() {
$(this.dataset.target.replace('.', '\\.')).toggleClass('hide_default');
});
* {
margin: auto;
padding: o;
}
html,
body {
margin: 0;
padding: 0;
}
#main {
overflow: auto;
margin-top: 25px;
margin-bottom: 50px;
}
#contact {
text-align: center;
margin-bottom: 25px;
font-size: 27px;
font-family: 'Times New Roman';
color: red;
}
#About {
margin: 50px;
}
.slider {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
background-color: white;
color: #000;
font-size: 27px;
min-height: 100px;
margin-top: -100px;
clear: both;
transition: all 1s;
/* overflow: hidden; */
border-top: 1px solid #e6e6e6;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0 18px;
transition: transform 300ms ease-out;
}
#container_1 {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
justify-items: center;
grid-gap: 20px;
}
.hide_default {
display: none;
}
#hide_default_2 {
display: none;
}
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div id="contact">
<div class="item item-1" data-target="#text_1">
Sofia Bordoni sofiabordoni#gmail.com 0045 9164 6938
About
</div>
</div>
<div id="container_1">
<!-- note additional id selector in data-target here -->
<div class="item" data-target="#text_2, #text_2.2"><img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="200px"></div>
<div class="item" data-target="#text_3"><img class="Image" src="Images/Merry Christmas NC-kopi.gif" width="175px"></div>
<div class="item" data-target="#text_4"><img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="250px"></div>
<div class="item" data-target="#text_5"><img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA-kopi 2.png" width="300px"></div>
<div class="item" data-target="#text_6"><img class="Image" src="Images/Sofia_Bordoni_Portfolio_Tassinari_Vetta-7.png" width="350px"></div>
<div class="item" data-target="#text_7"><img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="250px"></div>
<div class="item" data-target="#text_8"><img class="Image" src="Images/plakat.png" width="250px"></div>
<div class="item" data-target="#text_9"><img class="Image" src="Images/mani-sito_2.png" width="250px"></div>
<div class="item" data-target="#text_10"><img class="Image" src="Images/Sofia_Bordoni_Portfolio-3.png" width="250px"></div>
<div class="item" data-target="#text_11"><img class="Image" src="Images/Imprint Towel 70x1402-kopi.png" width="200px"></div>
<div class="item" data-target="#text_12"><img class="Image" src="Images/Skærmbillede 2020-04-29 kl. 11.37.09 kopi.png" width="350px"></div>
<div class="item" data-target="#text_13"><img class="Image" src="Images/Holiday_Greeting_Main_NY-kopi.jpg" width="175px"></div>
<div class="item" data-target="#text_14"><img class="Image" src="Images/Skærmbillede 2020-04-15 kl. 14.49.35.png" width="350px"></div>
<div class="item" data-target="#text_15"><img class="Image" src="Images/Betafactory.gif" width="450px"></div>
<div class="item" data-target="#text_16"><img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.png" width="150px"></div>
</div>
</div>
<div class="slider" style="max-height: 100vh max-height:70px;">
<div class="nav-item column column-1">
<p class="hide_default" id="text_1" style="color: #3333ff">
I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material
combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm.
</p>
<p class="hide_default" id="text_2" style="color: blue">
Category: Objects
</p>
</div>
<div class="nav-item column column-2">
<p class="hide_default" id="text_2.2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br> Candle
</p>
</div>
<div class="nav-item column column-3"></div>
<div class="nav-item column column-3"></div>
</div>
A better approach would be to remove the . in the id attribute completely, as it avoids confusion with class selectors. Then the JS can be made even more simple:
<div class="nav-item column column-2">
<p class="hide_default" id="text_2_2" style="color: blue">
Project: Normann Copenhagen Christmas Collection
<br> Candle
</p>
</div>
$(".item").hover(function() {
$(this.dataset.target).toggleClass('hide_default');
});
I want to have a single type of dropdown in the whole website that behaves in a certain way:
it must open on click
it must stay open when i click inside the block that shows
it must close if i click outside of the opened block
it must close if i click again on the title * which opened the dropdown
if i click on a new dropdown, any existing opened dropdown must close
As you can see in my demo, i have all the features working except last one which works ok only partial.
If you click on dropdown 1 and than on dropdown 2, all is perfect. New one that opens will close the old one which was already opened.
Now, open again dropdown 1 (from header) and after this, click to open dropdown 3 or 4 (which are in footer area) and you will see that the dropdown from header will remain opened.
Any solution to fix this? So same type of dropdown, when opened, must close previous opened drodown regardless of it's position in the webpage. Thanks
$(".dropdown").click(function(event) {
event.stopPropagation();
$(this).parent().find(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
$(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
$(".dropdown-values").fadeOut(500);
$(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
$(this).siblings(".dropdown-values").fadeToggle(500);
$(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
#header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
height: 200px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.dropdown {
background: #313654 none repeat scroll 0 0;
cursor: pointer;
display: inline-block;
}
.dropdown-title {
color: #fff;
display: block;
}
a {
background-color: transparent;
outline: medium none;
}
.dropdown-values {
background: #0089d7 none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
display: none;
margin-top: 0;
padding: 10px;
position: absolute;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
<div class="dropdown">
<a class="dropdown-title">dropdown 1</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 1 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 1 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 2</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 2 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 2 content</a>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div class="dropdown">
<a class="dropdown-title">dropdown 3</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 3 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 3 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 4</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 4 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 4 content</a>
</div>
</div>
</div>
</div>
Slightly modified your code, you need just play with the selectors.
$(".dropdown").click(function(event) {
event.stopPropagation();
$(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
$(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
$(".dropdown-values").fadeOut(500);
$(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
$(this).siblings(".dropdown-values").fadeToggle(500);
$(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
#header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
height: 200px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.dropdown {
background: #313654 none repeat scroll 0 0;
cursor: pointer;
display: inline-block;
}
.dropdown-title {
color: #fff;
display: block;
}
a {
background-color: transparent;
outline: medium none;
}
.dropdown-values {
background: #0089d7 none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
display: none;
margin-top: 0;
padding: 10px;
position: absolute;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
<div class="dropdown">
<a class="dropdown-title">dropdown 1</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 1 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 1 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 2</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 2 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 2 content</a>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div class="dropdown">
<a class="dropdown-title">dropdown 3</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 3 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 3 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 4</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 4 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 4 content</a>
</div>
</div>
</div>
</div>
It seems to me the problem line is this:
$(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
You're only removing the activated class in the parent.
Just look for $('.dropdown') directly.
Hello kinda new here,
I just want my all images from my instafeed will all be the same size, shouldn't be distorted and image will resize freely (responsive), and i want it to look exactly like this
enter image description here
I tested it here http://jsfiddle.net/jazzu20/1c9yf61x/
<div class="livery-instafeed-section col-md-12">
<div id="instafeed">
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/89fRuosLje/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
</a>
</div>
</div>
You can do this:
Note: The images are not same. The best you can do is to adapt the images.
CSS
#instafeed div a{
display: block;
border: solid 10px #fff;
}
#instafeed div a img{
width: 100%;
vertical-align: top;
}
DEMO HERE
ANOTHER SOLUTION
CSS
#instafeed div a{
position: relative;
display: block;
position:relative;
overflow: hidden;
height: 250px;
}
#instafeed div a img{
position: absolute;
vertical-align: top;
z-index:-1;
left: -50%;
top: -50%;
}
DEMO HERE
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Here is the basic html code and css code I used.
.scroll {
overflow: scroll;
overflow-x: scroll;
overflow-y: hidden;
max-height: 180px !important;
max-width: 1100px !important;
position: relative;
outline: none;
direction: ltr;
}
<div class="well">
<div class="scroll">
<a href="home.html">
<img src="images/cupertino.jpg" alt="..." class="image-rounded-active">
</a>
<a href="home.html">
<img src="images/saratoga.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="images/sunnyvale.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="images/milpitas.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="images/santa-clara.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="images/san-mateo.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="images/cupertino.jpg" alt="..." class="image-rounded-active">
</a>
</div>
</div>
Can someone please help me to get an horizontal scroll bar?
Use overflow to allow scrollbars.
.well {
width: 300px;
height: 60px;
overflow-y: hidden;
overflow-x: auto;
}
.scroll {
width: 450px;
}
.scroll a {
float: left;
margin: 0 10px;
}
<div class="well">
<div class="scroll">
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded-active">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded-active">
</a>
</div>
</div>
add following css -
.scroll { width: 990px; overflow-x: scroll; } /*define the width value to the point from where you want horizontal scroll*/
by css you can achieve this
.scroll{
overflow-x:scroll;
height:200px;
width:400px;
}
by jquery
$(document).ready(function(){
$(".scroll").css({'overflow-x':'scroll','height':'200px','width':'400px'});
})
Try this
.scroll {
width: 100%;
height: 100%;
overflow-x: scroll;
white-space: nowrap;
display: inline-block;
width: 300px;
margin: 10px;
}
DEMO FIDDLE
Please check the below fiddle:
JSFiddle
.scroll {
width: 300px;
}
.scroll a {
float: left;
}
.well {
width: 150px;
height: 60px;
overflow-y: hidden;
overflow-x: auto;
}
You have to set overflow property to auto or scroll.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with
scrollbars appearing and disappearing in a dynamic environment.
Printers may print overflowing content.
auto
Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
body {
margin: 0;
}
.well {
width: 100%;
}
.scroll {
width: 100%;
background: blue;
overflow: auto;
white-space: nowrap;
}
.scroll a {
display: inline-block;
width: 140px;
margin: 10px;
}
.scroll a img {
width: 100%;
}
<div class="well">
<div class="scroll">
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded-active">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded-active">
</a>
</div>
</div>
Reference: MDN - overflow