fullPage.js
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
fullPage.js One Page Scroll sections Site Plugin fullpage plugin by alvaro trigo. create fullscreen pages fast and simple. one page scroll sections jquery plugin like iphone 5 website.
Right, this is not easy to explain... I'm using jquery.fullPage.js for a website. I have a few collapsable panel hosting a big amount of copy which requires scroll. My problem begins when I enable the scroll on this panel because it sends me to the next section. Is there any way for me to scroll within this panel without affecting the full page scroll?
Thanks guys
Source: (StackOverflow)
Basically I've encountered a problem with fullPage.js scrolling when a select tag is open.
This only happens in IE (all versions) and only Firefox in a mac.
I don't know if this is an issue or if I'm simply forgetting something.
What have I tried :
- Adding
normalScrollElements to the select or form.
- Disabling
fullPage scroll when the user is in the form or select
Both of them didn't work.
1st try:
Codepen: http://codepen.io/anon/pen/doGEgo
Snippet:
Doesn't work properly here
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ["contact-form","contact"],
navigation: true,
scrollOverflow: true,
navigationPosition: 'right',
navigationTooltips: ["Form","Meh"],
responsive: 991,
easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
paddingTop: '110px',
normalScrollElements: '#country'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
<div class="section">
Some section
<form action="">
<select name="country" id="country" class="form-control" style="margin-top:20px;" data-fv-field="country">
<option selected="" disabled="">Country</option>
<optgroup label="Frequent Visitors">
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="Norway">Norway</option>
<option value="Spain">Spain</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</optgroup>
<optgroup label="All Countries">
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Congo, the Democratic Republic of the">Congo, the Democratic Republic of the</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote D'Ivoire">Cote D'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
<option value="Korea, Republic of">Korea, Republic of</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macao">Macao</option>
<option value="Macedonia, the Former Yugoslav Republic of">Macedonia, the Former Yugoslav Republic of</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
<option value="Moldova, Republic of">Moldova, Republic of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
<option value="Panama">Panama</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia and Montenegro">Serbia and Montenegro</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syrian Arab Republic">Syrian Arab Republic</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
<option value="Thailand">Thailand</option>
<option value="Timor-Leste">Timor-Leste</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="Viet Nam">Viet Nam</option>
<option value="Virgin Islands, British">Virgin Islands, British</option>
<option value="Virgin Islands, U.s.">Virgin Islands, U.s.</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</optgroup>
</select>
</form>
</div>
<div class="section">Some section</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.5/jquery.fullPage.js"></script>
<link rel="stylesheet" type="text/css" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.5/jquery.fullPage.css">
2nd try:
Codepen: http://codepen.io/anon/pen/LVGoMY
Snippet:
Doesn't work here as a snippet
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ["contact-form","contact"],
navigation: true,
scrollOverflow: true,
navigationPosition: 'right',
navigationTooltips: ["Form","Meh"],
responsive: 991,
easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
paddingTop: '110px',
normalScrollElements: '#country'
});
$('#country').on('click', function(){$.fn.fullpage.setAllowScrolling(false);})
$('#country').on('change', function(){$.fn.fullpage.setAllowScrolling(false, "all");})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
<div class="section">
Some section
<form action="">
<select name="country" id="country" class="form-control" style="margin-top:20px;" data-fv-field="country">
<option selected="" disabled="">Country</option>
<optgroup label="Frequent Visitors">
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="Norway">Norway</option>
<option value="Spain">Spain</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</optgroup>
<optgroup label="All Countries">
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Jamaica">Jamaica</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
<option value="Moldova, Republic of">Moldova, Republic of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
</optgroup>
</select>
</form>
</div>
<div class="section">Some section</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.5/jquery.fullPage.js"></script>
<link rel="stylesheet" type="text/css" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.5/jquery.fullPage.css">
fullPage doesn't work as a snippet
So the question is, what am I missing? Or is this an issue?
Source: (StackOverflow)
The title may seem a bit peculiar but I will try explain as best as possible so confusion is minimized.
Currently I am using the FullPage.js plugin with my website to create a horizontal 'slide' effect. Check the website out currently to see what I mean. http://carrotcrunchpvp.comule.com/
As you can see the navigation bar is slap bang in the middle of the page when you enter where everything is rotated and such. When I slide to the right using the arrow, I want the navigation bar to 'push' out so the Ethos link goes to the top left, privacy policy link goes adjacent to this (horizontally), then the path to healing. Then the logo will shift directly upward to form the middle of the navigation bar. NZ catholic church will shimmy to the right and up adjacent to the logo, contact us will go slightly further to the right and the about page will reach the far right of the navigation bar which will be all located at the top of the page. This will essentially be creating a header navigation bar
Look at illustration for a better idea:
The black lines are the path of transformations. However it's not as easy as it seems, I could do this with CSS3 transformations too...
Now my problems, I'm capable with CSS, but my Jquery and Javascript knowledge is lacking. I'm unsure as to how to approach this. This is because I only want this transformation to occur when clicking from the homepage to the next page or one of the other pages with more content. It will essentially be turning into a fixed header. However when I go back to the homepage it will need to animate backwards to the original navigation bar...
How would you go about this? This is a task my I.T teacher has set me to do over the holidays and I'm struggling to figure how to logically do this.
If I've missed anything or you're still confused on what I want to achieve, feel free to comment and I will try clarify. To the mods, it's a subjective topic, I'll agree - but it's a topic which spreads creativity and shouldn't be frowned upon and looked at for closure - IMO...
Source: (StackOverflow)
Im using Fullpage.js and trying to make it work with wordpress, and its going forward. However, I'm trying to figure out how to be able to scroll trough a slide with content higher then the active slide. The plugin comes with a scroll overflow function, but that vill make a scrollbar that scrolls trough your content, and keeps going to the next slide.
Ideally a constant scrollbar that stops at the current slide would be the best option for me, but i dont know if this is possible.
Been fiddling with this for a while, so if anyone has any ideas how to solve this i would be thankful. My site:
http://www.svenssonsbild.se/Fullscreen/
Edit: Realize that what i want should be able to achieve by setting scrolloverflow: true in the plugins setting. Just didnt realize it didnt work for me.
So, if anyone hav any ideas why it wont work for me then it would be great. I suspect it have something with having the scripts hardcoded in the header and not enqueued, which i havent been able to figure out how to, since the supercontainer the script creates duplicates.
anyhow, any pointers will be very appriciated.
Source: (StackOverflow)
I am using fullPage.js to create a full width and height slider for several fullscreen-slides. So my site structure is like
section#f01
section#f02
section#f03.scrollfix
section#f04
I want to skip section#f03.scrollfix while scrolling through the site. While scrolling with my keyboard and/or by my mouse wheel.
Source: (StackOverflow)
I just noticed that many css plugins, when setting the page overflow to hidden (for example), they use to set it both to html and body, like this:
html, body {
overflow: hidden;
}
For example, fullpage.js does like this.
What is the exact difference between setting it to the body and the html?
Is it a cross-browser trick?
Source: (StackOverflow)
I created a very simple webpage that uses fullPage.js script. Basically it works as the sample page provided by the author. Now, I would like to put there min-width on the page, so that when user decides to resize the window horizontally and make it small enough - instead of shrinking the divs inside - I would just display browser-native horizontal scrollbars. I tried to add either:
body {
min-width: 900px;
width: 100%;
}
or the same in other css tag:
.section {
text-align:center;
width: 100%;
min-width: 900px;
}
but none of those worked well. I found this communication with the author of the plugin, but I'm not exactly sure if his response is helpful enough. Can you help me with implementation of that feature? Thanks!
Source: (StackOverflow)
I try to set scroll snap in place. What I try to achieve can be seen here: http://alvarotrigo.com/fullPage. So when user start scrolling, it is immediately intercepted and page is scrolled until the next section.
I cannot use the plugin provided on this link because they use div with section class but I cannot edit this kind of html elements.
I prefer using the id on the anchor tags on the page. So when user starts scrolling up/down I need to detect the previous/next anchor and scroll to it.
As showed on the link demo above, when the (mouse) scrolling begins (up or down), nothing can stop it... until it stopped. Then again another scroll can occurs.
I can easily detect mouse scroll up or down thanks to the following code:
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
console.log('down');
} else {
// upscroll code
console.log('up');
}
lastScrollTop = st;
});
I can also detect whether a scroll is in progress like this:
$(window).scroll(function(event){
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
// do something
console.log("Haven't scrolled in 250ms!");
}, 250));
});
Now I need to really scroll to the next/previous anchor (thanks to scrollTop)
My jsFiddle: http://jsfiddle.net/f38fmsw9/1/
Open the console and check messages when scrolling up/down/stop.
Many thanks for pointing me to the right direction.
Source: (StackOverflow)
I am building a full page slider that keeps the native scrollbar and allows the user to either free scroll, use the mouse wheel or navigation dots (on the left) to switch to a slide.
Once the user is on the last slide and tries to scroll down further, the whole slider moves up to reveal a simple scrollable section. If the user scrolls down and then tries to go back up, then this new section moves out of the way again and returns the slider back into view.
Fiddle: http://jsfiddle.net/3odc8zmx/
The parts I'm struggling with:
- Only the first two navigation dots work. The third one DOES WORK if you area looking at the first slide. But doesn't do anything, if you are on slide 2. Note: the purple one is a short-cut to the second section of the page and not related to the slider.
- When moving to the last slide (via the dots, if you're on the first slide) it causes the code to make the whole slider move upwards as it sees this as the user has slid past the last slide as per the description above. I have tried to combat this using a variable called listen to stop the scroll event listening when using the showSlide method... but it seems to be true even though I set it to false, and only reset it to true again after the animation...
- When scrolling down using the mouse wheel, I can get to the second section and back up, but not to the first third section. I'm wondering if I could use the showSlide method to better handle this instead of the current dirty next and prev functions I have implemented.
Note: If the user has free-scrolled, when they use the mouse-wheel, I want the slider to snap to the nearest slide to correct itself... Any suggestions for how I could do this?
Can anyone offer some help?
Here's the JS:
var listen = true;
function nextSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: $('#section1').scrollTop() + $(window).height()
});
}
function prevSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: -$('#section1').scrollTop() + $(window).height()
});
}
function showSlide(index)
{
var offset = $('#section1 div').eq(index).offset();
offset = offset.top;
if(offset){
listen = false;
$('.slide-dot').removeClass('active');
$('.slide-dot').eq(index).addClass('active');
$('#section1').stop(true,false).animate({
scrollTop: offset
}, 500, function(){
listen = true;
});
} else {
alert('error');
}
}
$(document).ready(function(){
var fullHeight = 0;
$('#section1 div').each(function(){
fullHeight = fullHeight + $(this).height();
});
var lastScrollTop1 = 0;
$('#section1').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
if( $('#section1').scrollTop() + $(window).height() == fullHeight) {
if(listen){
$('body').addClass('shifted');
}
}
}
lastScrollTop1 = st;
});
$('#section1').on('mousewheel', function(e){
e.preventDefault();
var st = $(this).scrollTop();
if (st > lastScrollTop1){
nextSlide();
} else {
prevSlide();
}
});
var lastScrollTop2 = 0;
$('#section2').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
} else {
if( st == 0 ){
$('body').removeClass('shifted');
}
}
lastScrollTop1 = st;
});
$('.slide-dots').css({'margin-top':-$('.slide-dots').height() / 2});
$('.slide-dot').first().addClass('active');
$(document).on('click', '.slide-dot', function(e){
e.preventDefault();
showSlide( $(this).index() );
});
$(document).on('click', '.slide-dot-fake', function(e){
e.preventDefault();
$('body').addClass('shifted');
});
});
And for those wondering why I'm not using something like fullPage.js, it's because it can't handle the way I want to transition between the two areas and have two scrollbars (one for each area).
Source: (StackOverflow)
my HTML5 video autoplay is not working.
<video preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" id="myVideo">
I also tried without the ="true" value, and it doesn't work either. I've already used the same code in other sites and it worked just fine.
I'm using a framework based on fullPage.js, but i looked for something related on the files and didn't find anything.
The site is at http://agenciamilk.com/site/2/ if you wanna take a look. Thanks
Source: (StackOverflow)
i'm using symfony 2.3 with bootstrap and FullPage.js .
When i load my page, it seems to be loaded twice...
So my width slides in my section is wrong, and the code created is wrong too.
<div class="section active" id="section_admin" data-anchor="admin"">
<div class="slides">
<div class="slidesContainer" style="width: 300%;">
<div class="slides">
<div class="slidesContainer" style="width: 300%;">
<div class="slide active" data-anchor="slide1" style="width:
With the call plugin, my console log return two 'toto', if i remove the plugin my console log return one 'toto'.
Where I am wrong ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/bundles/fosjsrouting/js/router.js"></script>
<script type="text/javascript" src="/app_dev.php/js/routing?callback=fos.Router.setData"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/js/tcs.js"></script>
<script type="text/javascript" src="/bundles/ivoryckeditor/ckeditor.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.fileupload.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.fileupload-ui.js" ></script>
<script type="text/javascript" src="/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/js/jquery.knob.js"></script>
<script type="text/javascript" src="/js/select2.js"></script>
<script type="text/javascript" src="/js/fullcalendar.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript" src="/js/moment.min.js"></script>
<script type="text/javascript" src="/js/daterangepicker.js"></script>
<script type="text/javascript" src="/js/dataDays.js"></script>
<script type="text/javascript" src="/js/dataDaysEnh.js"></script>
<script type="text/javascript" src="/js/dataHours.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery.fn.gantt.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/js/jquery.fullPage.js"></script>
<script type="text/javascript" src="/js/jquery.myAlert.js"></script>
<script type="text/javascript" src="/js/jquery.transit.min.js"></script>
<!-- wysihtml5 parser rules -->
<script type="text/javascript"src="/js/wysihtml5/parser_rules/advanced.js"></script>
<!-- Library -->
<script type="text/javascript"src="/js/wysihtml5/dist/wysihtml5-0.3.0.min.js"></script>
<link rel="stylesheet" rel='nofollow' href="/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/font-awesome-ie7.min.css" type="text/css"/>
<link rel="stylesheet" rel='nofollow' href="/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" rel='nofollow' href="/css/jquery.ibutton.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/jquery-ui-1.8.20.custom.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/select2.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/wysihtml5.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/gantt.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/datepicker.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/fullcalendar.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/bootstrap-colorpicker.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/daterangepicker-bs3.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/jquery.fullPage.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/jquery.dataTables.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/surcharge.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="/css/surcharge-dataTable.css" type="text/css" />
</head>
<body>
<div class="section" id="section_projet">
<div id="myProject" class="col-lg-12">
<div class="row">
<div id="js-sidebar-projet" class="wrap col-sm-2 col-md-3 col-lg-2" >
<a rel='nofollow' href="/app_dev.php/todo/projet/add" class="visible-xs col-xs-12 btn btn-primary" style="margin-bottom: 20px;">
<i class="icon-cogs"></i>
<span>Nouveau projet</span>
</a>
<div class="sidebar bg-lighter">
<div class="sub-sidebar" style=" border-bottom: 1px solid #FFF">
<a rel='nofollow' href="/app_dev.php/todo/projet/" >
<div class="col-xs-10 col-sm-9 col-md-8 col-lg-9"><span>Mes Projets</span></div>
<div class="col-xs-2 col-sm-3 col-md-4 col-lg-3"><i class="icon-cogs"></i></div>
</a>
</div>
<div class="sub-sidebar">
<a rel='nofollow' href="#" onclick="loadOneProjet(1,8,event)" >
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<span class="visible-xs">Dev</span>
<span class="visible-sm visible-lg">Dev</span>
<span class="visible-md">Dev</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="color: #5cb85c;">
<i class="icon-sign-blank"></i>
</div>
</a>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<a class="" rel='nofollow' href="/app_dev.php/todo/delete/projet/8"onclick="return confirm('Are u sure ?')">
<i class="icon-trash"></i>
</a>
</div>
</div>
<div class="sub-sidebar">
<a rel='nofollow' href="#" onclick="loadOneProjet(1,5,event)" >
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<span class="visible-xs">Projet 2</span>
<span class="visible-sm visible-lg">Projet 2</span>
<span class="visible-md">Projet 2</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="color: #b85ca9;">
<i class="icon-sign-blank"></i>
</div>
</a>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<a class="" rel='nofollow' href="/app_dev.php/todo/delete/projet/5"onclick="return confirm('Are u sure ?')">
<i class="icon-trash"></i>
</a>
</div>
</div>
</div> </div>
<div id="js-load-projet" class="wrap col-sm-10 col-md-9 col-lg-10">
<div id='calendar'class="bg-lighter" style="padding: 10px;"></div>
</div>
</div>
</div>
</div>
<div class="section" id="section_tache">
<div id="wrap" class=" col-lg-12" style="padding-top: 20px;">
<div class="row" style="">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
<div class="sidebar bg-lighter" >
<div class="sub-sidebar active">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getActiveTaches',1,2,event)" title="Mes taches">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-inbox" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9">
<span>Mes taches</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getTodayTaches',1,2,event)" title="Aujourd'hui">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-calendar" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Aujourd'hui</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getRecentTaches',1,2,event)" title="Updated">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-refresh" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-10 col-lg-9 ">
<span>Updated</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getMyAssignedTaches',1,2,event)" title="Assignée">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-hand-right" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Assignée</span>
</div>
</a>
</div>
<div class="sub-sidebar ">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getSQLSharedTaches',1,2,event)" title="Partagée">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-share" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Partagée</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getUserlessTaches',1,2,event)" title="Orpheline">
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-1 text-center">
<i class="icon-fixed-width icon-frown" ></i>
</div>
<div class="col-xs-10 hidden-sm col-md-9 col-lg-9 ">
<span>Orpheline</span>
</div>
</a>
</div>
</div>
</div>
<div id="contenu" class="wrap col-xs-12 col-sm-8 col-md-7 col-lg-8">
<table id="dataTable" class="table table-tache" >
</table>
<div class="modal fade" id="ModalImportance" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Priorité</h4>
</div>
<div class="modal-body">
<table class="table">
<tbody>
<tr>
<td>
<a class=" js-modal-choice icon-3x color-primary" data-dismiss="modal" data-value="1" data-color="color-primary">
<i class="icon-warning-sign"></i>
</a>
</td>
<td>
<a class="js-modal-choice icon-3x color-warning" data-dismiss="modal" data-value="2" data-color="color-warning">
<i class="icon-warning-sign"></i>
</a>
</td>
<td>
<a class=" js-modal-choice icon-3x color-danger" data-dismiss="modal" data-value="3" data-color="color-danger">
<i class="icon-warning-sign"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<h4 class="modal-title">Choisissez ...</h4>
</div>
</div>
</div>
</div>
<script>
jQuery('.js-modal-choice').on('click',function(e){
e.preventDefault();
rate_id = jQuery(e.currentTarget).attr('data-value');
tache_id = myGlobalVar.attr('data-tache');
color = jQuery(e.currentTarget).attr('data-color');
console.log(rate_id);
path = Routing.generate('tcs_todo_ajax_edit_importance');
jQuery.ajax({
type: "POST",
url: path,
data: "tache_id="+tache_id+"&importance_id="+rate_id,
cache: false,
success: function(msg) {
myGlobalVar.attr('class','js-modal '+color);
},
error: function(msg) {
console.log( 'r&té');
}
});
});
</script><script>
jQuery(document).ready(function() {
$('#dataTable').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"bDestroy": true,
"oLanguage": { "sSearch": "" ,
"oPaginate": {
"sFirst": "<i class='icon-fast-backward visible-xs' title='Début'></i><div class='hidden-xs'> Début</div>",
"sLast": "<i class='icon-fast-forward visible-xs' title='Fin'></i><div class='hidden-xs'> Fin</div>",
"sNext": "<i class='icon-forward visible-xs' title='Suivant'></i><div class='hidden-xs'> Suiv.</div>",
"sPrevious": "<i class='icon-backward visible-xs' title='Précedent'></i><div class='hidden-xs'> Préc.</div>",
}
},
"sPaginationType": "full_numbers",
"fnDrawCallback": function( oSettings ) {
//jQuery('tr').removeClass('odd');
//jQuery('tr').removeClass('even');
jQuery('#dataTable_filter').find('input').addClass('form-control input-sm');
jQuery('#dataTable_filter').find('input').attr('placeholder','Recherche');
},
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
//dont apply odd even class, when warning class is present
if (jQuery(nRow).hasClass('alert-warning')){
jQuery(nRow).removeClass('odd');
jQuery(nRow).removeClass('even');
}
}
});
});
/********************************
* FONCTION DE RATING
*******************************/
jQuery('a.js-modal').on('click',function(e){
e.preventDefault();
myGlobalVar = jQuery(e.currentTarget);
//console.log(jQuery(e.currentTarget));
});
/********************************
* PROGRESSION
*******************************/
$(".dial").knob({
'height':48,
'width': 48,
'inline':false,
'inputColor' :'#5cb85c',
'fgColor':'#5cb85c',
'bgColor':'#dff0d8',
'thickness': '.1',
'draw': function(){
var hexa = colored(this.cv);
this.o.fgColor = hexa;
this.$.css('color' ,hexa);
$(this.i).val(this.cv + '%');
if(this.$.data('skin') == 'tron') {
var a = this.angle(this.cv) // Angle
, sa = this.startAngle // Previous start angle
, sat = this.startAngle // Start angle
, ea // Previous end angle
, eat = sat + a // End angle
, r = 1;
this.g.lineWidth = this.lineWidth;
this.o.cursor
&& (sat = eat - 0.3)
&& (eat = eat + 0.3);
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.v);
this.o.cursor
&& (sa = ea - 0.3)
&& (ea = ea + 0.3);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
},
'change' : function (v) {
/****************************************************************
* ICI J UTILISE UN TIMEOUT POUR DECLENCHER LA MAJ
* LORSQU ON CHANGE LE NIVEAU AVEC LA SOURIS ON A PAS ENVIE
* D AVOIR 5 APPELS AJAX POUR PASSER DE 30 A 35%
* J ATTEND DONC QUE RIEN NE SE PASSE PENDANT 0.3 SEC
****************************************************************/
if(typeof myTimeout != "undefined"){
clearTimeout(myTimeout);
}
var hexa = colored(this.cv);
this.o.fgColor = hexa;
this.$.css('color' ,hexa);
tache_id = this.$.attr('data-id');
myTimeout= setTimeout(function() {
path = Routing.generate('tcs_todo_add_ajax_progression_tache');
jQuery.ajax({
type: "POST",
url: path,
data: "value="+v+"&tache_id="+tache_id,
cache: false,
success: function(msg) {
},
error: function(msg) {
console.log( 'r&té');
}
});
}, 400 );
},
});
</script> </div>
<div class="wrap col-sm-2 col-md-2 col-lg-2">
<div class="sidebar bg-lighter">
<div class="sub-sidebar">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getPublicActiveTaches',16,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/agra" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">agra</span>
<span class="visible-lg">agra</span>
<span class="visible-md">agra</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getPublicActiveTaches',1,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/blebris" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">blebris</span>
<span class="visible-lg">blebris</span>
<span class="visible-md">blebris</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getPublicActiveTaches',44,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/chapou" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">chapou</span>
<span class="visible-lg">chapou</span>
<span class="visible-md">chapou</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getPublicActiveTaches',15,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/clement" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">clement</span>
<span class="visible-lg">clement</span>
<span class="visible-md">clement</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getPublicActiveTaches',46,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/userless.jpg" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">le_nom_le_plus_long_du_monde_...</span>
<span class="visible-lg">le_nom_le_plus...</span>
<span class="visible-md">le_nom_le_...</span>
</div>
</a>
</div>
<div class="sub-sidebar">
<a rel='nofollow' href="#" onclick="loadAjaxTaches('getPublicActiveTaches',17,2,event);" >
<div class="col-xs-2 col-sm-12 col-md-3 col-lg-2 text-center">
<img class="avatar-xs" src="/uploads/img/redero" ></img>
</div>
<div class="col-xs-10 hidden-sm col-md-8 col-lg-9">
<span class="visible-xs">redero</span>
<span class="visible-lg">redero</span>
<span class="visible-md">redero</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section_admin">
<div class="slide active" data-anchor="slide1">
<div class="col-lg-12">
<div class="row">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
</div>
<div class="wrap col-sm-10 col-md-9 col-lg-10">
<div class="panel panel-default">
<div class="panel-heading">Groupes</div>
<div class="panel-body">
<ul class="list-unstyled">
<li><a rel='nofollow' href="/app_dev.php/admin/group/list" ><i class="icon-fixed-width icon-list"></i> Voir les groupes</a></li>
<li><a rel='nofollow' href="/app_dev.php/admin/group/new" ><i class="icon-fixed-width icon-plus"></i> Ajouter un groupe</a></li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Utilisateurs</div>
<div class="panel-body">
<ul class="list-unstyled">
<li><a rel='nofollow' href="/app_dev.php/profile/list" ><i class="icon-fixed-width icon-list"></i> Voir les utilisateurs</a></li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">A.C.L.</div>
<div class="panel-body">
<ul class="list-unstyled">
<li><a rel='nofollow' href="/app_dev.php/todo/view/menuAcl" ><i class="icon-fixed-width icon-refresh"></i> Donner des droits</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="col-lg-12">
<div class="row">
<div class="wrap col-sm-2 col-md-3 col-lg-2" >
</div>
<div class="wrap col-sm-10 col-md-9 col-lg-10">
<div class="panel panel-default">
<div class="panel-heading">Groupes</div>
<div class="panel-body">
<ul class="list-unstyled">
<li><a rel='nofollow' href="/app_dev.php/admin/group/list" ><i class="icon-fixed-width icon-list"></i> Voir les groupes</a></li>
<li><a rel='nofollow' href="/app_dev.php/admin/group/new" ><i class="icon-fixed-width icon-plus"></i> Ajouter un groupe</a></li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Utilisateurs</div>
<div class="panel-body">
<ul class="list-unstyled">
<li><a rel='nofollow' href="/app_dev.php/profile/list" ><i class="icon-fixed-width icon-list"></i> Voir les utilisateurs</a></li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">A.C.L.</div>
<div class="panel-body">
<ul class="list-unstyled">
<li><a rel='nofollow' href="/app_dev.php/todo/view/menuAcl" ><i class="icon-fixed-width icon-refresh"></i> Donner des droits</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
console.log('toto');
$.fn.fullpage({
verticalCentered: false,
resize : true,
slidesColor : ['transparent', 'transparent','transparent'],
anchors:['projet','tache','admin'],
scrollingSpeed: 700,
easing: 'easeInQuart',
menu: false,
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
slidesNavigation: false,
slidesNavPosition: 'bottom',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
autoScrolling: true,
scrollOverflow: false,
css3: false,
//events
onLeave: function(index, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction){}
});
});
</script>
<div id="sfwdt4d109a" class="sf-toolbar" style="display: none"></div><script>/*<![CDATA[*/ Sfjs = (function() { "use strict"; var noop = function() {}, profilerStorageKey = 'sf2/profiler/', request = function(url, onSuccess, onError, payload, options) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); options = options || {}; xhr.open(options.method || 'GET', url, true); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.onreadystatechange = function(state) { if (4 === xhr.readyState && 200 === xhr.status) { (onSuccess || noop)(xhr); } else if (4 === xhr.readyState && xhr.status != 200) { (onError || noop)(xhr); } }; xhr.send(payload || ''); }, hasClass = function(el, klass) { return el.className.match(new RegExp('\\b' + klass + '\\b')); }, removeClass = function(el, klass) { el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' '); }, addClass = function(el, klass) { if (!hasClass(el, klass)) { el.className += " " + klass; } }, getPreference = function(name) { if (!window.localStorage) { return null; } return localStorage.getItem(profilerStorageKey + name); }, setPreference = function(name, value) { if (!window.localStorage) { return null; } localStorage.setItem(profilerStorageKey + name, value); }; return { hasClass: hasClass, removeClass: removeClass, addClass: addClass, getPreference: getPreference, setPreference: setPreference, request: request, load: function(selector, url, onSuccess, onError, options) { var el = document.getElementById(selector); if (el && el.getAttribute('data-sfurl') !== url) { request( url, function(xhr) { el.innerHTML = xhr.responseText; el.setAttribute('data-sfurl', url); removeClass(el, 'loading'); (onSuccess || noop)(xhr, el); }, function(xhr) { (onError || noop)(xhr, el); }, options ); } return this; }, toggle: function(selector, elOn, elOff) { var i, style, tmp = elOn.style.display, el = document.getElementById(selector); elOn.style.display = elOff.style.display; elOff.style.display = tmp; if (el) { el.style.display = 'none' === tmp ? 'none' : 'block'; } return this; } } })();/*]]>*/</script><script>/*<![CDATA[*/ (function () { Sfjs.load( 'sfwdt4d109a', '/app_dev.php/_wdt/4d109a', function(xhr, el) { el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none'; if (el.style.display == 'none') { return; } if (Sfjs.getPreference('toolbar/displayState') == 'none') { document.getElementById('sfToolbarMainContent-4d109a').style.display = 'none'; document.getElementById('sfToolbarClearer-4d109a').style.display = 'none'; document.getElementById('sfMiniToolbar-4d109a').style.display = 'block'; } else { document.getElementById('sfToolbarMainContent-4d109a').style.display = 'block'; document.getElementById('sfToolbarClearer-4d109a').style.display = 'block'; document.getElementById('sfMiniToolbar-4d109a').style.display = 'none'; } }, function(xhr) { if (xhr.status !== 0) { confirm('An error occurred while loading the web debug toolbar (' + xhr.status + ': ' + xhr.statusText + ').\n\nDo you want to open the profiler?') && (window.location = '/app_dev.php/_profiler/4d109a'); } } ); })();/*]]>*/</script>
</body>
Source: (StackOverflow)
I am trying to use fullpage.js for two different sections on one website. Basically, when a slide is clicked on, it reveals a child wrapper div underneath with its own sections to vertically scroll through before the main section continues on.
Here is my code that I am working with. I'm trying to load it in through ajax but I'm wondering if there is an easier way I am overlooking.
$("#wrapper").fullpage({
verticalCentered: true,
resize : true,
anchors: ['section1', 'section2', 'section3', 'about'],
//menu:'#menu',
customScroll:true,
onLeave: function(index, nextIndex, direction){
//console.log(index+'|'+nextIndex+'|'+direction);
if (direction == 'down'){
$('.section:nth-child('+index+')').animate({'top':'0%'},0)
$('.section:nth-child('+nextIndex+')').animate({'top':'100%'},0).animate({'top':'0%'},500);
} else {
$('.section:nth-child('+nextIndex+')').animate({'top':'0%'},0);
$('.section:nth-child('+index+')').animate({'top':'0%'},0).animate({'top':'100%'},500).animate({'top':'500%'},0);
}
}
});
and then the code that removes it and adds a new wrapper:
$(".sub_section").click(function() {
$("#wrapper").fullpage.destroy('all');
if (sub_section_open == false) {
$("#left_border").animate({"borderLeftWidth" : "0px"}, 300);
$("#right_border").animate({"borderRightWidth" : "0px"}, 300);
$("#top_border").animate({"borderTopWidth" : "0px"}, 300, function() {
$("#left_border").hide();
$("#right_border").hide();
$("#top_border").hide();
});
$(".sub_section .letters").slideUp("slow", function(){
$(".sub_section .content").css({'z-index': 1});
});
sub_section_open = true;
$(".btn_sub_section_close").show();
$( "#wrapper" ).load( "section1.html" );
$("#section1").fullpage({
verticalCentered: true,
resize : true,
anchors: ['ssection1', 'ssection2', 'ssection3', 'ssection4'],
menu:'#menu'
});
}
});
Any ideas? Thanks!
Source: (StackOverflow)
Following on from a solution posted here: Velocity.js/Blast.js starting opacity at 0
I am using Velocity.js and Blast.js to create a simple load in each word as an animation... one of the basic setups. I am also using this alongside Cycle2. I am also using fullpage.js, so sometimes a text slide might be the first slide, so is it possible to do the same thing on sliding down?
- If the text slide, with the animation, is also the first slide, to trigger the animation from opacity:0 just as it does if you navigate prev/next.
I have set up a JSFiddle, adding the fullpage.js, so if you scroll down I've made the second section start with text but it doesn't animate or show. I've also added in onLeave and afterLoad callbacks for you to use if that helps? jsfiddle.net/h3vo8LL1/4/
//
if ($('.home-section-container').length > 0) {
$('.home-section-container').fullpage({
sectionSelector: '.each-section',
scrollingSpeed: 1000,
resize: false,
onLeave: function () {
//
},
afterLoad: function () {
//
}
});
}
//
function featuredProjectTextAnimation(incomingSlideEl) {
var $animated = $(incomingSlideEl).find('.text-container.animated');
$animated.blast({
delimiter: 'word'
})
.velocity('transition.fadeIn', {
display: null,
duration: 0,
stagger: 100,
delay: 400,
begin: function () {
$animated.css('opacity', 1);
},
complete: function () {
//
}
});
}
//
if ($('.home-slider-container').length > 0) {
$('.home-slider-container .home-slider').each(function () {
var $this = $(this);
var slideCount = $this.find('.each-slide').length;
if (slideCount <= 1) {
$this.next('.home-slider-pager').remove();
$this.prev('.home-slider-navigation').remove();
}
$this.cycle({
fx: 'fade',
slides: '> .each-slide',
caption: $this.next('.home-slider-pager'),
captionTemplate: '{{slideNum}}/{{slideCount}}',
sync: true,
timeout: 0,
random: false,
pagerActiveClass: 'active',
next: $this.prev('.home-slider-navigation').find('.next'),
prev: $this.prev('.home-slider-navigation').find('.prev'),
loader: true,
autoHeight: 'container',
swipe: true
});
$this.on('cycle-before', function () {
});
$this.on('cycle-after', function (event, optionHash, outgoingSlideEl, incomingSlideEl) {
featuredProjectTextAnimation(incomingSlideEl);
$(outgoingSlideEl).find('.text-container.animated').css('opacity', 0);
});
});
}
Source: (StackOverflow)
http://alvarotrigo.com/fullPage/examples/normalScroll.html#secondPage/1
Hi, in this example, is it possible
- To lose the auto scroll that automatically comes, whenever i reach in between a page?
The horizontal slider doesn't work on arrow press/swipe motion.
$('#fullpage').fullpage({
menu: '#menu',
anchors: ['firstPage', 'secondPage', '3rdPage'],
sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
autoScrolling: false
});
Here's my fiddle
Thanks.
Source: (StackOverflow)
I'd like to remove an id from an image after its animation is completed. I have this in my code:
if(index == 1 && direction =='down'){
$('#slidetext1 #rock').animate({right:"0"});
$('#slidetext1 #deer').animate({left: "0"}).addClass('open').removeAttr('id');
}
It's not working because it removes the id before even starting the animation, but what I want to do is to remove the id #deer from the image and add ('open') after the .animate() has been executed.
so here i made a jsfiddle: http://jsfiddle.net/67oe1jvn/45/ . pay attection to the left image as you scroll down under the HELLO h1. the thing i want to achive is: when i get to the second section, i'd like to see both of the images slide in the view with the directive "transition:all 1.2s ease-out;" AND whenever the section gets changed make them slide out of the view with a faster transiction, so it won't been noticed that much.
Source: (StackOverflow)