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
Related
I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?
Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.
Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)
So I have a website that has a hamburger menu on mobile.
The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.
I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.
I have Gifs of the problem. I will also provide a URL if needed.
Heres the first gif
https://gfycat.com/GiftedPlaintiveEgret
So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.
Here is the second gif
https://gfycat.com/EasyIllustriousBlackbear
In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.
And finally the third gif
https://gfycat.com/ContentRepentantBeetle
This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.
I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.
Has anyone else ever had an issue like this?
EDIT
Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this
https://gfycat.com/BouncyFlakyGlobefish
When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.
The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.
A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)
If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)
Various re-flow options available here
It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.
If not, make the media queries and don't use the margin-left:auto for the smaller screen size?
I have seen several questions about floating or fixed sidebars on Stackoverflow, but I could find none that covers this scenario.
Take a look at this page as an example: http://msdn.microsoft.com/en-us/library/aa691131(v=vs.71).aspx
When the page is scrolled up, the sidebar also scrolls up with it, until its top edge hits the top of the window. As the scrolling continues, the side bar stays fixed in its place until the page footer reaches up and pushes the sidebar up with itself.
Therefore, the sidebar is always trapped between the page header and the page footer, but within that limitation, it tries to stay visible as much as possible.
This is done by using javascript. I was wondering if you guys have already achieved something like this, or if you know of a solution, that you can share here.
Thank you.
This is a great tutorial on how to acheive this effect through jQuery... http://www.hongkiat.com/blog/css-sticky-position/
It uses jQuery .addClass() to add a class to the element when a certain scroll position is reached.
And the respective .removeClass() when the user scrolls back past.
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
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.