Does any one know how to use javascript with a media query?
I am wanting a left column menu which is hidden in mobile view using the bootstap 3 hidden-xs but I want to be able to click a menu button which overlays the left column over the main content area - which an x to close the menu. using
function showFunction()
{
document.getElementById("left-col").style.visibility="visible";
}
function hideFunction()
{
document.getElementById("left-col").style.visibility="hidden";
}
When testing this in a broswer this works OK but once I have clicked the cross to close the menu if I resize the screen to desktop or above the break point of the media query the left-col remains hidden.
Is there anyway around this? Or is it a waste of time trying and the benefit of this would work on a mobile rather than users on desktops resizing browsers.
Update --
In Desktop view I have 3 columns left Main Right with a header and a footer.
In Mobile I am stacking the right colum under the main hiding the left column on default
By clicking a menu icon i am displaying the left navigation over the main content, and click a cross on the left col to hide it.
But once I close the left-col when I resize to desktop - the left col stays visible and I want it to be forced back.
Thanks
Any help would be great.
Thanks
Related
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.
At the moment I'm creating a responsive web site so that it works on mobile devices as well.
The design is of such a nature that I hide a vertical menu that also contains a facebook like button when the screen width is less than 480px.
When the width is less than 480px I then display a horizontal menu (that was hidden) that also includes a Facebook Like button for the same page.
In other words, when screen width is greater than 480px then a vertical menu is displayed and the horizontal menu is hidden. When width is less than 480px the vertical menu is hidden and the horizontal menu is displayed.
The above scenario means that there will be 2 Facebook Like buttons on the same page with the same URL set.
Will this create problems?
I'm using the pageslide.js to create responsive menu. it works fine when I manually shrink down the screen size. However, once I turn on the side panel and didn't close it. it would stay there when I drag the screen to wider size and the top menu showed. Unless I refreshed the page, the panel won't disappear.Any one knows how to fix the issue?
I am developing my first HTML5 page for mobile and desktop and I need to implement slide menu button! When you first click this menu button it will open menu which covers 50% of my screen and menu contain something similar to "log in bar"(some inputs and some text; like top right corener of FB), and after you click button menu, it will be hidden!
I have implemented some solutions but I'am not satisfied with them!
One variant of my menu is to do everything right but it is visible to user all the time! Animation works fine but when I want menu to be hidden, it becomes visible right of screen.
Other possible solutions : picture and buttons go under the menu! When it opens, it "push" pictures and buttons below.
P.S i tried to add image but it seems that I don't have more than 10 reputation! Also, I didn't watch tutorials for jQuery so if any solution is theer in jQuery, please suggets me..
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?