I am developing an application where users will be able to open tabs. For your note, I am using the Bootstrap CSS framework, and it has a tab plugin as well. (In case I need a more flexible approach I can use a different library for this job.)
http://twitter.github.com/bootstrap/javascript.html#tabs
What I need is to have a flexible width for tabs. It should work like Chrome/Firefox's tabs. If the collective width of the tabs is less than the width of the bar, it should work as it is is. However if it is longer than the width of the bar, then the size of each tab width should reduce equally. (If you open 10-20 tabs using chrome/firefox, you'll understand what I mean)
Is there any easy way to do this, without using javascript? The only solution that comes up to my mind is to get the inner width of the bar using javascript and get the width of the other tabs and sum them up. If the sum is higher, then I can resize each tab.
I can implement this solution but I fear it will be hard to ensure cross browser compatibility. Is there any easier way to achieve this?
Thanks in advance,
You don't need JavaScript as long as you can rely on a CSS algorithm that adapt width to its content: the table layout algorithm :)
See http://jsfiddle.net/r9yrM/1/ from my previous answer for examples.
Don't forget to have a minimum padding on each "cell", text stuck to a border isn't very readable (and ugly).
With JS, you could decide of a maximum number of tabs (or a minimum "reasonable" width) and above (below) that number, add a class on the parent that will trigger each tab to render as float: left and block and not table-cell anymore. Then it'll occupy 2 or more lines (like the extension Tab Mix Plus on Firefox)
You could adjust the width of nav nav-tabs li elements after they are rendered.
Calculate how many tabs fit in the parent element at their normal size and reduce each tab by a percentage of a single tab width for each tab that exceeds the max number.
I've tried to solve the same problem today... maybe my solution helps you a little more: http://www.da3x.de/blog/flexible-tab-panel-with-overlapping-elements/
It uses HTML + CSS only... no JS so far. But I think I'd need some JS to react on the actual width of the browser window.
Related
I'll try my best to explain this as clearly as I can. I'm also using the Bulma CSS framework if it matters. So the layout I'm trying to create is this.
I created a working version that can be seen in action here
However, in the working example the vh/px of the scrollable box is fixed to a certain amount and I'm using tiles from the Bulma CSS framework. I tried using columns and the same outcome occurred. If I was to not make it a fixed amount, it'll just extend past the screen, but I want it to fit the entire screen regardless of the size and the only scrollable part should be the green box I've showed above. Also, the box may not even have enough content to become scrollable in some cases, and in that case I would still like it to fill up the rest of the height with the box even if it's going to be empty.
As you can see here, if the height isn't explicitly set, it'll keep going past the screen, but if it's properly set it will work as intended. I'm wondering how I can make this height fill the space properly no matter how it's resized and etc.
Any help would be appreciated!
It sounds like you should set the height property on the wrapper of the content and set the overflow: scroll; Then all of the contents will be the height you set and have scrollable content.
I have a website which has a navigation bar go across the page in the main header. For a handheld screen device, I want the navigation list ( <ul><li>) to collapse (using CSS to set display: none;) and for a new bar to appear allowing a click to expand the menu and change the display property to display: initial;
Using CSS #media queries I can adjust that just fine and the javascript code makes the menu expand and collapse.
But once collapsed, the CSS won't override the JavaScript for larger screen sizes.
How do I ensure the navigation is always there for the larger screen size but allow it to collapse for the mobile site?
Note that there are two aspects to what you are trying to achieve: CSS + Javascript. I believe your confusion is in how these two will work together, well then let's make things clear:
You will need to code two menu bars, one for the desktop widths (anything beyond 768px or whatever you decide), and one for mobile widths, which will be at a minimum of 320px. You can use CSS media queries to display or hide each, do not use Javascript for this task.
Use Javascript (...or jQuery since it has nice functions for the following) to control the behavior of the navigation bars, such as on click events and the like. It will be good for you to look into the fadeToggle function (and similar functions) to achieve the animation of the mobile nav bar (collapsable or not).
This way you can ensure navigation is always present. A word of advice in terms of user experience: if you will be using icons to represent certain nav bar elements, make sure to use icon + text, that way it is clear to anyone what the icon represents.
Let me know if this helped you. I can write code for you but I do not want to go along and implement it without seeing what you can achieve first, feel free to edit your question with some code... the above points should be enough to get you started in the right direction.
You will have to use the desktop first approach. Write the css for what you want the style for the desktop and override using media queries later.
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
I've been investigating ways of creating a responive menu.
The standard technique would be to use a navicon on smaller devices which would trigger some kind of fly out/drop down menu.
I would like the most common options to show on screen, so I came up with the idea of a nav-bar, consisting of only a few important menu items, which would be visible on smaller devices. This would still need the navicon to display any additional items.
I then came across a menu which fulfills my requirements better in that it is more dynamic. The concept is that the menu grows as the screen size grows, but only displays an option when there is enough screen width to accomodate it fully. The remaining options are tucked beneath a dynamic navicon.
Here is the menu: http://www.money.co.uk/
As you will see changing the screen width changes the available options.
I could produce a semi-dynamic version using my media query breakpoints, but it would be good to be able to create a fully dynamic version. I'm guessing that it uses javascript - but as far as the techinque to be able to determine the available space and the space required, I don't know where to start.
I have some basic js/jquery knowledge, but would appreciate it if anyone could give me some guidance on how to go about approaching this one.
Thanks in advance.
Responsive menus are nothing, but its just a style manipulation as per screen size. You can go for CSS3 media queries to do it. It has inbuilt functionality to define the screen size.
#media (max-width: 912px) and (min-width: 681px)
Then, you need to manipulate the stylesheet. This is very common approach. Although, you can go with javascript as well by using window resize events and change your stylesheet accordingly. So whenever you will resize the window it will automatically overwrite the defined stylesheet.
Although, it is not recommended to manage it through javascript as it has lots of code complexity while managing the style. Use CSS media queries.
Hope this helps :)
I'm hoping somebody is able to point me in the right direction with what I'm hoping to achieve. I'm building a responsive site, and have a traditional navigation menu spanning the top, with several items inside.
I need for this menu to shrink when the page gets narrower, but rather than the navigation menu breaking I would like for the items that don't fit to go underneath a "More..." drop down tab. Does this make sense? Here's a graphical representation...
So the top image would be what it might look like with 1024 width, and below is the 768 width.
The content in the menu is unknown so the widths would vary, so I'd need to calculate the width of the combined links and then anything more than that would get put underneath the More.. dropdown.
Any tips would be greatly appreciated, just not sure where to start at the moment.
Thanks
Implementing this is quite simple, if the menu can be static and doesn't have to adjust when the window is resized; #skip405's example is a really good solution in this case (+1).
If the implementation has to adjust the menu dynamically on window resize, it get's tricky though... The window.onresize event is fired quite often while the user scales the browser window, so a naive implementation (e.g. #skip405's approach executed on every event) would be too slow/expensive.
I'd solve the problem as follows:
Calculate and add up the outer width of all links at the beginning.
Append all available links to the "more" tab (cloning) so they can be shown/hidden dynamically. This is much faster than creating new (resp. destroying) DOM elements all the time.
Bind a handler to the onresize event. In the handler, get the current menu width and compare it to the width of the links. Hide all links that don't fit in the menu and show their counterparts in the "more" tab. The same goes the other way round for showing links if the menu is wide enough.
Here's my implementation: http://jsfiddle.net/vNqTF/
Just resize the window and see what happens. ;) Note that the solution can still be optimized of course - it's just an example.
Here's a nice jQuery plugin that may solve the problem: https://github.com/352Media/flexMenu
Also be sure to check out a great article providing a step-by-step instructions on how to organize this kind of flexible navigation using the aforementioned flexMenu plugin: http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/
I think my variant may be a starting point for you. I'm a novice in jQuery and am learning a lot myself - so anybody, feel free to correct (and improve) my method or my logic :)
My starting point is here: http://jsfiddle.net/skip405/yN595/1/
To see it in action you need to resize the Result window so that there were 3 or 4 items in a row (not 7) and press Run again. Hover over More to see the rest of them.
In this fiddle I calculate the width of the list items in a loop and compare it with the width of the whole menu. When the calculated width of the items becomes higher than that of the menu - we can get the number of visible lis at the moment.
NB: This code works on document.ready and won't work on resizing of the window yet. So press Run when you resize the window for now.