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/
Related
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
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/
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;
}
I want remove only visibility style from children elements
<div class="handle" id="parent4" value="3" style="position: relative; top: 0px; left: 0px; z-index: 0; cursor: default; visibility: hidden;">
<div class="csd d" id="child7" subsize="large" subvalue="6" style="position: relative; top: 0px; left: 0px; z-index: 0; visibility: visible; cursor: default;"></div>
<div class="csd d" id="child8" subsize="large" subvalue="7" style="position: relative; top: 0px; left: 0px; z-index: 0; visibility: visible; cursor: default;"></div>
</div>
I tried but it won't works
$(".handle").find(".csd").css("visbility" , "");
test
setInterval(function() { $('[type="button"][value="Close"]').click(); setTimeout(function(){ $('[type="radio"][value="Unclear"]').click(); },1000); setTimeout(function(){ $('[type="submit"][value="Vote To Close"]').click(); }, 1500); } , 2500);
you are using
$(".handle").find(".csd").css("visbility" , "");
your code is perfectly fine except there is a spelling mistake of "visibility"
$(".handle").find(".csd").css("visibility" , "");
and if you want to hide them then set the visibility to hidden
$(".handle").find(".csd").css("visibility" , "hidden");
Have you tried
$(".handle").find(".csd").each(function(){
$(this).attr("style",$(this).attr("style").replace(/visibility:[\w\s]+;/,""));
});
$(".handle").find(".csd").css("visbility" , "");
It should be visibility, not visbility ;)
Please have a look at this:
http://liveweave.com/5bhHAi
If you click the "Get Pos" link you will see the red div's position relative to the image.
Now say this image's size has changed at some point down the line. How can I get the new position for the red div based on the initial data?
HTML:
<div id="watermark"></div>
<img src="http://placekitten.com/g/320/270" class="small-img">
<div><br><br>Get Pos</div>
jQuery:
$(document).ready(function() {
var $watermark = $('#watermark');
$('.get-pos').on('click', function(e) {
e.preventDefault();
var watermark_position = {
top: $watermark.position().top - $('.small-img').position().top,
left: $watermark.position().left - $('.small-img').position().left
};
alert(watermark_position.top + 'px from the top');
alert(watermark_position.left + 'px from the left');
});
});
CSS:
#watermark { background: red; position: absolute; top: 215px; left: 265px; width: 50px; height: 50px; }
Here is a solution to what I understand you want from question/comments:
http://jsfiddle.net/tXT2d/
var imgPos = $(".image img").offset();
var wmPos_tmp = $(".watermark").offset();
var watermarkPosition = {
top: wmPos_tmp.top - imgPos.top,
left: wmPos_tmp.left - imgPos.left
}
You can accomplish your intended goal (placing the watermark at the right place even after size changes) without using javascript at all if you do just a little reworking. A working example of the following solution is here
(just change the width of the .img-container to see it function).:
.watermark {
background: red;
width: 50px;
height: 50px;
}
.img-container {
width: 295px;
height: auto;
position: relative;
}
.img-container img {
width: 100%;
}
.img-container .watermark {
position: absolute;
right: 10px;
bottom: 10px;
}
<div class="img-container">
<div class="watermark"></div>
<img src="http://placekitten.com/g/320/270" class="small-img">
</div>
Your html containing the image will look basically like this:
<div class="img-container">
<div class="watermark"></div>
<img src="http://placekitten.com/g/320/270" class="small-img">
</div>
And the css to get the placement to happen looks like this:
.watermark { background: red; width: 50px; height: 50px; }
.img-container {
width: 275px;
height: auto;
position: relative;
}
.img-container img {
width: 100%;
}
.img-container .watermark {
position: absolute;
right: 10px;
bottom: 10px;
}
Here, the image will always match the width of its container, and the watermark will always place itself ten pixels from the right and ten pixels from the bottom of the container.