We Keep Coding

Weird flicker in jQuery toggle

I have a weird problem and i cant find a solution no matter what i tried.
I have a simple menu that toggles few divs (slide up/down), like this:
<div class="navigation">
<ul class="left">
<li>lorem1</li>
<li>lorem2</li>
<li>lorem3</li>
</ul>
</div>
and a few divs that are being toggled.Pretty simple but there is a lot of code, so i wont paste it here.
Script that makes it work is:
$('.navigation a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.top-drawer').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
Once the user clicks on the link, the div slides down more than it should, flickers and then it becomes the real height (the height is should be).
Here is a Fiddle. Please be sure to have the "Result" Window at at least 1000+ px wide otherwise it wont work (the error wont be shown).

See my suggestion on this JSFIDDLE
Here an explanation of the changes in there:
The Problem
With all those floating elements inside each .top-drawer jQuery has a lot of issues calculating the height of the div because the elements will move around while sliding up and down.
Suggestion
Switching to inline-block instead. But for that to work with your CSS, particularly with the padding on each .top-drawer, you need to use box-sizing: border-box; on anything that is using padding, inline-block and width with %. If curious you can read about this HERE.
New problem
If you go the route of inline-block (best practice now). You will need to use jQuery 1.8.xx or higher. I noticed in your fiddle you use 1.7.2, which has a bug with border-box that was fixed in versions after that.

Try to understand the code you are using.
This is the way I think jQuery's slideUp(), and slideDown() works; mainly the algorithm changes the height of the element, and display after the height is equal to the height of the element or at "0".
So when you will have your element's position set to relative you will see what you're calling "flickers", specially when you have multiple element at the same position. You will also see these "flickers" when you use fadeIn(), fadeOut() etc, because the display of the element is not instantly set to "none" or anything visible in these cases, but after the animation completes.
Solution:
Set the element's position to absolute. That should solve your issue;
example.

Dealing with scroll bars and jquery .width() method

jQuery's .width() method doesn't seem to account for scroll bars. This is problematic for me, since I'd like to set the width of some children to equal the width of their parent. I used jQuery similar to the following:
$('#contentDiv').width($('#containerDiv').width())
In this example, #contentDiv is the element I'd like to size, and I want to set it to have the width of #containerDiv, which is its parent element. My problem is that this cuts off the side of #contentDiv, as seen in this fiddle.
In my actual code, I have several elements that I'm sizing with jQuery, which all need to fit in the scrollable div, so just setting the css of #contentDiv to 100% is not an option. What's the best way of dealing with scroll bar widths of divs in jQuery?

The best solution I found while working around this solution is this:
http://chris-spittles.co.uk/?p=531
jQuery is all powerful and everything but sometimes a small dash of native JS is all you need to render pixel perfect pages... I hope you will find this solution helpful!

UPDATED:
None of the jQuery width-finding methods account for the scroll bar. In my original example, using .innerWidth(true) LOOKS like it works, but only because it returns and object, which causes width to fail and the inner contents size themselves to fit in the available space, because the example wasn't very good. However, it's possible to write a function to compute the available space in a div with a scroll bar in it, which can then be used to position the contents as you wish.
To write that function, I took advantage of the fact that, when a div is appended to a div with a scroll bar in it, it takes up the full available width (i.e. the inner width of the parent minus the width of the scroll bar).
The function looks like this:
function noScrollWidth(div){
var measureDiv = $('<div id="measureDiv">');
div.append(measureDiv);
var width = measureDiv.outerWidth();
measureDiv.remove();
return width
};
I then use this to size my content div:
$('#contentDiv').width(noScrollWidth($('#containerDiv')));
Working fiddle.

Try this:
$('#contentDiv').width($('#containerDiv')[0].clientWidth)
For more information about that solution, see this StackOverflow answer.

Another approach I'd try is setting both elements' box-sizing property to 'border-box', and see whether setting your contentDiv's width to 100% then works the way you want.
Now that fewer projects worry about crufty old browsers anymore, 'border-box' can make things easier to work with. Be sure to test multiple browsers on multiple platforms, though, because I'm not sure they all handle scrollbars the same way.

jQuery.offset() on <body> element provides incorrect "top" value

FIDDLE IS HERE (logs to console)
The situation is when the page starts out with a <H1> that has a margin-top greater than the margin found on <body>.
This causes the <body> to be pushed lower in the page yet $('body').offset().top remains set to the <body>'s margin-top. This of course causes my debug element (which highlights the position of elements) to be incorrect since the body's dummy element is now in the wrong position.
Curiously the rest of the $(elem).offset() values are correct for any descendant of <body>.
Is there a fix for this short of manually checking the margin-top of the recursively first childs of body with a while loop?
Noticing the issue on Safari 6 though I suspect I'll find it on Chrome as well.

