Develop Reference

Center an element in middle on screen for an horizontal scroll list

I'm attempting to have the element clicked being positioned automatically at the center of the screen. The list is having a horizontal scroll with some overflow-x : scroll which is hiding what's outside of the div(screen).
I can't find out what coordinates to pass to scrollLeft().
$('#timepicker li').on('click',function(){
var maxScrollLeft= $("#timepicker").scrollLeft('#timepicker').prop('scrollWidth') - $("#timepicker").width();
$('#timepicker').animate({
scrollLeft:
});
});
Please see my codepen: codepen
thank you.

Its a little tricky, but here's the solution.
var left = $(this).offset().left
var width = $("#timepicker").width();
var diff = left - width/2
$("#timepicker").scrollLeft($("#timepicker").scrollLeft()+diff)
Basically what i've done is get the present left position of the clicked element and divide it with half of the width of the container. This gives the difference which the scroller has to move in order to take the elment to the middle. Hope you understood the logic.
Here's the codepen attached
http://codepen.io/prajnavantha/pen/eNwWgx
You can copy paste this in the code pen click handler and see it working.

try this
$('#timepicker li').on('click',function(){
var pos=$(this).position().left; //get left position of li
var currentscroll=$("#timepicker").scrollLeft(); // get current scroll position
var divwidth=$("#timepicker").width(); //get div width
pos=(pos+currentscroll)-(divwidth/2); // for center position if you want adjust then change this
$('#timepicker').animate({
scrollLeft: pos
});
});

Javascript How to keep DIV in window boundary

Hey I have a "box" div which can move its position based on clicking of arrows. How can I keep the Box from going outside the window's bounds or in other words just go to the borders and not cross the boundaries.
Fiddle provided:
var elementStyle = document.getElementById("divId").style;
JSFiddle

I updated your fiddle basically you need to add checks and if your check doesn't pass then set the new position to 0.
if (newPosition < 0) {
elementStyle.top = 0;
} else {
elementStyle.top = newPosition + px;
}
Fiddle here:
https://jsfiddle.net/8t9cqyqd/7/
for bottom and right the window will keep scrolling. If that's not desirable then you need to get the window size and do the same kind of check and then set the right and bottom positions to the container size minus the size of your moving box. I can update the fiddle for that if you'd like.
updated fiddle to handle the "right" direction:
https://jsfiddle.net/8t9cqyqd/9/

Something along these lines:
var x = $("#divID").position();
if(x.left > $(window).width())
//disable up arrow movement
Just do that for all positions changing out width() with height() for the Y position

jQuery: Adjust the height of the overall container dynamically

http://dev.clickymedia.co.uk/rdicoursefinder/course-finder/
If you view the link, you will see that there are a number of filters acting at the same time. The overall height of the box is adjusted dependant on the amount of items showing by the filter plugin.
We then have a popup box when you click on each item. This also has a varying height, and pushes the next items down. We need the height of the container to adjust, taking into account the original height of the container before the item is clicked, and the popup box's height.
I have written some jQuery to do this, however, as you will see, each time it is adding the height of the blue popup box to the overall height again and again when you click the item to show the box, instead of once one is showing, adjusting the height of the container accordingly.
The jQuery I have used for the height is below:
var originalHeight = $('#filter-results').height();
var thisHeight = 70 + $('.resultsShowing').height();
var overallHeight = originalHeight + thisHeight;
$('#filter-results').height(overallHeight);
Any help would be much appreciated!

This line
var originalHeight = $('#filter-results').height();
will need to be outside your click() event, and should be done only once on $(document).ready()

This is because you're using the new height every time you're generating more height.
You need to move the originalHeight to one specific point, the first time you need it, and leave it alone there. Then, only thisHeight needs to get updated, and the result height should bet the former (static) + the latter (dynamic).

Remove this first of all
window.setInterval(function(){
///etc
}), 1);
It's killing my machine in Chrome.

if you want to know the blue element height before you display it, you should create it in memory:
var blueBox = $('<div />').html( ... );
var height = blueBox.height();
now you can add this height to the overall container and display blue element:
blueBox.appendTo('.overall');
ps. sorry about pseudo code

