I am creating a site with the fullPage.js plugin. I got it to work on the desktop browser but it's not working as expected in mobile.
this is my HTML
<div id="fullpage">
<section id="red" class="section"></section>
<section id="blue" class="section"></section>
<section id="green" class="section"></section>
</div>
and this is my jquery
$(document).ready(function(){
$('#fullpage').fullpage({
navigation: true,
});
});
while navigation:true I can skip (i wouldn't say scroll) to different sections by touching the navigation dots. I can swipe to scroll up from there as seen in this video. it works in the chrome device emulator though
video of scroll in the works
P.S. I don't think scrollOverflow:true would serve my purpose as there is not much content to scroll in the site.
I figured out the problem. it was not with fullPage.js. In my HTML, I included jquery.slim.min.js instead of regular jquery.min.js
Apparently, fullPage.js only works with jquery.min.js
make it your code like this and try with that jquery
<div id="fullpage">
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
Related
I have copied a menu from a responsive HTML template, I pasted it to another template which is also responsive, but when the device is changed to mobile, the menu is not properly aligned.
I don't know how to extract the bootstrap of the menu only from its original template.
Here is the code:
<section id="food-menu" class="content-area bg-home-food-menu">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="section-title text-center">
<h2>Discover our menu</h2>
<div class="clear">
You are missing the responsive styles for your code. Try adding the media queries for your Mobile view.That will fix the issue you are facing.
Hey i am pretty new to both bootstrap and fullpage.js, the issue i am having is the want to load multiple images using the grid system from bootstrap within one of my sections, i currently have multiple sections working however this issue with images has proved a bump in my road.
<div class="section">
<div class="jumbotron">
<div class="container">
<h1>Tree Kangaroos</h1>
<p>What are they exactly?</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col1-sm-4">
<img src="images/face.png" />
</div>
<div class="row">
<div class="col1-sm4">
<img src="images/face.png" />
</div>
</div>
</div>
</div>
</div>
This is the code i am having trouble with, everything else implemented so far with fullpage is working and there is no java script included with bootstrap(to my knowledge) so i have not shown the entirety of my code as its rather large my jumbotron is also working so i'm guessing bootstrap is working as intended and the issue is with my coding itself.
The exact issue is that my images stack on top of each other rather than horizontally.
Your problem is with your columns those are not valid bootstrap classes..
Col-md-4 is what you are looking for.
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.
I just implemented imageScroll.js on my website and for the images in between my paragraphs it works fine. When entering the website I would like to have the first image with the parallax effect as well. The images are either loaded via the data-image html tag or via image option (JS).
When I set the image as "background", I think the image is fix and the parallax effect can't be applied. But when I load the image into a div, as I do it with the other two images in between my paragraphs, it shifts the menu as well as the welcome text below.
I tried to realize it with z-index, but couldn't make it run yet.
Does anyone of you have an idea for me how I could make this happen?
Thanks a lot in advance!
Eric
I didn't see the wood for the trees. Just had to put everything inside the div from the parallax:
<div class="img-holder" data-image="../images/other/home-min.jpg" data-image-mobile="../images/other/home-min.jpg">
<!-- Home Page -->
<div id="home" class="container-fluid">
<div class="row">
<nav class="navigation">
<div class="col-md-3"><a class="navigation" href="#about">About</a></div>
<div class="col-md-3"><a class="navigation" href="#portfolio">Portfolio</a></div>
<div class="col-md-3"><a class="navigation" href="#contact">Contact</a></div>
<div class="col-md-3"><a class="navigation" href="#blog"></a></div>
</nav>
</div>
<div id="welcome" class="row">Welcome</div> <!--Welcome Text-->
</div>
</div>
maybe someone else is also confused and perceive this as helpful.
Cheers
Eric
I have looked around for hours trying to figure this out. I have a site built up like this jsfiddle.
<div id="window">
<div id="section-wrapper">
<div id="one" class="section"><p>One</p>
</div>
<div id="two" class="section"><p>Two</p>
</div>
<div id="three" class="section"><p>Three</p>
</div>
<div id="four" class="section"><p>Four</p>
</div>
<div id="five" class="section"><p>Five</p>
</div>
<div id="six" class="section"><p>Six</p>
</div>
<div id="seven" class="section"><p>Seven</p>
</div>
<div id="eight" class="section"><p>Eight</p>
</div>
<div id="nine" class="section"><p>Nine</p>
</div>
</div>
I use ScrollTo and localscroll to navigate the site and I wonder how I can implement a parallax effect to the section wrapper and make the background move slower. Everywhere I look the parallax plugins and scripts is based on a scroll function, but since I dont use scroll to navigate I have no idea how to add the effect.
Is there a way to only adress the actual background-image, i.e. use .animate and/or .css to background-position property or should I put an element behind the section-wrapper? Im fairly new to jquery and javascript but if anyone could point me in the right direction i think i could figure it out. I have just have no idea where to start..
Attach this file to header of your site
https://github.com/markdalgleish/stellar.js/tree/master/src
initiate the script
<script type='text/javascript'>
<!--
(function($) {
$(document).ready(function() {
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
})(jQuery);
// -->
</script>
now you need to add the tag below to div that wraps the background
<div data-stellar-background-ratio="0.5">
You can update the value 0.5 - it defines the speed of background image.