Make a split view with jQuery mobile and a single menu code - javascript

I am looking for a split view menu.
Identical as the settings menu in an ipad.
My application use jQuery and jQuery mobile.
I have found a plugin : http://asyraf9.github.com/jquery-mobile/
The matter is, with this plugin you need to copy the menu as much as you have pages.
I won't need to navigate like if it was a tree menu.
I have like 6 steps inside the menu and they always be the same.
The plugin is a bit bugged, so I was wondering how could I make my own static splitview menu using jquery mobile.

Related

Combined JQuery menus not working

As a test I'm trying to combine 2 JQuery menus. The "Slide Down Box Menu" and the "Vertical Mega Menu". But the "Vertical Mega Menu" is not working as it should. I have tried a lot, but I can't get it to work.
On the following site you can see my test: http://members.upc.nl/b.riem/.
When you hover over the list item "Projects" a sub list appears. When you hover over the item "Job Board Website" the 2nd menu (Vertical Mega Menu) should appear, but it doesn't.
On the first page there is a link to another page. On that page I did isolate the submenu under "Projects". On that page the Vertical Mega Menu is working with all the JQuery and JavaScript references still on the page.
So, on the first page there is a conflict between the 2 menus or something wrong with the CSS but I can't figure out what it is.
May I ask everyone to take a look at it and advise me what the problem could be and how I can solve it.
Thank you very much for your help and advise.
Best Regards,
Geert De Vylder
I see that an error is being thrown from the jquery.hoverIntent.js plugin you are using. This is from line # 113 from that library that calls jquery on() method. But your jQuery is quite a bit older version (1.4.x) which does not have on() method defined. Consider upgrading your jQuery reference from google cdn as you are already using. For eg: http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js for jQuery 1.8.3

Use part jQuery mobile only

I would like to use widgets from jQuery Mobile - buttons, drop down list, etc.
I already have a site that has been developed without the use of jQuery mobile, which has its own menus and links - and when I try to add jQuery mobile framework to it, it causes all sorts of problems (overrides CSS, tries to hijack page transitions, etc).
Is it possible to disable some features of the framework?
This is related to the question: Removing unused jQuery Mobile elements? - but it deals with minimizing the script size. I only want to disable certain functinality, so it doesnt interfere with the rest of my app.
Update: Part of the problem caused by using jQuery Mobile "as is" stems from the fact that it will attempt to load all links via ajax. It can be mitigated by adding rel="external" to links, so jQM won't attempt to load it via ajax.
There is a builder for JQM coming soon. As of 5/4/2012 its still in beta. Hang in there and the feature will be available any time now. I will try to update this answer when its released.
Update here is a link to the JQM builder http://jquerymobile.com/download-builder/
Adding the data-role="none" attribute to any form or button element tells the framework to not apply any enhanced styles or scripting
Building your package with only needed components is the first step that you should do but sometimes it is not enough.
There is also a piece of code which we found recently and used to stop loading jQuery Mobile panes on one page. This is very usefull if you want to use jQuery Mobile components separately without the framework itself. In other words, you still want to have a normal page behaviour (i.e. page reloads by clicking links) and use some jQuery Mobile components.
And here is this code that did a trick for our Symfony 2 project:
(function($) {
$(document).bind('mobileinit',function() {
$.mobile.ajaxEnabled = false;
});
})(jQuery);

Jquery drop down menu offset help

This is my third jquery script, and parts of this have been taken from other scripts. I'm trying to implement the following feature:
I've spent 4 hours trying to figure out how to get the submenu to display left if the browser window is too small. Currently it only works on large resolutions too. I found one script on here, but it only detected it on page load. This script used offset(), and this caused my marquee to fail on firefox. I'd like to avoid this if possible.
The menu is running here: http://www.mantisclan.com/beta/dropdown/
I'd like to use .addClass and .removeClass to set the left: position of the submenu.
Thanks for the help, I will learn from this.
So it seems to work here: http://jsfiddle.net/JLUqH/2/. However I don't like this effect because it is quite impossible to control the menu, it pops up, collapses very fast.
Try changing the event from hover to click.
There are a lot of jQuery plugins that handle drop down menu creation for you: 38 jQuery And CSS Drop Down Multi Level Menu Solutions

Which Javascript Menu is Used on the Oracle Website?

Does somebody know a Javascript menu (in Jquery if possible) similar to the javascript menu used in Oracle?
And it must work for ie7+ and ff2+
http://www.oracle.com/index.html
This menu does not display a list of element instead, it show an entire div.
You may look for something like this menu
Demo here

How to make single-multilevel convertible, keyborad accessible, non-javascript dependent (except IE), CSS sprite dropdown navigation?

I've to write css for a simple/ horizontal menu for a CMS and i've to write css as if client will add subpages to main page and subpages of of subpages
I mean right now it's simple navigation no dropdown but in future it can single level dropdown or multilevel dropdown
and if navigation will have dropdown then dropdown links should be accessibile by keyboard also and it should work in all browsers without javascript except IE6 for IE 6 i will add javascript . I'm already using jquery on site for other things.
and i have to use css sprite for menu background image so if images is disabled then on menu link text should be shown as ALT text.
Is this possible make this type of menu with all these things?
You cannot use your keyboard to access CSS-only menus without JavaScript. That's just not possible.
But, if you can live with that, I found tonnes of stuff on google in an instance.
The first result shows some good examples of dropdown menus, but theres a huge amount of stuff out there.
Still, there are disadvantages, as you cannot make any delay at all when the user hovers the menu with the mouse. You'll need good ol' JavaScript for that, too.
Hope that helps some.

Categories