I'm using the fullPage.js plugin to develop a project. The plugin works fine, but I have one question:
I have some sliders within a section so as to create vertical scrolling. However, within one slider I have different links that I also want to trigger vertical scrolling in the same way as the plugin does. Here's how my structure looks like:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide">
Example
...
</div>
<div class="slide" id="example"> Slide 3 </div>
</div>
</div>
So, just like I click on the arrows and the different sliders appear, is it possible to click on a link and then a specific slider to appear? The idea is that the Slide 3 will contain content that will change depending on the link that is clicked.
Related
Here is my code.
<div class="pagecontent" id="fullpage" >
<div class="fullscreensection section">
</div>
<div class="fullscreensection section">
</div>
<div class="fullscreensection section">
</div>
<div class="fullscreensection section">
<div class="versepicture-center" style="background-image:linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),url(/docs/thumbnails/Meditate-Morning-7.jpg);"></div>
<p class="meditate-verse">But I will sing of your strength; I will sing aloud of your steadfast love in the morning. For you have been to me a fortress and a refuge in the day of <span class="nobreak">my distress. </span></p>
<p class="meditate-ref">Psalm 59:16</p>
</div>
</div>
As you can see I'm using the full page here. I want the "section" div to scroll horizontally on mobile devices.
This is what I tried but it's not working.
1.
let options = {
verticalCentered: true,
// scrollHorizontally: true,
normalScrollElements: '.section',
}
new fullpage('#fullpage', options);
When I used this it stops working even vertically ( The main purpose to use fullpagejs ).
2.
fullpage_api.setAllowScrolling(true, 'right');
You can't turn vertical sections into horizontal ones out of the box when using fullPage.js.
However, what you can do instead is initialise fullPage.js with a different HTML markup each time. Not ideal tho!
Horizontal scroll is only possible on fullPage.js when using slides inside a single section. (section = vertical, slide = horizontal).
So for example, this markup has 1 section containing 3 horizontal slides:
<div id="fullpage">
<div class="section">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
</div>
And the only way o allow horizontal scroll with the mouse wheel would be by using the Scroll Horizontally extension.
This other structure would create 3 vertical sections.
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>
So, to do what you want you would basically have to:
1- Use a different markup for the phone (small screen device) than for desktop
2- initialize fullpage.js for the appropriate markup
3- In case of resizing up /down you might want to destroy and initialize the new one.
So, personally, I would avoid this situation and I would just use the default responsive modes to disable snap scroll on mobile devices.
I have a one page scrolling website, and what I would like to do is fade in and out ambient sounds per section. I have found a few libs that fade sound in and out on pixels but being that this site scales I cant get them to trigger properly.
Basically it would be for each section:
<div class="section_content" id="1"> /// this is the section that would need to trigger audio file 1
<div class="main_image">
</div>
<div class="main_content">
Text content and information here
</div>
</div>
<div class="section_content" id="2"> /// this is the section that would need to trigger audio file 2
<div class="main_image">
</div>
<div class="main_content">
Text content and information here
</div>
</div>
https://github.com/kamblack/AudioFade/blob/master/README.md
This was the library I tied but since its based off of pixels it wont quite work.
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
I'm using slick.js slider for a mobile website where users can swipe/slide from view to view.
In one of those views, I need to display another slider for images. The problem is that when I slide the image-gallery, the main slides are activated and vice versa. I have named each slider differently, but I can't seem to find a way to disable the 'Big slider' when I'm interacting with the 'image gallery'.
Here's what I've done:
<div class="carousel">
<div>View 1</div>
<div>Vliew 2
<div class="carousel2">
<div>Image 1</div>
<div>Image 2</div>
<div>Image 3</div>
</div>
<div>
<div>View 3</div>
</div>
The goal is that when 'carousel2' is interacted with, the carousel should not be moved, and when carousel1 is interacted with, carousel2 should not move.
Any ideas of how to achieve this?
http://jsfiddle.net/q1qznouw/471/
You could force the carousel1 to stay at the current slide when mouse interact with the carousel2
$('.carousel').slick();
$('.carousel2').slick();
$('.carousel2').on("mousedown mouseup", function() {
$('.carousel').slick("slickGoTo", 1);
});
This is not perfect though
http://jsfiddle.net/q1qznouw/468/
I have a web application that performs certain task, and have created a tabbed box in the web app that will print any log information to the designated area.
As you can see from the code below I have three tabs, and when one is clicked I have javascript and jQuery display the div area associated with that tab. Under each div area there is a nested div that will be used for the log to print to.
All is working great other than the scroll bar not staying at the bottom.
I have tried:
HTML:
<div id="main" class="main">
<div id="tabbed-box"class="tabbed-box">
<ul id="tabs" class="tabs">
<li>Tail</li>
<li>Access Log</li>
<li>Conduit Log</li>
</ul>
<div id="tail_box" class="tabbed-content">
<div id="tail_print" class="print-area"></div>
</div>
<div id="access_content" class="tabbed-content">
<div id="access_log_print" class="print-area"></div>
</div>
<div id="log_content" class="tabbed-content">
<div id="log_keywords" class="keywords"></div>
<div id="log_print" class="print-area"></div>
</div>
</div>
jQuery:
document.getElementById("access_log_print").scrollTop = document.getElementById("access_log_print").scrollHeight;
But with no luck. All of the div's with class="print-area" I need the scroll bar to be at the bottom.
If you are using jQuery then you can try this.
$('.print-area').each(function(){
$(this).scrollTop($(this).prop('scrollHeight'));
});