We Keep Coding

Javascript viewport then element.style.left wont work? whats wrong with this

var x,y,a,b;
function respon(){
x= Math.max(document.documentElement.clientWidth,window.innerWidth||0);
y=document.getElementById("main");
b=x-1200;
a=y.style.left= b/2+ "px";
}
window.addEventListener("scroll",parallex,respon);
I want to center div element with width 1200px.
I wanted to take viewers width - 1200, then divide that by 2, and thats my margin-left, and the object is centered :) (my target screen size were 1980)
(I would use "if statement" later,but if this is not working, I dont need it )
I want to know, whats wrong with this, and why is this not working ?
For me everything looks fine

If you are setting margin-left,instead of left you must do it like this:
a=y.style.marginLeft= b/2+ "px";
If you want to stick with the left, you must add
a=y.style.position = "relative";

bootstrap tooltip\popover - solving inconsistent placement to the left

I've been working on a project and I've noticed some inconsistency in bootstrap's behavior that I would like to solve.
When a popover (or tooltip, whatever, they're basically the same) is nearing the edge of the screen - if it's a right-sided one, when nearing the edge - it will contract so as not to go offscreen (it only works up to a point, but that's usually enough).
This doesn't happen when the placement is to the left.
i.e.:
right placement:
Normal width:
Close to the edge:
left placement:
Normal width:
close to the edge:
These images are from a small DEMO I wrote to illustrate the problem.
I've messed around with the source code, so far to no avail. I can't seem to place my finger on what exactly causes this behavior in the first place.
Any ideas?
p.s.
I'm using Bootstrap 3.1.1. The new 3.2 does not solve the issue (and I would like to avoid upgrading at this point).
Major Update!
After some digging, I figured out that this has nothing to do with bootstrap - it's simple css - it seems that when you position an element absolutely and push it to the sides it will try and stay withing the screen.
I never knew about this behavior, and it happens automatically - but only to the the direction you're pushing - i.e. a div pushed from the left will contract when reaching the right edge of the screen and vice versa.
It just so happens that popovers are only positioned with the left assignment - which is why we're seeing the inconsistend behavior - when it's pushed to the right it contracts but not the other direction.
So the solution is to assign right instead - sounds simple?
Not so much. I took the source code and manipulated it a bit, adding these lines (somewhere arond line 250 in the jsfiddle):
if (placement == 'left' && offset.left < 0) {
var right = ( $(window).width() + 10 ) - ( offset.left + actualWidth );
offset.left = 0;
$tip.offset(offset);
$tip.css({ 'right': right });
}
Seems reasonable, right? If the offset to the left is less than 0 (i.e., it goes offscreen) then calculate the window width and remove from that the left offset and the width of the popover (actualWidth) itself and you get the distance from the right.
Then, make sure to reset the offset left and apply the right positioning. But... it only sorta works - which is to say it only works the second time around.
Check it out for yourself! Hover once, and it's misplaced, pull the mouse to the side and try again and suddenly it's positioned correctly. What the hell?
edit
Ok this seems to come up a lot, so I'll make it clear:
I know about auto placement. I don't want it. I want to control where the popover goes, letting it decide automatically is not a solution to the problem, it's merely avoiding it

Ok, I've gotten a little closer.
Once you assign the right in css, the actualWidth and actualHeight will change, so you need to update those variables. Around line 253 in your jsfiddle:
if (placement == 'left' && offset.left < 0) {
var right = ( $(window).width() + 10) - ( offset.left + actualWidth );
offset.left = 0;
$tip.offset(offset);
$tip.css({ 'right': right });
actualWidth = $tip[0].offsetWidth;
actualHeight = $tip[0].offsetHeight;
}
This works the first time you hover, but every time after that, it sets the top to be too high, so you can't read the top of the tooltip.
UPDATE:
It appears that having the right value set is messing up the positioning in the applyPlacement function. To fix this, clear the right value before setting the initial actualWidth and actualHeight (around line 225):
$tip.css({ 'right': '' });
// check to see if placing tip in new offset caused the tip to resize itself
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight

I believe this has a lot to do with the browser/client that accesses the webpage. For instance, in order to display the tip's on the proper side (not bunched up or illegible off the the left or right), determine the offsetLeft & offsetTop of the object element with javascript and place it accordingly. You could have different pages for different resolutions.
CSS example for a screen width from 400-720 pixels:
#media screen and (min-width:400px) and (max-width:721px)
some pseudo code:
if (this.offsetLeft < 200) //if there's not enough room to display the tip
tip.offsetLeft += 200;

I think you've basically got it, it's working fine for me.
Just add in the minimum width detection so that it doesn't go too small.
if (/bottom|top/.test(placement)) {
var delta = 0
if (offset.left < 0) {
delta = offset.left * -2
offset.left = 0
$tip.offset(offset)
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
}
this.replaceArrow(delta - width + actualWidth, actualWidth, 'left');
} else {
if (placement == 'left' && offset.left < 0) {
var right = ( $(window).width() + 10) - ( offset.left + actualWidth );
offset.left = 0;
$tip.offset(offset);
$tip.css({ 'right': right });
}
this.replaceArrow(actualHeight - height, actualHeight, 'top');
}

jQuery's scroll function not working accurately

I wasn't sure what to make of the title for this problem, as it is quite complicated. To demonstrate, I've created a fiddle:
http://jsfiddle.net/2W5Jd/
Basically, I'm making a website containing different sections with different background colors. The designer thought it would be a good idea to change the color of the logo when you scroll down to another section, as if the section is "masking" the logo (see fiddle, it's hard to explain).
The problem however, as you can see in the fiddle, is that when you scroll fast enough, the logo stops resizing. Does anyone have any idea how to work around this?
As posting a link to jsfiddle.net must be accompanied by code, here's the js (I've simplified it a bit from the actual website version):
var $logo = $("#logo");
$(window).scroll(function(){
scrollTop = $(document).scrollTop();
$logo.css("top", scrollTop + "px");
if ( scrollTop + 180 >= 600 ) {
$logo.find(".second").css("height", (scrollTop + 180) - 600 + "px");
}
});

