We Keep Coding

Horizantal scroll right to element

I am trying to scroll to right of each element, but could not calculate right of element and scroll to it.
var $scroller = $('.scroller');
$('button').on('click', function() {
var divIdx = $('input').val();
var scrollTo = $('#d' + divIdx)
.css('background', '#9f3')
.position().left;
console.log(scrollTo);
$scroller
.animate({
'scrollLeft': scrollTo
}, 500);
});
.scroller {
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
}
.container {
position: relative;
/*important for the .position() method */
height: 100px;
width: 770px;
}
.container div {
height: 90px;
width: 60px;
float: right;
margin: 5px;
background: #39f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
<div class="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<!-- ... -->
</div>
</div>
<button>Scroll to: </button> <input type="text" value="4" />
How to calculate right of element and scroll to right of element?
How to calculate right of element and scroll to right of element?
How to calculate right of element and scroll to right of element?

You can use this one.
var $scroller = $('.scroller');
$('button').on('click', function() {
var divIdx = $('input').val();
var div = $('#d' + divIdx);
div.css('background', '#9f3');
var divLeft = div.offset().left;
var divWidth = div.width();
var scrollerWidth = $('.scroller').width();
var scrollTo = divLeft - scrollerWidth + divWidth;
$scroller
.animate({
'scrollLeft': scrollTo
}, 500);
});
.scroller {
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.container {
position: relative;
/*important for the .position() method */
height: 100px;
width: 770px;
}
.container div {
height: 90px;
width: 60px;
float: left;
margin: 5px;
background: #39f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
<div class="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<!-- ... -->
</div>
</div>
<button>Scroll to: </button> <input type="text" value="5" />

You just need to add some right margin and it's all done!
var $scroller = $('.scroller');
$('button').on('click', function() {
var divIdx = $('input').val();
var scrollTo = $('#d' + divIdx)
.css('background', '#9f3')
.position().left;
console.log(scrollTo);
$scroller
.animate({
'scrollLeft': scrollTo
}, 500);
});
.scroller {
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.container {
position: relative;
/*important for the .position() method */
height: 100px;
width: 600px;
}
.container div {
height: 90px;
width: 60px;
float: right;
margin: 5px;
background: #39f;
}
.container div:first-child {
margin-right: 240px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
<div class="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<!-- ... -->
</div>
</div>
<button>Scroll to: </button> <input type="text" value="4" />

There are two points to consider -
position().left gives you the value of the distance upto left edge of element only. So to get the value upto right edge, you can take left position of the element + the width of the element. $('#d' + divIdx).position().left + $('#d' + divIdx).width()
There should be additional one item's width white space after the last item which allow the scrollbar to move upto the end of the last item.

Toggle appending element to different divs

Is it possible to move .item from .region1 to .region2 when the anchor tag is clicked, and also move it back to .region1 when it is clicked again? So pretty much the behavior of a toggle ?
<a href="#" class="btn">Click</div>
<div class="region1">
<div class="item"></div>
</div>
<div class="region2"></div>

make use of append() to achieve the toggle effect:
function toggleItem(){
var $item = $('.region1').find('.item');
if($item.length !== 0){
$('.region2').append($item);
} else {
$item = $('.region2').find('.item');
$('.region1').append($item);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn" onclick='toggleItem()'>Click</a>
<div class="region1">Inside region 1
<div class="item">item</div>
</div>
<div class="region2">Inside region 2</div>

Just build the toggle like function by yourself. Check if the element is is there then use appendTo to move the element.
$('a.btn').click(function() {
if ($('.region1 > .item').length) {
$('.region1 > .item').appendTo('.region2');
}
else {
$('.region2 > .item').appendTo('.region1');
}
});
.region1 { width: 50px; height: 50px; background: red; }
.region2 { width: 50px; height: 50px; background: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click
<div class="region1">
<div class="item">item</div>
</div>
<div class="region2"></div>
If there is only one .item in the whole page, you could make it shorter:
$('a.btn').click(function() {
$('.item').appendTo($('.region1 > .item').length ? '.region2' : '.region1');
});
.region1 { width: 50px; height: 50px; background: red; }
.region2 { width: 50px; height: 50px; background: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click
<div class="region1">
<div class="item">item</div>
</div>
<div class="region2"></div>
Or without jQuery:
document.querySelector('a.btn').addEventListener('click', function() {
if (item = document.querySelector('.region1 > .item')) {
document.querySelector('.region2').append(item);
} else if (item = document.querySelector('.region2 > .item')) {
document.querySelector('.region1').append(item);
}
});
.region1 { width: 50px; height: 50px; background: red; }
.region2 { width: 50px; height: 50px; background: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click
<div class="region1">
<div class="item">item</div>
</div>
<div class="region2"></div>

Here's a solution in vanilla JavaScript:
var item = document.querySelector('.item');
var region1 = document.querySelector('.region1');
var region2 = document.querySelector('.region2');
document.querySelector('a').addEventListener('click', function() {
if (region1.contains(item)) {
region2.appendChild(item);
} else if (region2.contains(item)) {
region1.appendChild(item);
}
});
.region1 {
width: 100px;
height: 100px;
background-color: aqua;
}
.region2 {
width: 100px;
height: 100px;
background-color: yellow;
}
Click
<div class="region1">
<div class="item">Test</div>
</div>
<div class="region2"></div>
Note:
Because there's probably more than just one single a tag in your page, you should not use ...querySelector('a')... like this. To ensure the proper a tag gets selected, you should make it unique, e. g. by adding an id to it. If you decide to use the way with the id, replace the your querySelector('a') with querySelector('#yourid').
And thank you to eisbehr for helping me to cut down the script in an very effective way.

Hover in prepend() function

HTML:
<div class="Wrap">
<div class="container">
<div class="count">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class="AddDiv">AddDiv</button>
jQuery:
$('.AddDiv').on('click', function(){
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".background").on("mouseover", function () {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
$(".hover").fadeOut(200);
});
https://jsfiddle.net/mpd075s8/5/
Hello, I have problem with hover, look at the jsfiddle and click on button AddDiv and when hover on the green square hovered are all divs, but I would like that every div will be hovered separately. And hover doesn't work in new divs

Two things
You need to use delegated event for dynamic element
Use this for the reference of current element.
Try like following.
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".Wrap").on("mouseover", ".background", function () {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseout", ".hover", function () {
$(this).fadeOut(200);
});
.Wrap {
width: 650px;
height: 800px;
}
.container {
position: relative;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 5px;
margin-top: 5px;
}
.AddDiv {
position: absolute;
top: 0px;
}
.background {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
left: 170px;
top: 10px;
}
.hover {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
z-index: 1001;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="background">
</div>
<div class="hover">
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>

You can use $(this) jquery function
$("body").on("mouseover",".background", function () {
$(this).siblings('.hover').fadeIn(500);
});
$("body").on("mouseout",".hover", function () {
$(this).fadeOut(200);
});
https://jsfiddle.net/mpd075s8/7/

Is it possible to click div1 and div2 simultaneously, while div2 is overlaying?

I'd like to know if it's possible to have both divs be clicked at the same time, even though one is behind the other..
If I click the red div, then the green is activated too. I made an example here: https://jsfiddle.net/ow67aaz1/1/
<div class="full">
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</div>
$(".one").click(function() {
alert('green Clicked');
});
<style>
.full { background: #ddd; width:300px; height: 300px; margin: 0 auto;}
.box {position: relative;}
.one {background: green; width: 50px; height: 50px; position: absolute;}
.two {background: red; width: 30px; height: 30px; position: absolute;}
<style>
I tried the following but but can't figure out how to make it trigger..
$('.two').click(function()
{
$('.one').trigger('click');
});

you just need to trigger the click event of second div
$(".one").click(function() {
alert('green Clicked');
$(".two").trigger("click");
});
$(".two").click(function() {
alert('red Clicked');
});
.full { background: #ddd; width:300px; height: 300px; margin: 0 auto;}
.box {position: relative;}
.one {background: green; width: 50px; height: 50px; position: absolute;z-index:1}
.two {background: red; width: 50px; height: 50px; position: absolute; z-index:0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full">
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</div>
Update
Run the snippet again, the red div is no visible but its been clicking.
Thanks

I would use the same click handler for both element and if needed test the target or currentTarget depending on the requirements:
$(".one, .two").click(function(e) {
if ($(e.target).is('.one')) {
// do stuff related to one
console.log('click on one');
} else if ($(e.target).is('.two')) {
// do stuff related to two
console.log('click on two');
}
// do stuff related to both
console.log('common code');
});
.full { background: #ddd; width:300px; height: 300px; margin: 0 auto;}
.box {position: relative;}
.one {background: green; width: 50px; height: 50px; position: absolute;}
.two {background: red; width: 30px; height: 30px; position: absolute;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="full">
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</div>

Try this
$(".one").click(function() {
alert('green Clicked');
});
$(".two").click(function() {
alert('red Clicked');
$(".one").trigger("click");
});

You can simply trigger the click event of the div which is below, when the click event of the div which is above is fired. For instance, lets say div with class "one" is above.
$(".one").click(function() {
console.log('Green div is clicked');
$(".two").trigger("click");
});
$(".two").click(function() {
console.log('Red div is clicked');
});

You can use jquery's $(this) to achieve same. Code can be further reduce to.. $(".one,.two").click(function() {
var x = $(this).prop('class');
alert('class '+x+ ' div is clicked' );
});

Closable div - Left div slides close, while right div width expands

I'm trying to make a div on the left side that can close by sliding to the left While the content in the right div expands to 100% filling the space of the closed div. image example
I found a demo here but its only for the closable div.
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
</div>

It has some work to do, but it'll get you started.
$(function() {
"use strict";
var isOpen = true;
$('#open-close').on('click', function() {
if (isOpen) {
animate(false);
isOpen = false;
} else {
animate(true);
isOpen = true;
}
});
});
function animate(action) {
if (action) {
$('#left').animate({ width: "30vw" }, 600);
$('#right').animate({width: "70vw",marginLeft: "-5px"}, 600);
} else {
$('#left').animate({width: "0px"}, 600);
$('#right').animate({width: "99vw" }, 600);
}
}
* {
padding: 0;
margin: 0;
}
#wrapper{
width: 100vw;
height: 100px;
border: 2px solid purple;
}
#wrapper > *{
display: inline-block;
}
#left {
position: relative;
width: 30vw;
height: 100px;
background: green;
}
#right {
position: relative;
width: 65vw;
height: 100px;
background: navy;
}
#open-close {
position: absolute;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<div id="open-close"></div>
</div>
</div>