Scrollspy for Materialize not scrolling at all with Angularjs - javascript

I am trying to use scrollspy from Materialize (http://materializecss.com/scrollspy.html) to target each div that is created with ng-repeat.
However, it seems to me as if the scrollspy class is not doing anything. Instead of scrolling to that part of the page, the DOM just reloads and points to the portion of the page.
Another problem is that using href="/#community#sharingLove" is changing the website URL. Is there anyway for the scrollspy to work without adding to the URL?
<div class="full-height row" ng-controller="CommunityController">
<div class="col l10 main-content">
<div ng-repeat="principle in acmPrinciples" id ="{{principle.id}}" class="row full-width centering-text section scrollspy">
<div class ="col-md-12">
<h4>{{principle.title}}<h4>
</div>
<div class ="col-md-12 comm-description-container">
<p class="paragraph-style larger-font-size">
{{principle.description}}
</p>
</div>
<div class ="col-md-12">
<video class="responsive-video comm-video-height" controls>
<source ng-src="{{principle.videoURL}}" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="col l2 scroll-content">
<div class="row">
<div class="col hide-on-small-only m3 l2 scroll-items">
<ul class="section table-of-contents">
<li>Experiencing God</li>
<li>Sharing Love</li>
<li>Connecting Lives</li>
<li>Declaring Truth</li>
</ul>
</div>
</div>
</div>
</div>
I have linked included jQuery, bootstrap, and materialize. Last thing: other features of materialize work for me, just not the scrollspy. I also do
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});

I think if you remove #/community from the hrefs it should work. The href should contain the id of the block, not extra url info. Eg try using
Experiencing God

Related

Why does this.classList.toggle("classname") affect parents of this as well?

I'm creating a website and I'm having some trouble with javascript. I have this function:
function offerboxclick(obj) {
obj.classList.toggle("menuelementclicked");
}
and my html looks like this:
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
<level>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
</level>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
</div>
The css code I think isn't relevant, because the problem is probably with the js function. As you can see, I have a multi level menu, and it works just fine when I'm clicking on the level 0 element to show hidden level 1 elements. But when I click any of the level 1 elements, the js function does work properly on the object, because it toggles "menuelementclicked" class on it. The problem is that it also toggles this class in parent menu element, so at the same time it opens level 2 and closes whole menu. I don't really know what to do now. Any help would be appreciated!
P.S. I tried putting my code on jsfiddle to show you all of it but for some reason on it doesn't work there at all 0_o

Slick Carousel Permanently Off Screen

I'm attempting to create a slick carousel using the slick library http://kenwheeler.github.io/slick/
Slick is loading and it's applying classes, containers, buttons etc. properly but the slides are permanently off screen. The translate3d x value on the active slide is always set to be outside the window. When clicking the 'previous' button or dragging the slide I'm able to pull it into the screen but as soon as it reaches the 0,0,0 position it returns to being outside the screen immediately. Here is my attempt to get it to work
<div class="slick-slider homepage-slider">
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">
<p>Slide Summary</p>
</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">Slide summary</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide title</h2>
<div class="slide-caption">
<p>Slide summary</p>
</div>
</div>
</div>
</a>
</div>
</div>
In my js file I'm using
jQuery(document).ready(function() {
jQuery('.homepage-slider').slick({
rtl: true
});
});
http://jsfiddle.net/q1qznouw/549/
note: dragging works on my webpage but not within the jsfiddle sandbox
I receive no javascript errors. Is there a reason why the slides are permanently at a translate3d position outside the browser window, and when dragging onto the screen returns outside the browser window when letting go?
The issue is with your rtl setting. This requires a bit of extra markup to work (from Slick docs):
Note: the HTML tag or the parent of the slider must have the attribute
"dir" set to "rtl".
If you change your slick parent div from this:
<div class="slick-slider homepage-slider">
To this:
<div class="slick-slider homepage-slider" dir="rtl">
That should sort it

Selectize not working inside Bootstrap panel

I'm using selectize.js 0.10.1 with Bootstrap 3.0.1 in my project. When I have selectize combobox outside the collapsible Bootstrap panel, everything works great as you can see in the picture.
Working code:
<section class="container">
<div class="row" style="margin-bottom: 20px">
<div class="col-lg-4">
<select id="zastoj" placeholder="Razlog zastoja" class="demo-default selectized"></select>
</div>
</div>
</section>
When I have selectize combobox inside the collapsible panel, the combobox can not be opened/expanded on click, it looks like it's read-only.
Non-working code:
<section class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Operacije</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
</div>
</div>
</div>
</section>
I got it to work when I use Bootstrap 2.3.2 and selectize.js 0.9 in this fiddle, but I can't get it to work with Bootstrap 3.1.1 and selectize.js 0.9 in this fiddle. I even tried selectize 0.10.1, but no luck.
Can this be solved or is it some kind of version problem? I need to use Bootstrap 3.0+ in my project.
I know I'm a little late to the party, but I had a similar problem when selectize was initialized with the option:
dropdownParent: "body"
If you have this option in your selectize initialization, remove it.
The panel has the css style
overflow:hidden;
That is what keeps the selectize control from showing. You can either hard code the style or add it to your stylesheet.
<section class="container">
<div class="panel panel-primary" style="overflow:visible;">
<div class="panel-heading">
<h3 class="panel-title">Operacije</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
</div>
</div>
</div>
</section>
or in your stylesheet:
.panel, .panel-default, .panel-primary {
overflow: visible;
}
For those that are using selectize.js along with AngularJS, make sure the <select> is not inside a <div ng-if="..."> ... </div> cause it will not work. Instead, use ng-show and ng-hide instead. This also covers the scenario where a <select> is contained within a modal.
Example:
<!-- This won't work -->
<div ng-if="condition == true">
<select id="my-selectize"></select>
</div>
<!-- This will work -->
<div ng-show="condition == true">
<select id="my-selectize"></select>
</div>

Bootstrap 3 Collapse events not triggering

I am creating a menu for mobile devices and am trying to use Bootstrap 3's collapse feature.
I already have a collapse working on a different page, so I copied over the structure, gave the panel group a different id, and changed the 'data-parent's and 'panel-collapse' ids appropriately. However, this new accordion just does not work. The 'in' class does not get applied to the target .panel-collapse div, and the hrefs (ex: #navCollapse(x) ) are appearing in the address bar, instead of the normal functionality.
Here is the problematic code. (trimmed to 2 panels for brevity. Still not working as is)
<div class='panel-group' id='accordionNav' >
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse1"> <h3>About</h3></a>
</div>
<div class='panel-collapse collapse in' id='navCollapse1'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse2"><h3>Donors</h3></a>
</div>
<div class='panel-collapse collapse' id='navCollapse2'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
</div>

jQuery: Gallerific Half Working

I'm trying to get the jQuery gallerific plugin working at http://justrecip.es/ViewRecipes.aspx?recipeid=S9ML32WQO3&act=view . The gallery is loaded correctly, but neither the thumb grid nor the navigation (next/previous image) buttons work. There are no script errors, but it seems this is a JavaScript problem of some sort.
Try this
<div class="gallery-content">
<!-- Move controls above slideshow -->
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
jsFiddle example

Categories