add an else clause to your if
else {
$logo.find(".second").css("height", (scrollTop + 180) - 600 + "px");
}
see update fiddle: http://jsfiddle.net/hbrunar/2W5Jd/1/
if you don't need to do anything else in the if part, then skip it completely:
http://jsfiddle.net/hbrunar/2W5Jd/2/

Something strange with Firefox and fixed position via JS

I'm working on a website and I'm using jQuery and the CSS framework Zurb Foundation. This framework changes actually every CSS default property of every object on the page, so it's quite hard to get if this is a CSS problem.
I have this code:
function handleNavBarDot() {
var $navbar = $('nav#nav-bar'),
$win = $(window);
// inserting the div#circle after the nav bar in the markup
$navbar.after('<div id="circle"></div>');
var $dot = $('div#circle');
function attachDot() {
// using + (and not -) because the margin is negative
var topStart = parseDim($navbar.css('top')) + parseDim($navbar.css('margin-top'));
var availHeight = $navbar.outerHeight();
var pageScrolled = $win.scrollTop() / ($(document).height() - $win.height());
$dot.css({
'position': 'fixed',
'right': (parseDim($navbar.css('right')) - Math.floor($dot.width() / 2)) + 'px',
'top': (topStart + availHeight * pageScrolled) + 'px',
});
}
attachDot();
$win.resize(attachDot);
$win.scroll(attachDot);
}
which moves this little dot up and down a vertical line near the navigation bar. As you can see, the vertical offset is calculated based on how much page has been scrolled down; the horizontal position is calculated based on the position of the navigation bar, which is also set by jQuery in another part of the script (in order to make it always fixed to the side of the page content - which has fixed width - instead of fixed to the browser window).
When I run this in Chrome/Safari/Opera everything works fine and the dot is always in the right position.
In Firefox though, the dot is where it should be only when I first load the page. After a single call to $(window).scroll() or to $(window).resize() the dot moves to the right, altering its right CSS property.
When I inspect the page, the element.style right property changes on resize and scroll and it's of the right value, but the computed right is different - a little moved on the right.
Final note: in Firebug, if I disable/re-enable the
*, *:after, *:before { -moz-box-sizing: border-box }
the dot comes back to the right position.
What can be the cause of this problem?
(if you want to see the problem in action, head to the actual site)

How can I have the Google+ style hovercard?

I really like the Google+ style hovercard. When you hover over a profile picture, it pops up a little box, similar to the "established users" hovercards here on Stack Overflow.
I know how to do the CSS, but the JavaScript is what I need help with.
I have a code here that is somewhat like it: http://jsfiddle.net/NathanJohnson/AhVQN/ But, it doesn't work that good. The mouse offset does not work correctly.
Could someone help me with getting this working properly? Thanks in advance.

You can change the mouse offset in this section:
var pos = {
// or you could position it relative to the mouse
top: (e.clientY + 2) + 'px',
left: (e.clientX + 2) + 'px'
};
Change the e.clientY + 2 to e.clientY + 1 and the hovercard will be closer to the cursor.