Give element height and remove it after - javascript

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' });
});

Related

Jquery slide to visibility hidden?

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/

jquery ui resizable returning the size

Hay im new to jquery and i'm trying to use resizable. I can get it to work fine but cant seem to work out how to return the new size. I would like to set the new size's to a php variables to be save in a DB. I am new to javascript and jquery so any help would be a big help.
The resizable plugin itself does not provide a method to get the sizes. I assume they did not implement this because it would just be redundancy methods on the same node, as there are already methods in jQuery core for doing this.
jQuery provides several ways to find width and height depending on what you want to do. The plain width/height methods get the css values. A lot of times it can be more useful to use the outerWidth and outerHeight methods, however, because they return the total calculated size of the element on the page, including all margins, borders, etc.
Examples:
//Width/Height of just the element (as from css)
var w = $('.selector').width()
var h = $('.selector').height()
//Width/Height of total space the element takes up with formatting (includes border and margin)
var w = $('.selector').outerWidth()
var h = $('.selector').outerHeight()
//Width/Height of the space the content of the element takes up
var w = $('.selector').innerWidth()
var h = $('.selector').innerHeight()
Edit Applying the methods to resizable events
The resizable plugin offers several events to bind to: create,start,resize, and stop. We can bind a function to get called on any of these events at initialization or any time later. As it sounds, the start event fires when you start to resize the element, stop fires when you stop resizing the element, and resize gets called everytime the size of the element changes during resizing (every pixel).
Binding at initialization:
$('.selector').resizable({
//Other options
create : function(event,ui) {...},
start : function(event,ui) {...},
stop : function(event,ui) {...},
resize : function(event,ui) {...}
});
Or binding at any point later
$('.selector').bind('resizecreate',function(event,ui) {...});
$('.selector').bind('resizestart',function(event,ui) {...});
$('.selector').bind('resizestop',function(event,ui) {...});
$('.selector').bind('resize',function(event,ui) {...});
Now, for your case, I would suggest 1 of 2 options, either binding the start and stop commands to get your original and modified sizes, or binding to resize to work with the value in real time.
Example for start/stop pattern
var startW = 0;
var startH = 0;
$('.selector').resizable({
//Other options
start : function(event,ui) {
startW = $(this).outerWidth();
startH = $(this).outerHeight();
},
stop : function(event,ui) {
endW = $(this).outerWidth();
endH = $(this).outerHeight();
alert("width changed:"+ (endW-startW) + " -- Height changed:" + (endH-endW));
}
});
Example for printing value on the move to console
$('.selector').resizable({
//other options
resize: function(event,ui) {
console.log([$(this).outerWidth(),$(this).outerHeight()]);
}
});
Hope this helps
Things may have been different at the time of these answers, but now jQuery UI makes it very easy to get information on your events and ui elements. I highly recommend console logging the ui variable, as ther eis a LOT of information available from it. However to answer your question a little bit better:
$('.selector').resizable({
stop: function (evt, ui) {
console.log(ui.size);
}
});
should yield an object with properties height and width. These are your new heights and widths of your resizable items
In case you wanted to calculate the delta of either of these values, you could reference ui.originalSize and either the height or width properties there as well.
Hope this works out a little more concisely than the other answers
example div:
<div id="div">
<p>this is the div i want to retrieve demensions</p>
<p>second paragraph</p>
</div>
retrieve the dimensions with this javascript
var width = $("#div").css("width"),
height =$("#div").css("height");
alert (width + ", " + height);
to write the dimensions back to the database will you will need to POST the values back as either part of a form or via an AJAX request

Scroll a div vertically to a desired position using jQuery

This is a followup question for this:
Scrollpane on the bottom, css is hacky, javascript is hard
I ended up doing the scrolling in the same way explained in the accepted answer.
Now there is a request that one item is selected somehow (eg. as an url parameter or by some javascript calls) I should scroll the pane to the item with the corresponding ID in the scrollpane. Like a link to an anchor () would work!
I want to make a javascript call like this
function scrollTo(id) {
$('#middle').magicallyScrollThatItemWouldBeVisible(itemid);
}
But this is not in jQuery (or at least I don't know of it). So is there a way to make it?
I'll post a simple jsFiddle here:
http://jsfiddle.net/ruisoftware/U6QdQ/4/
Help me write that scrollTo function!
A .animate would be fine too.
UPDATE: If it was not clear I would like it to only align to the left or right side of the panel, it it was overflowed on that side (so the minimum possible amount of scrolling happens)
It's not jQuery, just JavaScript, and I've actually never used it all, so I'm not sure how you would have to mess with it to get it to work in this situation, but there is a scrollIntoView function:
yourElement.scrollIntoView();
Since the elements have a fixed width, you can count the number of elements by using .index() + 1, and animate to this value (after subtracting the container's width).
If you want the element to be centered, use - Math.round(middle.width()/100)*50.
Fiddle: http://jsfiddle.net/U6QdQ/17/
//This code should be run on load / DOMReady
(function($){ //Run on load / DOMReady
$.fn.magicScrollTo = function(){
var middle = $("#middle");
var currentScrollLeft = middle.scrollLeft();
var width = middle.width();
var newScrollLeft = this.offset().left + currentScrollLeft - middle.offset().left;
if(newScrollLeft >= currentScrollLeft && newScrollLeft <= currentScrollLeft + width - this.outerWidth()) return;
if(newScrollLeft > currentScrollLeft){ //If the element is at the right side
newScrollLeft = newScrollLeft - width + this.outerWidth();
}
middle.animate({
scrollLeft: newScrollLeft,
}, 'fast')
}
})(jQuery);
Usage:
//Select the 4rd element, and scroll to it (eq is zero-based):
$('.item').eq(3).magicScrollTo();
Something along these lines would be a good start:
http://jsfiddle.net/vHjJ4/
This will bring the target into the centre of the carousel. I think you will have to add in some extra checks to make sure that it didn't scroll to far, for example if you targeted the first or last element...unless this is built into the scroll function (it might be).
I'm not sure I understand your question exactly, but it sounds like you're asking how to scroll horizontally to the selected item in the bottom pane. If so, try something like this:
//get the position of the element relative to the parent ("middle")
var pos = $("#itemid").position();
if (pos){
$("#middle").scrollLeft(pos.left);
}
From here, you can use the width of middle to center the item if needed.

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

Load content as an element scrolls into view

I have a list of search results in a <div> element with a static height and overflow: auto; in the style. I would like to load only the first x number of search results (e.g. 20), and load another x results as the user scrolls to the bottom of the element containing the search results.
Can anyone explain to me how I would do this? I found a few examples, but all of those use the scroll value of the entire document, not a single <div>. I am using jQuery, if it matters.
Sounds to me like you'd like to detect the scroll bars position when it is near the end. Found this when googling around on the jquery group. Its proposed solution with a little added documentation if needed:
$.fn.isNearTheEnd = function() {
// remember inside of $.fn.whatever = function() {}
// this is the jQuery object the function is called on.
// this[0] is DOMElement
return this[0].scrollTop + this.height() >= this[0].scrollHeight;
};
// an example.
$("#content").bind("scroll", function() {
if ($(this).isNearTheEnd()) // load some content
});
If you compare the div's .top() + .height() to the window's .scrollTop + .height then you could tell when you're at the bottom of that div, and then trigger the next content load...

Categories

Resources