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.
Related
Im not sure how to find what I need (name it) so I count on you to explain it for me.
I need to create javascript content navigation based on "post" or "comment" system. First of all I want to emphasize that content is not plain text but It contain HTML, images and other objects that can resize during usage.
How does it look?
One container for content divided to sections and one for dedicated navigation scroll - this scroll is snapped relatively to sections.
Whole system is very simillar to discourse posts navigation -
check discourse here
Most important thing for me is to keep synchronization for scroll and content.
If you click 3th post in scroll, content should scroll to this post - this is easy.
If you scroll by mouse content is scrolled + dedicated navigation is automatically synchronised - this is my problem I think.
What is the best* way to check which one section is my current section.
Should I find visible element? bounding rectangle? calculate it based on heights of all sections?
PS If you have any library working in similar way you can post it as addition - it can be helpful for me.
//edit
*best - simple, not too slow if I get more elements (100-1000), takes into consideration dynamic content (resize) and also supported by all modern browsers. Probably there is more than 3 methods but if you post more alternatives, Me or someone else can pick suitable solution.
What is the best way to approach this problem?:
I have a list that has names which you can click on. When you click on the name, the list disappears and information about that name appears. However, that list is often longer than the information, so if you click on a name toward the bottom of the list... the list is replaced with the information (so the page gets shorter). However, Chrome (on OS X 10.8) keeps the current scroll position even though the scrollbar has shrunk... so a user will see just a gray screen (because the page no longer goes that far down).
Any help would be greatly appreciated! I can clarify the question if needed :)
Edit: I had previously tried what AwokeKnowing suggested, but it's not a great option because if the added content is already in the viewport scrolling to the top has a "jerky" feeling to it. You can already see it being added, so why adjust the scroll in that case? There needs to be a way to test if the content is visible in the viewport or not.
$("button").click(function(){
alert($("div").scrollTop());
});
Also, AwokeKnowing also suggested this may simply be a browser bug. If that's the case, is there a work around?
Edit 2: More specifics, the names are a list of links (<a href="#">) in a bootstrap tab-pane and clicking on them creates a new tab-pane and switches to it. The issue is that the newly created pane is significantly shorter than the one with the list on it. Switching to the shorter pane creates the unwanted behavior.
with jquery you can scroll to any element, so just scroll top your div when you handle the click
$("button").click(function(){
alert($("div").scrollTop());
});
I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.
I have been trying to understand how they did those effects in http://artofflightmovie.com/ with no success so far. I am not even sure what to google for for help. Could any one ellaborate on it and perhaps put links to plugins\tutorials\other websites doing the same thing?
There is already a similar question, but it didn't help me a bit ^^
Custom scroll bar behavior in Javascript?
All of the answers here so far are spot on and cover various pieces of the execution. Joseph's post about how we 'contained' and 'maneuvered' the site are dead-on, and those mentioning jQuery accurately depict our heavy reliance on it :)
With that said, the other concept of moving along a non-linear path was probably the most difficult part. We literally used an Illustrator file that was setup like a piece of graph paper and drew a bezier path that reflected the movement we wanted from the scrollbar. Then we 'downsampled' the path by converting the curved lines into a bunch of straight lines that represented the curve (similar to downsampling audio waveforms) to keep performance/speed high. We took those coordinates, gave them to our designer, and he created a gigantic design file and literally designed each content section at the designated 'stop' points. Next we mapped each coordinate along the path to a percentage value of the scroll position. We stored these values in a JavaScript array. Lastly we wrote some JS functions that we pipe the scroll position through to determine how to offset the positioning of the site 'container'. (It basically 'tweens' between each coordinate allowing us very fine/precise values at any given scroll percentage) The scroll functionality is handled by a tall div that basically sets our document height to force a scrollbar, and we just read it's position during a Scroll Event and slide the container around to where it should be using the above mentioned functions.
The parallax effect is achieved by applying a percentage of the position offset (what we use to move the container around) and applying it to the sub-containers of the various content sections. This makes the subcontainers move slower or faster than the background, but on the same motion path.
Lastly, the little snowboarders and helicopters (which have CSS3 rotations in addition to x,y movement in some browsers!) are positioned by using a simliar array of 'start' and 'end' positions and tweening between them based on the scroll percentage.
I'll leave it at that to keep this from turning into a book, but I'd be happy to elaborate on specifics if you're interested.
Full disclosure: I was lead developer on the site. I'm not posting to 'toot my own horn' or anything like that, just to be helpful and provide assistance to a fellow tinkerer. I come here a lot to dig through and get insight from others. (many, many thanks to those who have helped us!) Also, shameless plug, but the film is breath-taking... go rent it if you haven't yet, you won't be sorry. :)
That's a pretty cool website ;)
Basically using some javascript you can detect how far a person has scrolled. Considering the amount of scrolling you can move the contents of your webpage around if their position is absolute.
There are a couple of jQuery plugins that allow you to do simular stuff although I'm not sure you can "scroll through" a sequence of coordinates.
Here are a couple of jQuery plugins that helps you get simular effects:
http://johnpolacek.github.com/scrolldeck.js/
http://johnpolacek.github.com/scrollorama/
http://demos.flesler.com/jquery/scrollTo
http://webdev.stephband.info/parallax.html
I just picked a couple I'm familiar with but there are many plugins that are alike.
edit:
Decided to add some more simular websites for your pleasure.
http://www.activatedrinks.com
http://www.beetle.de
http://www.nikebetterworld.com
the whole page is an "overlay" - a full width and height wrapper <div>. sort of how modal windows do their "full page shadow" effect and have a small div float inside. the whole page content is in that wrapper. the scroll path is a script. the script captures the body scroll and moves the contents of the div accordingly to the positions provided by the script. with a body long enough to be scrollable (which cannot be seen since the wrapper covers the whole page), it's as if you are scrolling sideways, upwards etc.
an analogy is a modal window. the wrapper is the full-page shade. the modal window is the content. and notice how modal windows stick to the middle? that's using a script to calculate it's position to stay in the middle by moving the modal window down, relative to the page's top. but in that website's case, they move in different directions.
It doesn't seem too complicated.
Using the .scroll(function() {}) in jQuery you listen for a scroll event. When triggered you set the position style (left, top) of the content div to give the appearance of moving sideways instead of down.
I guess you'll need overflow:none property on the div to prevent users from scrolling over the area you don't want them to see.
Sounds like a lot of effort for a clunky user interface in my opinion.
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.