We Keep Coding

Div's width decreases when show slide animation is playing

When my card title is clicked, its content shows or hides with the show slide jquery animation .show('slide', {direction: 'up'}, 'slow') / .hide('slide', {direction: 'up'}, 'slow'. The problem is that during the animation the width of .content-annales decreases so there is a lack of continuity with the .title-annales div on the right side.
Here is an example of the problem: click here
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
if (jQuery(this).next().css('display') === 'none') {
element.css('border-radius', '20px 20px 0px 0px');
jQuery(this).next().show('slide', {
direction: 'up'
}, 'slow', function() {
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
});
} else {
jQuery(this).next().hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
});
}
});
<div class="card-annales">
<div class="title-annales">
<span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
<h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
</div>
<div class="content-annales">
[...]
</div>
</div>
EDIT : I've tried to replicate the issue on jsfiddle but it works perfectly here. I use a bootstrap based theme (Hestia for Wordpress) and when I remove from the bootstrap css file the property box-sizing: border-box;, it works like in the jsfiddle.

I wasn't able to reproduce the behavior that you mentioned, but have a possible solution for you. Add width: calc(100% - 20px); to .content-annales.
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
if (jQuery(this).next().css('display') === 'none') {
element.css('border-radius', '20px 20px 0px 0px');
jQuery(this).next().show('slide', {
direction: 'up'
}, 'slow', function() {
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
});
} else {
jQuery(this).next().hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
});
}
});
.card-annales {
display: block;
margin-bottom: 20px;
}
.title-annales {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px 20px;
background-color: #012f51;
color: #ff6501;
font-size: 1.7em;
border: gray 1px solid;
padding: 10px 30px;
cursor: pointer;
}
.content-annales {
border-left: gray 1px solid;
border-right: gray 1px solid;
border-bottom: gray 1px solid;
padding: 10px;
border-radius: 0px 0px 20px 20px;
display: none;
width: calc(100% - 20px); /* added */
}
.float-right {
float: right;
}
.float-left {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="card-annales">
<div class="title-annales">
<span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
<h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
</div>
<div class="content-annales">
[...]
</div>
</div>

I've finally fixed the issue.
1. Probable cause of the issue
When .show('slide', { direction: 'up'}, 'slow') is executed, jquery-ui sets a fixed width to the selected div which seems to not take into consideration the padding (padding: 10px for .content-annales). See what happened during the jquery animation:
I don't really understand why the padding is not taked into account as it works perfectly in the jsfiddle shared in my question. It could be link to box-sizing: border-box; which is set for all html according to my theme. In fact, when I disable it, the issue disappear.
2. My solution
It's quite simple : I've encapsulated .content-annales in a parent div called .content-annales-toggle which has no style except display: none;. My animation now shows/hides up .content-annales-toggle so there is no issue with the padding.
Here is the new code :
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
if (jQuery(this).next().css('display') === 'none') {
element.css('border-radius', '20px 20px 0px 0px');
jQuery(this).next().show('slide', {
direction: 'up'
}, 'slow', function() {
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
});
} else {
jQuery(this).next().hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
});
}
});
<style>
.card-annales {
display: block;
margin-bottom: 20px;
}
.title-annales {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px 20px;
background-color: #012f51;
color: #ff6501;
font-size: 1.7em;
border: gray 1px solid;
padding: 10px 30px;
cursor: pointer;
}
.content-annales-toggle {
display: none; /* edited */
}
.content-annales {
border-left: gray 1px solid;
border-right: gray 1px solid;
border-bottom: gray 1px solid;
padding: 10px;
border-radius: 0px 0px 20px 20px;
display: block; /* edited */
}
.float-right {
float: right;
}
.float-left {
float: left;
}
</style>
<div class="card-annales">
<div class="title-annales">
<span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
<h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
</div>
<div class="content-annales-toggle">
<div class="content-annales">
[...]
</div>
</div>
</div>

I think this is related to overflow when the content is rendered. Consider the following:
https://jsfiddle.net/Twisty/zqk9johc/
JavaScript
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
var nextEl = element.next();
var parentEl = element.parent();
var iconUp = $("<i>", {
class: "fas fa-chevron-circle-up"
});
var iconDown = $("<i>", {
class: "fas fa-chevron-circle-up"
});
if (nextEl.css('display') === 'none') {
nextEl.show('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px 20px 0px 0px');
jQuery('.span-msg-mediadroit-annale', element).html(iconUp);
});
} else {
nextEl.hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
jQuery('.span-msg-mediadroit-annale', element).html(iconDown);
});
}
});
Nothing vastly different in the code, yet in the Fiddle I have added 5 paragraphs. When the content is shown, a scroll bar is rendered by the browser as the content extends beyond the current window height. The scroll bar being rendered seems to re-flow the content of the document.
If you add some CSS:
html {
overflow-y: scroll;
}
The Scroll Bar is already rendered and no re-flow is needed.
Example: https://jsfiddle.net/Twisty/zqk9johc/5/
Hope that helps.