div centered vertically with specific margin when resize

I really need some help.
I have this test-web: www.sfrpsicologia.com/inicio.html
As you can see, I have centered the green box in the middle of the screen. The problem is that when I resize the height of the window, this box is above the logo and the footer. And what I want is that ALWAYS this div respect the height of the logo and the footer. I need a margin top and bottom that this box never overpass.
Any help please? I dont know much about javascript. I have tried with css styles but as it is positioned absolutely I cant do it.
Thank you very much

Don't use absolute positioning in this case.
You are trying to solve poor design problem with javascript and that's not a good practise.
Use sticky footer approach http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
and overthink your page structure based on that technique.
OK I got what you meant.
Do this , however I don't guarantee it will work because I can't test it on your site but it's supposed to if any obstacles occure you should modify it to work.
I'm useing jQuery you should be familiar with it.
So step 1(get the div) <div id=wrapp> and take it's height
var wrapp = jQuery('#wrapp');
var h = wrapp.outerHeight();
step 2(Set some other variables)
var winH = 0;
var pos = null;
var footerH = 34;
var headerH = 74;
These heights are the elements besides your <div id=wrapp> in your case they might be a few more or less.
var footerH = 34;
var headerH = 74;
The idea is when there's no room for all of them on the screen stop <div id=wrapp> from going upwards.
step 3 (All this is bind to window resize event):
jQuery(window).resize(function(){
winH = jQuery(this).height();
pos = wrapp.position();
if(winH < h + headerH + footerH )
wrapp.css({'top' : pos.top});
else
wrapp.css({'top' : '50%'});
});
Update window height on resize, also get <div id=wrapp> position object
and if(there's no more room according to all the heights you put) fix the top position to current top position of <div id=wrapp> else put it back to percentage.
Here's an example: http://jsfiddle.net/F7mrf/44/
If you got the idea with very little modifications it should work, you'll just have to do the math and put the right numbers, good luck

issue with $(document).scrollLeft() as a variable

I'm trying to use the left variable to replace '1493' in this code. It works fine when it's a number but when I changed it over to use 'left' the if statement stops working.
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var postCount = $(".post").length;
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
if(left >= columnLength) {
$(".num").text(left);
}
});
Does anyone have any ideas where I'm going wrong with this? Any pointers would be great.

You may need to force it to be an integer:
var left = parseInt($(document).scrollLeft());

Lets take a look at the math you have really quick.
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
You are basically cancelling out width, and (postCount*743). It leaves you with --1493 which is positive 1493. The following would have the same effect:
var columnLength = 1493;
So, the reason the if statement fires when you put in the static value 1493, is because columnLength ALWAYS equals 1493 which, of course satisfies this condition:
if (1493 >= columnLength)
You could as easily write:
if (1493 >= 1493)
That said, it should still, theoretically fire when left becomes greater than or equal to 1493. But left is the current horizontal scroll position in pixels. It would be a HUGELY wide page to hit a scroll position of 1493.
Edit: Here's a fiddle to give an idea of how fast the scroll position increases: http://jsfiddle.net/vdQ7B/16/
EDIT 2:
Here is an update in response to your comment.
As I understand it, you were trying to get a horizontal scrollbar that would, essentially, scroll forever.
Please see the following fiddle for a demo: http://jsfiddle.net/vdQ7B/40/
The code is below:
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var viewportwidth = window.innerWidth;
// If our scrollbar gets to the end,
// add 50 more pixels. This could be set
// to anything.
if((left + viewportwidth) === width) {
$("body").css("width", width + 50);
}
});
Per the comments in the code, we simply increase the width of the body if we determine we've reached the end. scrollLeft() will only tell us the number of pixels that are currently not visible to the left of the viewable area. So, we need to know how much viewable area we have, and how much is hidden to the left to know if we've scrolled all the way to the end.
If you have a scroll bar on an inner element, like a div, you'd need to update with width of the div, not the body.
Note: You may also need to use $(window) instead of $(document) to get scrollLeft() to work across all browsers.
Note: See here about using "innerWidth". There are some compatibility issues, and you may need to expand it a bit to handle other cases (IE6).