I'm making an administrator portal for a band-website. The design is as follows:
There is a side navigation bar(on the left of the page), with things to be done (such as verify reservation requests, answer fanmails, modify band info, upload photographs to the gallery etc.). Clicking on these options should populate a form in the empty space on the right. I don't want to create a separate page for every one of them.
I have checked hell lot of websides for side navs, but i see they all redirect to links to different pages. If anybody could suggest me what all i should explore.
What you are asking about is called 'Single Page Application'. You need to use JavaScript for this. Best way is using JavaScript MVC frameworks like Angular, Ember, React etc.
Related
I know this has been asked several times, but I just can't figure out how to change the url or render a new html and make it seem as if you never leave the site.
I want to do exactly what this site does:
http://uncharted.sunbrella.com/
Does it load all the content and just change the visible objects via javascript? Do they use angular states? I can't figure out how to get that effect of seamless transition between sections of websites.
Based on their page source code, it doesn't look like they're using angular, but you certainly could use it. If you did, I would recommend using ui router with multiple views on the page.
The secret to loading html dynamically is by using ajax to request data on the fly and updating the dom via javascript.
The site you referenced used css to make the page responsive and to prevent you from scrolling until you clicked a link. After clicking it looks like the content loaded outside of the view port so you don't see the data loading until you scroll.
Long story short, to point you in the right direction, I would urge you to learn more about ajax loading and css dom manipulations. If you are familiar with Angular, checkout ui router as it would allow you to easily setup multiple views on a page.
what is the easiest most efficient - from a performance standpoint - way to program an aspx that will have sections in it rendered as tabs and preferably to be loaded on demand?
I have a certain entity that can be edited by different groups of users, each user group being able to edit certain parts of it. I am thinking of rendering the parts accessible to a group in a tab on the page and then controlling access/load of the tabs based on user rights.
i know a couple of javascript frameworks that address this specific type of requirements do exist, however i am a novice js programmer, i never used it for anything more than handling control events and doing very basic stuff so i do not know how fast i can pick up and use one of them.
You don't really need tabs for that, have it a single page and just load/display data relevant to current user group.
One way to do this (since you're using ASP.NET) is to use MultiView control and display relevant View control for the current user group.
At my company, we are debating this. Say you have a color swatches that is already built in product detail page. At the category page, where each products are displayed, doesn't have color swatches. So we are trying to build one. I was suggesting if we can use jquery or javascript to crawl it, cache it or drag it from the pdp and display it in category page. If we do that, it probably gonna be very slow because the category page is going to hit the server many times.
Additional info, we don't have access to the php codes, so only javascript, jquery and html is possible.
I am actually looking for a way to do that. of course, it has to run fast too. Any suggestions of possibility anyone?
i dont think it is possible, your jquery or javascript should be native to the page to read its contents, ok lets assume it is native and you can read the content but where do you store ? with only javascript and jquery and not much of server side it is impossible
When creating menus for html pages, there are a lot of libraries, frameworks and plugins (like mentioned here). However, having studied various options it seems to me that
the menu is a series of elements defined on one page which selectively are displayed/hidden
all content activated by menu items is contained on one and the same page - together with all menu definitions
This brings, in my opinion, two problems:
the (single) page tends towards "unmanageable" with growing size
a search on something contained on the "third page" will result in the "first page" to be opened, and for a user it may not be obvious that he/she has to click through the menu to find what he/she was looking for
So I am looking for something where menu and content is more separated, but still makes use of the styling features of a modern framework (jQuery(UI), dojo, whatever), maybe on the basis of a JSON definition that can be loaded into each separate page.
Making an answer as request. :)
The comments on your experience suggest that you ahve come across tab controls more than real navigation. Tab controls are designed to flip between content on the same page, hiding and showing content based on whcih tab is selected. This does have the drawbacks that you suggested of requiring all content to be on the same page (or to use ajax to load it).
Conversely a menu system will usually just be a way of formatting a bunch of links you give it, possibly with a hierarchical structure. Usually a menu system in the raw HTML will be an unordered list containing links and possibly other unordered lists. The exact format may vary depending on the menu system in use. The menu system will tell you to put classes on the top level or to run some javascript over a specific element.
In terms of generating this server side you are probably best off with either an include file or common server side code to generate the menus (to avoid having to maintain them individually in all the pages on your site).
Having said all that I have no specific reccomendations but I did come across http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/ whcih was the top google hit for "jquery navigation menus" and has plenty of options to look at. Additionally the one in the question you linked looks like it is a "proper" menu system.
Unless you have a huge menu option list, a tree structured ul won't be so heavy. You can have that menu on a different container, and the content in other, so it is not so unmanageable.
In the other hand, deploy the menu in a different HTTP call in order to get JSON data, and render it, could be more unmanageable than before. First, you need two HTTP calls, considering that the browser will issue only two HTTP calls to the same domain at the same time, to get the menu you are preventing the browser to get something else, or viceversa. You have to account the HTTP overhead, and that the menu query will be issued after the html and probably JS has been downloaded.
IMHO I think that the best performance is obtained keeping the html menu in the page code, and render it with CSS.
You can try to build it yourself. In the page's ready event, download a json menu data from the server with jQuery, build the html, apply the style you want and add it to the page.
I'm looking for recommendations how to implement a list of items shown as images that the user can toggle on/off on the client-side, which then can be tracked and saved on the server side.
I looked at the possibly using the asp.net list view control but as far as I can tell the client side API isn't that great so I'd need to write a significant amount of client side code.
Any suggestions on a way to do it better?
From the jQuery side, I'm a big fan of the jQuery UI model, where the UI is entirely separate from the back end. Not everyone agrees with this (cough JSF cough) but if that's the route you're willing to go, it wouldn't be that much work. What I would do:
have asp.net render out a multi-select INPUT field.
hide it with CSS
via jQuery parse out the value/text pairs (which would be value/URL)
render out the HTML you want based on the value/URLs (Such as DIVs with an IMG in each).
apply a click event to each DIV that, in turn, updates the selected value(s) of your INPUT field.
Now, the reason I like this method is it keeps the server-side code simple. And as a front-end dev, the simpler I can keep it for the back end team, the happier they seem to be.
The problem I've found with most commercial .net components is the fact that they spit out their own custom UI layer that is often full of convoluted JS and overly-complicated markup--wich makes them rather inflexible from a custom UI perspective.
Telerik has an ASP.NET AJAX control called "ListView" that allows a user to select multiple images (in the URL sample click the items in the bottom of the two panels). Because it is AJAX the selections are syncing Live with the server, however this could work if a List or similar object in the ASP.NET page was doing a List.Add() or List.Remove() as items are added and removed.
http://demos.telerik.com/aspnet-ajax/listview/examples/selecting/defaultcs.aspx