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();
Related
I want to run a script where I can specifically select ID tag where parameters are _string_n_n where '_string' = release (in this case) and 'n' = are numbers # e.g. _release_8_3
Here's my code... where I wan to run the script and get content of tag where ID matches _string_n_n
<div class="sect2">
<h3 id="_release_8_3">Release 8.3</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_3_1">QA release 8.3.1</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_release_8_2">Release 8.2</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest_2">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest_2">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_2_6">QA release 8.2.6</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Select all elements with an ID containing the following string (in this case _release_:
document.querySelectorAll("[id*='_release_']");
In jQuery: $("[id*='_release_']")
Here are more wildcards if you need a different reaction.
console.dir(document.querySelectorAll("[id*='_release_']"))
<div class="sect2">
<h3 id="_release_8_3">Release 8.3</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_3_1">QA release 8.3.1</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_release_8_2">Release 8.2</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest_2">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest_2">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_2_6">QA release 8.2.6</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
e.g. _release_8_3
var string = 'release';
var number1 = 8;
var number2 = 3;
var selector = '#_'+ [ string, number1, number2 ].join( '_' );
var element = $(selector);
element = document.querySelector(selector);
element = document.getElementById('_'+ [ string, number1, number2 ].join( '_' ) );
Have you tried any of these?
If instead you are wanting to find all ids that match a pattern, use a class instead. You can do pattern matching in lookups, however it is less performant and javascript will have to examine every single element in the dom to see if it matches your attribute pattern. Instead by giving like patterned id elements the same class, you can perform a class lookup which, along with id and tagName lookups, are some of the fastest lookups your browser can perform.
Otherwise if you feel you absolutely must do this, I would instead try to steer you towards using one of the more efficient selectors, and then using filter to find what you want. For instance in your example it looks like the pattern you gave is associated with h3 elements, so you could do.
$('h3').filter(function(){
return /^[_]release[_][0-9]+[_][0-9]+$/.test(this.id);
});
Provided I got my regex right, this would find all the h3 elements and then filter to return only those that match the pattern _release_#_# where # is any number
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();
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) {
});
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
I have managaged to count the total replies for one grandparent comment. The problem is that I have repeating markup and would like to count and display the replies for every grandparent comment. Here is what I have, also available as a fiddle:
<ol class="commentlist">
<li class="comment byuser comment-author-admin even thread-even depth-1" id="li-comment-677">
<div id="comment-677" class="grandparent">
<div class="comment-inner">comment-677
<div class="reply-info">
<div class="reply-has">has</div>
<div class="reply-count"></div>
<div class="reply-text">replies:</div>
</div>
</div>
<ul class="children">
<li class="comment byuser comment-author-admin odd alt depth-2" id="li-comment-678">
<div id="comment-678" class="parent">
<div class="comment-inner">comment-678</div>
<ul class="children">
<li class="comment byuser comment-author-admin even depth-3" id="li-comment-680">
<div id="comment-680">
<div class="comment-inner">comment-680</div>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-686">
<div id="comment-686">
<div class="comment-inner">comment-686</div>
</div>
</li>
<li class="comment byuser comment-author-admin even depth-3" id="li-comment-688">
<div id="comment-688">
<div class="comment-inner">comment-688</div>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-689">
<div id="comment-689">
<div class="comment-inner">comment-689</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt thread-odd thread-alt depth-1" id="li-comment-679">
<div id="comment-679" class="grandparent">
<div class="comment-inner">comment-679
<div class="reply-info">
<div class="reply-has">has</div>
<div class="reply-count"></div>
<div class="reply-text">replies:</div>
</div>
</div>
<ul class="children">
<li class="comment byuser comment-author-admin even depth-2" id="li-comment-682">
<div id="comment-682" class="parent">
<div class="comment-inner">comment-682</div>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt depth-2" id="li-comment-690">
<div id="comment-690" class="parent">
<div class="comment-inner">comment-690</div>
</div>
</li>
<li class="comment byuser comment-author-admin even depth-3" id="li-comment-691">
<div id="comment-691">
<div class="comment-inner">comment-691</div>
</div>
</li>
</ul>
</div>
</li>
</ol>
The javascript:
var count = $("#li-comment-677 > .grandparent > .children > li").length
var count2 = $("#li-comment-677 > .grandparent > .children > .depth-2 > .parent > .children > li").length
var count3 = +count + +count2;
$('.reply-count').text(count3);
Try this dynamic logic,
$(".grandparent").each(function(ind, val){
var nTotalComment = $(val).find(".children .comment-inner").length;
$(val).find(".reply-count").html(nTotalComment);
});
Check this jsfiddle
You should iterate through the collection. You can use the text callback function which is executed once for each element in the collection. text method calls the each method behind the scenes, so it also implicitly iterates through the collection.
$('.commentlist .reply-count').text(function() {
return $(this).closest('.comment-inner')
.next('.children')
.find('.comment')
.length;
});
http://jsfiddle.net/tzLz6/