Cannot implement dynamic height jQuery Wookmark - javascript

I have some divs that have dynamic heights controlled by a 'click' function as below:
$('.expand').click(function() {
$(this).next('.collapse').slideToggle();
});
I am attempting to apply the jQuery wookmark plugin to the divs, and it works, apart from when their heights are dynamically resized by expanding one of the sections. From the documentation, I copied over one of the examples to my code, and the dynamic height works
$(document).ready(new function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#container'), // Optional, used for some extra CSS styling
offset: 30, // Optional, the distance between grid items
itemWidth: 300 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('.outerwrapper');
// Call the layout function.
handler.wookmark(options);
// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
$(this).css('height', newHeight+'px');
// Update the layout.
handler.wookmark();
});
});
You can see this working here. How can I make it so that when you click one of the headings inside the divs, the layout updates, as it does in the example. Thanks in advance.

Usually third party jQuery plugins include some kind of "Refresh" or "Resize" function.
Taking a quick look at the function, it doesn't appear to have one; however, since there is an "autoResize" option (which will reload the layout on browser resize), you could simply create a click event that triggers the "resize" event like so:
JAVASCRIPT:
$("h1.resize").live("click", function()
{
$(window).trigger('resize');
});
http://api.jquery.com/trigger/
http://api.jquery.com/resize/
EDIT:
Re-reading the question again,
Looks like this:
handler.wookmark();
should refresh the layout (based on your posted code). So you should be able to use that instead of the resize trigger.
$("h1.resize").live("click", function()
{
handler.wookmark();
});

Related

JS / jQuery How to get height of dynamic (responsive) div?

I have not been able to find an answer that works for me on SO.
Basically I have a div with an image that has fixed positioning. It is responsive and will shrink or grow to whatever the screen size is.
What I want to do is get the height anytime the screen size changes and input it as a positioning value for another div so that it there is no overlapping (due to the fixed positioning).
I can get the height initially but it never changes after the first value when the screen is being resized.
quick demo up here: link
look in console to see height being returned. notice that it doesn't change when browser is resized.
JS
$(function(){
var explore = $('#explore').height();
console.log(explore);
$( window ).on("resize", function() {
console.log(explore);
});
});
I've also tried .css("height") but that didn't fix the issue.
*note the div does not have fixed positioning on this example since it would make the layout more confusing
You are not modifying explore:
Change it as follows:
$(function(){
var explore = $('#explore').css("height");
console.log(explore);
$( window ).on("resize", function() {
explore = $('#explore').css("height");
console.log(explore);
});
});
You need to add a resize listener to the window like so:
function repositionDivOnResize() {
// this is where you'll dynamically reposition your element
}
$(window).on("resize", repositionDivOnResize)

Stop items showing before Masonry is initialised

I am trying to append Masonry elements to existing ones.
However, what I currently have is this - the items show before Masonry is initialised then jump into position a second later. I'd like them to be hidden until they're in position.
This is the code (within an infinite scroll plugin) that I'm using to append the Masonry items:
$container.append(data);
$container.imagesLoaded( function()
{
$container.masonry('reloadItems').masonry();
});
And here it is being initialised:
$(document).ready(function ()
{
$container = $('#container');
// initialize the masonry instance
$container.imagesLoaded(function(){
$container.masonry({
columnWidth: 1,
itemSelector: '.item',
transitionDuration: 0
});
});
$('#container').scrollPagination({
nop : 36, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : 'No More Posts!', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
});
});
UPDATE
Based on Josh's answer, my code now looks like this:
$container.append(data);
$container.imagesLoaded( function()
{
$(".item").show();
$container.masonry('reloadItems').masonry();
});
And I've added <class='hide'> to the item tag.
However, now no elements show up when I refresh the page.
Have them load with the bootstrap hidden class set, and remove it after masonry runs.
If masonry needs them to be visible to do its calculations, have them displayed off-screen when loaded. Z-index, crazy position, etc.
Update
http://masonry.desandro.com/methods.html
So I gave a quick glance at methods here, without this trickery I talked about, I do believe you can ajax-load your new items, then use the masonry.addItems( items ) method.

execute JS function after certain windows width

I have read few similar questions regarding the same issue and I have implemented my function. However it doesn't work as expected. I am using Bootstrap for my website thus every element on the page is responsive.
Problem description: I am using jQuery stick plugin http://stickyjs.com/ and I am making one element of my page always visible. Now what I am trying to achieve that the sticky plugin call would only work if the window width is above 1024px. Since I am using bootstrap and below 1024 px every element get stacked underneath.
Here is my function
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize >= 1024) {
$(".rightmain").sticky({
topSpacing:0
});
}
}
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});​
This code doesn't invoke the sticky plugin.
If I remover the width calculation function and simply invoke the sticky plugin like the one mentioned below then it works fine.
$(document).ready(function(){
$(".rightmain").sticky({
topSpacing:0
});
});
Also, if anyone can give me some pointers to some other library other than http://stickyjs.com/ where I have the option to disable the plugin after a certain given windows (height/width) then it would be great. Since I am using bootstrap I dont want to invoke the sticky plugin in every other cases.

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

Automatically reposition Jquery SimpleModal to center of page when modal div is resized

I'm using the SimpleModal Jquery plugin and it works great!
However, there are times that the width and height of the modal div need to be changed, so I need the modal to automatically re-position itself in the center of the page. I found out that SimpleModal uses its setPosition() function to do this. It is automatically called when the modal is launched.
So I tried to call the said function when the modal div's dimensions change, but it doesn't work:
$('#mybutton').click(function() {
//code here to resize the modal
$.modal.impl.setPosition(); //doesn't work. note that at this point, the modal is still active (displayed)
});
Do you have any ideas?
In the current version (1.3.5), you can re-position the dialog in the callback. For example:
$('#foo').modal({
onShow: function (dialog) {
var modal = this; // you now have access to the SimpleModal object
// do stuff here
// re-position
modal.setPosition();
}
});
I'm working on version 1.3.6 which will provide some convenience methods for these "utility" functions.
When you make an element (let's call it theElement) into a modal, it will be wrapped by a div#simplemodal-container. div#simplemodal-container will get the same dimentions as theElement (in fact, it will be 2px higher/wider than theElement)
You don't say what element you are actually resizing, but I guess it's theElement. If that's the case, #simplemodal-container's dimentions aren't updated, and positioning it again will have no effect. You have to resize the container explicitly.
Therefore, after resizing and before positioning again, do this:
$("#simplemodal-container").css({height: newHeight, width: newWidth});
Here i assume newHeight and newWidth is theElement's new dimentions (+2 if you want to follow simplemodal's policy)
This works for me:
var modal = $.modal("<div>...</div>");
$('#mybutton').click(function() {
//code here to resize the modal
modal.setPosition();
});

Categories

Resources