Scrolldeck with accordion content & nav 'active' position on Firefox - javascript

I'm currently working on a parallax website by using scrolldeck.js. And i've found some problems that i couldn't fix so if anyone wouldn't mind to offer some help here will be great :)
Problems:
1 - The navigation menus does not stop at the "active" state. It always 1 step behind which means the active state added to the previous navigation. And that's only happen in firefox.
2 - I've added accordion content to some slices/page/section and the height will not adjust automatically based on the content inside. Is there a way that i could make the height size as a variable so that it will adjust automatically? There are also unknown spaces between each slices/page/sections that i've found the area contain accordion content.
Please click here for the website that i'm currently working.
Thank you for your attention :)

The first problem is caused by the declaration body{margin:0} in your normalize.css file
The cause of the second problem is that in your file "main.js" you initialize the scrolldeck before you hide the accordion.
This means that scrolldeck calculates the height of the containing elements to include the accordion's hidden content. Just swap these two things round and all will be well.
$(document).ready(function(){
//Scrolldeck code
//Accordion code
//Rest of your code
});

Related

Error using Foundation’s Sticky and Toggler plugins on the same page

I'm using Zurb Foundation 6.3.1 on this site: https://www.brill.blog
On the home page, I'm using Foundation's Toggler plugin to hide/show a 'Featured posts' panel at the top of the page.
Lower on the page, I'm also using Foundation's Sticky plugin to control the scroll position of the sidebar for desktop window sizes.
Independently both these plugins work well.
However, after the Toggler’s hide button has been activated, the Sticky sidebar's positioning is still based on the original pageload, before Toggler was run, so it gets positioned too low on the page, overlapping the footer.
I believe that I need to either: 1. add a ‘mutation observer’ to the Sticky plugin to watch for changes in window height, or 2. add code at the end of the Toggler plugin to re-init the Sticky plugin.
Unfortunately, I don't yet have any JS skills, so I'd be really grateful for any help that explicitly tells me where to add the code, and what code to add!
I'm using CodeKit to prepend each plugin's js into my app.js from: /foundation-sites/dist/js/plugins/foundation.toggler.js etc.
Do I hack these original plugin files, or add some code to my app.js?
I note that there is an open issue that could affect this: https://github.com/zurb/foundation-sites/issues/8394 (Re-initialization of a sticky element after it is destroyed does not get height), and there a couple of workarounds in the comments that I could try (if I just had a clue where to put them!)
Many thanks for any help!

Bootstrap carousels freezing up

I had asked a previous question regarding multiple bootstrap carousels and had received an absolutely fine code from a Stack Overflow user.
You can see the code here: How to place two bootstrap carousels in the same page? Under Last Edit
I am using the same code provided by the user. But the problem is the carousels are freezing up when the page stays open for long.
By freezing up I mean the first slider, stops sliding after the specified interval. If I manually click on the navigation button, it slides.
For the second carousel and the thumbnails, the problem is that when I am clicking on a thumbnail, the respective image is not showing up in the second carousel.
No amount of refreshing or copy pasting the code into the page helps.
There are obviously other elements on my page too, but none have jquery or similar class names. So overlapping of class names or id names is ruled out.
Where is the problem?
Any kind of help would be greatly appreciated. Thanks.
Here you're missing a }); in your code, as I review your jsfiddle, this is a terminator for this jQuery(document).ready(function($) {. Check the jsfiddle now here.
Add the ‘data-interval’ on the first line of code
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>
1000 is 1 second, and 3000 is 3 seconds. You can replace ‘3000’ with your desired slider speed.

How to stop loading a .JS dynamically?

