Design choice for top_nav_bar in web application(HTML) - javascript

Pretty simple question.
Its just some advice based on personal opinion and best practice.
It's difficult to explain so I'll draw the best image I can.
Try to imagine that I have any old website and at the very top I have a navigation bar which is broken into 3 rows.
Top is application: Settings, Profile, Login/Out
Second is notification: Error, new message
Third is part navigation part functional.
So we have 3 rows supporting different functionality and obviously different color schemes. Each on is no more than about 5% of the total pages height.
I supposed the question I'm asking is whats the best way to do this.
First guess was to use tables to format the data and space them out:
This worked, but It looks sloppy.
{
border-collapse: collapse;
border-spacing: 0;
}
seems to fill in any gaps in the table but it doesn't look right
Second guess was to use frame sets:
Shot myself a dirty look for even thinking of it
Third guess was to keep everything css and Html
Which seems like the most sensible one next to tables but keeping content organized with the multiple buttons and such sounds like it could be trouble.
Lastly
was use a JQuery or javascript UI library. This presents It's own set of problems but could be the prettiest if done right.
So if it was you, how would you go about doing this simple task and why?
picture of view as requested. Part in question is top nav
http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=globalview.jpg

Don't use tables for this purpose.
Only use tables for tabular data (which this isn't).
Just use divs for the containers and lis for the menus.
EDIT
This is somewhat like I would do:
http://jsfiddle.net/uf2zU/1/
This uses elements what they are meant for.
And can be easily controlled using CSS.
EDIT 2
http://jsfiddle.net/uf2zU/4/

I would go about this using sets of HTML uls and CSS, because that's the most forward thinking, plus it uses HTML the way it should be. However, if you want to use tables, try border: none; and border-collapse: collapse;

I would go with the third guess for the presentation part, because that's the most flexible part, at least for me. If you split up all the sections correctly, then the task of managing the content will become quite easy, because you will be able to target the section and style anything with it.
In addition, I would go with the last option (i.e. vanilla JavaScript and jQuery), for client side functionality, because that's the Swiss Army Knife of DOM manipulation.

A horizontal nav bar just that -- a horizontal entity. Therefore, I wouldn't "stack" elements as rows, rather as columns. It's the difference between a huge header and something that's visually much easier to comprehend. Stretch your elements out, use icons, whatever. If you have the need to be really verbose, go with a giant menu
I personally use JQuery UI Tabs whenever possible because they're a well-established UI pattern, are easy to deploy, and automatically "Ajax Load" my pages. Sure, you get a few "gotchas" but they're nothing for a competent jQuery user to overcome.
In situations where I can't use UI Tabs, I will do a pure CSS bar across the top, "floating" via absolute positioning if that is what the client specs. Layout is no place for Tables (they are for tabular content elements) and you're right that frames have no place, period. This shouldn't be any more difficult than basic page layout, so it's a no-brainer to go this route.
For notification, there are other options that are more obvious and timely. Try the Notification Widget or StackOverflow style notifications All other small, basic info could be contained on your horizontal bar.

Related

Unsure of the technical term - HTML/CSS/Javascript table questions

I have an HTML/CSS/Javascript related question, but I'm unsure of exactly how to ask, as I've long since forgotten the technical terms for everything.
My ultimate goal is to construct (code) a webpage element that does the following:
-Has a number of clickable elements (graphical buttons, not HTML "buttons") that, when clicked, display a variable amount of text that provides interesting details about certain things. If possible, some way to have these buttons "highlight" would be desired (I know how to pull off a CSS trick where the image is swapped up/down or left/right by coordinates when clicked, but I'm unsure of how to get this to work with what I intend).
-Allows me to affix some kind of a label in front of each button. (My original plan was to throw everything into an HTML table, so I could have a column on one side of the buttons that I can type labels into).
-Allows me to have an image background appear when the detail box pops up.
-Is organized such that the buttons and their title plates are on one side of the detail box, and the detail box itself is on the other side.
Example:
I have a column on the far left that has names of fruits (Apple, Orange, Banana, Pear). In a column immediately next to these names is a series of buttons aligned with each fruit name (one button per fruit name, so "Apple" then {button} on one row, then "Orange" then {button} on the next row, etc.). Clicking on that button will display, on the far right, a detailed description of each fruit, with a background image (same image for all of these detail boxes) behind this detailing text. This background image, and any text, would be hidden until a button is clicked. I would prefer it that if the same button is clicked twice, the text is once again hidden.
I've no problem constructing images for all of this, but I'm lost on the code. Is it possible to code all of this as some sort of HTML Table, so I can keep it organized? Would it be possible to have the far left column (example) have a background image, then replaceable text on top of it (thus decreasing the number of graphics)?
I apologize if my question and phrasing isn't technically descriptive. I've long since gotten too used to simple HTML pages and never really learned CSS/Javascript. If my question doesn't make sense, I'd be more than happy to draw an image to better explain my goal.
Thanks in advance for any responses.
Well, there's no single "right" way to do what you're asking. There's dozens of ways to approach this problem. It comes down to: 1) How much time do you want to spend building the solutions, and 2) Would it be an issue if you added different technologies to your project (such as Bootstrap or jQuery)?
To look it at from a general viewpoint:
There's a rule of thumb I heard somewhere that I think helps in situations like this. Every single thing on your page is a rectangle. Everything. All you're really doing is naming, styling, and manipulating these rectangles.
Any element, id, or class that you create on your html page can be manipulated by your css or javascript. And if it doesn't exist on your html page, then you can create it with css or javascript and then manipulate it.
Anything can be made into a "button", not just items specifically called out as buttons. You can choose whichever rectangles you want to be your "buttons"; you would just have to target and style them as such.
(As a piece of advice, though, I would recommend sticking with html's <button> functionality. Standardized semantics is good for everyone all around, and you can change the look and feel of these buttons however you want by using css).
To be more specific:
The traditional way to handle the hiding or showing of information on the page is by using javascript and/or jQuery.
Give all common html elements to be manipulated a class name class="example-class", and give any unique elements to be manipulated an id name id="example-id".
Here's the jQuery page regarding .hide() and .show(). (If you have any specific issues with these methods, then Stack Overflow can help). You would target the classes or ids that you named in the html.
As for organizing your page, using and nesting <div> tags is usually the way to go. Bootstrap comes with special classes that can help with the necessary roles: class="row" to help with the horizontals, class="col-SIZE-NUM" to help with the verticals, and class="well" to help with organizing sections.
Bootstrap's main page has a pretty good overview on your options: Here.
All of the above can be done with vanilla css and vanilla javascript as well. It's up to you to decide if you want to (or are even able to) make things a little easier for yourself here.
Hope this helps!

Subtly resizing elements that use Bootstrap grid classes

I'm trying to make a website that uses bootstrap's grid systems as a guide, but isn't ruled by it, to the point of looking too similar to other websites, and having all my elements either too close to each other, or too far apart, which tends to happen with the most basic usages of the 12 column layout.
Now, I know I could change the number of columns to 16 or 24 but with the way I have my project setup that would be difficult and would still be more restrictive than I'd like. So I was wondering, if I have code similar to this:
<div class="bean-game col-md-8">
<h2>Bean Curd Mixing Area</h2>
</div>
Without using the width: CSS property, or anything that overrides the Bootstrap CSS completely (which I'm concerned might make the code unmanageable in other ways), is there anything I can do with CSS, or perhaps even JavaScript or a JS library if need be, to make the.bean-game div resize relative to the width set in the Bootstrap code for the col-md-8 class?
In the case of the website I'm working on, I'd like the div bearing a col-md-8 class to be just a fraction wider (say 10px or so), so as to neatly align with the div above it, which, despite bearing another col-md-[foo] class is just outside the usual grid-system due to some minor trickery with a container div and some margins, which gave me a spacing effect I was after...
I realise this may be a difficult thing to be trying to do, but it really feels like the best way to approach this particular issue.
I've had a look into this and it seems the best solution for me at present will be using pseudo-classes (probably ::after though I haven't played around with them enough yet...) to add pseudo-padding and therefore get around the Bootstrap limitations on the fly, without have to customise my entire Bootstrap setup (which I prefer leaving on a CDN,) and without having to dirty the relation between form and function by having my JavaScript perform styling operations unrelated to user input. It's still not a 'perfect' solution, but I may use it as an opportunity to introduce some slightly more advanced styling, which will hopefully benefit the overall page aesthetic.
I will accept my own answer if this solution works out to my satisfaction.

Dynamically injecting code in Twitter Bootstrap carousel

So, I've built a responsive site with Twitter Bootstrap. The problem is that I've done this using visible-phone, visible-tablet, and visible-desktop. This means that when someone views my source code, I have whole sections that are included twice or three times, in order to get around problems with differences in span amounts, or, for instance, because a carousel on the tablet should have 2 items, while on the desktop it should have 4.
I'm wondering if I'm doing this right. Should I be injecting (or adding? Not sure of the right name) code to the DOM dynamically using Javascript, based on screen size? Or should I be editing around with my custom, very simple .php files based on screen size? I don't know, and I can't find an answer about good practice anywhere. I've tried looking at sites I like for this, but I never find a javascript script that specifically adds stuff in this situation. Given, I'm not sure what I'd be looking for.
Any pointers?
I would avoid using script to dynamically add the content; as a fellow developer that just makes it less intuitive (in my opinion) and I always aim to produce intuitive code for the chap after me.
If your requirements state that a carousel should have four items on the desktop and two on mobile, then I think your solution is completely valid.

How to split page and reveal stuff underneath?

I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)

Javascript widget inspired by iPhone UITableView?

Cocoa Touch's UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element for every single data row, a limited number of table rows is created, and simply updated with the relevant data as the user scrolls, giving the illusion of navigating up and down a very large number of table rows.
Has anyone seen this done in javascript? Is there a plugin available anywhere that will do this for me?
infinity.js works well. It will dynamically load 'pages' behind the scenes giving you the appearance that the list has been fully loaded.
More information can be found on their Github page - https://github.com/airbnb/infinity
Additionally, I've forked the project updating it to work with Zepto. I also set it up to use any scrollable div (set up with overflow: scoll) with the class 'scrollable' - https://github.com/elliotcw/infinity
I should add that I made these changes as this is great for large lists on mobile devices, which slow down when you have to many complex elements on the page.
I was looking for this as well, and infinityjs [1] doesn't seem to quite mimic the same interface as UITableView. And it was a problem for my scenario that infinityjs required that the element containing the list items already be added to the DOM.
MegaList [2] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list component to do (e.g. binding to resize events and trying to handle that automatically).
So I started writing a barebones list component, also modeled after the iOS UITableView. It's a work in progress and I'm putting in just what I need. Sources are here https://github.com/shyam-habarakada/js-virtual-list-view. I'm putting in just what I need as I go, and contributors are needed :-)
[1] http://airbnb.github.io/infinity/
[3] https://github.com/triceam/MegaList
Actually the algorithm is not difficult at all. If you know javascript you should be able to write this. The algorithm only needs the height of a cell and the height of the table.
I only know these two:
Apple's Dashcode javascript Framework has an implementation of a Table. You could take a look and see if that is what you need.
Or Cappuccino Framework which is basically Objective-J but behind the scenes is Javascript.
Clusterize.js does exactly that.
It's small and works with any tag (table, lists, divs)

Categories