Jquery slide to visibility hidden? - javascript

I want to achieve something like :
$("#left").hide('slide', {direction: 'right'}, 1000)
However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like:
$("#left").css('visibility','hidden')
Yet still achieve the same effect as above.

This is what I'd do
$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible
This could be horrible, but it's the only way I could think of solving the problem :)

EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4
Try this:
var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
width: 0,
position: "absolute",
left: offset.left,
top: offset.top,
height: $content.outerHeight(),
backgroundColor: "White"
}).appendTo("body")
.animate({
width: $content.outerWidth()
}, 1000, function () {
$content.css('visibility', 'hidden');
$(this).remove();
});
EDIT
So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!
EDIT
Only Chrome seems to be having an issue with getting the correct height.
Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div

You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this
$('#left').animate({width: 'toggle'});
EXAMPLE : http://jsfiddle.net/2p3FK/2/
EDIT: One more solution, this is very simple to move the div out of window with left margin
$("#left").animate({marginLeft:'1000px'},'slow');
EXAMPLE : http://jsfiddle.net/2p3FK/1/

Related

javascript .hide direction change

With jQuery there is the hide() function.
When you add a duration to the hide function like so
$('#myclass').hide(1000);
<div id="myclass">
<p>yolo</p>
</div>
It will start from the bottom and animate up over the course of one second.
My question is how could I change the direction it will start from.
From the docs for .hide( duration ):
When a duration, a plain object, or a "complete" function is provided, .hide() becomes an animation method. The .hide() method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.
The element only appears to be animating up and left because it's positioned by its top-left corner.
To have it animate in another direction, it'll have to be positioned on a different corner:
#myclass {
position: absolute;
bottom: 0;
right: 0;
}
Example: http://jsfiddle.net/W7hqy/
You can't do this with the hide method Assuming your using jQuery you will need to use animate like so
$('element').animate({
marginLeft: '-400px'
}, '5000', function(){
$(this).hide()
});
Demo: http://jsfiddle.net/e6BBA/
Try this.
$('div').on('click', function(){
$(this).animate({
width: 0
});
});
Demo: http://jsfiddle.net/e6BBA/1/

Give element height and remove it after

I am using Easy Pagination plugin to paginate some content. The problem is that after clicking 'next', the browser jumps up do to the height of the element loading data for Pagination.
I am trying to fetch the height of the element, example .recent, and give it to .recent before clicking .next (Before the pagination happens), then set it after.
So I am wondering how can I set the height of .recent, and then take off?
Here is what I tried so far:
var recentH = $('.recent').height();
$('.next').click(function(){
$('.recent').css( 'height', recentH );
});
I am trying to fetch the height of the element
$.height() or $.css('height') is what you´re looking for, they both get and set values. See height() and css().
"The difference between .css('height') and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px)"
before clicking .next (Before the pagination happens), then set it after.
Are you using some plugin for the pagination and does it have it´s own click event handler for the .next element?
Notice that your selectors matches elements by their CSS class and that there might be multiple elements. You should therefore specify the element to read the height of.
Short example;
$('.next').click(function(){
var height = $('#firstElement').height();
// Pagination actions here (toggling elements)
$('#secondElement').css(height + 'px');
});
After seeing the example I figured this might help:
var h = $('.recent').height();
$('.next').click(function(){
$('.recent').css({ 'height': h + 'px', 'display': 'block' });
});

jQuery: resetting .animated divs position

