I want to hide an element as soon as it becomes visible (has loaded).
I have tried using timeout and setInterval. They work fine but they are a few seconds late. So first the element loads and then it disappears.
But I want it so it doesn't appear at all and just disappears without appearing first.
I tried to change the time and make it more/less but it didn't help. Is there another way?
I even tried to put the timeout and setinterval inside window.load it didn't work. I also tried checking when the element is visible by using the length but it was slow too.
window.setInterval(function(){
jQuery("#vz").find('div').first().hide();
}, 600);
You can specify its visibility as hidden (In case you still want it to occupy space)
Or specify its display as none (In case you don't want it to occupy space)
Both of these should be done using CSS, so in your CSS file:
#vz {
//This:
visibility: hidden;
//Or this:
display: none;
}
And as a general role of thumb, initial style should be set in CSS and then you can animate/change it using JS or more CSS
Related
I have a page where a div takes a while to load in.
The simple code in CSS stops it from ever loading:
.object-container{
display:none;
}
However, I do need it to display by default, and to only NOT display based on a condition.
So I have:
if (x == 1)
{
alert('here!');
//$('.object-container').css("display", "none !important");
$('.object-container').attr('style','display: none !important');
}
...and the alert pops up, but every time the DIV displays anyway after the page loads for a while. What might be happening?
$('.object-container').attr('style','display: none !important'); will overwrite all the inline-styles applied on that particular element.
This may be causing the issue for you. You should change the display property alone by
$('.object-container').hide()
or
$('.object-container').css('display','none')
This must have an answer already but I can't find it.
My div, which I want hidden on page load shows up for a fraction of a second until I explicitly hide it in the document.ready function.
$(document).ready(() => $("#myDiv").hide());
Short of not having it and re-creating it ($.append / $.add ) or making it the same background color as its background to hide it, how do I ensure that it remains hidden on page load?
You could toggle CSS properties on the div. display: none; prevents the element from being rendered at all, and visibility: hidden; will render it (occupy space for it from the layout), but makes it invisible. When you want to display the element, just remove the property you set.
If you have div which you want to be hidden at the beginning, what you can do is you can hide it by using CSS property. Here is how you can do it:
display: none.
visibility:hidden
or inline css can be given (e.g.
Make sure you know difference before using them. Your 'display:none' will completely hide the element whereas in 'visibility:hidden' a blank space will be there always. Since you are talking about page load here it is:
window.onload = function() {$(div).hide()});;
Use before div
'.' => for class
'#' => for id
Hope this helps!
I try to use the Fluidbox script with the bootstrap tab plugin. When I click on a tab, new images appear. They are in a container and the opacity goes from 0 to 1.
By default the first container opacity is set to 1.
Fluidbox works well with that container but not with the other. I suspect that it has a link with opacity change. Any ideas?
Page with the problem: http://urlgone.com/2d0035/
It seems Fluidbox does not work on any images that are set to display none. And in your case inside of a parent element that is set to display none.
The way you get around this is to get fluidbox to fire before the image or element is hidden. I was using easytabs, so I placed it's call inside of a window load function which gave fluidbox enough time to fire before easytabs hid the photos.
$(window).load(function() {
$("#tab-full-container").easytabs();
});
All,
I've got a situation in which I'm using CSS transforms/transitions to animate the horizontal position of a div element. Specifically, I'm using...
// in CSS
myDiv {
transition: transform 0.4s ease-in;
}
// in JavaScript, where "div" contains a reference to the div element
div.style.transform = translate3d(Npx, 0px, 0px);
...and it works well. That is, every time I call that line of JavaScript with a new value for N, the div smoothly animates from its current position to its new position.
However, there are times when I need position the div first WITHOUT a transition, then MOVE it WITH a transition. E.g.,
Have the div JUMP (instantly) to 100px, then transition (over 400ms) to 200px
Later, JUMP the div to 500px (without a transition), then transition it to 600px
In other words, I'd like to be able to move a div, and be able to control whether the new position is applied instantaneously, or with a transition.
Complicating matters, I have event listeners that fire when the transition is complete; these listeners should NOT fire if/when I move the div without a transition. I'm also supporting multiple browsers, so I have to deal with all the vendor prefixes.
In pseudo-code, I guess it would look something like this:
Remove the event listeners for the transitionEnd event
Set the transition property to none
Change the position of the div (e.g., [div].style.transform = translate3d([starting position]px, 0px, 0px))
Add the event listeners for the transitionEnd event
Set the transition property to have a transition (e.g., [div].style.transition:all 0.4s ease-in)
Change the position of the div (e.g., [div].style.transform = translate3d([ending position]px, 0px, 0px))
With all the vendor prefixes, that's too messy and complicated to be the best way to accomplish this. (I'm not even sure if it works...)
So, what's the best way to toggle transitions/transformations on and off?
[UPDATE]
Thanks to a suggestion from Chandranshu, I've tried toggling a class that includes the transitions.
So, my pseudocode looks like this:
Remove the transitions class
Apply the starting position
Restore the transitions class
Apply the ending position
However, it looks like, if I execute all four steps in a single JavaScript function - it seems to ignore steps 1-2, as though it's "netting" the results of all four steps.
Here's a jsfiddle that demonstrates this: http://jsfiddle.net/bUvX3/
Instead - if I execute steps 1 and 2, then execute steps 3 and 4 after a short delay (e.g., by using a setTimeout), it works: http://jsfiddle.net/2mhcv/
So, I guess that's a solution, except that I really don't like having to add an arbitrary delay, especially when so much emphasis is placed on fast, responsive UIs.
Thanks in advance!
I think you have over-complicated this :). Here's how I'd approach this problem:
Add a class to your divs, say movable.
Declare all your transition rules and transitionEnd callbacks for .movable.
Nothing to do if you want to move your div smoothly.
When you need to move your div w/o a transition, remove this class, move your div and add this class back: $('div').removeClass('movable').animate({transform: 'translate3d(...)' }).addClass('movable')
UPDATE:
Finally, I've got what you wanted: http://jsfiddle.net/2mhcv/1/. The only change here is that instead of a delay of 20ms, I'm using a delay of 0! setTimeout() causes a repaint to be triggered and that ensures that the first animation is executed before the next one begins.
UPDATE 2:
This version works without a setTimeout() call: http://jsfiddle.net/2mhcv/2/. Realizing that a repaint is all that is needed, I just added a line there to read a compute CSS property such as display. You could have read any other computed property to get the same effect.
I have a table that represents Tab-structure.
Some cells are set to display: none; and only the active tab is displayed.
I want to set the max-height to all of them.
To do it, I go through the array of tabs and do the following
// get the max-tab-height
for (var i = 0; i < TabPageList.length; i++)
{
// get max height
if (TabPageList[i].offsetHeight>MaxTabHeight)
MaxTabHeight = TabPageList[i].offsetHeight;
}
The problem with this approach is that offsetHeight is working only for the active tab that is displayed.
So, what's the Height of the ones that are not shown, when they will be shown?
Because the inactive tabs are set to display:none, the offsetHeight is not useful. Try running your MaxTabHeight routine at the same time that you activate the tab, after it is made visible. I'm assuming that's inside the tab's click event.
Try using visibility:hidden (not display:none). As I recall, using visibility elements are just hidden but keep their dimensions.
For usability, the tabs shouldn't be set to hidden with CSS. (There are still the small percentage out there that has js disabled). If you run through the tabs, reading their height, while hiding them, you can easily find the tallest tab. And at the same time make your site more user-friendly (:
And if you don't want the hidden cells to collapse, you could also use visibility:hidden; like stated above.
As the others have said you may get the height by setting the visibility to hidden (which makes the object keep its dimensions while hidden):
visibility:hidden;
with the additional trick of setting its position to absolute to avoid it taking space on the page (you may do this just for the time needed to get at the height, restoring its position attribute afterward).
A second approach may be to keep the tab visible but move it off the page by setting its absolute position to some sufficiently large coordinates.