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?
Related
I am currently developing a site that is almost done, however I am having an odd issue with the navigation on mobile.
The menu is collapsed using Bootstrap 3's collapse js. Everything works great, except when you open the menu it does not render my custom css immediately. It seems to open the menu, then jumps to the correct position and coloring. When you open the menu it starts on the right side, with the incorrect background color, then jumps to the correct positioning/color.
You can view the site here: http://brookmanville.com/
This issue happens regardless of browser or mobile device.
These fixes will make your menu more mobile proof:
Remove float: right; from .navbar-nav if it's the mobile version of your website. This behavior sorts out the sudden right to left movement.
Remove the margin on .navbar-nav, and give it a width of 100%.
I'm working on a mobile site. We have two pages that are mobile optimized. The rest of the pages are just supposed to be the desktop page that when loads fits the screen. The tricky part with this is that we have a dynamic jQuery menu bar at the top that as the window size shrinks in width, the menu bar shrinks to fit the page and eventually if the window is too small it collapses all the menu options into a a single menu button.
I've been told to change this so that this menu button only appears on the two pages that are mobile optimized and show the desktop page (without the menu button) for all the other pages. To do this I want want to use <meta name="viewport" content="initial-scale=.xx"> where I would change the values of xx based off of a CSS media query. The issue I'm having is that the meta tag is html and the media query is CSS. So I can't actually change the initial scale based of the media query. Is there a way around this?
Is there a better way to do what I'm trying to do?
Any help would be greatly appreciated.
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'm building a mobile app using HTML, CSS, Javascript and jQuery.
Is there a way to scroll a div that is longer (700px) than the mobile screen (480px) using only two buttons, one for down and one for up?
So when a user presses and holds the down button it appears to scroll down the div by about 10px at a time.
Edit:
The mobile app is actually being compiled with Phonegap, so it won't be a mobile website but an actual application.
The application features dragging and dropping quite heavily and in order to do this using JQuery and HTML, I've had to bind the mousedown, mouseup and mousehover events to touch events.
Because of this the user cannot simply drag the screen to scroll as they would a typical application. Therefore, I have decided to go with physical buttons instead of scrolling the navigation div.
The navigation div is set to have a greater height than the canvas (screen height and width) div. This will be the div the user is scrolling.
Is the div you're talking about scrolling the full page itself? Or is it a specific div that you want to "scroll" within the page (kind of like an iframe)?
Both can be done. If you're scrolling the full page, I'm not sure why you'd want to use buttons rather than let Safari simply handle the standard swipe gestures. But, it could be done this way:
Use fixed positioning on the buttons so that they don't move as the rest of the screen scrolls.
Use use jQuery's .scrollTop method to do the scrolling.
If, on the other hand, you want to make a scroll effect on a single div, without the rest of the page scrolling, then just do the following:
Wrap that div in another div that has overflow:hidden; position:relative
Make the inner div position:absolute
Animate the inner div's top property to create the scrolling effect.
You may find this plugin useful: http://logicbox.net/jquery/simplyscroll/vertical.html
Anyway, why would you need that? The user may be able to scroll normally with a finger swipe if the content is bigger than the screen.
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