I am building a website, which is having parallax effect,its almost done but i have an issue with that ,at a particular part I have some lengthy texts (hence scroll bar also present),now when i scroll the text ,the text scrolls as well as background also scrolls (which I don't want).I have tried putting things like position:fixed but it does not work.However I have observed that by disabling(not at all adding it in the index page) a particular .js (say custom.js) I achieve what I want.
My requirement is like when i hover upon the text area ,the background to be fixed(no scrolling) but text to be scrolling and when I come out of the text area,it should be like the previous case(background scrolling possible).Is it possible to disable a particular .js WRT mouse events.I have already tried a few online solutions on how to disable js and reload js but none works for me,am new to js does know much either .I have also read online that once js loads its effects cannot be removed(sticks to memory kind of thing),completely puzzled!
Any help
HERE is a SOLUTION
If you want to stop a script you can wrap your <script> tag by <noscript> tag using jquery wrap() function.
Here is an Example.
with scroll example too.

how to keep the document from autoscrolling when i add content?

i have a web app that has content like a facebook wall. when you click a button it adds more content at the end of the current content then should scroll to it. but currently if im scrolled any amount down, when i add the content the page suddenly scrolls down a seemingly random amount, and I have not added the scroll-to code yet. Why is the page auto scrolling? and how do i get it to stop?
The simplest way to do this without looking to far into what your code might be would just be offsetting what you add. So using some js find out the height the new content would add and then when you add it, scroll down that amount
While I'm not exactly sure why it's happening, I do know that you should be able to play around with CSS to avoid any scrolling while adding content to the page. If you set the body overflow to hidden PRIOR to adding the content, then setting it back to visible afterward, you should be able to prevent any scrolling from happening.
If you're using jQuery, something like this:
$(document.body).css('overflow','hidden');
// do your stuff here e.g.
for(var i=0;i<1000;i++) {
$(document.body).append('<div>some content to append here</div>');
}
$(document.body).css('overflow','visible');
NOTE: if it's a 3rd party library that's appending the content and they're using JS to scroll the page, this solution may not work.

Floating Images mess up Bootstrap Scrollspy

I have set up a page using bootstrap. (http://ethnoma.org/about.html) I have a sidebar navigation that is affixed (which is working great). I also am using bootstrap scrollspy on this navigation and all links in the navigation are within the same page (using ancors). Everything was working fine (even with a smooth-scroll plugin added). I simply had to call this script to force Scrollspy to refresh after all content is added to the page (which I placed in the <head>).
<script type="text/javascript">
// ScrollSpy
$(function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
});
</script>
My client then asked me to add images to the page. I did so using bootstrap markup and css classes like the following:
<a class="pull-right pad5" href="#">
<img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/>
</a>
Which makes the parent "a" tag float to the right (in this case) and makes the img into a block element.
Problem is these floated images make the page longer than it was originally. Yet Scrollspy is still switching the active link at the same place. This causes scrollspy to activate links for content farther down the page than you currently are.
I am at a loss for how to force Scrollspy to take the floated images into account when calculating the location of the ID's the ancors link to. Do any of you have an idea how I could fix this. You can see the problem in effect at the following page http://ethnoma.org/about.html
I just came across this issue myself, so I thought I'd provide some explanation, and a possible solution, in case anyone else finds themselves in this bind.
First, scrollspy is working correctly. At the time that it computes the offsets of the various elements on the page, the images haven't loaded yet, so they have an effective height of 0. Later, when the images load, the browser determines their native dimensions, recalculates the page layout, and then repaints the page with the images. However, scrollspy is completely unaware that the page has been repainted, so it continues to use the stale offsets.
If you were to refresh scrollspy after all the images loaded, you'd find that the offsets would be correct. So, the question is how to do this.
One solution is to attach an onLoad event handler on every image, and then refresh scrollspy inside the handler. A simplified approach might look like this:
<script type="text/javascript">
function refreshScrollspy() {
$('[data-spy="scroll"]').each(function() {
$(this).scrollspy('refresh');
});
}
$(function() {
refreshScrollspy();
});
</script>
<img onload="refreshScrollspy()" src="assets/img/about-001.jpg" alt="Partnership"/>
Here's a working jsfiddle example. Note that that image's load handler has to be registered before the image actually loads. Otherwise, it won't get fired. That's why I'm using an inline event handler here. A more elegant solution is left to the reader.
Came across this issue myself while trying to use the Scrollspy from Bootstrap, and it seems that the script doesn't take into account of the image's height while calculating, thus causing the Scrollspy to be in accurate.
I believe this is due to that the image doesn't have a height set to it. By inspecting the page, I have found that the floating images I have included in the page had the height set to auto, and when I've set it to a specific value after media queries in the CSS, my Scrollspy was working perfectly.

Categories