Im in the process of making a web application with Asp.net mvc (w/html5). Following is my prototype layout plan for the application:
As you can see there are 4 different section:
Retractable side menu (docked left): This will be a side menu that will allow the user to click a button and slide it out of view. It will be scrollable with a scroller within its area.
Header Bar (docked top): Simple section with few buttons that is docked to the top.
Content Area (stretched to fit available space): This will show the content that is in focus to the user. This will be the only area that scrolls when the user scrolls the browser window
Button Bar (docked bottom): Section holding buttons for the application.
So my real issue is how you go about setting an area to be docked so that it is set to show in that area at all times even when the windows is scrolled (example would be facebook's ad bar on the right or their chat friend list). If the content area is longer than the browser window than when the user scrolls down the browser window (or if we need to implement a custom scrollable window that handles its own scrolling within the application) they will scroll down the content area, but all other areas will stay docked in view. How do you achieve this? A lot of websites seem to be doing it these days (facebook, twitter, windows azure etc). Any examples would be appreciated.
Thanks
The CSS way is to make an element's position set to fixed
This page has an example: http://davidwalsh.name/dw-content/css-fixed-position.php Look or the yellow sticky note on the top right. This is the relevant CSS for that element
.element {
position: fixed;
top: 2%;
right: 2%;
}
The nice thing about the web is that you can inspect (using Firebug or other tools) other sites to see how they build them.
That said, if you want a sticky area, I recommend StickyFloat, a jQuery plugin that works great.
I've used this wonderful jQuery plugin that provided exactly what you wanted and more..
UI Layout Plugin
Related
SEE BELOW UPDATE
LOOK AT THIS SITE AND CHECK ATTACHED IMAGE --> https://www.blinker.com/
If you see, the elements transition vertically in a smooth way on both computers and mobile devices.
They seem to have a full height based on the view-port something like the CSS rule below which is something easy to do and which accomplish full height based on viewport.
element {
height: 100vh;
}
But I am trying to do the scrolling thing.
When they scroll between each section or each element or div.
The transition goes like very smooth either by clicking on the right circle links or by doing it with your fingers on a mobile device.
(Make reference to #1 inside the image)
#1 - Can someone knows how to do this?
Also if you notice, on that site the Mobile URL Bar is always visible.
It is like they refresh the page every time, see how the favicon re-uploads every time when you go through each section.
(Make reference to #2 inside the image)
#2 - How I can accomplish that?
RESOLVED
I used this pure JS solution, it solved both problems.
https://github.com/peachananr/purejs-onepage-scroll
I have a mobile web map application within an overflow: hidden body. There is a map legend which is partially hidden on the right side of the body and a menu which is partially hidden on the bottom of the body.
The idea is to click on the partially visible part of the control and have the control slide into view.
The bottom menu is higher than the body and should therefore be scrollable in the y direction.
The problem is that I can either prevent scrolling by preventing the default on the touchmove event handler or that I enable the scrolling which means that clicking on the menu allows to move the whole body of the application all over the shop.
The application can be accessed here https://geolytix.net/mobilemap
I use Google Chrome dev tools responsive view to test the touch scroll behaviour.
I disable the scrolling on the legend item but I cannot disable the scrolling on the large menu slider on the bottom.
What I am trying to prevent is that the user just pushes the menu off the screen like so:
One way would be to add to your css
html, body {position: fixed;}
to prevent the possibility of scrolling.
Now, to make your Menu scrollable you add to your css the following lines
#sliderPanel {height: 100%;overflow-y: scroll;}
You can now scroll the Menu on the y-Axis.
The brilliant amateur that I am I decided to make a website responsive. My website has a sidebar and I figured I would use a media query to hide that sidebar and show a button to make the side bar toggle-able. I used jpanelmenu http://jpanelmenu.com/ to do this.
The problem is if you do the following it all breaks apart
shrink down browser width to mobile size
the sidebar disappears
the button to toggle the sidebar appears
press the button and the sidebar appears
expand the browser window to normal side
now I have two fricken sidebars (the one from the jpanel menu) and the original sidebar that has now reappeared because the browser window has grown and my media-query unhides it
to top it off the mobile sidebar toggle button has disappeared because we are back to normal width
clearly this won't work, so should I use modernizer and a javascript media query ala Triggering jquery with css media queries
to fix it or is there a more elegant solution my amateur mind is not seeing?
So, I'm making a fairly simple on page javascript application. While it's one page, I'd like to have several pages of data. I'd like to have the entire page be a giant horizontal accordion. Clicking on the headers on either side would switch to the requisite page. I'd like to to fill the entire page so it doesn't leave empty space. Does anybody know of such a javascript library?
Thanks for your time.
Edit: I could set the width and height of a normal accordion library from the size of the window at page-load, but that doesn't adapt to page resizing very well (at all.).
Check out iridium.com, a site I worked on a while back. It's using a jQuery plug-in called "slide deck" which may suit your needs. You'd have to style it for full-page of course.
To readjust the main div per window resize:
window.onresize = function(event) { /* adjust fullscreen div here */ }
I recently worked on a fairly similar project for my personal portfolio - much like typical accordions but to prevent user confusion from the extra-tall accordion bits, the window scrolled as the giant accordion opened. check my profile if you care to take a gander
i have created a webapp using only html css javascript using iui library i have few pages and all the content is inside one html page and for page navigation and slide effect i have used iui framework
when there is lot of content i can scroll vertically up and down which is fine however what i have also noticed is if i drag the page horizontally either left to right or right to left and also if i drag the page from top left diagonally the entire page is moving in those directions which is not good
i would like this movement to be locked and even if i use the finger to slide across or diagonally the page should stay fixed and should only move vertically up or down
do i need to write any meta tag to avoid this movement.
using only html css and javascript is there a way to fix this or are there any other alternatives without creating the app natively using xcode
If the webpage is wider than the width of the viewport then the behavior you describe will occur. However if you ensure the content width is set to 320px (and no child transparent-ish elements are pushing content past that demarcation point) then you shouldn't be able to scroll sideways.
If that's not working for you, you should be able to use the touchstart/move/end events and disable the default behavior in javascript using preventDefault() on the event object - http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Hey Sudhakar! Why not using the list?
First, check if your viewport meta is correct. Then, perhaps a media (image) is larger than the global viewport.
Last, this could also due to a width: 100% + some padding/margin. To fix that, box-sizing: border-box; could be your friend
R.