Is it even possible to have 2 different displays of the same secondary navigation on a menu?
For instance my client wants to have a horizontal main nav...with a horizontal secondary nav and ALSO a drop down secondary nav - both with the same nav links.
I ask, because they want a tertiary nav that appears horizontally OVER the horizontal sub nav. If that happens though, the user will NOT have a way to get back to the horizontal secondary nav to choose a different link unless they have a different way of getting to it. Hence the dropdown secondary nav.
I know... crazy. If I could get a definitive answer that there is NOT an easy way to get 2 secondary navs to appear at the same time, then I go back to my client with that answer.
I hope my explanation wasn't too confusing.
Rather than start with code, I would start with building a mockup.
I have found as a entrepreneur and a developer, mockups are mandatory. This is especially true of my own projects. I think I know what the UI will look like. However, once the mockup is done by the UI designer, sometimes I discover I didn't really like the result.
I now tell my UI designer to mockup what he thinks I am describing before we build live code. If we have a disagreement, I ask him to show me rather than tell me.
About half the time, the mockup demonstrates that the UI designer misunderstood what I was asking for.
Do a mockup. Get clarification. Then worry about the code.
Related
I've been trying for a while to get the bullets in Roam (RoamResearch) to extend all the way to where the filter button is in the "linked references" section at the bottom of the page. When the sidebar is close, the bullets actually do extend out that far and they can show more content on a single line. But I want to always have the bullets reach that far.
I've dug into the CSS but can't find out how. Here's a link to the Roam help page with a demo graph to dig into.
I'll attach a screenshot below to show where I want it to extend. For some reason, I just can't figure this one out. I've used the developer tools in Chrome to try and figure it out, but I just can't.
I am trying to make this specific menu from the image.
As you can see from the photo, the menu is based on filtering and submitting the custom filter. The way this menu is aimed to be used is by swiping left or right depending on the user's choice as shown in this image.
When swiped, depending on which element is currently located in the trigger point, in this case, the center of the page, it would give it a custom class as shown here.
I understand that question is too broad to be fully answered and I totally agree with that. My aim is to get some sort of help or advice in which direction should I go in order to accomplish this (using a library you know or tutorial explaining similar issues).
** Also if someone has an idea of how to make these elements swipeable, it would be of great help.
Thank you in advance.
I need suggestions in building below UI. It's a carousel like structure where active over is highlighted in green and we can still see next overs disabled or gray color.
I have researched for this for ex. Can I make use of any carousel to fit this design but can't seem to come to any conclusion. Thought of slider also but did not see that fitting this design.
Guys, do you have any suggestion or pointers to get me started here. I do not need code; just want a startup point. So far I am stuck with carousel or slider.
I understand this might not be most constructive question on SO but any pointers will be highly appreciated.
Unfortunately, you didn't provide any information about what should happen when you click on these items. If I understand correctly, you are looking for a carousel supporting your own pager design. If this is correct, you must add the pager markup first, after that you can use any carousel that supports slide switching methods. Then you can add click event listener to your pager items and call switching method in the listener, setting by that a new slide corresponding to the pager element index.
For example, you can try slick carousel, as it has .slickGoTo() method, which you can use to switch slides programmatically. You can also try to customize slick's default pager, but it might be not so easy or even impossible at all.
I developed a CSS-based layout for a web application that has been locked down and awaiting back-end integration. The primary element on the page is a timer/clock.
As originally intended, the timer is just a timer and is very simple. It looks like this:
Now, the boss has asked me to make a pretty significant change to my design. They want 3 tabs to hang off the bottom of the clock. They did not want this before, so I didn't build any show/hide logic and I didn't build tabs under the clock either. I am also slightly concerned because the tabs are at the bottom of the clock - that seems like a point of curiosity but I am guessing it is not huge problem either. Clicking on any of the tabs needs to cause the tab that was just clicked on to have focus, and it would cover the black rounded rectangle and display information about the tab the user clicked on. It would cover the clock. I would describe their request as reasonable, but I wish I'd had this requirement when I was coding. I think it sounds like a relative of a show/hide toggle. This is how they want the tabs to look, and where they want the tabs to go:
The part I am getting stuck on is how to slipstream something like this into what I've already created for the clock. Effectively they need me to make that component much more interactive, as the tabs have quite a bit of functionality within them. There are 3 tabs that I envision needing, but the mockup only shows 2, and that's ok.
I've included a few images in this post and I hope it helps. I've spent nearly a week smashing my head against this and I am stuck. To sum it up, I need to introduce (or shoehorn) a show/hide component as part of a late-hour change.
I am decent with CSS/JS/Web dev, but this is my Achilles heel. By "this" I mean taking a part of the UI that I already created and making it behave totally differently. In this case a pretty simple timer needs to change and has to have tabs at the bottom of the clock that would cover the clock itself when clicked. I hope I was clear enough in this question.
You have a very simple way to resolve this, using JQuery (you can use Javascript on it's own, but this will make it easier for you, less writing).
The give an ID to the DIV where you have the HTML for the clock, move the entire HTML content into a declaration like this:
$("#myDivId").html("put all the HTML content here, don't worry with the size of it");
you just need to change the HTML based on what you want to display. For easier implementation you can create a variable for each different content options, like this:
var myFirstHtmlBlock = "<p>blah blah blah</p>";
var mySecondHtmlBlock = "<span>Anything else...</span>";
and then change the content using those variables:
$("#myDivId").html(mySecondHtmlBlock);
Just let me know if this sorted out your issue.
Can you please point me in the right direction?
What I need is pretty much what these two random pages have:
vmware
chmprocessor
I need a layout with a header + footer and a left menu.
I am building this in asp.net and in the left sidebar I will have a treeview control.
Maybe use Master page and load user control in the content area or something similar.
I have googled, like: 2 column css layout etc, but it looks like it wont work.
I tried this one: Netrostar
and some other but I cant enter jsfiddler urls for som reason.
The left menu has problem. If I enter a long text, it will show up in the content area.
So the left sidebar must somehow have a dynamic width.
Since the left sidebar can have need for beeing very wide (if we are looking deep in the treeview hierarchy)
it is pretty convenient to use frames as they do in the two examples above.
But that was not recommended even 10 years ago, I guess.
Im no good at css, so I probably need a working example.
How would you have solved this?
Thank you