I am using the following code to expand and center on div on :hover
$(document).ready(function(){
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
//$(this).removeClass('highlight');
});
$(".highlight").live("hover", function(){
$(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"}, 500);
});
$(".highlight").live("mouseout", function(){
$(this).animate({"width": "148px", "height":"90px", "top: ":"0px", "left":"0px", "margin-top: ":"0", "margin-left":"0"}, 500, function(){
$(this).removeClass('highlight');
});
});
});
My problem is two things:
1) I'm not sure how to reset the "top" and "left" css coordinates to their original value on mouseOut. To see a working demo, go here:
http://jsfiddle.net/kTFvj/1/
2) The z-index (see here: http://jsfiddle.net/kTFvj/1/) is not affecting the :hovered grid elements. Not sure why.
You can use jQuerys .data method to store the original values and retrieve them on mouseout
I have made a modification to your original code that might work like you wish.. it uses .data and also updates the z-index so the active element is always on top
http://jsfiddle.net/kTFvj/2/
as Martin said, store the values when the animation begins using a variable, and restore when done.
about z-Index: just have a variable called maxZIndex=0
and everytime an animation begins, set the object's zIndex property to maxZIndex++
What about using % instead of pixels?
Another solution is saving the actual value of width and height in some vars and restoring on mouse out.

Whole site overlay div?

I'm using this snippet to append an overlay to a whole site:
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});
It works great, only I need one element to sit above this overlay ID. I've given that element a z-index greater than the 5000 here, but it never seems to ascend above the gray overlay---any ideas?
Make sure it's a sibling and direct child of body to guarantee it'll work in IE along with giving it a position of anything other than static and a higher z-index than 5000.
Give it position:absolute too, or position:relative.
Make sure the element you want overlaying is positioned (like absolute or relative).. other wise z-index means nothing
1st check where exactly the 2nd element is being added in other words if ur assigning this value in JQuery but ur using plain css to code the 2nd elements values there may be a confliction. Also u should try using some quotes where ur values are i found that using double quotes with opacity values help.
Just a suggestion though instead of trying to dynamically assign elements using JQuery and give them properties might i suggest u try plain css when giving the elements attributes and only use JQuery to manipulate what needs to be calculated and or cannot be accomplished by css alone. Then ur code would be like this:
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay").height(docHeight);
$("#overlay").css({"opacity":"0.4"});
});
and the element would also have the properties assigned by the default css file

Find the "potential" width of a hidden element

