Develop Reference

Set opacity with range slider

I would like to adjust the css attribute of opacity with a range input slider. If I have:
<div id="contrastFilter"> </div>
<div id="contrastSlider">
<input id="contrast" type="range" value="contrast" max="0.5" min="0" step="0.01"></input>
</div>
and I would like to change the opacity of this:
#contrastFilter{
background-color:black;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0.2;
}
JSFiddle
What javascript would I have to add to make this work? I would like the slider to affect the square's opacity.

You could simply use input event:
JSFiddle
$('#contrast').on('input', function() {
$('#contrastFilter').css('opacity', $(this).val());
});
#contrastFilter {
background-color: black;
width: 200px;
height: 200px;
position: absolute;
top: 20%;
float: right;
left: 20%;
z-index: 2;
opacity: 0.2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="contrastFilter"></div>
<div id="contrastSlider">
<input id="contrast" type="range" value="contrast" max="0.5" min="0" step="0.01"/>
</div>

First, you're going to need to revise your CSS. That z-index on #contrastFilter is going to render it above your input, making it unclickable.
Second, you'll need to add a listener to the input's change event, get the value, and update the opacity CSS of #contrastFilter. I recommend using jQuery to facilitate cross-browser compliance.
CSS:
#contrastFilter{
background-color:black;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.2;
}
#contrastSlider {
position: absolute;
}
JavaScript (using jQuery):
$(document).ready(function() {
$('#contrastSlider').change(function(e) {
var value = $(e.target).val();
$('#contrastFilter').css('opacity', value);
});
});
Forked fiddle: http://jsfiddle.net/Lmyoz94j/

jQuery .toggle stacking styles

I have a problem where I'm using .toggle to slide elements up and down, the problem is when i try to move my cursor quickly over the items it gets messed up. The id of the element is removed and I get custom styling assigned by jQuery.
<div class="ui-effects-wrapper" style="font-size: 100%; border: none; margin: 0px; padding: 0px; width: 160px; height: 60px; float: none; position: relative; z-index: auto; top: -50px; left: auto; bottom: auto; right: auto; overflow: hidden; display: block; background: transparent;">Novi test</div>
How do I fix this? I've tried using .stop but it doesn't solve the problem. I've tried reducing the animation time but the problem persists.
.js code
$(document).ready(function(){
$('.journal-entry').hover(function(){
var name = $(this).attr('name');
$(this).find('div').stop()
$(this).find('div').toggle("slide", { direction: "down" }, 200).html(name);
}, function(){
$(this).find('div').stop();
$(this).find('div').toggle("slide", { direction: "down" }, 200);
});
});
HTML
<li class="col-md-3 journal-entry" name="Name of the img">
<a href="#">
<img class="journal-img" src="imgsrc">
<div id="journal-img-title">Novi test</div>
</a>
</li>

I fixed it by changing the selector and adding a class
$('.journal-entry').hover(function(){
var name = $(this).attr('name');
$("a",this).children('.titler').toggle("slide", { direction: "down" }, 200).html(name);
}, function(){
$("a",this).children('.titler').toggle("slide", { direction: "down" }, 200);
});

Is there a way to ignore certain transitionend events based on css property?

Is there a way to ignore certain transitionend events based on css property? For example in the following code, the height transition ends much sooner than the left transition. Is there a way to ignore the height transition to get the last transitionend event?
html:
<div id="testButton"></div>
<div id="wrapper" class="wrapper">
<div id="menu" class="menu">
<div id="menu-sets" class="menu-sets">
</div>
</div>
</div>
css:
#testButton {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
background-color: #00ff00;
}
.menu-sets {
position: absolute;
visibility: hidden;
overflow: hidden;
top: 0;
left: -50px;
z-index: 100;
width: 100px;
height: 100px;
background-color: #ff0000;
transition: left 3.3s ease-out, height 0.2s ease-out;
}
.show-menu-1 .menu-sets {
visibility: visible;
left: 0px;
height: 200px;
}
js:
$(document).ready(function () {
$("#testButton").click(
function () {
$('#wrapper').addClass('show-menu-1'); // show menu
}
);
$('#menu-sets').one('transitionend', function() {
alert("event done");
});
});
jsfiddle example:
http://jsfiddle.net/rotaercz/zysxsc41/2/

