my html looks like this
<div id="menu">
<h3>Section 1</h3>
<div>
<p>I'm the first section!</p>
</div>
<h3>Section 2</h3>
<div>
<p>I'm the second section!</p>
</div>
<h3>Section 3</h3>
<div>
<p>I'm the third section!</p>
</div>
</div>
And this is my js
$(document).ready(function() {
$('#menu').accordion();
});
Somehow my accordion is not working even though I took this directly off of codeacademy. Previously, I had made my own accordion and it wasn't working so I took it off codeacademy where i first learnt it and still it wasn't working. I am hosting off google. Is something wrong with this?
I tried adding header: 'h3'
but it still has no effect. It just looks like an alternate of h3 and divs.
Your link to jquery should come before jquery UI or else it would not work.
Related
Is there any way to make jQuery Mobile Collapsible elements close all other expanded collapsibles whenever you expand another collapsible element?
This is because in my collapsible list, I want only one item expanded at any time.
I checked the documentation, and theres an event that fires whenever you expand a collapsible. I included this in the <script> tag below. I'm not sure if this is the best way to do this or if its some other simple way to do it. And also I have no idea how to traverse the document to close all opened collapsibles.
<div data-role="collapsible">
<h3>Item 1</h3>
<p>Content 1</p>
</div>
<div data-role="collapsible">
<h3>Item 2</h3>
<p>Content 2</p>
</div>
<script>
$( ".selector" ).collapsible({
expand: function(event, ui) {
// code here to close all opened collapsibles, but i need input how to do this
}
});
</script>
The answer was simple.
jQuery Mobile will visually style a set of collapsibles as a group and will make the set behave like an accordion in that only one collapsible can be open at a time if you wrap the collapsibles in a div that has the attribute data-role="collapsibleset".
http://api.jquerymobile.com/collapsibleset/
Making the final code:
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>Item 1</h3>
<p>Content 1</p>
</div>
<div data-role="collapsible">
<h3>Item 2</h3>
<p>Content 2</p>
</div>
</div>
I am working on a site that uses Bootstrap for desktop and jQuery Mobile for mobile devices. I am running into a problem with the HTML structure for tabs in Bootstrap vs. pages in jQuery Mobile. Essentially the jQuery Mobile pages end up being nested if I use Bootstrap's HTML (as seen below). When the jQuery Mobile data-role="page" tags are nested it does not seem to work. Any ideas?
<div class="tabbable" data-role="page"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1" data-role="page">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2" data-role="page">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
The solution I used to solve this problem was a jquery mobile plugin called subpage.
I changed the nested pages to subpages and it worked.
I want to have a complex header and reuse it in every page.
This is my page sample:
http://jsfiddle.net/HBgTp/2/
<div data-inset="true" id="MainScreen" data-theme="a" data-role="page">
<div class="MainHeaderPlaceHolder">
<!-- PUT HERE THE HEADER -->
</div>
</div>
<div id="MainHeaderWrapper">
<div data-inset="true" data-role="header">
</div>
</div>
I am trying to inject the header like this:
$(document).ready(function(){
$(".MainHeaderPlaceHolder").append($("#MainHeaderWrapper").html());
$('.MainHeaderPlaceHolder').trigger('create');
});
Nothing happened, What is wrong?
Thanks
Personally, If you want to go down this route
var html = "some html string";//just easier than pulling it from html - to my mind anyway
$(".MainHeaderPlaceHolder").append( html );
should work, but that's what you're doing so...
I'm building a mobile app with Cordova, Backbone for the MVC structure and jQuery Mobile for UI.
This works well except for the user experience while loading a new page. Actually a new page is created dynamically, and when it's ready, jquery mobile handles the page transition to this page. In a mobile browser this transition is slower than in a classic browser, so while page is loading the user sees a blank white screen and then appears the new page.
The matter is about my header/footer bar. I'd like it to keep showing while the content is loading, so the user will see the header/footer and only a blank/white content during the transition.
So this is a classic page structure:
<div data-role="page">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
For me the easiest way to go is like that:
<div data-role="header"></div>
<div data-role="page">
<div data-role="content"></div>
</div>
<div data-role="footer"></div>
And fix the content with CSS positioning.
But I'd like to find something smarter.
What do you think of having a single JQM page, with Backbone just updating the <div data-role="content"> for each route? What about JQM rendering? And what about transitions?
Documentation: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html
Basically you put a data-role="footer" element in each page like this:
<div data-role="footer" data-id="foo-footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Friends</li>
<li>Albums</li>
<li>Emails</li>
<li><a href="d.html" >Info</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Notice the data-id, it must be the same on all data-role="footer" elements to take advantage of the persistent toolbar option. The data-role="footer" element also must have the data-position="fixed" attribute.
Here is a demo: http://jsfiddle.net/SpRAA/
I have given up doing this in pure js. And I can't find the jquery accordian stuff i was looking over when I started this project originally. What is the best way to do this? My code is linked here
Here is jQuery UI Accordion.
All you need is:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Paragraph 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Paragraph 2
</p>
</div>
</div>
and
$(document).ready(function() {
$("#accordion").accordion();
});