I have a large block of HTML that needs to be replaced, which includes fadeOut/fadeIn transitions. I can't figure out how to add the HTML to the page (hidden) without wrapping it in a div.
$.get('/ajax', function(newHtml){
var $newEvent = $('<div class="new-event" />').hide().html(newHtml);
$('#content .event').fadeOut('slow', function(){
$(this).remove(); //old event
$newEvent.appendTo('#content').fadeIn('slow').removeClass('new-event'); //then remove the wrapper div that I didnt need in the first place
});
});
What is the best way to do this while utilizing best practices for performance?
Solution:
For some reason, I thought that creating a new element like this: $(newHtml) was less efficient (bad performance) than html(newHtml). But apparently, they are the same as far as performance goes (I have no data to back this up other than my own observations).
So the following code is just as efficient as the previous:
$.get('/ajax', function(newHtml){
var $newEvent = $(newHtml).hide();
$('#content .event').fadeOut('slow', function(){
$(this).remove(); //old event
$newEvent.appendTo('#content').fadeIn('slow');
});
});
When adding the code to the page, have top level elements all be hidden
<div style="display:none;">...</div>
When fadeIn is called jQuery automatically removes it for you.
If you can't modify the returned html just do it this way then,
$(newHtml).hide().appendTo('#content');
That will hide it before being added to the DOM.
How about something like
$('#content .event').fadeOut('slow', function()
{
$(this).html(newHtml).fadeIn('slow');
});
Why you don't simply replace the content of .event instead of removing it and creating a new one?
$.get( '/ajax', function( newHtml )
{
$( '#content .event' ).fadeOut( 'slow', function ()
{
$( this ).html( newHtml ).fadeIn( 'slow' );
});
});
Edit
If you really need to remove the entire node, you can do this instead
$( this ).remove();
$( '<div class="new-event">' ).appendTo( $('#content') ).html( newHtml ).fadeIn( 'slow' );
You could just have it as a javascript string, and add it when you need.
var $newEvent = $(newHtml);
// and later on
$( '#content .event' ).fadeOut('slow', function ()
{
$(this).append($newEvent).fadeIn( 'slow' );
});
Related
Basically I want to slide down a element, then when the button is hit again I want it to slide up, empty the div, then slide down with the new results. I'v been trying to figure out how to do this for so long and I cant seem to get it working with jquery.
$(".search").on("click",function(){
$('.results').slideUp(500).empty().append("<p>Results</p>").hide().slideDown(500)
});
I understand this is kind of specific to my project kind of but I do feel others might find this useful
I'm not sure what exactly your problem is, but I think the slideUp animation is not shown in your example.
The slideUp method takes a second argument, which is the function callback. It is called when the slideUp action is finished. If you do the rest of your actions in this callback function, is guaranteed to be performed after the slideUp.
jQuery('#testbutton').on('click',function() {
$('#testlist').slideUp(500, function() {
$('#testlist').empty().append("<li>this is a test</li>").slideDown(500);
});
});
You can find a fully working example here:
https://jsfiddle.net/dxyybwyh/5/
I want to slide down a element, then when the button is hit again I
want it to slide up, empty the div, then slide down with the new
results.
It seems simple enough to me
let me know if you need anything more
$('#myButton').click(function () {
if ( $( ".myDiv" ).is( ":hidden" ) ) {
//show the div
$( ".myDiv" ).slideDown( "slow" );
//add content
$( ".myDiv" ).html("New Content")
} else {
//hide the div
$( ".myDiv" ).slideUp( "slow" );
//clear content
$( ".myDiv" ).html("");
}
});
http://codepen.io/Rohithzr/pen/jqmGXg
Updated the pen with append ability and more readability
$('#myButton').click(function () {
if ( $( ".myDiv" ).is( ":hidden" ) ) {
show();
} else {
hide();
clearContent();
appendContent("New Content");
}
});
function clearContent(){
//clear content
$( ".myDiv" ).html("");
}
function appendContent(content){
$( ".myDiv" ).html($( ".myDiv" ).html()+content);
}
function hide(){
//hide the div
$( ".myDiv" ).slideUp( "slow" );
}
function show(){
//show the div
$( ".myDiv" ).slideDown( "slow" );
}
I trying to get a trigger working but this doesn't seem to work. Im 100% sure this is the right code to do the job.
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
$( ".attachment-large" ).trigger( "click" );
});
});
however is there another way to trigger an element click when a different element is clicked?
I don't see flaws in that code. It might be something else then (classnames are correct?)
You could try getting the click on another thread:
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
setTimeout(function(){
$( ".attachment-large" ).trigger( "click" );
}, 10);
});
});
Or try another click method trigger:
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
$( ".attachment-large" ).click();
});
});
Is there no error message provided in your console?
I used OnClick drop down text with JavaScript and HTML code to make the dropdown hidden div project.
But the problems are:
1 - It won't open divs separatelly, all of the "projects" are open at once;
2 - I won't come back up once I click it again.
I made another line of code to make it go up:
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
$(function() {
$(".project2").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
And so on... and it goes up as soon as I click it only once, like an animation. It won't stay down and THEN on the next click it goes back up. AND it still gets both down instead of each one separately.
You shouldn't use document.ready to often if isn't needed.
// Shorthand for $( document ).ready()
$(function() {
});
If you bind two events to an element, .. it will be executed if you don't stopPropergation or making "cases".
So you can check the visibility and decide what to do:
$( function () {
$("[class^='project']").on( 'click', function () {
var $details = $( this ).parent().find( '.details' );
if ($details.is(':visible'))
$( this ).parent().find( '.details' ).slideUp();
else
$( this ).parent().find( '.details' ).slideDown();
});
} );
https://jsfiddle.net/3738Lnmf/
edit:
slideToggle is more elegant :) #Diego López
$( function () {
$("[class^='project']").on( 'click', function () {
$(this).parent().find('.details').slideToggle();
});
} );
https://jsfiddle.net/3738Lnmf/1/
Use .slideToggle() if you want to toggle between show and hide the div elements
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
});
$(document).ready(function(){
$('#1, #2').click(function(){
window.clickedbtnid = $(this).attr('id');
$( "#table_dialog_1" ).dialog();
});
$( "#table_dialog_1" ).find('td').click(function(){ $('#'+window.clickedbtnid).parent().prev().find('input').val($(this).id);
$( "#table_dialog_1" ).dialog('close');
})
});
$('#input_'+id).attr('value', $(this).html());
this was closed to what i want but it only pass based on clicked td's text of table on dialog area because what I need is the first td table of dialog window to pass on input tag, and second td and third on link tag element. See my last table in fiddle below, it should look like the table on the main page when dialog window is closed.
see this FIDDLE
I hope this is what you are looking for, I refactored the code a bit, added class clickMe to button, it makes id unnecessary.
the JS code
var clickedButton;
$(document).ready(function(){
$('.clickMe').click(function(){
clickedButton = this;
$( "#table_dialog_1" ).dialog();
});
$( '#table_dialog_1 tr').click(function(){
var tds = $(this).children();
$(clickedButton).parent().prev().find('input').val(tds.eq(0).html());
$(clickedButton).next('a').text(tds.eq(2).html()+','+tds.eq(1).html());
$( "#table_dialog_1" ).dialog('close');
});
});
I'm trying to loop through each element of a class in javascript and display it after pausing a certain amount of seconds. I have the logic down, but because jQuery is calling the class, and not the unique instance of this, it displays everything all at once:
jQuery( document ).ready(function ($) {
$( ".fadein" ).hide();
$( ".fadein" ).each(function (index) {
$( "." + this.className ).delay(index * 800).fadeIn( "slow" );
});
});
The each loop is already designed to hand you the elements one at a time. The target element is passed as 'this', so just fadeIn the current element in your 'loop' instead of fetching all of them each time.
// Replace this
$( "." + this.className ).delay(index * 800).fadeIn( "slow" );
// with this
$( this ).delay(index * 800).fadeIn( "slow" );
// result:
$( ".fadein" ).each(function (index) {
$( this ).delay(index * 800).fadeIn( "slow" );
});