I may be trying to do things using a "handy hammer" methodology, but hopefully somebody out there has tried this as well.
Basically, I have one page with multiple views, I would like to use the jQuery accordion feature to be able to toggle them on and off.
For example:
There is a view entitled "Press Releases" and other called "Recent Blog Posts"
I would like clicking on these headers to open and close the view contents.
I guess I want to have step back from the views-accordion so that instead of the interior content items being expandable, that all the content items would expand.
Hope this makes sense!
If there is a softer and easier way of doing this, I am all ears!
Related
So I've been going round and round trying to figure out the best way to have a footer that has a hidden panel for actions that slides up. The site is pretty basic, it has a header, content area and footer. I made a simple wireframe to explain this a bit easier:
So ideally the content panel are say something like posts, when clicked I would like to open the Secondary actions panel with the edit form prepopulated with the data from the content panel. If the Icon is clicked I would like to pop that same Secondary actions panel with a blank add new post form. Where I struggle with this is the convention of how to do this and what is the best via AngularJS. The secondary actions panel and footer are wrapped within a FooterController, but the content panels are wrapped inside a separate controller. I'm not sure whether I should be using a directive or a service.
I'm currently utilizing angular-ui-router but this doesn't manage the ui events that I need to happen.
Any advice would be greatly appreciated, I'm very knew to AngularJS so I'm trying to learn the right way of doing things with AngularJS rather than just building some hacked up crap that I'll end up scrapping later on!
Thanks!
I think secondary panel should have its own ui-view (with its own controller) instead of staying inside the footer.
For it to know which item has been clicked, you can pass through the ui-router state.
Let's say your control panel has post id 1234, then it should have a ui-sref="stateName({postId: post.id})"
And this state in ui-router will specify which controller/template it should fire, and inside that controller you can get the id from $stateParams.postId
You can then use the post id to get the post either remotely or from service if you have stored them earlier.
Basically, I'm making a google drive-esqe web app, that handles storage of user's notebooks and notes that are created in the app.
For my home screen, the user will see all of their notebooks rendered out and they will be clickable. When a user clicks on the item, the item highlights, as well as checking its respective checkbox (why we have both, I don't know.) and then a menu bar is supposed to appear at the top, giving the user options to perform upon that notebook/note.
The menu bar is par of a app-wide navigational bar, but the menu is strictly for the home page only.
The problem is in the functionality of some of the menu options. The way the app currently stands is that the user may select multiple items, but some menu options will disappear when doing so (e.g. Open will disappear as we only want one note opening at a time). I currently have no idea how to go about designing this. Mainly, I have no idea how to keep track of the number of highlighted items (will provide a snippet for the highlighting below), and no idea how to get the appropriate menu options to appear/disappear when appropriate. Right now, I have a menubar.ejs that holds all the menu titles, and it is included (<%-includemenubar.ejs %>) in the navigation bar that all screens have access too.
MenuBar.ejs
<ul class="menu">
<li>Home</li>
<li>Create</li>
<li>Open</li>
<li>Download</li>
<li>Share</li>
<li>Delete</li>
</ul>
Highlighting:
var itemSelect = function(){
$('.searchResult').click(function(){
$(this).toggleClass("highlighted");
var check= $(this).find('.checkbox');
check.prop('checked', !check.prop("checked"));
}
While this probably not the best way to go about this, its the only way I could think of at the time.
I'm really VERY new to all of these languages etc, so this is a pretty daunting task for me. Any help much appreciated! Hopefully I've provided enough information, but if I haven't, I'll do my best to specify more or add more where needed.
To get all items which are highlighted you can use the jquery selector:
$('.highlighted'); // returns an array of hightlighted items
$('.highlighted').length; // number of highlighted items
The questions a little vague but in terms of designing, try to think of the app in terms of views/contexts, if I have a note open what should be able to see do?
I have list of files - and after clicking on one of them it shows the jquery form: here it is: http://jsfiddle.net/GSC3x/11/
But now I noticed, that I will need a table on this page, and I want to this list be one column in my whole table, here is the (ugly) example: http://jsfiddle.net/GSC3x/15/ .
I want the jquery form thing work the same way after changing into the table view. I mean, hide everything and make form appear.
How to do it?
Thanks!
To make the table disappear, you shouldn't hide the individual cells (as you do with $(".show_hide").hide();), but hide the whole table instead.
Also, you are reusing the button that is showing the form for hiding it, but with a completely different styling. That is weird, unnecessary and makes it difficult to use.
Use a separate button to close the form, and don't use the same event handler ($('.show_hide').click). The show and hide parts share no code anyway.
Structuring your code like this also makes it very easy to add smooth transitions like fading or, the sliding you already had implemented.
I have made a jQuery accordion menu but it doesn't seem to be acting in the default manner. Basically, when I click on a menu item the item opens as expected. However, when I click on a different menu item it also opens as expected but the first menu item remains open. The jQuery documentation states:
"An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that."
I promise it took very little effort to break this default functionality ;). Anyway, I have posted my JS, HTML and CSS on JSFiddle and am hoping someone can point me in the right direction. Other than opening and closing it works fine, even though it doesn't appear to on JSFiddle. Here's the link: JSFiddle Post
Thanks in advance.
Ken
Can You Organize your output page in the way that I at least can see the menu clearly. Its difficult to access the them in your html
I have been trying to find ways to to hover over something so that more information will appear in a different section. I have been looking at similar questions that were posted but I am still not sure how to do it.
I want "Recently on Sale" to show up first, then as I hover over the others, more information will appear for them respectively. Here is the link to what I have been working on: http://jsfiddle.net/saikirakiva/jVaLd/
I have been using just css, is javascript more suitable for what I am trying to do?
Thank you!
JavaScript is useful because it allows you to delay hiding the second element when the mouse moves away from the first element. This feature is especially important in nested drop down menus, because users frequently leave a menu item for a short time while navigating to its submenu.
you can do it like this: http://jsfiddle.net/mnbayazit/Vhg6p/9/