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.
Related
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 am looking to create an image that is responsive but also expandable. I need to do this all in HTML/CSS and utlize either Javascript or JQuery to make it expandable. I'm able to do either an expandable unit, or a responsive image - but having a hard time combining the two things. Could use some examples or guidance.
So the example scenario would be, on intial page load there is a 924x70 across the page (that is responsive). If you click that unit it expands to 924x250 (this unit also needs to be responsive) - is this even possible?
Thanks in advance!
You could use responsive design through media queries to control the initial image size. Then use jquery to adjust the size on click.
Here is a basic example that uses the mouse hover to change the image size. Adjusting the window size will trigger the media queries, but you will need to do this before mouse hover. It should be a straight forward task to adjust this base example to your needs.
basic html
<img src="theImage" />
media query
#media screen and (max-width:300px){
img{width:200px;}
}
jquery
see demo
hope this helps...
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.
In General:
I need my nav to behave like a mobile app (swipe effect), but WITHOUT accessing it via a mobile product. (So JQuery Mobile and such isn't applicable here... at least I don't think.)
Specifics:
My nav (example attached below) is a set of horizontally arranged icons. I would like to be able to scroll horizontally, but instead of simply scrolling the icons over, I'd like them to slide in increments (much like how an iPhone's pages slide into discrete positions with swipes across the screen.) This means regardless of how much the user scrolls, only the same amount of slide is performed.
View work-in-progress here
My Problem:
So I currently have this (crappy/buggy) version working, but it's based on JQuery's .mousemove() which means as I cause the menu to move, the cursor is still also moving and no longer over the icon I wish to click. If I based it on .scroll(), then the containing div would have to be scrollable (which would show the scrollbars).
So: Is there...
a) an example of this already done somewhere? or
b) a way to make a div scrollable but without showing the scrollbars
This site is being used in a specific way for a specific purpose, so please don't reply just to tell me that hidden scrollbars on a scrollable div is bad juju/annoying for the users.
I found something called "Web In Touch". Could this help?
Many MANY thanks in advance.
http://www.jacksasylum.eu/ContentFlow/
Have you tried content flow? It can do horizontal scrolling for you on button presses (and you can map this to something else). I understand this isn't what you want exactly, but it might work, since you want to horizontally flow/scroll image icons.