We are working on a mobile crossplatform application and want to be able to set an elements height as a percentage of the screenwidth.
So we have to use javascript for it.
To make it a little bit more maintainable we want to implement a custom css property: wheight. This should be a percentage value, the javascript should calculate the correct value and layout the containers.
Now we are stuck at the beginning:
We need to be a able to select all elements with the wheight css attribute. We would like to do this without traversing the dom in it's whole.
Does anybody know a method on how to do this performance friendly?
Related
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
At the moment I've been using the css line-height property in the parent div to increase the line spacing, and this works fine for the text, and even <input> elements. The only problem is any custom controls like the JQuery spinner or Chosen will try to fill up this entire line height (as they're set to display:inline-block)
Currently it appears like this:
How do I get these widgets to appear the same height as the text? I mean the default <input> elements can, so surely it's possible?
Find the element class/id and on your own style.css you can customize it's property with !important But use of !important is not considered as a good practice. (But if there's issue on one-or-two places, i think that is Ok)
Another way can be, why not making changes on jquery ui css that you are linked to.
I'm searching for a jQuery plugin which adds custom scrollbars to a div. I know, there are tons of plugins like this out there and i tried about 10 of them now with no success because i need a plugin with some very special features and i was wondering if anyone knows one which comes near.
Its very important that the plugin does not poll for changes of its content (setInterval) or that it can at least be disabled.
It must be possible to tell the plugin to update itsself manually when i know that its contents has been changed
The most important thing (which seems to be the thing that is missing on most plugins): the original element reference must be kept.
So if i do:
$("#myElement").coolScrollbarPlugin();
$("#myElement").append("<h1>New Content</h1>");
$("#myElement").coolScrollbarPlugin("update");
the plugin needs to recognize this. In the best case, the plugin takes the jquery element i applied the plugin on as its content pane to recognize any manipulation done on the element.
What i can't do:
$("#myElement").coolScrollbarPlugin();
$("#myElement").coolScrollbarPlugin("getConentElement").append("<h1>New Content</h1>");
$("#myElement").coolScrollbarPlugin("update");
This limitation is due to the surrounding application framework which will do manipulations on the scrollable elements that i'm not able to affect.
Are there any plugins that you know matching all this criteria?
Are there other ideas on how to achieve this?
If you get scrollable element by id or assign element to variable before applying scrollbar, you can try jQuery Scrollbar. The only change that is made - element is wrapped into another element with the same classes (to apply CSS styles of source element's height/width & design for scrollbar).
You can disable content/container size cheking using option autoUpdate:false and call init function to recalculate scrollbar sizes after update.
Background:
I am using the skrollr plugin as part of a Rails project that is using Slim for markup.
The plugin requires data attributes for start and end points for scrolling animations. Here is an example:
#canvas-1 data-0="top:-80px;" data-1180="top:0px;"
The plugin will basically animate the top css from data-0 (scroll position 0px) to data-1180 (scroll position 1180px).
Question:
A few elements on the page that need to be animated are positioned below containers with varying heights. So, the data-xxxx can be different depending on the content in the preceding containers. I have a javascript function that figures out the height of all the preceding elements and returns a variable of what the data-xxxx should be. This is theoretically what the output should look like in Slim:
#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"
Slim errors. No matter how I try to add the inline javascript attribute - it errors. My current solution is all javascript (which replaced the attribute completely). However, I would like to know the proper way of doing inline javascript generated attributes.
Possible?
If I'm understanding you correctly, you can do this with skrollr alone. Read the docs about relative mode https://github.com/Prinzhorn/skrollr#absolute-vs-relative-mode
Like this (you get the idea):
#logo.unit data-top="top:5px" data-200-top="top:-8px;"
Using data-anchor-target="#logo.unit" you could even have the animation of other elements depend on the position of the logo.
The Flex tile containers will create and remove tiles as the data changes and seems good to use in areas where the content is dynamic. How to implement this functionality in HTML? I guess that we need to use some JS and/or CSS. Any inputs?
You can ignore CSS altogether (for layout) and do this the same way that flex implements it. Without providing code itself, here's the basic idea (assuming horizontal layout):
When you add a child, add it to the right of the previous sibling. (c.y = s.y+s.width).
Check if current child exceeds the width of the parent. (c.y + c.width > p.width). If so, drop it to the next "row".
Of course, things get more complicated depending on whether you want to do a TileContainer or a FlowContainer. Should the layout look like a grid, or should it be more organic like paragraph wrapping? (if all you want it paragraph wrapping, I think making everything "float:left" will do that for you, but correct me if I'm wrong.). Assuming the TileContainer idea, you just need to iterate over all the children and make sure they have the same height/width (== max child height, max child width), and then do the layout steps mentioned above. You may want to place each child in a container div for easier control of elements that don't resize nicely.
And lastly, just make sure you listen for any window resize events so you can run your layout algorithm.
Check out the algorithms in "TileBase.as" in Flex if you want tips, but it might be easier just to roll your own.