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?
Related
I have a requirement to add a scroll bar that is always visible and which can be directly used by mouse or touch to scroll the contents of a large ListView.
The normal way of scrolling on mobile devices is by swiping up or down. During the scroll process there will be a small scrollbar visible but that scrollbar disappears and even while visible it can't be used to do any actual scrolling.
After much searching I could not find what I needed.
So my question is: Is there a way to make the scrollbar in the ListView fully usable or should I disable it and create a separate scrollbar which I will need to keep in sync. If so how?
For a functional example of something I would be working with see: https://fiddle.sencha.com/#fiddle/124j
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.
I need to create parallax floating gallery - when I scroll the page, images move relative to each other and the parent container, from bottom to top of the page visible area. Here's an example on another site (section - sockstagram). Basically, I need to create exactly the same effect. I've already tried to do this using the same library the mentioned example uses - Skrollr. However, it's buggy - causes issues in Safari desktop and mobile (breaks layout of some other elements on the page). Can someone point me in right direction? jQuery plugin or some custom code to achieve this. Thanks ahead.
You can use parallax.js or even a framework like MaterializeCSS which has one implemented and adds also the benefits of having a grid-based framework to design your web.
I'm taking a look to this website http://planetshine.net/demo/regolith-wp/ trying to understand how the horizontal layout is obtained.
I'm just trying to disable the javascript libraries one by one (I want to identify those essential fot the layout and those less important). And beginning to disable only the "buttons.js" library the layout already changes (for example, the vertical scroll bar appears). I would understand why this script "buttons.js" is so influential for the layout.
Some CSS styles may be added by javascript after a page is loaded. This often occurs in plugins: sliders, custom scrollbars etc. You need to inspect places, where this happens and find out, which classes or html elements disappear. Then you can recreate them manually and the whole page will work as expected.
I'm trying to implement a parallax effect to a website. But I have a question: can this be done inside a specific part of the page? Or, to force some parts of the website to be static while others are parallax?
I have a header and footer and their position is defined in the CSS with "position:fixed;". So, I'd like to have the parallax effect between them. I think that this can cause some problems because of the images positions and so on.
I made a research and all the parallax website based that I found the effect is global to all page.
I'm trying to implement a parallax effect to a website. But I have a question: can this be done inside a specific part of the page? Or, to force some parts of the website to be static while others are parallax?
Yes you can do it.
There are some problems if your page has not fixed width - you need to bind on window resize recalculations of offset() and height of your parallax div
Also you must set <img/>'s width and height.
For more performance bind event calls only if $(document).scrollTop() is in related range.