I'm trying to set up the JQueryUI Accordion for my webpage. I have it working for the most part, but it seems to be excluding some text that I intended to include under one of the headers.
The text "Office for Macs" and the link below it should be under the "Remote Access Support" header, but it seems to be showing up outside of the Accordion.
I've tried changing the header option several times to no avail. Here's what I have now:
HTML:
<div class="category-tree">
<section class="category">
<h2>
Application Support
</h2>
<i class="category-empty">
empty
</i>
</section>
<section class="category">
<h2>
Mac Support
</h2>
<i class="category-empty">
empty
</i>
</section>
<section class="category">
<h2>
Windows Support
</h2>
<i class="category-empty">
empty
</i>
</section>
<section class="category">
<h2>
Mobile Device Support
</h2>
<i class="category-empty">
empty
</i>
</section>
<section class="category">
<h2>
Remote Access Support
</h2>
<section class="section">
<h3>
Office for Windows
</h3>
<ul class="article-list">
<li >
How to delegate access to your mailbox
</li>
</ul>
</section>
<section class="section">
<h3>
Office for Macs
</h3>
<i class="section-empty">
empty
</i>
</section>
</section>
</div>
And here is the Javascript:
$(function() {
$( ".category-tree").accordion({
collapsible: true,
active: false,
header: 'h2'
});
});
I created a Fiddle that includes all relevant code here: http://jsfiddle.net/ukq45wts/
Any thoughts on how I can tell JQueryUI to include the "Office for Macs" text under the last header?
Thank you in advance!
remove <section class="section"> above the 'Office For Macs' and move within the containing like so:
<section class="section">
<h3>
Office for Windows
</h3>
<ul class="article-list">
<li >
How to delegate access to your mailbox
</li>
<h3>
Office for Macs
</h3>
<li class="section-empty">empty</li>
</ul>
</section>
</div>
fiddle: http://jsfiddle.net/ukq45wts/3/
What is <i class="section-empty">?
It should be <li class="section-empty">
You need to extend the under Remote Access Support in order to include Office for Mac sunder it.
HTML Markup
<div class="category-tree"><section class="category">
<h2>Application Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Mac Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Windows Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Mobile Device Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Remote Access Support</h2>
<section class="section">
<h3>
Office for Windows
</h3>
<ul class="article-list">
<li >
How to delegate access to your mailbox
</li>
</ul>
<section class="category">
<h3>
Office for Macs
</h3>
<i class="section-empty">empty</i>
</section>
</section>
</section>
</div>
Working Fiddle
UPDATE
In Jquery you are specifying that the header for the accordion will be a h2 tag. The accordion control will then directly check for the content in the tag which is just below it as a sibling. Hence If you need to add multiple sections (In case of remote access support) you need to wrap it up in another section ( I named it multiple sections) and then define it.
So the HTML code will look like:
<div class="category-tree">
<section class="category">
<h2>Application Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Mac Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Windows Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Mobile Device Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Remote Access Support</h2>
<section class="multipleSections">
<section class="section">
<h3>
Office for Windows
</h3>
<ul class="article-list">
<li> How to delegate access to your mailbox
</li>
</ul>
</section>
<section class="section">
<h3>
Office for Macs
</h3>
<i class="section-empty">empty</i>
</section>
</section>
</section>
</div>
Working Fiddle - Updated
Related
I need a scroll spy function on a material design lite project, but the iteration is getting stuck at GroupB of the code below. I can't figure out why it's dieing. More detail and complete code here on this:
Fiddle
html sidebar
<!-- Left Col -->
<nav class="bs-docs-sidebar" id="bs-docs-sidebar">
<ul>
<li>
Basics
<ul>
<li><a href="#GroupASub1" >Summery</a></li>
</ul>
</li>
<li>
Disorders
<ul>
<li>Disease Names</li>
<li>Disease Information</li>
</ul>
</li>
<li>
Genes
<ul>
<li>PGLFirst Genes</li>
</ul>
</li>
<li>
Testing
<ul>
<li>Benefits & Indication</li>
<li>Description</li>
<li>Mutation Detection Rate</li>
<li>Specimen Requirements</li>
</ul>
</li>
<li>
References
</li>
<!-- Same for Group B & C -->
</ul>
</nav>
Content Area
<section id="GroupA" class="group">
<h2>GroupA</h2>
<div id="GroupASub1" class="subgroup">
<h4>SubGroupA1</h4>
<p>Yadda yadda</p>
<p>yadda</p>
</div>
</section>
<section id="GroupB" class="group">
<h2>GroupB</h2>
<div id="GroupBSub1" class="subgroup">
<h4>SubGroup1</h4>
<p>Yadda yadda</p>
<p>yadda</p>
</div>
<div id="GroupBSub2" class="subgroup">
<h4>SubGroup2</h4>
<p>Yadda yadda</p>
<p>yadda</p>
</div>
</section>
<section id="GroupC" class="group">
<h2>GroupC</h2>
<div id="GroupCSub1" class="subgroup">
<h4>SubGroup1</h4>
<p>Yadda yadda</p>
<p>yadda</p>
</div>
</section>
<section id="GroupD" class="group">
<h2>GroupD</h2>
<div id="GroupDSub1" class="subgroup">
<h4>SubGroup1</h4>
<p>Yadda yadda</p>
<p>yadda</p>
</div>
<div id="GroupDSub2" class="subgroup">
<h4>SubGroup2</h4>
<p>Yadda yadda</p>
<p>yadda</p>
</div>
</section>
<section id="GroupE" class="group">
<h2>GroupE</h2>
<div id="GroupESub1" class="subgroup">
<h4>SubGroup1</h4>
<p>Yadda yadda</p>
<p>yadda</p>
</div>
</section>
JS
// This finds the scrollTop based on the page wrapper
$('.mdl-layout__content').on('scroll', function() {
var windscroll = $('.mdl-layout__content').scrollTop(); // scrollTop variable - applied to content area.
// Adds an active class to the left navigation based on scroll location of content
$('.test-content section').each(function (i) {
if ($(this).position().top <= windscroll - 83) {
$('.bs-docs-sidebar li.active').removeClass('active');
$('.bs-docs-sidebar li').eq(i).addClass('active');
} else {
$('.bs-docs-sidebar li.active').removeClass('active');
$('.bs-docs-sidebar li:first').addClass('active');
}
});
}).scroll();
I am playing around with this bootstrap template ( github, emptypage code which I use ) and mostly just interested in the sidebar. However I cant seem to get scrollspy working on it in case the side menu gets too long. This is what I have:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-cogs"></i> <span>Engine of Travel</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>User</h2><br/>
</div>
</div>
<!-- /menu quick info -->
<br/>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>Side Side</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-flag"></i> Sidething <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" data-spy="scroll" data-target="#child_menu" style="display: none">
<li>Option 2
</li>
<li>Option 3
</li>
...
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript:
<script type="application/javascript">
$("#child_menu").scrollspy();
</script>
The menu generated displays elements that can fit in the screen and after that 'breaks' as you can see in the image. WHat would be the best way to get scroll to work.
I have these tabs working with no issues. The only thing is every time I click on each tab the page moves to the top. Is there any way of stopping this?
I have read previous posts and I thought the issue was to do with having <a href="#" so I have removed this. So now it is using data-tab but its still jumping to the top.
$('ul.tabs__list li').click(function(){
var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tabs');
$ct.find('ul.tabs__list li.current').removeClass('current');
$ct.find('.tabs__content.current').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
$(window).trigger('resize');
});
HTML
<div class="tabs tabs--hero">
<div class="container">
<ul class="tabs__list clear">
<li class="tabs__list--item ademi caps align-center current" data-tab="panel-1">
Containment strategy
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-2">
Aseptic Systems
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-3">
Standard Systems
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-4">
Mobile Clean Rooms
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-5">
Spare Parts
</li>
</ul>
</div>
<div class="section background--white">
<div class="container">
<div id="panel-1" class="tabs__content current">
<div class="group">
<div class="col4">
<div class="feature">
<h2 class="ademi delta primary caps line line__left line--secondary">Restricted Access Barrier Systems (RABS)</h2>
<p class="beta beta--leading">Our innovative RABS provide protection by delivering a physical and aerodynamic barrier over a critical process zone with easier access to the process in the event when intervention is required and can be used for many applications in a fill finish area.</p>
View Products<i class="icon icon-rounded-arrow-pointing-to-the-right beta"></i>
</div>
</div>
<div class="col8">
<div class="feature__slider">
<ul class="slideshow">
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
<p class="slideshow__caption alpha">Designed to provide an ergonomic and practical alternative More Details</p>
<p class="vertical-text slideshow__vertical-text alpha caps">Cell Therapy</p>
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="panel-2" class="tabs__content">
Aseptic Systems content
</div>
<div id="panel-3" class="tabs__content">
Standard Systems content
</div>
<div id="panel-4" class="tabs__content">
Mobile Clean Rooms content
</div>
<div id="panel-5" class="tabs__content">
Spare Parts content
</div>
</div>
</div>
</div>
I think no problem in your TAB js code. just add e.preventDefault();.
$('ul.tabs__list li').click(function(e){
e.preventDefault();
//code goes here.
}
add to function argument e and inside function write e.preventDefault();
First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks
I am trying to use Angular-Foundation-http://pineconellc.github.io/angular-foundation/ but it does not seem to be working. The sample itself is what I am testing (after I tried it on my own app, and it failed there also.)
Here is the plunker - http://plnkr.co/edit/?p=preview
The problem is when you click the hamburger menu icon it does not display the menu. I am not sure even how to debug the problem to figure out what is wrong. I do know if i remove the mm.foundation service it will begin to work, but then it is only foundation, no more angular directives.
Thanks!
More information found in plunker:
HTML:
<div ng-controller="OffCanvasDemoCtrl">
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">OffCanvas</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>Right Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</div>
Javascript:
angular.module('plunker', ['mm.foundation']);
angular.module('foundationDemoApp').controller('OffCanvasDemoCtrl', function ($scope) {
});