Develop Reference

Element visible betwen scroll points

I have some element that is visible when scroll is bigger than 890px.
But i have problem that element has to be visible between 890px and 920px, and if user scroll more thna 920 or less than 890px i need to hide that element.
I am using animated css for adding animation to element when appear.
This is what i have for now in JS
var $document = $(document),
$elementField = $('.center-field');
$document.scroll(function () {
if ($document.scrollTop() >= 890) {
$elementField.stop().addClass("show animated bounceInDown");
}
});
Now it will appear when user scroll more than 890px, but when user goes back it will stay again, is there somekind of watch user scroll?

Just be a bit more specific with the if condition.
var $document = $(document),
$elementField = $('.center-field');
$document.scroll(function () {
if ($document.scrollTop() >= 890 && $document.scrollTop() <= 920) {
$elementField.css('color', 'tomato');
} else {
$elementField.css('color', 'blue');
}
});
body {
position: relative;
height:1800px;
}
.center-field {
position: absolute;
top: 900px;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>scroll down please</p>
<h1 class="center-field">Hello</h1>

The code you done is working like that:
every time you scroll:
check if the scroll is more than 890px
if so add the class
As you can see it doesn't contains the logic of hiding the element.
You need to check if the scroll is less than 890px and remove the classes.
You can try something like that (assuming that when you node hasn't the class show it is hidden):
var $document = $(document),
$elementField = $('.center-field');
$document.scroll(function () {
var scroll = $document.scrollTop();
if (scroll >= 890 && scroll <= 920) {
$elementField.addClass("show animated bounceInDown").removeClass("fadeOut");
} else {
$elementField.removeClass("show bounceInDown").addClass("fadeOut");
}
});

Cant you do a hide in the else?
$document.scroll(function () {
if ($document.scrollTop() >= 890) {
$elementField.stop().addClass("show animated bounceInDown");
}else{
$elementField.hide(); //or something like that
}

Move div down once past a certain point

Im trying to make '.pierre' .moveDown once the image has a left position of 20% but its not working. Whats supposed to happen is once the image has a left position of 20% it needs to fall down the page by itself. The html and css code is located in the fiddle.
Heres a link to a fiddle
https://jsfiddle.net/Pallonej/0vhc7pqq/
this is my script thats not working
if ($('.pierre').css('left') == '20%') {
$(this).moveDown();
}

Your check for the position should be inside of the keydown handler and then parse the value from $.css(..) to an integer to have your comparison work.
The code could look like in the updated fiddle here.
I've also added stop to you animation to avoid animation queuing. Maybe it's better to do this with-out animation.
With $(document).width() * 0.2 you can calculate the relative position for the falling position.
If you want to hide or remove the box once it is fallen you can add a done callback to the animation to do what you're looking for. In the demo I've hidden the box.
//move person
$(document).keydown(function (e) {
if (e.keyCode == 37) { // left
$(".pierre").stop(true,true).animate({
left: "-=30"
});
} else if (e.keyCode == 37) { // right
$(".pierre").stop(true,true).animate({
left: "-=30"
});
}
//console.log($('.pierre').css('left'));
if (parseInt($('.pierre').css('left')) <= $(document).width() * 0.2 ) {
//$(this).slideDown();
$('.pierre').animate({
top: "+=" + $(document).height()
}, function() {
$(this).hide();
});
}
});
//fall
/*if ($('.pierre').css('left') === '+5px') {
//$(this).slideDown();
$(this).animate({
left: "-=30"
});
}*/
.pierre {
height:15%;
width:15%;
background: black;
position: absolute;
left: 90%;
top: -.7%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pierre'></div>

You need to work with the offset property and not position
Here's an example for your question with extra feature to illustrate the concept :
var position = $(".pierre").offset();
$(document).keydown(function(e) {
var y= $(".pierre").offset().top;
var x = $(".pierre").offset().left;
if (e.keyCode == 37) { // left
$("#position").html("X: "+x+" , Y:"+y);
$(".pierre").animate({
left: "-=30"
});
} else if (e.keyCode == 37) { // right
$(".pierre").animate({
left: "+=30"
});
}
if (x<=200) {
$(".pierre").animate({
top: "+=30"
});
}
});
and here is the JSFiddle

As Alundra alreay mentioned, you should use .offset().
You can add a callback to the .animate function, which will be executed after the animation has finished. If the location is right, you can call stop, in order to stop all current (and future) animation, so it won't move left again for the times you button-bashed left. Then you can again animate it to let it fall.
The new js code (I removed the second right-left button part for readability):
//move person
$(document).keydown(function(e) {
if (e.keyCode == 37) { // left
$(".pierre").animate({
left: "-=30"
}, function(){
if($('.pierre').position().left < window.innerWidth/5){
$('.pierre').stop(true);
$('.pierre').animate({
top: "+=1000"
});
}
});
}
});

Why my Jquery carousel doesn't stop at the last image?

I am trying to make build my own carousel from scratch since I cant find a plugin that does what I want. Which is having a vertical and horizontal plugin that work at the same time both ways.
Anyway I decided to give it a shot and try to build my own. But right now I am stuck at trying to understand why my "next" button doesn't disappear when it has reached the end of the carousel.
here is the code:
$(document).ready(function() {
var sliderWidth = 300; // Give the size of the window
var sliderV = $('#slide-wrap-vertical'); // Assigns the container that has all the sectiosn that will be scrolled vertically
var sliderCount = $(sliderV).children().size(); // Gets the size of the verticla slider
//test();
$('a.nav-top-prev').on('click',function () {
$('#slide-wrap-vertical > div').animate({
top: '+=' + sliderWidth
}, 500);
showHideDirection();
});
$('a.nav-top-next').on('click', function () {
$('#slide-wrap-vertical > div').animate({
top: '-=' + sliderWidth
}, 500);
showHideDirection();
});
function showHideDirection() {
$(sliderV).children().each(function(){ // Checks all the children of the vertical carousel
if ($(this).position().top == 0) { // Finds the index of the children that is currently on view
if ($(this).index() == 0) { // If its the first one can't scroll back and hides the prev button
$('a.nav-top-prev').hide();
}
else if ($(this).index() >= sliderCount) { // If its the last one can't scroll forward and hides the next button
$('a.nav-top-next').hide();
}
else {
$('a.nav-top-prev').show();
$('a.nav-top-next').show();
}
}
});
}
});
http://jsfiddle.net/Dethdoll/WkFVs/8/

because sliderCount is 1 based and index() is zero based, it is impossible for index to be equal or greater than sliderCount. You need to subtract one.
else if ($(this).index() === sliderCount-1)
You can simplify those if/else checks with toggle
if ($(this).position().top == 0) {
var index = $(this).index();
$('a.nav-top-prev').toggle(index!==0);
$('a.nav-top-next').toggle(index!==sliderCount-1);
}

How do I change an image if a user clicks on open/close?

I have the following code:
$(document).ready(function() {
$('.anchor_clicker').click(function(){
if( $('.anchor_clicker').data('stored-height') == '930' ) {
$('.anchor_clicker').data('stored-height','100');
$('#desc').animate({height:'100'})
} else {
$('.anchor_clicker').data('stored-height','930');
$('#desc').animate({height:'930'})
}
})
});
Click
Right now I have text "Click" to do this but instead I want to have a default image icon when it is clicked the code above will expand the div and when clicked again it will shorten it. how can I use two different images instead of "CLick"?

Create a sprite with your arrows, Add a class to your CSS that will change the background position on jQuery click. Than just toggleClass('opened')
LIVE DEMO
$(document).ready(function() {
$('.anchor_clicker').on('click', function(e){
e.preventDefault();
var $btn = $(this);
$btn.toggleClass('opened');
var heights = $btn.hasClass('opened') ? 930 : 100 ;
$('#desc').stop().animate({height: heights });
});
});
CSS:
a.anchor_clicker{
padding-right: 16px
background:url(http://i.imgur.com/u3GpDiC.png?1?1426) no-repeat right 0;
}
a.anchor_clicker.opened{
background-position: right -16px;
}
The good part on having a sprite instead of 2 separate images is the removal of an additional request for the new image on click, and the time gap that is created by that request in showing the loaded new image.

Very simply, do this:
(FIDDLE)
CSS
.anchor_clicker
{
background-image:url(/path/to/sprite);
}
jQuery
$(document).ready(function() {
$('.anchor_clicker').click(function(){
if( $('.anchor_clicker').data('stored-height') == '930' ) {
$('.anchor_clicker').data('stored-height','100');
$('#desc').animate({height:'100'})
$(this).css('background-position','-50px 0px');
} else {
$('.anchor_clicker').data('stored-height','930');
$('#desc').animate({height:'930'});
$(this).css('background-position','0px 0px');
}
})
});
For two images rather than a sprite:
CSS
.anchor_clicker
{
background-image:url(/path/to/image1);
}
.anchor_clicker.b
{
background-image:url(/path/to/image2) !important;
}
jQuery
$(document).ready(function() {
$('.anchor_clicker').click(function(){
if( $('.anchor_clicker').data('stored-height') == '930' ) {
$('.anchor_clicker').data('stored-height','100');
$('#desc').animate({height:'100'})
$(this).addClass('b');
} else {
$('.anchor_clicker').data('stored-height','930');
$('#desc').animate({height:'930'});
$(this).removeClass('b');
}
})
});

$('.anchor_clicker').click(function(){
$(this).find('img').prop('src', function(src) {
return src === 'img1' ? 'img2' : 'img1'
})
})
You could change the src property of the image on the fly, based on the src. This is if you want to swap 2 different images.
But if you have a sprite with different images , then manipulating class is the way to go.

dealing with sliding in jquery?

i have this script that with li list, if you click on one of the list items, a box slides to the right, and if you click again, its slides back to its orginal place(toggle)
the demo is here:
http://www.kornar.co.uk/home2.php
the problem that i have is on slideout, i want the width of the panel to be 700px
$(".panel").css("width","700px");
on slide back in, i want the width to be 350px, so it hides behind the list again.
$(".panel").css("width","350px");
but the problem im having is on when it slides back, it deosnt hide behind the list, it still shows the panel on the right? thanks

Hey dude, I made a couple of assumptions about what you were trying achieve on the whole, but maybe this is what you were trying to do... The following is all I changed:
<script type="text/javascript">
$(document).ready(function() {
$('.block').click(function(){
var id= $(this).attr('id');
var data_id= $(".data").html();
var panelPositionLeft=$('.panel').css('left');
if(panelPositionLeft=='0px') {
//the .panel is hidden, so slide it out and populate .data with the new id
$('.panel').animate({left: 350, width:700});
$('.data').html(id);
} else if (data_id!=id){
//something other than the previous .block was clicked and the .panel is obviously open, so don't collapse, just add the new id into .data
$('.data').html(id);
} else {
//neither of the previous situations are true, so it must be that the previously clicked block is being clicked again. Just slide it closed and don't change the value of .data
$('.panel').animate({left: 0, width: 350});
}
});
$('.close').click(function(){
// just slide it closed.
$('.panel').animate({left: 0, width: 350});
});
});
</script>
There are still a few things you could clean up, but I thought this would be a little easier to read and understand. Try this out, let me know if I misunderstood the problem.
Thanks!

Try surrounding the "+" with quotes (i.e. "+" + panel.outerWidth()). I think this should work.
Richard

For getaways reference: this is what I would have posted had masondesu not got there first. As you can see it is very similar, but has if statements where none are actually required (as in masondesu's solution.
$(document).ready(function () {
$('.block').click(function () {
var id = $(this).attr('id');
var data_id = $(".data").html();
var panel = $('.panel');
var panel_width = $('.panel').css('left');
var currLeft = panel.css('left');
var blockWidth = $(".left").outerWidth();
if (data_id == id) {
if (currLeft == "0px") {
panel.animate({ left: blockWidth, width: "700px" });
} else {
panel.animate({ left: "0px", width: "350px" });
}
}
else {
if (currLeft == "0px") {
panel.animate({ left: blockWidth, width: "700px" });
} else {
panel.animate({ left: "0px", width: "350px" });
}
}
$('.data').html(id);
return false;
});
$('.close').click(function () {
var panel = $('.panel');
var currLeft = panel.css('left');
if (currLeft == "0px") {
panel.animate({ left: blockWidth, width: "700px" });
} else {
panel.animate({ left: "0px", width: "350px" });
}
return false;
});
});
Regards,
Richard

You don't resize the panel on "li"-click, it resizes only on ".close"-click. so it won't resize ;)