I'm develping a website and I made all the design and the styling upon bootstrap and it is working fine. Then I wanted to add a panel for the mobile menu.
the panel is the one on the right of this example:jQuery Mobile panels, click on the plus sign
I took the panel that comes out clicking on the plus, and I worked to add it to my website (with my menu instead of the form inside the panel).
It works fine, but adding the jQuery Mobile JS completely destroyed my layout, adding lot of ui-* classes around my code and the styles attached to them.
I've tried those things:
disabling the css whole (but the panel does not work anymore)
renaming selectively only the classes that makes more mess, but it is
way too much work, just to fix a checkbox I had to rename several ui
classes.
fiddling with the js (the panel stopped working)
I just need the panel. I don't need all the creepy styling on the forms or other unwanted stuff.
Now I don't know what to do. There is another way to get this panel working withour all the mess? Why they did this js so intrusive?
You can use :
data-role="none"
If you also want to disable mobile use in mobileinit event:
$.mobile.autoInitializePage = false;
If you have several elements use a function on start load page:
$(document).on('pagebeforecreate', function( event ) {
// add the data-role="none" to desired elements...
$( "input, select", event.target ).attr( "data-role", "none" );
});
Related
I have a site with a bootstrap collapse in it. I am trying to make it open programatically when the user selects a certain radio button, its working but the collapse does not animate in it just pops in.
The code I'm using is:
$("#RadioBtn").on('change', function(){
$("#RadioCollapse").addClass('in');
})
I suspect I may have to do something involving the collapsing class, but I try applying that class to the element and it didn't animate either.
Just found bootstrap has its own built in function .collapse(); so all I had to do was
$("#RadioCollapse").collapse();
I'm building a site with a few different jQuery UI elements and I've run into a problem.
I'm trying to use this http://jqueryui.com/button/#radio but rather than having a radio button set that toggles through like a radio select should I just get three buttons that once selected remain selected.
I'm using local copies of the jQuery UI css and js files and I have two different jQuery UIs running side by side.
I'm also using the jQuery Select2 widget http://ivaynberg.github.io/select2/ but removing this and using the jqueryui.com hosted versions of jQuery UI doesn't fix my problem.
Has anybody else had any similar problems? I'd post my code but the jqueryui.com example doesn't even work.
The radio buttons work fine as plain html but don't once I've added the jQuery.
Thanks
To disable a jQuery widget button, you should use :
$(".button").button({ disabled: true });
Also open your console and see if you have errors that can cause problems.
I am using JQuery for showing and hiding my overlay and it works just great. Now I also wanted to add some animations, hence I went ahead and check out the jq docs and got some nifty animations which can be applied to the show and hide functions directly.
What though I am looking for is on clicking, the overlay should appear to come up from the from the div which I clicked on, and on closing the overlay, it should hide by minimizing into the div which was used to open it.
Thanks
Fiddle URL if you can show it here
Check this fiddle: http://jsfiddle.net/HfKTA/1/ - Guess this is what you are looking for.
Updated fiddle with multiple triggers: http://jsfiddle.net/HfKTA/2/
I'm using jQuery Mobile 1.1 and I have a fixed toolbar but I want to disable hiding it when a user clicks somewhere in the page. It would even be better if I can set that up for just specific page elements (like clicking on an input box).
I tried many methods that I found on the web (e.g. $.fixedToolbars.setTouchToggleEnabled(false);) but none of them work, probably because of the 1.1 version.
You can check my example here: http://jsfiddle.net/Leqpw/
The using is the JQM v 1.0.x method for disabling the fixed toolbar. There are multiple ways to disable this functionality.
The simplest way is to simply add data-tap-toggle="false" to your toolbar. But if you don't feel like copy and pasting a bunch of times in your project try these other methods.
$('[data-position=fixed]').fixedtoolbar({ tapToggle:false});
You can also configure it so that certain elements will ignore this behavior.
$('[data-position=fixed]').fixedtoolbar({ tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" })
Update added more info for a more complete answer.
All you need to do is add the following attribute to your header
data-tap-toggle="false"
and the tap toggling will go away.
I'm trying to find something similar to the 'Table of Contents' drop down at the top located at http://codeigniter.com/user_guide/ but for jQuery. It looks like that site uses the moo tools fx library. Does anyone know of an already existing plugin for jQuery that does the same thing or easy javascript code to accomplish the same sliding effect for that menu?
It's right there in the core; http://api.jquery.com/slideDown/ . Just call that function in a link's onclick event and you should be good to go.
$('a.expand').click(function() {
$('#toc').slideToggle(); // slide up if down, down if up.
});
To achieve that exact effect you'll just have to use the slideToggle() function built into jQuery.
$('#toggleButton').click(function(){
$('#tableOfContents').slideToggle();
});
You'll need to wrap the table of contents in and have a link/button/whatever width id="toggleButton" to activate it. Make sure the button is outside the table of contents though!
You can check out this links -
http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/
You can even google out for more. There are many of them available.
You can use the jQuery .slideDown() and .slideUp methods.
http://api.jquery.com/slideDown/
However something as big as that menu you probably want to call in on the fly with ajax with the callback function on slideDown.
Edit : The reason I recommend calling in the menu with AJAX is because of the usability/accessibility issue cause by having around 100 links off screen that a keyboard user can still tab through. It would take ages for a keyboard user to tab through all the off screen links to finally come to the "Table of Contents" link that activates the menu and then to shift tab back to the one he/she wants...terrible. The menu already does not work with JS off. (There is a link to the Table of Contents page below instead). Therefore calling the menu in with AJAX and giving the first link of the menu focus() is a much better solution.
Yep, it's mootools Fx.Slide. In jQuery you should use slideDown (http://api.jquery.com/slideDown/)