I'm wondering how to achieve that.
I'm doing a scrollable one-pager and I made a menu which suppose to navigate to different sections on the page.Of course, what I need to know is what is the distance between section and top of the page. Menu is one component, the others are siblings to menu. I'd like to get it dynamically, ie. without setting it to fixed heights. I know that one answers could be to find a DOM element by JS, like so:
document.getElementById('contactSection')
and get a distance of this section from the top of the page. But it seems to be not elegant and probably not recommended way of doing this. Also it is pure JS.
Could you share how do you access to DOM independent elements?
Thanks!
Related
I'm trying to use React Slick to display several cards.
I want that on entering the page with the slider this will slide to the selected/highlighted slide.
But I cannot find a way to get an index or identifier from the react-slider, maybe I'm missing some information.
All the examples show a way to track slides, but for my case (at least I think so) I'll need to have them already indexed so I can target the one I want. Any ideas?
I am using Angular with Node to create a Web-APP. The back-end will be building a standard JSON RESTful API, and that is going normally. As for the front end, I am running into a little bit of problems. So my website is designed in a way where there are essentially TWO main displays. Eg. Two windows inside the website that can change frequently. I have NO IDEA how I should implement this! So far I have split my website into directives, eg each "display window" is its own directive, and I was thinking maybe use $localStorage and just have a bunch of ng-ifs inside each HTML file for each directive, switching the view depending on some value in $localStorage. Eg. Person clicks a button, some value in local storage changes to 10, an ng-if inside the directive displays the correct "view" inside the display because the value 10 represents some view. The problem is that I will have to put ALL my HTML in one file, and Im not even sure if this will work! Any suggestions? Any help appreciated!
PS. The two "main displays" can change without the other one changing, hence why I didnt want to group them into 1 view. They are separate entities, and programatically it makes more sense to split them up! They are also physically seperated on the screen (bottom right and top right, seperated by a bar)
For displaying two separates views in the same page, you have to use AngularUI Router because the native ngView directive only supports one.
I'm trying to accomplish something that seems easy at first glance, but ends up being quite the challenge. I have an accordion-like section of an app, where each accordion item should open a child state when activated, with a few extra requirements:
child states can (and should) be the same child state, with different parameters.
child states are not know up-front, they're loaded dynamically.
deeplinking to a child state should work as expected. The accordion item expanded and the proper content loaded.
The idea is easy, there should be one child state, which loads/shows different data depending on the passed parameter, but the template of that child state should be place in the activated accordion item, not in one fixed place.
I partially tried the multiple named views option from ui-router, but doesn't look promising, since it would actually load all those named views at the same time. Plus, I need them to by dynamic, and even though is possible to define states dynamically with for example with Future states, it doesn't seem to be the right choice here.
Right now, I can only see 2 options:
Re-parent the ui-view inside the desired accordion item (didn't work at first try but did if I re-parent the container of the ui-view) but has buggy side-effects right after the testing, and I fear some critical side effect later. Basically the parent controller get's reloaded for a second time, keeping the previous instance in memory. Plus i've seen some duplicated DOM content in places outside the scope of even the parent. I don't like this approach of course, but has the advantage of actually placing the content I need inside the container I need.
Leave the ui-view outside the accordion, position absolute-it, and manage it's position based on the current state when navigating. The position absolute is not a big deal, but I need to keep measuring the content's height, and dynamically set the height of the expanded accordion item to make it look like it's inside of it :S. To make things more difficult, I'll probably have to place some complex rules to position this correctly for the responsive design this needs.
In the end, it's a route/code hack vs a visual hack. I'm taking the visual hack since it sounds safer, but it's definitely going to be more work. Any other approach or comments will be highly appreciated.
-- Edit --
There's a better option at least for the 2 options I had in mind: create the different child states (1 child state, with params) but not associate it with a template. Just leave all the DOM in the parent state/view, and manage visibility with ng-if
Did you think about the option to use only one child state for all this and pass the additional information you need using parameters of the state?
so have URL-paramter for the accordion-section-id you want to open and other parameters for the different data to show.
Then open the correct accordion-section based on the stateParamter. Write a directive with private scope to render the content of the section and in each accordion reuse the same directive and pass it the correct data.
Then if the user clicks to open another accordion section, instead of the normal 'open'-action use a $state.go('myState, {accordion-id: 'newidtoopen', datatoShow: dataids}).
Am using angular in this simple search results page and instead of adding jquery masonry for layout and deal with timing issues I decided to give this directive a try since it plays nicely with the ng-repeat.
Unfortunately when I have a large dataset and the ng-repeat takes a second or two, the page gets all screw up and all items render on top of each other. Someone claimed that it has something to do with the last element in the ng-repeat not being loaded by the time the layout is created through the plugin.
Someone else recommended a timeout to create a delay, this option works but the user can see the layout being built, which is not the best solution.
Anyone out there that has use this directive to create a masonry layout with a large dataset?
I have a requirement which requires me to use a single dialog with two tabs. Each tab should have a CustomMultiField (multiple sets of four fields). I do not know anything about EXT JS. Can some one point me to right direction where I can find something about requirement as above.
I have built custom components without any explicit understanding of Ext JS. To understand how to set up a dialog with tabs, look at the code for the page component in /libs/foundation/component/page. A directory of all the xytpes you can use, like MultiField, is here.
If you need something that behave like one, but is not necessarily huge specific ExtJS component or custom xtype, and you do not want to dig hundreds of Adobe ‘support’ pages, trying to find some piece of useful doc.
You can simply use multifield xtype and write 4 pure JS listeners, that does what you need.