There sure is, the original event contains information about the property being transitioned
$('#menu-sets').on('transitionend', function(event) {
if ( event.originalEvent.propertyName === 'left' ) {
alert('done');
$('#menu-sets').off('transitionend');
}
});
As one() only fires once, you'll have to use on() and unbind instead
FIDDLE

Creating hover-visible buttons

I am trying to create some options that are hidden unless the user goes with the mouse in a specific area. Let's take an example: Google+ profile page:
When you go with the mouse cursor on the picture, the button appears.
Here is what I tried:
var $button = $("#button");
$("#profile-picture").on("mouseover", function() {
$button.show();
}).on("mouseout", function() {
$button.hide();
});
#profile-picture {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 45px;
left: 70px;
opacity: 0.75;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
The problem is that when I go with the cursor over the #button, it flickers. What can I do?

The easiest method is placing them both in the same div, and then using mouseover/out for that div. Example: http://jsfiddle.net/1g24mhhz/
HTML:
<div id="profile-picture">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" class="profile">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>
CSS edits:
#profile-picture .profile {
width: 150px;
height: 100px;
}
EDIT: You should probably not use an ID for the div, since you probably have multiple profiles on a page. This was just to show it with the code you had already used.

A simple css approach. You can have a click event on the button :)
$('#button').on('click', function() {
alert('I am clickable');
});
#profile-picture,
.hover-wrap {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
bottom: 0;
right: 0;
margin: auto;
opacity: 0.75;
cursor: pointer;
}
.hover-wrap {
position: relative;
}
.hover-wrap:hover #button {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="hover-wrap">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>

You can use CSS:hover properties to show/hide the button, no Javascript needed.
The trick is a sibling selector:
#profile-picture:hover + #button, #button:hover{
display:block;
}
Try this:
http://jsfiddle.net/6s9200ab/

How to get minimal jQuery slideshow to slide properly?

Trying to make this minimal jQuery slideshow (Simple jQuery slideshow using animate()), but how do I make the 3rd and 4th image slide "together" like in the 1st and 2nd image?
http://jsfiddle.net/frank_o/eku4Lwt1/44/
JS:
changeSlide(1, $(".slideshow img"));
function changeSlide(i, items) {
setTimeout(
function()
{
var currentItem = items.eq(i),
prevItem = items.eq(i-1);
prevItem.css("left", -prevItem.width());
currentItem.css("right", 0);
changeSlide(i+1, items);
}, 2000);
}
HTML:
<div class="slideshow" style="height: 100px; width: 200px; overflow: hidden;">
<img src="http://lorempixel.com/200/100" />
<img src="http://lorempixel.com/200/101" />
<img src="http://lorempixel.com/200/102" />
</div>
CSS:
.slideshow {
background: white;
position: relative;
}
.slideshow img {
position: absolute;
top: 0;
right: -200px;
width: 200px;
height: 100px;
-webkit-transition: all 2s ease;
}
.slideshow img:first-child {
left: 0;
}
Ideally they should slide like in this Slick.js example (although I feel Slick is overkill for this job):
http://jsfiddle.net/frank_o/eku4Lwt1/2/

I have changed your code quite a bit: JSFidle
First of all, you should do prevItem.css("right", prevItem.width()); instead of prevItem.css("left", -prevItem.width());. And CSS should be changed like this:
.slideshow img:first-child {
right: 0px;
}
I have also changed the animation to circularly repeat. Dunno if you can use it, otherwise here is what you asked for http://jsfiddle.net/eku4Lwt1/56/

How about this: http://jsfiddle.net/eku4Lwt1/64/
In your JS change this line:
currentItem.css("right", 0);
->
currentItem.css("left", 0);
And in your CSS change the image positioning to left: 200px;:
.slideshow img {
position: absolute;
top: 0;
left: 200px;
}