I am creating a wepapp, that has a horizontal menu. The menu is limited to 320px and has overflow set to hidden. Inside the links are wrapped in a div which has a width set to it. The list overflows on the x axis. I have applied a jquery plugin called OverScroll so you can drag this list left and right to reveal the hidden menu items.
It works great on a desktop browser but I am having difficulty on getting this to work on the iphone.
I have set up a demo at www.irfanyasin.com/iphone/
Any ideas?
Thanks
Apart from general usability issues (will people know it's slidable? I could see how this can be annoying if you use that menu often and have to slide it a lot), dragging doesn't work on most touch interfaces. You could try adding left and right buttons that scroll the menu when they click them maybe?
Also your demo doesn't work in Chrome on my desktop. Is the menu supposed to slide? It won't.
Related
Sometimes the menu bar (with menu items for DASHBOARD, SOLUTIONS, CATALOG, PRICING, etc.) at the top of the Bluemix masthead disappears when I re-size my browser window. How can I access these menu items when running with limited screen space and a narrow browser window?
The functions move to the "hamburger" menu selector in the upper left corner based on the responsive design
This is on purpose. The Bluemix console has a responsive design so features degrade as the browser window gets smaller. This is on par with what bootstrap does.
If you have any feature suggestions please leave it as a comment below and I can get it to our design team.
See this animated gif for how to access the collapsed menu items on mobile devices - http://i.stack.imgur.com/yeccF.gif
I am building a site that has a header with a fixed position which contains a select menu. The header is supposed to stay locked to the top of the screen due to the position:fixed in css. However, when clicking the select menu in mobile safari on iphone, the header no longer stays locked to the top when the ios select menu opens. It seems that ios is centering the div with the select menu onto the visible area of the screen above the menu. This doesn't happen when the page is scrolled to the top, but when the address bar is not visible, it "breaks" like so. Haven't found any other answers, maybe I'm asking the question the wrong way. I can't post links to code yet, any help is appreciated.
http://selfconstruc.tv/menu-open.PNG
http://selfconstruc.tv/menu-closed.PNG
For now I don't think there is a perfect solution to deal with the focus jumping.
In my case I hide the header on focus in and show again in focus out and it works well.
I don't know if in your case this could be a workaround.
You can try this:
// detect ios device
if(navigator.userAgent.match(/(iPad|iPhone|iPod)/gi)){
// hide header on focus in and show on focus out
jQuery("#content").focusin(function(){
jQuery('#your-header-id').hide();
})
jQuery("#content").focusout(function(){
jQuery('your-header-id').show();
})
}
The #content is a div where you should have all your controls, the jQuery .focusin() detects the focus event on parent elements, so every control will trigger the focus event. You hide the header on focus and show after that. Hope this helps!
The menu slider that the menu is popping out from the left side of the screen is awesome.
"I was just trying to see how it can be emulated in my application.
Any one has a clue how it can be achieved?"
I want it to look exactly like on the picture, with menu items on the left.
There is a similar Android Question
You can use TabbedPane for that purpose, having left menu populated with set of Actions. However, usage of TabbedPane means you have to use Tabs.
In your case, you'll most likely have to use Actions menu which pops out from the right side as this complies with Blackberry Design Guidelines and fits your goals as I can see it from the screenshot provided better.
There's an issue when accessing my website (http://www.zero11arquitetura.com.br) on iPad or iPhone with iOS 5 that I can´t fix. When window is scrolled thru code every position:fixed elements click event stop working. Can you please help me ?
This site structure uses a top menu div and a header div with position: fixed css. When user clicks on a menu item window scrolls horizontally until it reaches its target.
Clicking in the menu item is done by jQuery click method on each img tag and scrolling is done by jQuery animate method ($("html:not(:animated),body").animate({ scrollLeft: varDestino }, 1500);)
When page is loaded the menu works just as I intended but, after it scrolls thru menu, and I try to click on another menu item nothing happens. The strangest thing is that everything works again when user manually scrolls the window (by finger).
It looks like that by changing window scroll position by code (jQuery calls window.scroll) fixed elements lost its clickable position references.
Is there any workaround for this ?
Thanks,
I've solved this with a trick. I've created invisible divs over the menu items that changes it's position when page scrolls (simulating afixed element over the real position: fixed menu items). When user clicks or hover over those invisble divs the real ones are called
As you may know not long time ago facebook added several new features. One of them was a "New Stories" button which when clicked expands (with what I guess is a slideToggle effect) and shows new stories.
Here is the button I am talking about:
I would like to know How to achieve same slide / toggle effect and fade in effect that comes in after this button is clicked, with a help of jQuery.
I tried searching for this on internet, but all effects I found were regular slideToggle effects, I mean they started showing div from top and slided down to it's bottom (here is what I mean by regular content http://jsfiddle.net/TwxB4/), where as one facebook uses starts from the bottom of the hidden div and sort of slides to the top of it. (You will see what I mean if you check it on facebook).
Edit: I am only looking for a slideToggle effect and nothing else, I want to be abble to expand and shrink hidden div when user clicks on the link that lunches the effect.
Edit: Here is an illustration of the effect I'm looking for:
This example works the way you described, showing bottom content first:
http://jsfiddle.net/SBLNn/16/
Also full screen view here:
http://jsfiddle.net/SBLNn/16/embedded/result/
They may also do it by having the overflow of the feed hidden, and then setting a negative margin on the inner feed wrapper, then when you click they just animate that negative margin down to 0.
Does this works for you
http://jsfiddle.net/wb7h6/1/
updated version
http://jsfiddle.net/wb7h6/9/ I hope this is what you need
You want slideToggle() I think. See this jsFiddle.