Please remove the padding from the class "content-annales" and wrap inner content on div and adding padding to the same.
Please check the code below:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="card-annales">
<div class="title-annales">
<span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
<h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
</div>
<div class="content-annales">
<div class="inner-section">
[...]
</div>
</div>
</div>
<style>
.card-annales {
display: block;
margin-bottom: 20px;
}
.title-annales {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px 20px;
background-color: #012f51;
color: #ff6501;
font-size: 1.7em;
border: gray 1px solid;
padding: 10px 30px;
cursor: pointer;
}
.content-annales {
border-left: gray 1px solid;
border-right: gray 1px solid;
border-bottom: gray 1px solid;
border-radius: 0px 0px 20px 20px;
display: none;
}
.inner-section {
padding: 10px;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
</style>
<script>
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
if (jQuery(this).next().css('display') === 'none') {
element.css('border-radius', '20px 20px 0px 0px');
jQuery(this).next().show('slide', {
direction: 'up'
}, 'slow', function() {
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
});
} else {
jQuery(this).next().hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
});
}
});
</script>

How to change active stage when i click on next button

I am trying to create slider with step and I am unable to find good solution with this and I have tried to modify many sliders like owl carousel and swipe slider but this didn't work.
jQuery(".step1").click(function() {
jQuery('.steps .stp .active').removeClass('active');
jQuery('.hot-section-right .active').removeClass('active');
jQuery('.step1 .stepp').addClass('active');
jQuery('.step-one').addClass('active');
});
jQuery(".step2").click(function() {
jQuery('.steps .stp .active').removeClass('active');
jQuery('.hot-section-right .active').removeClass('active');
jQuery('.step2 .stepp').addClass('active');
jQuery('.step-two').addClass('active');
});
jQuery(".step3").click(function() {
jQuery('.steps .stp .active').removeClass('active');
jQuery('.hot-section-right .active').removeClass('active');
jQuery('.step3 .stepp').addClass('active');
jQuery('.step-three').addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="steps">
<div class="step1 stp"> <span class="stepp active">STEP 1</span></div>
<div class="step2 stp"> <span class="stepp">STEP 2</span></div>
<div class="step3 stp"> <span class="stepp">STEP 3</span></div>
</div>
<div class="hot-section-right">
<div class="step-one active"><img src="img/xstep-1.png"></div>
<div class="step-two"><img src="img/xstep-2.png"></div>
<div class="step-three"><img src="img/xstep-2.png"></div>
</div>

I've made a starter code for you. I think from this on you could style it and make it look better. I've also played a little bit with the code and created an autoplay function.I hope this will help you:
$(document).on('click', '.stepp', function() {
$('.active_btn').removeClass('active_btn');
$(this).addClass('active_btn');
var id = $(this).attr('id');
id = id.replace('step', '');
$('.active_img').removeClass('active_img');
$('#img' + id).addClass('active_img');
currentSlide = id - 1;
});
$(document).on('click', '.img', function() {
$('.active_img').removeClass('active_img');
$(this).addClass('active_img');
var id = $(this).attr('id');
id = id.replace('img', '');
$('.active_btn').removeClass('active_btn');
$('#step' + id).addClass('active_btn');
currentSlide = id - 1;
});
var currentSlide = 0; //start index
var totalElements = $(".img").length; //total number of slides
function autoplay() {
$(".img").eq(currentSlide).click();
currentSlide++;
if (currentSlide == totalElements) {
currentSlide = 0; //resetting the index when the end is reached
}
}
//call autoplay using setInterval every 1s
setInterval(autoplay, 1000);
body{
background: #F4F4F5;
}
.steps{
margin-bottom: 10px;
border: 1px solid #adadad;
border-radius: 20px;
max-width: 300px;
width: 100%;
text-align: center;
padding: 5px 5px;
box-sizing: border-box;
}
.img{
opacity: 0.6;
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
-o-transition: all 350ms;
transition: all 350ms;
max-width: 100px;
display: table-cell;
vertical-align: middle;
}
.img img{
cursor: pointer;
max-width: 100%;
width: 100%;
height: auto;
}
.stp{
display: inline-block;
cursor: pointer;
}
.stepp{
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
-o-transition: all 350ms;
transition: all 350ms;
padding: 5px 10px;
border-radius: 20px;
display: block;
}
.active_btn{
background: #fff;
box-shadow: 2px 2px 10px #000;
}
.active_img{
opacity: 1;
max-width: 140px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="steps">
<div class="stp"> <span id='step1' class="stepp active_btn">STEP 1</span></div>
<div class="stp"> <span id='step2' class="stepp">STEP 2</span></div>
<div class="stp"> <span id='step3' class="stepp">STEP 3</span></div>
</div>
<div class="hot-section-right">
<div id='img1' class="img active_img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div>
<div id='img2' class="img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div>
<div id='img3' class="img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div>
</div>

How to put RGBA background above the image or div area?

I need to use RGBA background above this grid. I used some of the jQuery to interect with div area. But I don't know how to put this background-color in image while I'm using jQuery. Is there a way I can do this using jQuery ? or any other methods ?
// Grid function
$(function() {
$(".single_grid").hover(function() {
var panelId = $(this).attr("data-panelId");
$("#" + panelId).css({}).toggle();
})
$(".single_grid").mouseover(function() {
var imageId = $(this).attr("data-imageId");
$("#" + imageId).css({
opacity: "0.3"
})
})
$(".single_grid").mouseleave(function() {
var imageId = $(this).attr("data-imageId");
$("#" + imageId).css({
opacity: "1"
})
})
})
.grid_panel {
width: 100%;
height: auto;
}
#sub_grid_panel {
height: 760px;
margin: 0 auto;
width: 1125px;
}
#sub_grid_panel li {
float: left;
}
.single_grid {
width: 280px;
height: 200px;
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
}
.image_hover_preview h3 {
text-align: center;
display: block;
margin-bottom: 5px;
font-weight: normal;
font-family: 'RalewayLight';
color: #FF8500;
}
.image_hover_preview {
position: absolute;
top: 65px;
width: 100%;
display: none;
}
div.image_hover_preview a i {
color: #333;
font-size: 20px;
padding: 5px 10px;
background: #FF8500;
color: #FFFFFF;
}
div.image_hover_preview {
text-align: center;
}
<li class="single_grid" data-panelId="panel1" data-imageId="image1">
<div class="grid_column_bar">
<img src="img/grid/grid1.jpg" alt="" id="image1">
<div class="image_hover_preview" id="panel1">
<h3>Lorem ipsum dolor</h3>
<i class="fa fa-search-plus"></i>
<i class="fa fa-link"></i>
</div>
</div>
</li>
<li class="single_grid" data-panelId="panel2" data-imageId="image2">
<div class="grid_column_bar">
<img src="img/grid/grid2.jpg" alt="" id="image2">
<div class="image_hover_preview" id="panel2">
<h3>Lorem ipsum dolor</h3>
<i class="fa fa-search-plus"></i>
<i class="fa fa-link"></i>
</div>
</div>
</li>

Personally, I'm a fan of this little box-shadow: inset trick.
Just add a background like you normally would and on top of that,
add a box-shadow property like so :
.element {
background-image: url(myBgImage.jpg);
box-shadow: inset 0px 0px 0px 1000px rgba(51,51,51,0.3);
}
Note: the spread-radius of 1000px is arbitrarily chosen. Just make sure it exceeds the width/height of your element.
Box Shadow Generator

I'm not entirely sure what you wanted since your code snippet didn't work at all.
This changes the background color:
$(element).css({
backgroundColor:"rgba(50,50,50,.5)"
});
To put the color on top of the background image, you can use gradients:
$(element).css({
backgroundImage:"linear-gradient(rgba(50,50,50,.5),rgba(50,50,50,.5)),url(background.jpg)"
});

The logo become pixelated after animating its siblings

I'm working on a project, and its thin header is animated, the animation is: when the user expand the side panel, it takes the half of the screen and the header shrink to the second half.
Now the issue is, when I animate the header to be the half of the screen, the logo become pixelated, and I don't why!
This issue in webkit browsers only [chrome/Safari].
This is a video shows the problem
https://www.dropbox.com/s/b9hopzqc4cpdfz6/logo-issue.mkv?dl=0
The HTML
<div id="topBar" class="clearfix">
<a class="logo pull-left" href="index.html"><img src="images/logo.png" alt=""/>Three.js Project</a>
<ul class="topControls clearfix pull-right">
<li class="pull-left"><i class="fa fa-camera-retro"></i>View
<select name="" id="">
<option value="">Normal</option>
<option value="">Back</option>
<option value="">Inside</option>
</select>
</li>
<li class="pull-left"><i class="fa fa-gear"></i>Settings</li>
<li class="pull-left"><i class="fa fa-floppy-o"></i>Save</li>
<li class="pull-left"><i class="fa fa-calculator"></i>Calculator</li>
<li class="pull-left"><i class="fa fa-lightbulb-o"></i>Help</li>
</ul>
</div>
The CSS
#topBar {
position: fixed;
height: 40px;
left: 0;
top: 0;
right: 0;
z-index: 950;
background: $sceneSectionsBg;
border-bottom: 1px solid $sceneSectionsBorderColor;
.logo {
margin: 10px 0 0 10px;
display: block;
height: 20px;
img {
margin-right: 7px;
height: 20px;
}
}
.topControls {
list-style: none;
padding: 0;
position: absolute;
top: 10px;
right: 430px;
li {
margin-right: 22px;
color: lighten($controlsActiveColor, 10%);
&:last-child {
margin-right: 15px;
}
.fa {
margin-right: 5px;
}
select {
color: $controlsActiveColor;
font-size: 12px;
height: 20px;
position: relative;
top: -1px;
margin-left: 3px;
}
a {
color: lighten($controlsActiveColor, 10%);
text-decoration: none;
}
&:hover a {
color: lighten($controlsActiveColor, 20%);
}
}
}
}
The JS
$(document).on('click', '#sceneCategoriesToggle', function () {
var $sceneCategories = $('#sceneCategories'),
sceneCategoriesWidth = $sceneCategories.outerWidth(),
isExpanded = $sceneCategories.hasClass('expanded'),
$relativePanel = $('#bottomPanel, #topBar .topControls');
if (isExpanded) {
$sceneCategories.animate({right: -sceneCategoriesWidth}, function () {
$sceneCategories.removeClass('expanded');
});
$relativePanel.animate({right: 0});
$('.detailsContent .closeBtn').click();
} else {
$sceneCategories.animate({right: 0}, function () {
$sceneCategories.addClass('expanded');
});
$relativePanel.animate({right: sceneCategoriesWidth});
}
});
Thanks.

