We Keep Coding

Javascript/React onClick scroll set amount down/up

I got a problem figuring out how to make a button onClick scroll down for example 30px per click.
say i got two divs with icons like this
<div className="info-container">
<div className="scroll-icon-container" onClick={scrollUp(30)}>
<ScrollUpIcon />
</div>
<div className="scroll-icon-container" onClick={scrollDown(30)}>
<ScrollDownIcon />
</div>
<p>"Huge amount of text that will need scrolling"</p>
</div>
Then two functions like
scrollUp(number: amountToScroll){
//Scroll the "info-container" up amountToScroll pixels
}
scrollDown(number: amountToScroll){
//Scroll the "info-container" down amountToScroll pixels
}
All i could find so far is either in jquery or how to make it scroll to a specific element but i am looking for a set amount to scroll down in pixels % or whatever works.

First of all you can either define a variable or state for maintaining the scroll position.
Let us take state as scrollPosition and initialize it to 0.
Now in the scrollUp function:
scrollUp(amountToScroll){
this.setState({
scrollPosition : this.state.scrollPosition + amountToScroll
})
window.scrollTo(0, this.state.scrollPosition)
}
Now in scrollDown function:
scrollDown(amountToScroll){
this.setState({
scrollPosition : this.state.scrollPosition - amountToScroll
})
window.scrollTo(0, this.state.scrollPosition)
}

Use window.scrollBy( pixelsToScrollRight, pixelsToScrollDown ) method.
So instead of scrollUp() and scrollDown() methods you can have something like this:
scroll(number: amountToScroll){
//amount to scroll is negative to scroll up
window.scrollBy(0 , amountToScroll)
}
If you want to look at scrolling inside a div: How to scroll to an element inside a div?

How to check scroll position in front of div

I created one parent div that has scroll. It has children divs which have text content, I want to check if scroll is in front of one of the child divs.
I tried it by comparing top scroll position with
div.offset().top
but as I am scrolling down div will calculate only visible height from parent with offset top position and scroll will calculate it's top from starting of parent. I am checking scroll's position like so:
if(scrollPosition>div.offset().top && scrollPostion (div.offset.top+div.height) ) {//scroll present }
What is correct way of getting div's top position?
Blockquote
Thanks in advance.

You need to add the offsetTop of the parents elements.
var t = div.offsetTop;
var p = div;
while (p=p.offsetParent)
t += p.offsetTop;

suppose that two boxes and one has scroll named container and another is child named target:
<div id="container">
<div id="target"></div>
</div>
<script type="text/javascript">
var container = document.getElementById('container'),
target = document.getElementById('target');
if((container.scrollTop - target.offsetTop) > 0 && (container.scrollTop - target.offsetTop) < target.offsetHeight) {
console.log('in range');
}
</script>
target.offsetHeight is not contains margin.

How would I change the height of a parent div based on the height of a child div?

http://jsfiddle.net/nWb5j/68/
Hi there! As you can see in the jsfiddle above, I have a parent div that has a position of relative with child divs with position of absolute.
<div class="d1">
<div class="d2">W<br>o<br>r<br>l<br>d
</div>
<div class="d3">Hello</div>
</div>
d1 has a position of relative, while d2 and d3 have positions of absolute.
I have tried the following jQuery to no success:
$('.d1').css(height,($( "d3" ).height());
(As you can probably tell, I have no clue what I'm doing.)
I would like for the parent div to have the height of whatever the tallest child is, if possible. If that doesnt work, then to have the parent the same height as one of the children would work too.
I am very new to jQuery and javascript and have tried a few things, but none of them seem to work.
Thanks in advance!

Possible duplicate of Auto height on parent container with Absolute/Fixed Children
So your answer would be:
The parent div can not use "height:auto" when its children are positioned absolute / fixed.
You would need to use JavaScript to achieve this.
In jquery something like.
var biggestHeight = "0";
// Loop through elements children to find & set the biggest height
$("#d1 *").each(function(){
// If this elements height is bigger than the biggestHeight
if ($(this).height() > biggestHeight ) {
// Set the biggestHeight to this Height
biggestHeight = $(this).height();
}
});
// Set the container height
$("#d1").height(biggestHeight);
Working example
http://jsfiddle.net/blowsie/dPCky/1/
Customized example for you
http://jsfiddle.net/nWb5j/68/

Just use Math.max here is the demo
var d2Height = $("#d2").height(),
d3Height = $("#d3").height(),
largest = Math.max(d2Height, d3Height);
$('#d1').css({"height":largest});

In your case these two lines of javascript resolves the problem:
var height = Math.max($( "#d2" ).height(),$( "#d3" ).height());
$('#d1').height(height);
See updated fiddle:
http://jsfiddle.net/nWb5j/69/

You can try this...
var maxHeight =0;
//get the max height of child div
$(".d1 > div").height(function(i, h){
if (h > maxHeight ) {
maxHeight = h;
}
});
$(".d1").height(maxHeight);

JQUERY- refer to specific div with class as other divs inside the html page

In the fiddle you will see at the center of the page a DIV that contains text next to an img.
When I scroll down/up I need to effect with jquery/javascript only the div who's the closest to the navbar-below. all the divs as the same class so I effect them all-not what I need
For example:
what I am trying to achieve : when I scroll down,the closest div to the navbar(yellow bar) will be painted(the div) green,so if I scroll down and the navbar "collapse" with the div with will paint in green, and when he passes him and "disapper" it will go back to original color and the next div will paint in green. is it possible?
Here's the JS FIDDLE
When I referred to div I meant this section :
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">sddsadasasdsadLorem </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
EDIT:
UPDATED JSFIDDLE :
http://jsfiddle.net/nnkekjsy/3/
I added my jquery,as you can see it works only for the first one,and then stuck.. i need to "pass" it along the others div below him when the are getting to the same point. any ideas? :
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
if ( scrollVal > 55) {
$('#left_inside_center').css({'position':'fixed','top' :navHeight+'px'});
} else {
$('#left_inside_center').css({'position':'static','top':'auto'});
}
});
});

