HTML5 slide menu form right to left - javascript

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..

Related

Dropdown pushes screen focus down using UIKit

I'm using UIKit to make a dropdown. The dropdown hovers over the content, which is wanted behaviour for me. When the button is so close to the bottom of the screen that it won't have enough space to show the dropdown itself totally, it pushes the screen focus down. I'm not quite sure what's causing this, the dropdown itself gets display:block; when the button is clicked, but it needs that to be visible.
Is there some way to open the dropdown, but without the screen jumping to the bottom? (So people can see they're missing content and their reaction should be to scroll down a bit?)
I made a Codepen to show what's happening. http://codepen.io/InstaK/pen/GWYwdM

How to remove focus from the left and right carousel arrows after clicking on them?

It is a very interesting issue.
In the below image, there are left and right carousel arrows. There is a text box under each item where the user can type the name. If the user clicks on either left or the right arrow, and then, if he clicks on any input text box and clicks left, then the control still remains on the left and right arrows. I cannot go left on the input text box.
I hope I have tried explaining the issue. I cannot get the control of the textbox once I click the left/right arrow. I cannot show you the code because of company's policy. Any kind of help is appreciated.
Thanks in advance!!!
so this looks like an issue created by the carousel you are using, some carousels have implemented that wherever you click inside the carousel it will actually take it as if you are clicking the left or right arrow depending on which section of the carousel you click.
Without looking at the code Im thinking you would have to overwrite the onclick function or use a carousel that doesn't handles the feature I mentioned above.

Stop Top Menu sticking on carousel

I have made this website here: http://dijon-egg.com/Possum/
If you click on green big dot button, it takes you to page2. My problem is I can't figure and fix the menu being too big on page 2 or change view of carousel on page 2 so full carousel can show to us and top menu not sticking out onto carousel.

How can I handle hover on mobile devices like iPad?

I am new to web development and now i am faced with this problem of handling hover on devices like ipad. First i thought of removing css for hover and making it on click but, customer is insisting on having hover.
Heres the problem, I have bootstrap navbar with few menus that dropdown on hover.
But on ipad the menu drops down after clicking on the menu (ex: learn) but doesnt disappear until i click on another navigation menu say "teach".
I want to do following things using javascript/jquery.
Keep existing hover behavior on desktop and laptop
On devices like iPad, i would like the menu to disappear under following circumstances
(a) when clicked on the same menu item again
(b) When clicked on submenu
(c) When clicked outside the menu
Any sort of help here is appreciated.
Here is the fiddle http://jsfiddle.net/em656522/2/
Bootstrap's defaults are best web practices, so I would suggest staying closer in line with what's already there. The only thing you should do to customize your menu's behavior is perhaps add the hover dropdowns for desktop only. Bootstrap's responsive utility classes are also available for you to use.
You may want to read this question for some ways to approach your desktop dropdown menu.

Javascript and Media Queries show hide hidden divs

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

Categories