Develop Reference

making position:absolute div relative after toggleFade()

I've got a project where i've overlaid two imaged and have the top image fade out using a toggleFade function, when the user clicks a toggler (checkbox). it works well, except that to get the images to function correctly the bottom image is set to position:absolute. Of course, when the toggleFade() happens, the absolute positioning means all the lower divs float up.
$(document).ready(function(){
$('.lights').on('click', function (){
$('.day').fadeToggle(3000);
setTimeout(function() {$('.night').css('position: absolute');}, 3000);
});
});
is there any way to prevent this from happening? i've tried setTimeout for the lower div, but that didn't work.
here's the jsFiddle of my project:
https://jsfiddle.net/jsieb81/oue2fnr0/

You can add a class on click event and manage opacity in css with a transition. Like this :
(You don't need jQuery)
document.querySelector('.lights').addEventListener('click',function(){
document.querySelector('.day').classList.add('hide');
});
.hide {
opacity: 0;
-webkit-transition: opacity 3s;
transition: opacity 3s;
}
see this fiddle https://jsfiddle.net/oue2fnr0/9/

How do I change the color of my background smoothly?

Here is the code in question - https://codepen.io/illpill/pen/VbeVEq
function newColor() {
var randomNumber = Math.floor(Math.random() * (colors.length));
document.body.style.backgroundColor = colors[randomNumber];
}
Right now that is the newColor() function...
When the button clicks, I'd like it to smoothly transition into the next quote as opposed to abruptly loading it. I'd also like for the quote to fade into white and then into a new quote... How is this achieved? Is it better to use jQuery?
Thanks!

Add transition to your body for background-color property.
body {
transition : background-color 1s ease-in-out;
}
To add transition to any element you should write,
element-selector {
transition: [CSS property] [duration] [timing-function];
}
For heading tags it will be
h3,h4 {
transition: [css property] [duration] [timing-function]
}
Transition only works when there is a change in the CSS property specified for the given element.

You can use CSS to fade the background (like others have shown here), but you'll have to use JavaScript to fade the text in and out.
Here's a working version with the quote and author fading between random states:
$('#quote').fadeOut(400,function(){
$(this).html(quotes[randomNumber][0]).fadeIn();
});
$('#author').fadeOut(400,function(){
$(this).html(quotes[randomNumber][1]).fadeIn();
});

Keep your code as is and add a css property:
.your-element-selector {
transition: all ease 500ms;
}
Or with JS:
document.body.style.transition = 'all ease 500ms';

Show/hide sidebar menu and extend col size with slide effect

I don't like much way for bootstrap sidebar wrapper so I made my one but I need some help:
$('.hidee').click(function(){
$('.c1').removeClass('col-md-2').addClass('col-md-1');
$('.c2').removeClass('col-md-10').addClass('col-md-11');
$('.hidee').removeClass('hidee').addClass('showw');
});
$('.showw').click(function(){
$('.c1').removeClass('col-md-1').addClass('col-md-2');
$('.c2').removeClass('col-md-11').addClass('col-md-10');
$('.showw').removeClass('showw').addClass('hidee');
});
When i add new class by using console I see that I got new class but it doesnt work when I click on button with that new class...
Also when it resize those 2 columns it just appears like hide/show, how can I add some sliding animation?
UPDATE:
I did this first part for resizing but now I need effect for little sliding if it is possible.
Full code:
$('.sh').click(function(){
var sh = $(this).attr('sh');
if(sh=="hide"){
$('.c1').removeClass('col-md-2').addClass('col-md-1');
$('.c2').removeClass('col-md-10').addClass('col-md-11');
$('.sh').attr('sh','show');
$('.sh').html('Show');
}else if(sh=="show"){
$('.c1').removeClass('col-md-1').addClass('col-md-2');
$('.c2').removeClass('col-md-11').addClass('col-md-10');
$('.sh').attr('sh','hide');
$('.sh').html('Hide');
}else{}
});
<button class="btn btn-default sh" sh="hide" style="float: right; margin-top: 0; margin-right: -1em;">Hide</button>
And I have two columns.

You'll need to add a CSS transition to the elements you're resizing, div for example:
div {
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
You also need to bind the click event to the document as you're dynamically creating the "showw" class and wont be able to bind on document ready.
$(document).on('click', '.hidee', function() {
$('.c1').removeClass('col-md-2').addClass('col-md-1');
$('.c2').removeClass('col-md-10').addClass('col-md-11');
$('.hidee').removeClass('hidee').addClass('showw');
})
$(document).on('click', '.showw', function() {
$('.c1').removeClass('col-md-1').addClass('col-md-2');
$('.c2').removeClass('col-md-11').addClass('col-md-10');
$('.showw').removeClass('showw').addClass('hidee');
});
See https://codepen.io/anon/pen/zKxBwN for a working example.

You are adding the class after the click and the existing function will load on dom loaded.
Try with this it will work for newly added elements to dom
$(document).on('click','.showw',function(){
});

hide/unhide HTML portions by hovering?

more precisely, I've seen websites where there's a kind of header image, which loops through 3-4 different images, and each image is referenced by a dot, and you can pick the image you want by clicking the dot as well. I'm sure everyone has seen this somewhere.
as an example, go to http://www.tsunamitsolutions.com/
my question is, how do I make these dots appear/disappear when I hover on the image (like on the site I shared above) is it javascript or can this be accomplished just in the CSS with the "hover" style.
In other words, can hovering over one html portion/div/section make another div/section appear/disappear just by using CSS?

It can be done in the CSS.
Assuming the dots/arrows are child elements of banner container, you can do something like:
.bannerContainerClass .dotClass {
display: none;
}
.bannerContainerClass:hover .dotClass {
display: block;
}
You can also do it in jQuery if you need effects like fade:
$(".bannerContainerClass").hover(function() {
$(this).children(".dotClass").fadeIn(500);
}, function() {
$(this).children(".dotClass").fadeOut(500);
});
The jQuery method can be modified to work even if the dots aren't children of banner container.

You can accomplish it using Jquery and javascript. As in any website header images there is a tag for image one tag for collection of those points.
Suppose.
<div id="header_image">
..code for header image..
</div>
which is header tag. and there is a tag which cointains the points.
<div id="points_container">
..code for points...
</div>
Now in its javascript code if you want to disappear "points_container" tag when mouse is hovered over "header_image".and appears again when mouse is hovered out, you can write in its Javascript code.
$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});

