How to change content of drawer? - javascript

I'm working on a note taking app, where the idea is to have a drawer that you can open on click and add notes. I would like to implement a feature, where the user clicks on a note and the content of the drawer changes from a list of the notes to only the selected note, where you could edit the note and go back to the list of notes by clicking on a back arrow. I'm not sure how to approach the part where I could change the content of the drawer by clicking on a note. I would appreciate some suggestions!

Related

Vuetify v-btn in v-bottom-navigation stays active when not pressed

I am having an issue with a button in my bottom nav in Vuetify. I have defined a bunch of buttons as routes (I am using Nuxtjs), so a button will be active if I am on that page.
There is a button in the bottom nav bar that is not a route though, and it exists to activate a v-navigation-drawer. When I click this button, the drawer slides out fine. When I click outside the drawer to get it to slide back, though, both the button of the page I am on and the button that activates the drawer are active. I want the button that activates the drawer to never be active.
Visual--
I am on the app's home page.
Here is what the bottom nav looks like before clicking the button for the v-navigation-drawer
Here is what the bottom nav looks like after I close the v-navigation-drawer. The button furthest to the right is what activates the navigation drawer, and it should never remain active after I close the drawer. Yet it does, and I need to click another button to deactivate it.
I have tried many things suggested on other questions here to fix this, including but not limited to the following: defining a custom active class for this button, using the exact prop, and using a watcher to change the value of the active value in the nav bar. None of these things have worked.
Here is the code where the issue is. I have removed the irrelevant buttons, keeping only the home and profile buttons (the profile is the problem one which stays active undesirably):
<v-bottom-navigation
app
fluid
grow
color="primary"
class="d-flex d-sm-none"
>
<v-btn
value="home"
to="/home"
nuxt
exact
>
<v-icon>
mdi-home
</v-icon>
</v-btn>
<v-btn
value="profile"
exact
#click="showProfileNavDrawer"
>
<v-icon>
mdi-account-circle
</v-icon>
</v-btn>
</v-bottom-navigation>
The profile button stays active after I close the navigation drawer it opens (while another button is active at the same time due to vue's router) and I can only deactivate the profile button by clicking another button.
How might I eliminate this issue?
EDIT
I think I figured out what was wrong, for any people coming from a search engine. It appears to be a limitation of Vuetify's bottom nav. It is intended specifically for navigation and since this button was on the bottom nav bar without an assigned route (all it did was slide out a navigation drawer, no route change), it associates itself with the current route temporarily until another route is navigated to and the bottom navigation bar's state is modified. This interpretation may be wrong, but it seems to match the behavior.
I was unable to fix the problem though due to my low knowledge of CSS (first time building a website, my day job is mostly data engineering) so I just changed my webapp's design. Apologies for anyone who was hoping for an answer :(
#genp according to the docs for v-btn, exact will match every route if passed in as a prop but no route specified. Could your btn be matching for the current route and so triggering it's active state? How about you remove the exact prop from the button in the nav. Does anything change?
Docs here.

How to make a full page JS and CSS menu

To be more specific, how do we create a JavaScript menu with CSS styling that occupies the whole page, but the menu bar will be shown. There will be an icon on the top-left. Upon clicking that icon or symbol, the menu should appear and that image should glow. And after cliking it again, the menu goes away. I tried a lot but failed. I am just 14 year old. Please help me.
If there is something like that already which is open source, please post a link so that I can get on it.
UPDATE: I did it own my own.
Try this site here which gives you different menu bars to choose from. all you need to do is download a menu and change the menu details inside the script so that you can change menu names, add more or fewer menu tabs, etc. It uses jquery and contains its own css page which you can manipulate.
In order to hide and show the menu, how about using something like a html tooltip, except for hovering over the button to open/hide the menu, you can set it so that if you click the button, it opens/hide the button ?
Try this its opensource
http://www.interspire.com/content/2005/12/07/building-an-expanding-dhtml-menu-with-css-and-javascript/
http://www.noupe.com/css/13-awesome-java-script-css-menu.html

jQuery: onclick drop-down menu with controls

I wish to create a menu (a sign-up menu), see this to get an idea of it. When user clicks on this button/link a drop-down menu appears, using which he can do something (here login).
The behaviour of the link should be the following:
The drop-down menu should appear when clicked on this button/link.
when clicked anywhere on the page (including the button/link itself), but outside the menu, the menu should disappear.
If clicked somewhere on the drop-down menu, the menu should not disappear.
All the controls in the drop-down menu should work.
I did somehow managed to get first three working, but then the controls within the drop-down menu (4th behaviour) are not working.
The javascript/jQuery code along with html code is given here (jsfiddle link, same as above). You can fork it and make changes.
Thanks.
check this
http://thefinishedbox.com/files/freebies/loginfreebie/index.html
Download tha code
http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/
I made a fork of what you have on your jsFiddle: http://jsfiddle.net/DukyJ/
If you look at the code I just added an extra div to have the page's content so I don't have to assign click events to the whole body just only to that div.
Then, I removed the return false and the stopProppagation and just added a '#' to the link in the href because it wasn't necesary.
And finally just added some style to the signin link and the singin panel so you can see that the menu appears over the content as I suppose you want it to appear.

Forcing a reload in JQuery

I am making use of the Lavalamp plugin from http://nixboxdesigns.com/projects/jquery-lavalamp/ and everything seems to be working fine except that there is a little quirk when using the back button.
For example:
If you are starting off from the home page, the hover is underneath the home menu.
Click on a new menu item, the hover appears underneath it
Click on the browser's back button, and the hover does not return to the home menu item, it stays at the previously clicked one.
I need to find a way to call the Lavalamp function when the back button is being triggered.
Hope to get some help here
It sounds like the OnBeforeUnload event is what you are looking for.

How to implement the functionality of autoscrolling page if the element is below page fold in javascript?

I want to implement a similar functionality like Template Monster's menu. I am trying to create a feature list which slides down when the user clicks on the feature. But if the link is at the bottom of the page and the user clicks on that link, the feature list is shown below the view area and the user doesn't know that it is open until he manually scrolls the browser window down.
I want to incorporate a functionality that if the feature list is not in the viewable area, the browser window automatically scrolls down to show the full list (templatemonster.com has done so with their drop down menus).
Can anybody help me?
Thanks,
Gaurav
The website which you reference is using the Prototype JavaScript framework with Scriptaculous for it's visual effects. These libraries make this sort of task much easier as there are built in controls to achieve, more or less, exactly what you want.
If you want something to slide down when a user clicks on it; you should be thinking about the event click and effect slide down Check out the demo in the manual for this.
The second aspect of scrolling can be achieved using these libraries too. Again, checkout the demo in the manual for this too. Essentially, you need to use an anchor tag to mark the point on the page where the feature exists, and then use the scrollto effect to take you to that poision on the page.
Hope this sets you on the right path.

Categories