jquery change html and use slideDown in the new HTML - javascript

I am trying to change a piece of my html using the .html, but i want add some slideDown effect, so i'm trying like this:
$('.section').slideDown(500, function () {
$(this).html(html);
});
But is not working, the html change but the animate is not happening.
What i am doing wrong?
Example:
<p class="click">Click me</p>
<div class="section">
<p> ONE </p>
<p> ONE </p>
<p> ONE </p>
<p> ONE </p>
<p> ONE </p>
</div>
$('.click').on('click', function() {
$('.section').slideDown(500, function () {
$(this).html('two');
});
});
Fiddle: http://jsfiddle.net/fa7Ld2j1/

You can use this sequence:
$('.click').on('click', function () {
$('.section').slideUp(4500, function () {
$(this).find('p').html('two');
$('.section').slideDown(500)
});
});
jsFiddle example

The function to load the html is called as the success function, i.e. after the animation completes.
You can probably try this:
$('.section').hide(); // hide the section
$('.section').html(html); // populate..
$('.section').slideDown(500); // Slide Down
Hope it helps.. :)
Edit: Arguments for the slideDown can be checked
here ...

The slideDown is used to show something hidden,try the slideUp and then add alert(...) in the callback function.u will see the effect.
hope it helps

Related

Hide when no longer hovering using jQuery

I want the div #reloadWarningBackground to show ONLY when hovering over the button #reloadButton.
Here is my code:
$('#reloadButton').mouseover(function() {
$('#reloadWarningBackground').show();
});
Use mouseout like following.
$('#reloadButton').mouseover(function() {
$('#reloadWarningBackground').show();
}).mouseout(function() {
$('#reloadWarningBackground').hide();
})
UPDATE
It is better to use mouseenter since mouseover will be executed repeatedly.
$('#reloadButton').mouseenter(function () {
$('#reloadWarningBackground').show();
}).mouseleave(function () {
$('#reloadWarningBackground').hide();
})
The simplest and best way to address this problem is using toggle().
//html
<button id="reloadButton">
Hover me
</button>
<div id="reloadWarningBackground" style="display:none;">
<p>
Hello this is me
</p>
</div>
//Javascript
$('#reloadButton').hover(function() {
$('#reloadWarningBackground').toggle();
});
fiddle

jQuery slideup casuing multiple slides

I'm looking to use jQuery to slide an element down, wait, then slide it back up.
When I use the following code, it slides down fine, but then when sliding back up it seems to slide up and down multiple times.
HTML:
<div id="area">
<div id="summary"><p>hello summary</p></div>
<div id="dropdown">
<div class="item"><p>hello item</p></div>
<div id="functions"><p>hello functions</p></div>
</div>
</div>
<p>TEST ADD</p>
jQuery:
$("document").ready( function () {
$("#test_add").bind("click", add_item_annimate)
})
function add_item_annimate() {
$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
}
Not really sure why this is happening.
That's probably because of animation queue, for clearing it you can use the stop method:
$("#dropdown").stop(true).slideDown("fast").delay(1500).slideUp("fast");
This code should do the trick!
$("document").ready( function () {
$("#test_add").click( function(){
$("#dropdown").slideUp("fast").delay(1500).slideDown("fast");
//SlideUp and slideDown can be switched.
});
});
Example:
http://jsfiddle.net/xcm8n1s3/
You didn't have anything preventing a user from clicking on "TEST ADD" multiple times before the animation completed.
if ($("#dropdown").is(':animated')) {
return false;
}
$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
Here is a jsfiddle of the working demo.

Jquery Html Element Selector

I have a HTML code like this,
<div class="panel-footer">
<div class="post-activity">
<i class="loading-icon"></i>
<button onclick="ChangeColor(this);">Change Color</button>
</div>
<div class="comments-ch"></div>
</div>
When I write this Jquery code
function ChangeColor(element)
{
$(element).closest(".panel-footer").find(".comments-ch").css("background-color","#CC0000")
}
Not working for class = comments-ch,
But If I write this code like this,
function ChangeColor(element)
{
$(element).closest(".panel-footer").find(".post-activity").css("background-color","#CC0000")
}
working.
Summary, first div under the "panel-footer" is OK, but the second/last div NOT OK.
How can i reach the second/last div element? Thanks
Try .show() after setting the CSS:
function ChangeColor(element) {
$(element).closest(".panel-footer").find(".comments-ch").css("background-color", "#CC0000").show()
}
When using a class selector, make sure you specify a period in front.
For example, in:
$(element).closest(".panel-footer").find("comments-ch").css("background-color","#CC0000")
Change from find("comments-ch") to find(".comments-ch")

Hiding the closest div with the specified class

I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.
<script>
$(document).ready(function () {
$("form.common").first().show();
$(".expand").click(function () {
$(this).parents().next("form.common").show();
})
$(".collapse").click(function () {
$(this).parents().next("form.common").hide();
});
$(".close").click(function () {
$(this).parents().next("div.module").hide();
});
});
</srcipt>
<div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
<h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
<span class="icons_small right close">X</span>
<span class="icons_small right collapse">-</span>
<span class="icons_small right expand">+</span>
</div>
<form class="common">
<fieldset>
<legend> Some Titlee/legend>
</fieldset>
</form>
</div>
Can anyone see why this is not hiding the div?
THanks,
The answer is in the question:
$(".close").click(function () {
$(this).closest("div.module").hide();
});
Demo fiddle
Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree
You had a missing < in <legend> Some Titlee/legend>, after that it works.
Check here
This should work :
$(".close").click(function () {
$(this).parent().hide();
});
JSFiddle
Doc : parent()

js slideUp doesn't work

I want to add slideUp effect to my page. My <body> code is:
<script>
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
</script>
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>
When i click a button nothing happens. Please help.
Wrap it in $(document).ready. Your click handler is being assigned before the #slide_up element is ready for use:
$(document).ready(function(){
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
});
JSFIDDLE http://jsfiddle.net/3uhCa/2/
Nothing wrong with your code. are you loading jquery correctly?
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>

Categories

Resources