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.

jquery cycle slider height issue

I've been trying to make the slider on this page behave responsively. However, it seems it requires a fixed height on the container, otherwise it does not display the entire slide.
Is there a way (other than going to jquery cycle 2 plugin which I am not allowed to do) to declare a height:auto and still display the entire image? I initially suspected it's something to do with floats, but they are all cleared and still not working.
If I force overflow:show on the wrapper (#industries-slider) I run into issues with the #nav which does move with the overflow.
What am I doing wrong?
Thanks!
Update: responsive, not adaptative. I know I can use media queries to adjust the height, but on exotic displays (and on browser resize which is how its being tested, there is a visible jump of the #nav

Ok, set position: absolute again.
You can set the height of #industries-slider1 using jQuery.
//Find the max height of items
var heights = $(".slide-item").map(function ()
{
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
//Set #industries-slider1 height
$('#industries-slider1').height(maxHeight);

setting a div to have the same height as another div with jQuery CSS

I am having an issue attempting to set the height of a div with jQuery based on the height of the div sitting next to it. Basically, I have two divs and I want them both to be the same height. The left div will change in height and has no height element set in the CSS/HTML. The right div can also change height, but the left one will always be bigger.
This is my attempt below at setting the right one (#p_window) to the same as .c_content_right. (Ignore the strange naming conventions)
if ($('.c_content_right').length) {
if ($('.c_content_right').height() > $('#p_window').height()) {
$('#p_window').css('height', $('.c_content_right').height() + 'px');
}
}
Here is a
jsFiddle Demo

jsFiddle demo
If you have paddings, to calculate the total height use: outerHeight():
var catH = $('.category_content_right').outerHeight();
if ( catH > $('#product_window').height() ){
$('#product_window').height( catH );
}

Here's a working fiddle based on yours.
http://jsfiddle.net/MfrqA/10/
Your fiddle wasn't set to jQuery.
I get confused in jQuery while adding CSS, if I don't just set the variables outside it, because there are several syntaxes you can use, and I always get caught up.
If your edits don't work, then add an alert inside the 'if' loop, to see if you got that far.

Height auto - displaying hidden content when the browser is resized

Here is the site im working on, forgive me if im not being specific enough, im new to this.
http://daniel.grocock.me/portnew
Setting the paragraph height for the #introexpand div and have a resize function that
checks to see the if the #introexpand needs to fit in a bigger or smaller area when the browser has resized.
function resize() {
$("#introexpand").css("height", "auto").show();
var pHeight = $("#introexpand p:first").height() + 15;
$("#introexpand").css("height", pHeight);
}
So im setting the pHeight to auto before resetting height and to show it for a brief second so the correct height can be obtained.
The problem is now when i resize the browser the #introexpand div pops down before the link span.learnmore is clicked.
If i remove height auto from the CSS it seems to fix it but then the #introexpand div dosent function when clicked.

You could let this function run in a onresize-handler (jQuery), but it's simpler be solved with CSS:
#introexpand {
padding-bottom: 15px;
}

Why not approach this differently. Rather than trying to calculate the height that #introexpand needs to be, let it always be auto and just toggle display:none; when you click on span.learnmore.
To do that, you'll need to remove position:relative from #introexpand and position:absolute from #introexpand p.
After you've done that, just default #introexpand to display:none and then on click on span.learnmore you can either .show() the div or .slideToggle() it for something a little fancier.
I just think you're trying to make it more complex than it needs to be.

Get height of div dependent on text inside

I have a DIV with some text inside. But the height of the DIV starts at 0px, it also has an 'overflow:hidden'. After that i'm using an animation system to increase the height of the DIV. But i can't give the DIV a fixed height because the length of the text inside the DIV varies.
Is there a way to tell what the height of the DIV will be when its big enough to fit all content inside it?

I have done a horrible hack but see if this is good enough.
Basically you get the content height by setting the height to auto, then resetting it to zero and finally using your animation function, like this :
var tempHeight = $(".sample").css({"height" : "auto"}).height();
$(".sample").css({"height" : "0px"}).animate({
height : tempHeight
},1000);
Where .sample is the reference to the div with the variable text content. Check out the demo for a better understanding.
Pure Javascript Version :
document.getElementById("sample").style.height = "auto"; //The id of this div is 'sample'
var tempheight = document.getElementById("sample").offsetHeight;
document.getElementById("sample").style.height = "0px";
/*
Custom Animation function, Use tempheight to get the full content
*/
DEMO For The Jquery Version

Maybe you can try this:
Put the text inside another DIV like...
<div>
<div>some text</div>
</div>
Then animate the outer div (which as an hidden overflow) according to the height of the inner div (which has not an hidden overflow).
Hope this helps

Depending on what you're doing/using you don't need to know the height because setting it to "auto" will ensure it expands to fill the content.
However, you could also not set the heights to 0 until you know the height by using javascript to get it. For example in jQuery:
$("div").each(function()
{
$(this).attr("data-height", $(this).height()).css({"height": "0", "overflow": "hidden");
});
Now each div has an attribute called "data-height" that has the value of it's original height. You can then use this to expand the div when you need to.

Just before animating the showing of the div, clone the div and get rid of the height:0px constraint (change the height to auto, for example). Then grab the height of that cloned div for use in your animation.
In jQuery, this would look something like:
var myDiv = $('div');
var myDivClone = div.clone().insertAfter(myDiv).css('height','auto');
var myDivHeight = myDivClone.outerHeight();
myDivClone.remove();
myDiv.animate({height: myDivHeight}, 250);
Note the importance of actually cloning the element in question as opposed to just creating a new one and filling it with the same contents. You need to recreate the element exactly (other than the height modification you do afterwards), including classes, etc.
ALSO note the importance of injecting it into the DOM immediately after myDiv. This is so that the same CSS will affect it as affects myDiv at time of height calculation. The only potential exception to this is if you're using a :last-child selector in your CSS, and the clone ends up becoming the last child of the parent element. But that kind of issue should be easy enough to get around.

how about dropping the text in a off screen div first and getting the dimensions from that?

if(el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth)
{
//keep making element bigger
el.style.height = parseInt(el.style.height) + 2 + "px"
}
You could stick this snippet inside some sort of recursive function or while loop. Essentially you are checking to see if there is more content outside of the viewable area that a scroll-bar would show.