jquery Flashes Div Element Before Executing .hide() and .fadeIn() Methods - javascript

This is my code:
$('.items').html(response).hide().fadeIn();
The problem is that when this loads, the page "jumps" up due to the element being rendered on page first (having a height) before the .hide().fadeIn() is triggered.. is there some other way to do this?

You could using the opacity instead if you want to keep the dimensions of the element intact:
$('.items').html(response).css({'opacity':0}).animate({'opacity':1});

Hide using CSS and then fade it in when required :
css :
.items {
display:none;
}
JavaScript
$('.items').html(response).fadeIn();

This is a cleaner solution since it avoids a flashing effect of the element being added first, then quickly having its opacity set to 0.
This way the elem is added already having an opacity of 0.
var elem = $(response).css({'opacity': 0});
$('.items').html(elem);
elem.animate({'opacity': 1});

If you want to show a smooth transtion between existing content and new, try the following:
$(function(){
$('.items').fadeOut(function(){
$(this).html(response).fadeIn();
})
});

Related

jquery: a better way to tie an animation to scrollbar position

var AddFootnoteScrollIndicator = function(){
$('.mobileFootnote').on('scroll touchmove', function (event) {
var scrollTop = that.$mobileFootnote.scrollTop();
if (scrollTop <= 20){
var opacity = 1 - (scrollTop/20);
$('.scroll-down-indicator').css({'opacity': opacity });
}
});
};
As the user scrolls down, the indicator slowly fades out until it is gone. They scroll back up, the indicator slowly re-appears. They stop in the middle, the indicator is half-visible.
Code works fine, but modifying the opacity via .css() seems expensive. Is there a more clever way of doing this via css or...
I don't want to delay the .on() polling because the animation needs to respond quickly to the scroll.
Any ideas?
When it comes to scroll events, modifying the css via javascript is the only way to go. There is not a way with pure CSS to detect scroll positions like you can with media queries and screen sizes.
The jquery css() function is setting the element.style.opacity property under the hood. You are only one short abstraction layer from the actual element property, so it is not "expensive".
The most costly part of that call would be the $('.scroll-down-indicator') selector, as it has to perform a DOM traversal to find elements with the class name.

After jquery hide then show, width of width:auto elements is smaller than normal

I'm trying to display a list of information, and it works normally, however when I hide the div containing the list and then show it again, the width of the elements with the "width: auto" styling are being re sized and the new size is too small:
Before hide:
After Hide:
My php generating the elements looks like this:
<div displayitem='true'>
<table>
<?php
foreach($aExistingChangeDetailsData['customers'] as $aCustomer){
?><tr><td><li style='width:auto;'><?php echo $aCustomer['sCustomerName']; ?></li></td></tr><?php
}
?>
</table>
</div>
and my jquery is simply:
function expandSection() {
$("div.cd-content").show("slow");
}
function collapseSection() {
$("div.cd-content").hide("slow");
}
I'm guessing the issue is due to the re sizing nature of the slide animation, is there any simple way to keep the width of width:auto elements after the hide so they are restored to the proper size?
Edit:
It seems to be decreasing the width by exactly 5 for every element.
try to use fadeIn and fadeOut istead of show and hide respectively, cause hide() changes width of element to zero, but fadeOut() changes attribute opacity and doesn't width
your inline width: auto styling is only being set once on first render, you can also set it after events fire:
function expandSection() {
$("div.cd-content").show("slow").css("width", "auto");
}
function collapseSection() {
$("div.cd-content").hide("slow");
}
Try to identify which element(s) width is set to 0 after using .hide().
Then before calling .hide() fetch the original widths i.e. example below
const parentWidth = $('.slick-track').css('width');
const childWidth = $('.js-slide').css('width');
The call .hide() to hide the element block (as per desired functionality)
On calling .show(), set the width of the affected element(s) back to its original widths, i.e.
//fix collapse width
$('.slick-track').css('width', parentWidth);
$('.js-slide').css('width', childWidth);
This will do it, the element width(s) will be restored to its original width

Toggling marginTop without making an element disappear

I've thrown together a cool little script that will make my search box appear using jQuery UI. However, there are links above the search box that must move up at the same speed as well. For this, the margin-top must be adjusted, but by toggling the margin-top, it seems it is disappearing.
Does anyone know how I can toggle the margin-top without making the links disappear AND keep the speed as close as possible to the other one?
$(document).ready(function() {
$('.pwcustomsearch').hide();
$("#pwcustomsearchlink").click(function () {
var effect = 'slide';
var options = { direction: 'down' };
var duration = 400;
$('.pwcustomsearch').toggle(effect, options, duration);
$('.social-media').toggle({"marginTop": "15px"});
})
});
Here is a fiddle:
http://jsfiddle.net/hcmLw/1030/
.toggle() is adding display:none as an inline style to your element, therefore it disappears.
Use .animate() instead to change the top margin.
See my updated fiddle here: http://jsfiddle.net/hcmLw/1032/
EDIT: Updated the fiddle again to make the toggling work properly.

