jQuery wookmark plugin dynamic div height - 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. However, when you resize the window, the divs 'snap' to the right layout when one or more of them has been expanded. I know I probably have to call a function like 'updateWookmarkLayout()' after I have expanded the divs, but was not sure what to call.
You can look at this example to see more clearly what I am trying to achieve.
Any help would be much appreciated, thanks in advance!

Author of the plugin here. The Github repository contains an example of how to handle this situation. Keep a reference to the selector that you applied the layout to, and then you can simply call the wookmark function again at a later point to manually update the layout. Check "index.html" in the "example" folder in the repository to see the code.

I was using bootstrap and tried many methods to solve such issue with bootstrap collapse toggle but only thing that worked for me was jquery-resize-plugin
No need to set height of handler etc.just detect if handler is re-sized then call wookamrk layout.
handler.resize(function(){
handler.wookmark();
});

Related

What are the options for having a masonry like layout with flexbox with resizable and sortable elements

In my angular app, I'm using ui-sortable to sort an <ul>.
The elements itself are resizable.
This is similar to the setup I have:
And I would like that "4" and "5" use the space on top of them:
Here is a fiddle. Please note that this is an oversimplified example, and that the elements are actually resizable by the user and sortable.
Libraries like masonry won't do because they use absolutely positioned elements, that will undo the way the ui-sortable works, the resize won't push the element's either.
So how can I achieve this?
Have I understood correctly that this is not possible with a css only solution? That flexbox will get the height of the highest element and put that height to the "row".
Is there any js solution that won't rely on position: abolute, or rather, that it will still let me sort?
What are my options without getting rid of the libraries I already have?
What are my options getting rid of the libraries I already have?
I believe I have had a similar issue. I ended up going with http://isotope.metafizzy.co . Then once the user changes the size of the box (or order), you can run a method on the UI callback to re-layout the boxes: http://isotope.metafizzy.co/methods.html#layout

Jquery slimscroll doesn't hide

I am using jquery slimscroll plugin and I have a problem because it is shown even when there is no need, and after I move mouse, or tap on the page it hides (this happen when I navigate to the page where I use it). Is there any work around for this - I tried changing the plugin code, but the problem is it using page dimensions to determine visibility.
I have had the same issue and it's hard to believe what I found as a solution. Ready? Just remove the border on the container where you have applied the slimscroll. That fixed it.
I haven't found it necessary to look into the code but I am sure there's an easy fix for this.

hoverstate on diagonal jquery grid

I'm trying to create this grid:
I've made some html generated with jQuery and rotated that with jQuery.rotate. Now my div's are overlapping each other causing a problem to my hover state.
Couldn't find any question that looks like this, has anybody done something like this before?
If you need to look into the code I can post the html / css and javascript. Because it's quite a lot of code I'll do that by request.
well stacking too many dives on top of each other isnt that good idea as i think..
why don't you try using svg instead .. those are made for such a situation ..
but if you still want to be using divs then please show us the code for your project .. :)
Why don't you use css transform-rotate for each block with absolute positioning and then you can use jQuery to set top and left properties of all onto your grid. I've found something similar on http://neolab.no/ Here, they also used media-queries to re-positionate each block.

HTML layout design - need better approach

I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/

Jquery based image mosaic wall layouts

I'm looking to recreate the layout that's present at this site:
http://prettytasty.tumblr.com/archive/
The only way to accomplish this is using absolute positioning, however it appears that they're using javascript to dynamically position each image entry on the page. Is there a jquery plugin or example that accomplishes this or something similar?
I realize javascript is the last thing you want to have to depend on for layout, but I'm just curious and would like to see how it is accomplished.
The effect you see on that particular page is actually created with prototype.js, but for jQuery you're probably looking for the jQuery Masonry Plugin

Categories