I'm currently extending the lavalamp plugin to work on dropdown menus but I've encountered a small problem. I need to know the offsetWidth of an element that is hidden. Now clearly this question makes no sense, rather what I'm looking for is the offsetWidth of the element were it not hidden.
Is the solution to show it, grab the width, then hide again? There must be a better way...
The width of an element that has CSS visibility: hidden is measurable. It's only when it's display: none that it's not rendered at all. So if it's certain the elements are going to be absolutely-positioned (so they don't cause a layout change when displayed), simply use css('visibility', 'hidden') to hide your element instead of hide() and you should be OK measuring the width.
Otherwise, yes, show-measure-hide does work.
The only thing I can think of is to show it (or a clone of it) to allow retrieval of the offsetWidth.
For this measurement step, just make its position absolute and its x or y value a big negative, so it will render but not be visible to the user.
You can use the following function to get the outer width of an element that is inside a hidden container.
$.fn.getHiddenOffsetWidth = function () {
// save a reference to a cloned element that can be measured
var $hiddenElement = $(this).clone().appendTo('body');
// calculate the width of the clone
var width = $hiddenElement.outerWidth();
// remove the clone from the DOM
$hiddenElement.remove();
return width;
};
You can change .outerWidth() to .offsetWidth() for your situation.
The function first clones the element, copying it to a place where it will be visible. It then retrieves the offset width and finally removes the clone. The following snippet illustrates a situation where this function would be perfect:
<style>
.container-inner {
display: none;
}
.measure-me {
width: 120px;
}
</style>
<div class="container-outer">
<div class="container-inner">
<div class="measure-me"></div>
</div>
</div>
Please be aware that if there is CSS applied to the element that changes the width of the element that won't be applied if it's a direct descendant of body, then this method won't work. So something like this will mean that the function doesn't work:
.container-outer .measure-me {
width: 100px;
}
You'll either need to:
change the specificity of the CSS selector ie. .measure-me { width: 100px; }
change the appendTo() to add the clone to a place where your CSS will also be applied to the clone. Ensure that where ever you do put it, that the element will be visible: .appendTo('.container-outer')
Again, this function assumes that the element is only hidden because it's inside a hidden container. If the element itself is display:none, you can simply add some code to make the clone visible before you retrieve it's offset width. Something like this:
$.fn.getHiddenOffsetWidth = function () {
var hiddenElement $(this)
width = 0;
// make the element measurable
hiddenElement.show();
// calculate the width of the element
width = hiddenElement.outerWidth();
// hide the element again
hiddenElement.hide();
return width;
}
This would work in a situation like this:
<style>
.measure-me {
display: none;
width: 120px;
}
</style>
<div class="container">
<div class="measure-me"></div>
</div>
Two options:
position the element outside the viewport (ex: left:-10000px)
use visibility: hidden or opacity: 0 instead of hide().
Either way will work as hiding the element but still being able to get the computed width. Be careful with Safari on thi, it's awfully fast and sometimes too fast...
Actual jQuery plugin!
Usage:
console.log('width without actual: ' + $('#hidden').width());
console.log('width with actual: ' + $('#hidden').actual('width'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>
<div style="width: 100px; display: none;">
<div id="hidden"></div>
</div>
If you know the element to be the full width of a parent element another approach is to create a recursive method:
es5:
var getWidth;
getWidth = function($el){
return $el.offsetWidth || getWidth($el.parentElement);
}
var width = getWidth(document.getElementById('the-element'));
es6:
let getWidth
getWidth = ($el) => $el.offsetWidth || getWidth($el.parentElement)
const width = getWidth(document.getElementById('the-element'))
What I did was ;
by the time hiding that element, stored its width in its dataset.
It only will work for you if you can hide programmatically.
ie.
When Hiding ;
var elem = $("selectorOfElement");
elem.dataset.orgWidth = elem.clientWidth;
Later when getting ;
var elem = $("selectorOfElement");
var originalWidthWas = elem.dataset.orgWidth;
thats because its hidden via display: none; What ive done in the past is to make a "reciever" div which i use absolute positioning on to get it off the page. Then i load the new element into that, grab the dimensions and then remove it when im done - then remove the reciever when im done.
Another thing you can do is to not use hide(); but to instead set visibility: hidden; display: ; However this means the blank area will be rendered wherever the node is attached.
var $hiddenElement = $('#id_of_your_item').clone().css({ left: -10000, top: -10000, position: 'absolute', display: 'inline', visibility: 'visible' }).appendTo('body');
var width = parseInt($hiddenElement.outerWidth());
$hiddenElement.remove();
I try to find working function for hidden element but I realize that CSS is much complex than everyone think. There are a lot of new layout techniques in CSS3 that might not work for all previous answers like flexible box, grid, column or even element inside complex parent element.
flexibox example
I think the only sustainable & simple solution is real-time rendering. At that time, browser should give you that correct element size.
Sadly, JavaScript does not provide any direct event to notify when element is showed or hidden. However, I create some function based on DOM Attribute Modified API that will execute callback function when visibility of element is changed.
$('[selector]').onVisibleChanged(function(e, isVisible)
{
var realWidth = $('[selector]').width();
var realHeight = $('[selector]').height();
// render or adjust something
});
For more information, Please visit at my project GitHub.
https://github.com/Soul-Master/visible.event.js
demo: http://jsbin.com/ETiGIre/7
Sorry I am late to this conversation. I am surprised no one has mentioned getComputedStyle. (Note this only works if the CSS sets a width value)
Grab the element:
let yourEle = document.getElementById('this-ele-id');
and use the function:
getComputedStyle(yourEle).width
This returns a string so you will have to remove the numbers from the string.
This works even when the element's display style is set to none.
Other articles to read about this includes here at zellwk.com

Categories

Resources