Have you tried use the first-of-type to select the top div, if i understand what your trying to do.
CSS3 selector :first-of-type with class name?
An other solution would be to check the position of the div and the nav bar and pick the closest one.
$(".left_side").each(function () {
//compare scroll with div
if(window.scrollTop() = $(this).position.top())
{
//do something
}
});
I know the position and the scroll won't be the same value but you can play with the condition to put some range.
Edit :
I think this is what you want. The navHeight and the height variable should be outside the window.scroll function as they never change :
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
var height = parseInt($(".right_side").css("height").split("px")[0]);
$(".left_side").css({'position':'static','top':'auto'});
$(".left_side").filter(function( ) {
return $(this).position().top - 10 < scrollVal && $(this).position().top + height > scrollVal;
}).css({'position':'fixed','top' :navHeight+'px'});
});
Working fiddle :
http://jsfiddle.net/nnkekjsy/6/

Dynamically positioning elements using jQuery

I am working om a menu bar, each menu bar item is an image, when user places mouse over menu item a div with submenu will appear.
I want to place div directly under the appropriate image item (no space, and div will hover above all elements), with right side alignment, meaning the right top corner of div should be under bottom right corner of image.
Because I can't and don't want to hard code position of divs, i want to do it dynamically.
For now I have this:
$('img').each(function(){
jQuery(this).mouseenter(function(){
var menuItem = $('#' + this.id + '_menu'); //get the needed div
var imgRight = this.offset() + this.width();
});
});

The offset() method has top and left properties, you need use them, example:
var imgRight = this.offset().left + this.width();
var imgTop = this.offset().top + this.height();
After that, you will have to give the absolute positioning to the DIVs to place them below the images:
menuItem.css({
position:'absolute',
top: imgTop,
left: imgLeft,
zIndex:5000
});
So your code becomes:
$('img').each(function(){
jQuery(this).mouseenter(function(){
var menuItem = $('#' + this.id + '_menu'); //get the needed div
var imgRight = this.offset().left + this.width();
var imgTop = this.offset().top + this.height();
menuItem.css({
position:'absolute',
top: imgTop,
left: imgLeft,
zIndex:5000
});
// now show the corresponding div
menuItem.show('slow');
});
});
More Info:
http://api.jquery.com/offset/

You shouldn't have to hard code or calculate the position of these items. Any of the following CSS rules should achieve your goal: position: relative; right: 0 or float: right:.
It'd be good to see some of your markup for additional testing. www.jsfiddle.net is a great resource for this.

There are 2 ways to do this: the correct-way or the cheat way...
The correct way: you need to get the top and client height of the actuating object - client heights no prob just call it - but the top means you must get the to of all the parent objects too - use this:
function J_pos(o)
{
var x,y;
y=o.offsetTop;
x=o.offsetLeft;
o=o.offsetParent;
while(o)
{
y+=o.offsetTop;
x+=o.offsetLeft;
o=o.offsetParent;
}
return [x,y];
};
Now the top and client height you do this:
<div style=top:"+(p[0]+obj.clientHeight)+";left:"+p[1]>
The cheat-way (not so dynamic - but quick):
put a tag like a <span> around the actuating (mouseover) object. Make it position-relative. Place a <div> inside it:
<div id="ABC" style="position:absolute;left:0;display:none">
Now on mouseover put document.getElementById("ABC").style.display="" and bottom:0 — boom baby dusted. Downside to this is you have to manually do it for each instance, but if you only have 3 or so well bingo.