CSS transition not working after element is appended

I have encountered an issue with CSS transitions and before I try something else, I want to understand what the problem is.
There are 3 boxes in a container and a "next" button. The goal is for the next box top appear on top and to fade in when the "next" button is pressed. The box is positioned on top by appending it to the container, so that it is added as the last element and thus visible on top, and should fade in through css transition.
The problem is that the css transition does not seem to work after the box was appended.
The css transition works well if tested on a box element that is not appended.
Fiddle here, code below:
HTML:
<div class="container">
<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>
</div>
<div id="next">Next</div>
JS:
var container = $(".container");
// Save the current list order
var list = container.children(".box");
// The current index
var current = 0;
// Put the first on top
container.append(list[0]);
function next() {
// Figure out what is the index of the next box
if (current + 1 < list.length) current++;
else current = 0;
// Save it in a variable
var target = $(list[current]);
// Put it on top
container.append(target);
// Hide it and then fade it in
target.css("opacity", 0).css("transition", "opacity 1000ms ease-out").css("opacity", 1);
// The fading in is not working
}
$("#next").click(next);
Update:
A basic solution to this problem was to call offset() on the target after setting the opacity to 0 and before setting the transition css:
target.css("opacity", 0);
target.offset();
target.css("transition", "opacity 1000ms ease-out").css("opacity", 1);
Updated version of the above fiddle here
The "list" variable is a jQuery object, but the elements you pull out of it as "target" are not jQuery objects - they're the DOM nodes. Thus your calls to ".css()" are failing (which is reported in the error console for me).
Once you've fixed that, then the next thing is the issue of how the browser deals with a sequence of CSS updates. It's not clear to me what exactly I'm seeing (from Firefox 18 on Linux), but I think the basic issue is that because no layout reflow is done between the changes, the net effect is that the styles are "collapsed" so that there's no net change.
In this update to the fiddle I took a different approach. I put the transition rules in the "box" class, and then added a "prefade" class:
.prefade {
transition-duration: 0;
opacity: 0;
}
Then, instead of messing with the element style, I add "prefade" before appending, and then trigger a layout update by asking for the element's offset. Then I can remove the "prefade" class, and the box fades in.
target.addClass('prefade');
// Put it on top
container.append(target);
var p = target.offset();
target.removeClass('prefade');
I don't know whether that's the "right" way to do things. edit — to make it work in Chrome, the "transition" properties need to be repeated with the -webkit- prefix.
Is there any particular reason to use CSS transitions, when you could use jQuery fades instead and have your code work on browsers that don't support CSS transitions?
var $container = $(".container");
function next() {
var $next = $container.children().first();
$next.hide().appendTo($container).fadeIn();
}
$("#next").click(next);
Note that you can avoid a lot of the state you're maintaining merely by taking the first element from the container and moving it to the back - the DOM maintains your state for you!
See http://jsfiddle.net/alnitak/w6y3B/

Change a div background with jQuery

I need to change my background div with some other images.
I want that first, myDiv load the first background image on css style, and then within 2/3 seconds of delay add a fade effect change the background image.
If it's possible, I need to do this with jQuery.
You cannot do fade or any other transitions directly on the background image. You can however add another div with second image as its background and fadeOut() the original one.
Does this do what you you want?
http://jqueryfordesigners.com/image-loading/
EDIT: A bit more Googling - this sounds like what you are trying to do...
http://www.magneticwebworks.com/jquery-rotating-page-background/
Edit: another go - THis? http://css-tricks.com/forums/discussion/9621/solved-is-it-possible-to-add-jquery-cycle-to-background-imagess/p1
this is not fade effect but you can delay and change background image like this.
function changebackground(){
$('#divID').css("background-image", "url(/myimage.jpg)");
}
setTimeout(function() { changebackground();}, 3000);
this might be good workaround
http://jquery.malsup.com/cycle/
after you position on top divs with cycle it can be your background - cycle.js give's you lot of options.
if you want only rotate image's in bacground you must first preload that image and second you must put it in other div so that both divs can animate.
There is no support for this, even if you add all the functionality of jQuery UI.
You could append a temporary image, absolutely positioned inside the div for which u want to change background. Let the image fade in, and once it's fully opaque, swap background image for the div. This will be problematic if you have a repeated background, however.
var im1 = 'picture1.png';
var im2 = 'picture2.png';
$('#divID').css({'background-image': 'url("'+im1+'")', 'position': 'relative'});
$('#divID').on('click', function() {
var img = $('<img />', {
src: im2,
}).css({
position: 'absolute',
top: 0,
left: 0
}).hide();
$(this).append(img);
img.fadeIn('slow', function() {
$(this).parent().css('background-image', 'url("'+im2+'")');
$(this).remove();
});
});
Of course, you should move the CSS I included in my script to a .css file, and use a class instead, for more readable code.

Categories

Resources