It might work to use the offset plus the difference of the height of the html element minus the body element.
console.log("body.offset().top = "+ ($('html').offset().top + $('html').height() - $('body').height()));
Update: This solution will only work if there is not a margin-bottom on the page.
You could additionally add a clear div at the bottom of the page.
$('body').append("<div style=\"clear: all;\"> </div>");
Note that the div must have content to work.
http://jsfiddle.net/SCGdZ/7/

I found a John Resig post about how fast and awesome getBoundingClientRect is here... I wonder why it is not used for jQuery's offset()!
I shall use this method instead and hopefully it will not suffer from this same issue.
Update: Looks good! (the non integer top value is due to the somehow having style -webkit-margin-before: 0.67em;)
You can see that the body has margin=8

jQuery 1.9.0 has addressed this issue. Thanks so much, jQuery is awesome.

Find Here
a[0].style.marginTop it remains uninitialized even after declaring it in css that's why it was returning nothing.
Therefore we must take care of initializing a[0].style.marginTop

jquery position() not working correctly in safari and chrome

I've seen this question posed once or twice before, but never with an answer that applies to my problem (as far as I know).
I have a tooltip that appears when a link is clicked. I set the position of the tooltip based on the position of the link similar to this:
$('#tooltip').css('left', $(this).position().left);
This works great in FF, IE, etc., but in Chrome and Safari, the tooltip is always about 60 pixels or so further to the left than I want. I really don't like writing browser specific code, so is there any reason anyone knows that this would be happening?
Thanks in advance.
UPDATE:
I was able to fix this problem by removing the margin:0 auto style from the link. Soooo...that fixed it, but I still have no idea WHY this was a problem in safari and chrome.

position() relates to the position relative to the containing DOM element, as opposed to the position on screen. The difference is probably caused by differences in the way the element hierarchy is rendered in Webkit browsers, rather than by a bug in jQuery.
You will have to check element hierarchies to find out which DOM element is causing your problem, or, if you want to position your tooltip relative to the position of an element within the window boundaries, use offset() instead.

Instead of using position() like in your example:
var link = $('#mymenu a');
var tooltip = $('#mymenu #tooltip');
link.click(function(){
tooltip.css('left', $(this).position().left);
});
you can use subtraction of the element's offset() with offset() of it's parent (not necessarily the closest parent):
var parent = $('#mymenu');
var link = $('#mymenu a');
var tooltip = $('#mymenu #tooltip');
link.click(function(){
parent.css('position', 'relative');
tooltip.css('left', $(this).offset().left - parent.offset().left);
});
It returns the same value as position() but works correctly in both FF and Chrome.

According to stackoverflow ettiquette, it's okay to answer your own question, so...
I was able to fix this problem by removing the margin:0 auto style from the link. Soooo...that fixed it, but I still have no idea WHY this was a problem in safari and chrome. But, still at least it's fixed.

Just had the same problem, and removing margin: 0 auto; wasn't an option (nor is it a solution :). This worked for my needs, since webkit reports the value we're looking for as the left margin (so long as the margin is > 0, otherwise it does report position().left!):
iPosLeft = oEl.position().left + parseInt(oEl.css('marginLeft'));

Automatically vertically scroll div contents looping

I am trying to find a simple way to have a div with just text in it automatically scroll the text vertically. I don't want to use a framework (though I do use Prototype, so if it is easier using Prototype then that is fine, but no Scriptalicious).
I assume there has got to be a way to do this with a few lines of code, but I am not familiar enough with Javascript to know how to most effectively do that.

This might not be conventional but you can try the <marquee> tag
it works both in IE and FF, and the last time I checked, safari too.
<marquee behavior="scroll" direction="up" height="250"
scrollamount="2" scrolldelay="10"">
Your content goes here
</marquee>
should give you what you want,
and you can style them like any <div>...
and then there is the added advantage of having no javascript...
Edit in response to your comment
It gets better, try this in any browser
onmouseover="this.stop()" onmouseout="this.start()"
And this in IE
style="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0,
FinishOpacity=100,
Style=1, StartX=0, FinishX=0, StartY=0, FinishY=10)
progid:DXImageTransform.Microsoft.Alpha( Opacity=100, FinishOpacity=0,
Style=1, StartX=0, FinishX=0, StartY=90, FinishY=100)"
As attributes of the marquee tag...

function scrollDivUp(id){
document.getElementById(id).scrollTop-=1
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}
try something like that maybe.
you could also change the .scrollTop-=1 to .scrollTop+=1 to scroll the other way.
You would also need a scrollable div which can be done by constraining the size and setting the overflow style property ie. style="width:200px; height:300px; overflow:auto"

Try changing the div's scrollTop. There is an example here.

I see that the correct answer isn't given yet. I think you have to look at cloneNode() for instance. And clone the element you want to scroll. When the first element is at the last point of scrolling then place the duplicated element after the first element. And when that duplicated element is almost at the end, place the original after the duplicate and so on!