Guys!
I feel really lost because I would like to replicate the Microsoft Azure Navigation and I don't know how to start on it or If I could make it with plugins.
If you haven't seen yet it is kind of sliding or blade navigation. Every time you press an option, displays the information on the side.
Here are a few screenshots:
I really appreciate any suggestion you could provide me :)
Having re-implemented a layout similar to Azure's, you might look at how the Start Screen demo is implemented in the Metro UI CSS Framework.
Some of the background ideas from this blog and the video at the bottom also lent some additional insight into how the Azure design concept came into being as well.
Ultimately, I made mine similar to how Azure's works in that I have a set of navigation "blades" that stay on the left side and extend out based on options and have a state management system in Angular that largely handles the rest of the blades being rendered horizontally as li elements within a ul. Within each blade is a set of vertically rendered groups that are handled by a position manager to determine placement from top to bottom within the cell.
Similar to Azure, I wrote mine in TypeScript and AngularJS and uses LESS for all the styling. The trickiest part was probably in "genericizing" so much of it so that you don't keep re-writing the wheel but can rather have specific "types" of the blade content you wish to show, then have each dynamically render and retrieve content as they're navigated to.
I've got a number of div elements that effectively keep the height at 100%, then put the navbar at the top. My left-side navigation bar is more the exception since it's usually minimized and just provides routing between the key "portals" of the site. I've got the ul that has an absolute position in the top left, again with a 100% height and each li within it has a size based on several templated sizes (just as Azure has some really narrow blades for settings and larger ones when selecting data from a table). The blade itself is relatively positioned, set to the top-left and has 100% height as well.
Unfortunately, mine doesn't exist on a public-facing site, so I'd be unable to share it for inspiration.
Related
I'm currently working on a dashboard and I'm having a design issue regarding the scrollbar in the content of the page.
A preview that shows the different parts of the site can be found here.
Purely for design purposes, I would need to keep the current content in exactly the same position (for instance, I don't believe that resizing the components using percentages would work properly in this case) but have the scrollbar totally on the right and allow scrolling in parts that are outside of the main element. In this image the parts in green represent the areas where scrolling should be enabled.
Do I need to use JavaScript (I'm using React) and a component only for the scrollbar or can I do everything in vanilla css?
Im not sure how to find what I need (name it) so I count on you to explain it for me.
I need to create javascript content navigation based on "post" or "comment" system. First of all I want to emphasize that content is not plain text but It contain HTML, images and other objects that can resize during usage.
How does it look?
One container for content divided to sections and one for dedicated navigation scroll - this scroll is snapped relatively to sections.
Whole system is very simillar to discourse posts navigation -
check discourse here
Most important thing for me is to keep synchronization for scroll and content.
If you click 3th post in scroll, content should scroll to this post - this is easy.
If you scroll by mouse content is scrolled + dedicated navigation is automatically synchronised - this is my problem I think.
What is the best* way to check which one section is my current section.
Should I find visible element? bounding rectangle? calculate it based on heights of all sections?
PS If you have any library working in similar way you can post it as addition - it can be helpful for me.
//edit
*best - simple, not too slow if I get more elements (100-1000), takes into consideration dynamic content (resize) and also supported by all modern browsers. Probably there is more than 3 methods but if you post more alternatives, Me or someone else can pick suitable solution.
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
I am a web design student and I am working on my portfolio site. I have a resume page that has a non-traditional design or layout. The problem I am running into occurs when the page is resized. Certain elements are pushed down as the window gets smaller. I need to find a way to adjust their top margin as the resize occurs, but I have not been able to accomplish this with media queries alone. Please see the following codepen for an example of the issue I am running into.
http://codepen.io/anon/pen/Hkpny
As the browser goes below 1440px, the boxes hanging from the ropes start to push down. Is there a way to use javascript to recalculate the margin-top and apply it to the elements when the user reduces or increases the window resize? The ultimate goal is to have the ropes stay connected where the red dots have been placed because I am going to give the hanging boxes a subtle swing or sway animation.
Any help would be greatly appreciated.
Thanks
I don't get it, all I had to do is to is what you did but for margin-top. You may want to play a bit with the values because I've never used scss before in my life (I'd do it with a <canvas> and javascript to begin with), but it works. http://codepen.io/anon/pen/iJgqn
Btw if you plan to display it in landscape mode on mobile, you may want to cut the shields left and right or it may get scaled very small. Maybe put them under the big shield in that case and get as much zoom on the rest as possible.
For a portfolio site I would recommend reconsidering the whole design. Just from this snippet, it seems the design is not very accessible and has too many dependencies. The concept is pretty cool but while you want to showcase your skills and creativity, you also want to showcase your understanding for accessibility (responsiveness), usability and what is trending right now (clean, minimal and flat design). I'm not saying you should fall in line and design what everyone else is, but you need to attract clients which is the whole purpose of a portfolio.
(Sorry in advance for the long post)
I'm trying to help an open source CMS project called N2 CMS modernize its drag & drop toolbox. I'm not sure what the best way to do this is, but I basically want to take a floating menu and "dock" it against the left side of a web page, such that the entire body of the page is shrunk in width. However, the functionality of this panel depends on the user's ability to drag something out of the panel and drop it onto the page.
This is what it looks like currently. There is an outer "management" page wrapper (the blue bar that is visible at the top) and an inner iframe which wraps the content page being edited. The drag & drop panel is a floating div that is rendered by including some code in the content page akin to #{ RenderToolbox(); } (it basically just writes the div + some inline CSS out to the page)
This is what I'd like it to look like, ideally. You can see how the toolbox now has the whole left column (so the page isn't obstructed) and the whole width of the page has shrunk.
Is it possible to accomplish this by injecting a <div> into the page? Maybe some kind of jquery that can re-parent the whole body inside of a <div> container? Is this even the best way of going about this sort of thing?
I guess something like this would be possible:
jQuery(function(){
$('body').wrapInner('<div class="wrap" />')
})
However, we are worried that it might be hard to make this look good on all layouts, e.g. layouts that use absolute positioning or html/body margins.
Therefore, we are turning to the larger Stack Overflow community for any advice and thoughts on this problem. Your guidance is much appreciated!