You can use css on hover with either the visibility attribute or opacity attribute to hide an object, the full implementation of a gallery widget like this is somewhat more complicated though. CSS solution:
.dots:hover
{
opacity:0;
}
Makes anything with the dots class invisible on mouse over.
Or if you don't want it to take up any space when invisible:
.dots:hover
{
display:none;
}

Try this with simple CSS transitions, like this
HTML
<div id="parent"><br/><span class="bullets">* * * *</span></div>
CSS
.bullets{
opacity:1;
}
#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
FIDDLE HERE>>

jQuery fadeOut() skips after CSS fade in

I'm having a bit of a frustrating problem regarding fading out an element using jQuery after it has been faded in with CSS. I set up a CSS animation to fade in an element when the page loads using the following (I've also got the relevant browser prefixes included too, I'm using Stylus):
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.elem {
opacity: 0;
animation: fadein 500ms ease-in 1ms forwards;
}
My issue is that when an event handler is activated that runs the following, the fadeOut does not fade but instead skips straight to nothing:
$('.elem').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
I've been able to replicate the issue in this JSFiddle. Can anyone help me out? :) Thanks a lot!

I would say it's conflicting with the CSS you're using. jQuery is probably using other opacity related properties than what your CSS is. An all jQuery solution might be this:
CSS
.elem {
display: none;
}
jQuery
$('.elem').fadeIn(1000); // on page load, fade in with jQuery
$('#go').click(function(){
$('.elem').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
});
Related: Conflict between CSS transition and jQuery fade

I know you asked for FadeIn and FadeOut... here's your code with animate and opacity instead.
$('#go').click(function(){
$('.elem').css('animation','none').animate({
'opacity' : 0
},function(){
$('.elem').animate({
'opacity' : 1
});
});
});

It seems that the css-animation has higher precedence than the inline style that jQuery applies to the element when fadeOut is used. This means the animation's opacity : 1; overrides any opacity setting jQuery applies, up until jQuery sets the element to display:none;
You can do this to get around:
$('#go').click(function(){
$('.elem').css('animation','none').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
});