I am using the slick slider and trying to create a certain design for the actual slider. What I basically need is a structure similar to this:
div div
div div
div
I've been able to get this design working hover when in sliding/transition through it automatically goes to this design
div div div div div
Where it goes back to the original design. I would like to know if its possible to keep the top design as it goes transition. Below is my current CSS, HTML and jQuery.
HTML:
<div class="loop">
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
</div>
CSS:
.active:first-child {
margin-top: 10px; }
.test, .slick-active:nth-child(1), .slick-active:nth-child(5) {
margin-top: 10px; }
.test-2, .slick-active:nth-child(2), .slick-active:nth-child(4) {
margin-top: 40px; }
.center-test, .slick-active:nth-child(3) {
margin-top: 70px; }
JavaScript:
$(document).ready(function () {
var loop = $(".loop");
loop.slick({
slidesToShow: 5,
sliderPerRow: 1,
swipeToSlide: true
});
loop.on('afterChange', function (event, slick, currentSlide, nextSlide) {
loop.find(".slick-active").first().addClass("test");
loop.find(".slick-active").last().addClass("test");
loop.find(".slick-active").eq(1).addClass("test-2");
loop.find(".slick-active").eq(3).addClass("test-2");
loop.find(".slick-active").eq(2).addClass("center-test");
});
loop.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
loop.find(".slick-active ").removeClass("test");
loop.find(".slick-active ").removeClass("test-2");
loop.find(".slick-active ").removeClass("center-test");
});
loop.find(".slick-active").removeClass("test");
loop.find(".slick-active").first().addClass("test");
loop.find(".slick-active").last().addClass("test");
loop.find(".slick-active").eq(1).addClass("test-2");
loop.find(".slick-active").eq(3).addClass("test-2");
loop.find(".slick-active").eq(2).addClass("center-test");
});
I'm guessing instead of margin there should be some sort of offset, where once the code is sliding each div is being calculated. Here is the documentation for slick slider:
http://kenwheeler.github.io/slick/
EDIT
I've also added in this css rather than adding a margin to the divs.
.test, .slick-active:nth-child(1), .slick-active:nth-child(5){
top:10px;
position:relative;
}
.test-2, .slick-active:nth-child(2), .slick-active:nth-child(4){
top:40px;
position:relative;
}
.center-test, .slick-active:nth-child(3){
top:70px;
position:relative;
}
.slick-track{
height:100px;
}
So far what I have observed is that it adds the class for the structure change after the slide has finished the transition, hence the 'afterChange' in the JS. But would it be possible to get the structure to be applied when the transition is also in place.
The obvious problem here is the infinite looping.
Maybe someone will manage to figure that out one day but for now if you are willing to give that up this should do the trick.
It will work with any number of slides.
$(document).ready(function () {
var $loop = $(".loop");
$loop.slick({
slidesToShow: 5,
sliderPerRow: 1,
swipeToSlide: true,
speed: 500,
infinite: false
});
});
.slick-track{
height:100px;
}
.loop .product {
background: #ccc;
outline: 1px solid black;
transition: transform .5s; /* same duration as in js */
transform: translateY(0);
}
.loop .product.slick-current + .product {
transform: translateY(30px);
}
.loop .product.slick-current + .product + .product {
transform: translateY(50px);
}
.loop .product.slick-current + .product + .product + .product {
transform: translateY(30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
<div class="loop">
<div class="product"> Your ContentA </div>
<div class="product"> Your ContentB </div>
<div class="product"> Your ContentC </div>
<div class="product"> Your Content1 </div>
<div class="product"> Your Content2 </div>
<div class="product"> Your Content3 </div>
<div class="product"> Your Content4 </div>
<div class="product"> Your Content5 </div>
<div class="product"> Your Content6 </div>
<div class="product"> Your Content7 </div>
</div>
I am not sure but i think:
slick slider adds and removes elements as you slide or swipe, so the nth-child selector you used won't work well.
try using class name instead nth selector, like:
.test, .slick-active:frstchild{
top:10px;
position:relative;
}
<div class="loop">
<div class="product frstchild"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product frstchild"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
</div>
or you can use define cycle size in nth-child selector accordingly, like:
.test, .slick-active:frstchild(3n+1){}
Try this:
.product:nth-child(5n+1),
.product:nth-child(5n+5)
{
top:10px;
position:relative;
}
.product:nth-child(5n+2),
.product:nth-child(5n+4)
{
top:40px;
position:relative;
}
.product:nth-child(5n+3)
{
top:70px;
position:relative;
}
Slick slider adds elements (slick-cloned), thats why you had problem with styling them. Now you don't need all this javascript magic ;)
Here is nice explanation of nth-child.
Watch out using nth-child because it not always works as you might think. For example:
<style>
.product:nth-child(1){background:red;}
.product:nth-child(2){background:blue;}
</style>
<div class="loop">
<div class="promo"> Some promo </div>
<div class="product"> Your Content1 </div>
<div class="product"> Your Content2 </div>
</div>
What will be backgrounds of those elements?
Related
I have an <aside> and <header> and the header has child called container and cont. has some children one of them is called burger bar so what I want here is when I :hover the burger bar the <aside> will be visible so I wonder how to do that or if it is impossible I tried to do this header .container .burger_bar:hover + aside but the aside is not element beside the burger_bar so it's not going to work.
more explain...
<div class='header'>
<div class='container'>
<div class='burger_bar'>...</div>
</div>
</div>
<aside>...</aside> /* <---when hovering the burger bar this will be
transform: translate(0%) right after being transform: translate(-100%) */
If trigger and target are on the same level, you can use .trigger:hover ~ .target to target your .target element while .trigger is being hovered.
.trigger:hover ~ .target {
color: green;
}
<div class="trigger">Hover Me</div>
<div class="target">Target</div>
If your trigger and target are not on the same level, it's better to use some javascript to add a class to your target.
const trigger = document.querySelector('.trigger');
const target = document.querySelector('.target');
trigger.addEventListener('mouseover', () => {
target.classList.add('active');
});
trigger.addEventListener('mouseleave', () => {
target.classList.remove('active');
});
.target.active {
color: green;
}
<div class="parent1">
<div class="trigger">Hover Me</div>
</div>
<div class="parent2">
<div class="target">Target</div>
</div>
Or you could use :has() pseudo class but be aware if its poor coverage (only works in Safari right now)
.parent1:has(.trigger:hover) ~ .parent2 .target {
color: green;
}
<div class="parent1">
<div class="trigger">Hover Me</div>
</div>
<div class="parent2">
<div class="target">Target</div>
</div>
I want that when the click activate the element2 div, the element should disappear. And the element2 div should not appear at the beginning.
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
</div>
Add display none to hide an element from the start:
<div class="element2" style="display:none">
The rest of your code appears to be doing what it's supposed to, unless I am misunderstanding "I want that when the click activate the element2 div, the element should disappear"... which is entirely possible.
In order to have element2 hidden at the beginning you need to either add a style tag or even better add a CSS file where you will keep all of your stylings in one place.
For style tag:
<div class="element2" style="display:none">
For CSS:
.element2 {
display: none;
}
Then for your code you are close. In order to make element hide, you need to change it to:
$(".toggle").click(function() {
$(".element2").show();
$(".element").hide();
});
$(".close").click(function() {
$(".element2").hide();
$(".element").show();
});
The HTML will need some changes to, this will make what I wrote work the way I believe you want it to:
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
You should probably do something like this:
$(".toggle").click(function() {
$(this).parent().find(".element2").toggle();
});
$(".close").click(function() {
$(this).parent().hide(); // close the correct .element2
});
In CSS you need to:
.element2 {
display: none;
}
just $(".element2").hide(); hide it at start
$(function() {
$(".element2").hide();
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1
<div class="toggle">Toggle </div>
<div class="element2"> Element 2
<div class="close"> close</div>
</div>
</div>
HTML
<div class="element">
<div class="toggle"></div>
<div class="element2" style="display:none">
<div class="close"></div>
</div>
</div>
EXAMPLE CSS
.toggle
{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:left;
background:green;
}
.element2{
display:block;
width:40px;
height:40px;
margin-left:10px;
float:left;
background:yellow;
}
.close{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:right;
border:1px solid #000;
}
JQUERY
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").css({"display":"none"});
});
fiddle to check
I hope it is helpfull answer. Good Luck !
Here is my Codepen link: resizable event
I'm using Jquery UI resizable, thing is working fine but now I want to the resizable event on each block only active one by one, if you click another block, the resizable event on the previous block will be destroy, I've tried the .each function but it's not working.
Same thing when I try to destroy the resizable event when click anywhere on the screen except the div, I got the Error: cannot call methods on resizable prior to initialization; attempted to call method 'destroy'.
When a component is clicked, got resizable, you should mark it as resizable enabled by adding a class. Like:
https://codepen.io/ducfilan/pen/jGPwop
$(document).on("click", ".component-items", function () {
$('.processed-resizeable').resizable("destroy");
$('.processed-resizeable').removeClass("processed-resizeable");
$(this).resizable();
$(this).addClass('processed-resizeable');
$(this).draggable({
start: function (event, ui) {
$(this).resizable("destroy");
}
});
});
.component-list {
border:1px solid #343434;
margin-top:50px;
padding:5px 20px;
height:300px;
position: relative;
}
.component-items {
cursor:pointer;
position: absolute;
}
.ui-resizable {
border:1px solid #d3d3d3;
}
#items-1 {
top:10px;
left:500px;
}
#items-2 {
bottom:100px;
left:15px;
}
#items-3 {
top:100px;
right:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="component-list">
<div class="component-items" id="items-1">
<h3>Block 1</h3>
</div>
<div class="component-items" id="items-2">
<h3>Block 2</h3>
</div>
<div class="component-items" id="items-3">
<h3>Block 3</h3>
</div>
</div>
</div>
</div>
</div>
I'm looking for a help with a small things to do on my CMS website.
I would like to know, if it's possible, how to to remove or hide styles from one div one a website while another div is active and only when this 2nd div is inside the first one.
I'm using easytabs jQuery plugin and easytabs html code is inserted in tinymce WYSIWYG HTML source editor, while <div class="block"></div> is generated from CMS, because it's a wrapper of content module.
Let me show you my code so maybe you can understand more what I want to do:
<div class="block">
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'>HTML Markup</li>
<li class='tab'>Required JS</li>
<li class='tab'>Example CSS</li>
</ul>
<div id="tabs1-html">
<h2>HTML Markup for these tabs</h2>
<!-- content -->
</div>
<div id="tabs1-js">
<h2>JS for these tabs</h2>
<!-- content -->
</div>
<div id="tabs1-css">
<h2>CSS Styles for these tabs</h2>
<!-- content -->
</div>
</div>
</div>
<div class="block">
<div class="test">
</div>
</div>
Okay, so CMS is adding <div class="block"></div> with a styles
(thats are the styles):
#main .block {
border: 2px solid #e0e0e0;
padding: 24px 28px 24px 26px;
margin: 0 0 8px;
background: #ffffff;
text-align: justify;
overflow: auto;
}
And here comes the problem. I would like to remove or hide styles from this <div class="block"></div> element only while I have <div id="tab-container" class="tab-container"></div> inside this div <div class="block"></div>.
And I need to keep all the styles for <div class="block"></div> when I have other divs inside it.
Is it doable with some jQuery or JS ? Or it's not possible ?
Thanks in advance.
You can do this with the has() function within jQuery. You're going to have to reset or change each of the CSS values
$(document).ready(function() {
$('.block').has('#tab-container.tab-container').css('border', '0');
});
.block {
border: 2px solid red;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<div class="some_tag">
Text
</div>
</div>
<div class="block">
<div id="tab-container" class="tab-container">Some more text</div>
</div>
You can do an array of CSS values as well if there is more than one that needs to be changed like so:
.css({ "border": "0", "background": "blue"})
Insteed of resetting or overwritte all block classes maybe it would be much easier to add:
$(document).ready(function () {
$('.block').has('div.tab-container').removeClass('block');
});
This way you will remove the block class so no styles.
JSFIDDLE
I'm creating two overlay in an image.
One overlay is fixed over the bottom of image,Second overlay will be displayed on mouse hover.
My problem is second overlay is displayed on first overlay but it should not display over the fixed one.
Sample partial Demo is here. Please find the screenshot too.
Please help me or guid me to the right way to solve the issue or implement the design..
HTML
<section id="s-explore">
<div class="pagebreak"><span>The Lifestyle</span> <i class="down"><</i>
</div>
<div class="wrapper layout">
<div class="col">
<div class="media">
<img id="d1" src="http://placekitten.com/300/300" />
<div class="contenthover">
<p>Lorem ipsum
</p>
</div>
</div>
</div>
CSS
.contenthover{
color:#fff;
}
.mybutton{
padding:20px;
color:#fff;
background-color:#000;
margin:10px;
}
Jquery
$(function () {
$(' #d1').contenthover({
overlay_width: 300,
overlay_height: 150,
effect: 'slide',
slide_direction: 'bottom',
overlay_x_position: 'center',
overlay_y_position: 'bottom',
overlay_background: '#000',
overlay_opacity: 0.8
});
});
Its just about the z-index of the third layer. You have to set the position of the media content to relative, position the 3 layer with absolute to the bottom and set z-index to bottom layer. That's it.
FIDDLE
html
<section id="s-explore">
<div class="pagebreak"><span>The Lifestyle</span> <i class="down"><</i>
</div>
<div class="wrapper layout">
<div class="col">
<div class="media">
<img id="d1" src="http://placekitten.com/300/300" />
<div class="contenthover">
<p>Lorem ipsum
</p>
</div>
<div class="bottom_layer">colors</div>
</div>
</div>
css
.contenthover{
color:#fff;
}
.mybutton{
padding:20px;
color:#fff;
background-color:#000;
margin:10px;
}
.bottom_layer{
position:absolute;
bottom: 0;
background:red;
z-index: 10;
width: 300px;
}
.media{
position:relative;
}