I solved this issue by using another small image for the logo, the original image is 200px X 200px, and the logo is 20px X 20px, So I used a small image, and this solved the problem.

expand search bar onclick

Well, I´m trying to do a basic jQuery example that expands a search bar on mouse click, and I dont understand why nothing is happening with my code. I have a basic jQuery to show the input when I click in my (button class="expand"), but when I click in this button the input that is setting in css with display:none dont appears.
My basic jQuery script:
<script type="text/javascript">
$('.expand').click(function() {
$('#test').show(500);
});
My html:
<nav id="menu">
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
<li id="sb-search" style="float:right; list-style:none; height:20px;">
<div id="pesquisar-container">
<span id="pesquisar" class="form-container cf">
<form name="form1" >
<input id="test" type="search" placeholder="Pesquisar..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" />
<button class="expand" type="submit"><i class="fa fa-search"></i></button>
</form>
</span>
</div>
</li>
</ul>
</nav>
My css:
.form-container input {
width: 150px;
height: 25px;
padding: 5px 5px;
float: left;
font: bold 15px;
font-size:15px;
font-family:'bariol_lightlight';
border: 0;
background: #f3f3f3; /*#fcfcfc se o fundo for branco, ver as diferenças */
border-radius: 3px 0 0 3px;
margin-top: 9px;
color:#000;
display:none;
}
.form-container button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 25px;
width: 35px;
text-transform: uppercase;
background: #363f48;
border-radius: 0 5px 5px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
margin-top:9px;
}

Try to wrap your code inside DOM ready handler $(function() {...});
$(function() {
$('.expand').click(function() {
$('#test').show(500);
});
});

There can be the couple of reasons.
1. Put your click listeners on document ready
2. Better assign some id to button. let's say its btnSubmit.
3. following methods can be used to show or hide the elements.
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
or its better to use toggle.
$(document).ready(function() {
$("#btnSubmit").click(function(){
$("#test").toggle();
});
});
Hope this will help.