I started using bootstrap and had a very good experience with it.
Today when I was testing it, I understood that the navigation menu doesn't work when javascript is disabled. i.e. drop down menus don't work (i know that they cannot work without javascript but atleast some alternative should be there) and the menu is not at all accessible for mobile devices having javasript turned off.
I didn't find any resources which helped to fix this online. So, is there any way (if not fix drop down menus) make the menu work on mobile devices?
Or do I have to stop using bootstrap?
Most modern mobile devices should be able to support JavaScript. And it is the recommended way of doing responsive Web pages.
However you may be able to use css for this type of function by using a hover which will display a div that you've defined and hidden further up in the css
There is also css animations if you wish to have some sort of movement.
http://www.w3schools.com/css/css3_animations.asp
Related
I am developing chat and call application in my project.
So there are 3 tabs.
people to chat
dialer to dial to particular person
chat / call history
in this tabs there are 3 portions.
header
chat / call / history portion.
tab changer navigator.
I make middle portion scrollable.
I want to make that scrollbar thinner. I don't want to use browser's default scrollbar.
For this I find "::-webkit-scrollbar" which is perfect only for chrome.
I want to apply this css to all browsers.
I find scroll plugins but I don't want to use any external plugin. I want to solve this by using jquery / css/ javascript.
is there any property or anything which can solve my issue?
The ::webkit-scrollbar pseudo element is NON-Standard and there is no way to make this cross-browser-compatible at the moment. There are good reasons why this hasn't evolved as standard yet. Just imagine some touch devices having browsers without scrollbars or with scrollbars, which are hidden by default and shown only when scrolling (to save valuable space). Custom styling would need to fit all these use cases.
Therefore I'd generally recommend you not to style the browser scrollbar with this hack. If you really need a solution, you could try jquery.scrollbar. IMHO this is no robust solution, however. It relies purely on JavaScript and may be jiggling around on some devices.
edit: further info on MDN
I was looking at flickr and noticed their carousel at the top and how smoothly it operated. Upon inspecting it, it shows "yui" but I don't see it anywhere in the YUI list of items.
http://www.flickr.com/#yui_3_5_1_3_1354482071640_111
Does anyone know what elements specifically from YUI the carousel is made from, and where they're available?
Thank you for any assistance.
The following are conclusions I'm reaching based on what I can tell from the HTML and minified JS source.
The Flickr carousel is written with very little YUI code and without using any complex component besides the transition module. Transition is used to provide a fallback for animations in older browsers. It's very smooth because it's using CSS transitions, in particular using translate3d() which works really well for moving images in one direction.
Like Quinn mentions, there's the Gallery Carousel widget. Lately I'm using ScrollView + ScrollViewPaginator and disabling drag events in non-touch devices. I like this approach because it feels like the typical carousel, but it also supports flicking through the images/pages with gestures on touch devices.
you can build it very easily using the YUI Gallery Carousel YUI Gallery Carousel
I'm looking to create a slider/scroller with javascript for the iPad. I created one using JQuery UI, but it's not supported on iPad.
I'm looking to create something simple, where the user can drag an image left and right along a track. I've looked all over the place for some simple insight on how to do that, all I find are tutorials or links to jquery plugins.
I'm not sure I can use the built-in slider from jquery-mobile, as I have specific images to use, and it doesn't look like it can be skinned.
Any help is welcome.
jQuery Tools Scrollable is iPad/touch friendly.
As an example, checkout the custom scrollable slider on trekk.com (works on iPad) that I built with jQuery Tools.
I recently used a plugin called Flexslider (http://flex.madebymufffin.com/) that supports swiping between images on iOS.
Does anybody know a good horizontal slide menu jquery plugin that could emulate Facebook's relatively new mobile site/app's menu?
Basically you have a view of all the content, and when you click a button, a menu slides from the left, moving the content a little to the right (to the width of the menu sliding in). When a button on the menu is clicked, the menu slides out of view, the content slides back, and then changes corresponding to whatever menu button was clicked.
Aldomatics code doesn't behave well in windows phone and doesn't handle orientation issues
This topic is old but here is a working solution for mobile devices (Build with Jquery) :
it's working on Windows phone, iOs and Android Devices.
I've tried to keep the code as simple as possible, it's easy to understand and modifiy.
http://apptitudes.github.com/SlidingMenuJS/
I was looking for the same thing.
The best example I can find is a paid mobile Wordpress theme:
http://themeforest.net/item/hotcake-mobile-business-html-template/1065437
Pretty slick and you could at least see how it is done.
Cheers,
I find this implementation the best example currently available:
https://github.com/aldomatic/FB-Style-Page-Slide-Menu
It's not a jQuery plug-in, per se, but it should to the trick!
I have a page using <ul> lists for navigation (Javascript changes the styling to display or not on mouseover).
This is working fine for me except in IE6 and IE7 when I have a Google Map on the page.
In this case the drop-down simply does not work. However, the page continues to work in FireFox 2.
I have done a little bit of research and discovered that this may be an example of the IE Select Box Bug, but I am not sure as the Google Map appears to be using a <div>, not an <iframe>.
Has anyone else encountered a problem similar to this, and if so do they have any recommendations on the best way to overcome this problem?
I don't know if this will fix your problem but you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists. I don't know if it will work for sure, but it's worth a shot.
I fixed a similar issue with drop-downs not appearing over flash movies in IE6/IE7/IE8 using this jQuery:
$(function () {
$("#primary-nav").appendTo("#footer");
});
Where primary-nav is the ID of the drop-down container element and footer is the ID of the last element on the page. I then used absolute positioning to relocate the dropdowns back to the top where they belong.
The reason this works is because IE respects source ordering more than it does the z-index. It still wasn't able to display over top of a Windows Media Player plugin though.
I believe that might happen because of an Active-X thingy IE 6+ uses to parse CSS.
Over time I had to adapt my work to include some IE hacks on my CSS in order for it to be compatible with several browsers.
I would first try to make a menu without Javascript, using pure CSS and including the hacks I mentioned. It would likely fix your problem. You don't actually need Javascript to change styles on mouseover and stuff like that.
If you want to check out what CSS hacking is about: click here
If you want to check out some pure CSS menu examples: click here
Hope this helps!
According to this google maps thread, you are correct - an IFrame is inserted by the google code.
You'll need to use the solution which Dan mentioned,
you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists
Alternatively, see Internet Explorer HACK/Fix For Select Box Showing through DIV.
Basically the solution is, using JavaScript, to place your css menu in an IFrame in IE6.
An alternative solution is to use JavaScript to hide the Google Map when the CSS menu is pulled down, or to replace the Google Map with a static map (maybe even a Google static map) when the CSS menu is pulled down.
I don't have an immediate answer for you, but the tools mentioned in this answer (particularly the IE DOM Inspector) may help.