We Keep Coding

JQuery slidedown a div with a image is not smooth

I'm making a naviget menu like IBM's website, when mouse hover it will slidedown a pannel. I use jQuery's slidedown, and it seems work well but when you fisrt slidedown it, it will stuck for a moment like this.
And after about 0.2 second，it continue to slidedown, this time works will.
Confusely if you redo the above opreate immediately, it slidedown smoothly and not stuck. And after one minute or refrash the website it stuck again.
I check this problem for two day, and I found this may cause by the image which need some time to load, beacuse when I remove the image it works well. But I don't know how to fix it, i'm already add overflow: hidden in all parents div, even use transition to replace the jQuery slidedown but it stuck too. What's more I can't rewrite the code of this part beacuse it's written by other person and I don't really know what have he down.
There are some codes I wrote or I know how it works:
HTML:
<div class="nav-item-con clearfix <#if 1!=field.index>none</#if>">
Javascript:
if($(this).parent().index() === current) {
if(!expanded) {
expanded = true;
$(this).stop().slideDown(250);
}
else {
$('.nav-item').css('display', 'none');
$(this).css('display', 'block');
}
}
CSS:
#header-box .nav .nav-item {
position: absolute; top: 3.5rem; right: 0; left: 0;
/*background: #20273C;*/
display: none;
background: rgba(32,39,60,0.8);
I'm appreciate if you know how to solve this problem.

fadeIn( ) does not use my css positioning

I am working on a site that only shows many items (images) that you can drag & drop. So far so good my JS is:
<script type="text/javascript">
$(function() {
$( ".draggable" ).pep();
});
</script>
The HTML is:
<img class="draggable" id="item_1" onload="this.width/=2;this.onload=null;" src="http://www.cyrill-kuhlmann.de/img/01.png"/>
And the CSS is:
#item_1 {
position: fixed;
left: 300px;
top: 150px;
z-index: 2;
}
That's the way I handle all the objects on the site… But if I want to add a fadeIn() to every item, so that they fadeIn one after the other… the JS does not care about my CSS positioning anymore… It fades in all objects at "left: 0px; top: 0px" …Why is that? How can I fix that?
That's my JS code with that fadeIn():
<script type="text/javascript">
$(function() {
$(".draggable").hide();
$(".draggable").each(function(index) {
$(this).delay(800).delay(50*index).fadeIn(400);
});
});
$(function() {
$( ".draggable" ).pep();
});
</script>
Here you can get an impression:
http://www.cyrill-kuhlmann.de/play.html
Thank you for any help!

The latest version of jquery.pep.js has a startPos option, or it will auto-detect the left and top css properties. Either way, all you need is an upgrade to the plugin.
http://jsfiddle.net/mblase75/haskbkqz/1/

I am not sure if you can change the behavior of the fadeIn function.
What I would recommend instead is using CSS Transitions. You can set the default opacity to opacity: 0 and then set a transition with transition: opacity 200ms.
Now you just need to apply a class to each of your element with a short delay in between, like this: jsFiddle.

How to make a div fade in after a specific height?

I am trying to make a fixed div appear after the user scrolls 100px down on a page, and disappears again when the scroll past that 100px to the top.
I would like to use a opacity fade transition of 0.5s when the div appears to make a nice transition.
Have been trying to do this but can only seem to get it to appear as soon as the user scrolls using this code:
Would love to hear from someone who has the solution.
Thanks! :)

Here is a start http://jsfiddle.net/ZtGK6/
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#theDiv").fadeIn();
}else{
$("#theDiv").fadeOut();
}
});

A good way to make it hide on page load is to give the surrounding div CSS class a display: none; property. That way it will display hidden when the page initially loads, and not fade out quickly upon page load. Then, your JavaScript will load it after you scroll down the determined # of pixels. This will behave cleanly and is super easy to achieve.

HTML:
<div id="theDiv">Now I'm visible</div>
CSS:
body, html {
height: 200%;
}
#theDiv{
top: 30px;
left: 20px;
display: none;
background-color:#FFF000;
width:200px;
height:200px;
}
Javascript:
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#theDiv").fadeIn();
}else{
$("#theDiv").fadeOut();
}
});
Demo: http://jsfiddle.net/waitinforatrain/ZtGK6/3/

$(function() {
var theDiv = $('#myDiv'),
scrollPos = $('body').scrollTop();
if ( scrollPos > 100 ) {
theDiv.fadeIn(500); // 500 milliseconds
} else {
theDiv.fadeOut(500);
}
});
I haven't been able to test this and you may have to put the if statement in a scroll event so the scrollPos var updates as you scroll.

Change div height onclick with animation

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.

$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/

Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/

try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO

jQuery rules. Check this out.
http://api.jquery.com/resize/

The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)

I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}

how to disable whole body other than a div

I have a div which is creating through ajax, i would like to disable the whole body once the div is popup and until, unless the div is closed.Is this possible in jquery. Please let me know your suggestion
Thanks,Praveen Jayapal

You want to REMOVE, or hide the body? Technically this shouldn't be possible because you need to append the div to the body in order to see it. What you could do is create a 'mask' layer that covers the WHOLE body, then use z-index for your div to display it on top of the body.
Something like:
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
might help!
To completely hide the page all you would need to do is change line 21:
$('#mask').fadeTo("slow",0.8);
in the javascript to:
$('#mask').fadeTo("slow",1);
and the color of the mask on line 7 of the CSS can be changed to whatever you want too:
background-color: #000;

That should do the trick..
HTML:
<body>
<div id="overlay">
this is above the body!
</div>
<!--...rest...-->
</body>
CSS:
#overlay {
background-color: #ccc; /*or semitransparent image*/
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#ajax-div {
z-index: 200; /*important, that it is above the overlay*/
}
Javascript:
<script type="text/javascript">
$(document).ready(function() {
//your ajax-call
$.ajax({
//on success
success: function() {
//your logic your showing the ajax-div
$('#overlay').show(); //or fadeIn()
}
})
//use live to catch the close-click of the later added ajax-div
$('#ajax-div a#close').live('click', function() {
//close the ajax-div
$(this).parent().hide();
//close the overlay
$('#overlay').hide(); //or, again, fadeOut()
});
});
</script>

What it sounds like you want is something known as a modal dialog box.
There are a number of JQuery scripts to achieve this quite easily. Here are some links for you:
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
http://plugins.jquery.com/project/modaldialog
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Hope that helps.

OK ... best idea is use jquey.ui if you use jquery.
http://jqueryui.com/demos/dialog/#modal
You can choose theme and download only components you like..
Then just include js and css a place img folder and call dialog. It is quiet easy...