recently I am working on a page using this awesome plugin:
https://github.com/peachananr/onepage-scroll
However I am not familiar with JavaScript so I will be obliged if someone could explain to me few things:
I'd like to combine one-scroll-page behaviour with anchor scrolling, simple example:
function scrollContent(id) {
$('html, body').animate({ scrollTop: $('#' + id).offset().top }, 1000 );
}
as far as I know there is an embedded function called "$.fn.moveTo(page_index)"(see plugin link) but I wasn't able to use it successfully.
I'd like to turn a slider when leaving page #1 to save resources, slider launches with function:
$('#da-slider').cslider({
autoplay : true,
interval : 8000,
});
tried to simply turn off autoplay by messing with callbacks but it turned out to be bad solution:
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(#1) {
$('#da-slider').cslider({
autoplay : off,
interval : 8000,
});
}, // This option accepts a callback function. The function will be called after the page moves.
loop: true, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: 600, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "horizontal" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});
Every tip, even link to jquery tutorial will be very helpfull. Thanks in advance!
Solution found:
$("#your-div-id").on("click", function(){$(".main").moveTo(2);});
Related
I have two carousels set up using cycle2. They are presented side by side with each occupying 50% of the screen width and 100% height. I've included a video below of what it looks like. These are set up as two different cycle2 inits then a delay is set on each of them to give the effect.
$('.vertical-slider-container .vertical-slider').each(function() {
var $this = $(this);
$this.cycle({
fx: 'scrollVert',
slides: '> .each-slide',
sync: true,
timeout: 3000,
speed: 1500,
random: false,
loader: true,
swipe: true
});
});
<div class="vertical-slider left" data-cycle-delay="1000" data-cycle-reverse="true"></div>
<div class="vertical-slider right" data-cycle-delay="1500" data-cycle-reverse="true"></div>
The issue I am having is that eventually they get in sync. Is there any obvious way I can keep these consistent so they always have the delay that remains constant?
http://quick.as/6oq8hqar1
I would try the following:
Remove the auto-initialization of the 2nd carrousel
Programatically add a listener to the 1st carrousel, like so $( '#1st-carousel' ).on( 'cycle-after', function( event, opts ) { ... })
The listener would manually call $('#2nd-carousel').cycle('next'); after a fixed amount of time, using the setTimeout function
Demo: http://jsbin.com/hiduyi/1/edit?html,js
Hi I am using this js library in order to make a site with full page scrolling.
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
Here is my jsfiddle example:
http://jsfiddle.net/aLjLjxux/
Instead of each element being pushed up and out of the body, I want them to stay fixed and be overlapped by the following divs. Is there a simple implementation for this functionality within this library, or is there a different library that will allow me to achieve this?
For reference it would look something like this:
http://www.facebookgroups.com/ except reversed. As in the divs that come later will overlap the previous divs on scroll.
<body>
<div class="main">
<section style="background-color: #eaeaea;" class="first"><h1>Hello</h1></section>
<section style="background-color: #dadada;" class="second"><h1>Sup</h1></section>
<section style="background-color: #cacaca;" class="third">yo</section>
</div>
<script type="text/javascript">
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease-out", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {$(this).css("position", "fixed");}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: false, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "vertical" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});
</script>
</body>
Thanks.
The website you link is using pagePiling.js plugin.
It even support old browsers with no CSS3 support, unlike the onepage-scroll you want to modify.
No need to modify the one you are using. It won't be that tribal anyway.
If you want to reverse it, then you should better start with pagePiling.js and you will have much less work.
first post here; apologies for any information that is missed. I'm a complete novice at Javascript so apologies in advanced also.
I am currently creating a responsive website with a slider.
The slider takes up the entire background of the site on larger devices, but when the window is less than 480px I would like the slider to scale down to a smaller area. I have this working correctly, in terms of when the device first loads up the page. The correct slider settings are being used.
But what I would like is: if the user scales the website below 480px then the javascript will change at that point (like CSS media queries) to use the new slider settings. At the moment, if you scale below or above the threshold, you have to refresh the page to get the new slider settings.
This is some code I managed to find from other questions asked on the site, but it does not allow the change to happen when the window is resized, only on a refresh:
<script>
$(document).ready(function(){
if($(window).width()>480){
$(".slideshow").startslider({
slideTransitionSpeed: 500,
slideTransitionEasing: "easeOutExpo",
sliderFullscreen: true,
sliderAutoPlay: false,
sliderResizable: true,
slidesDraggable: false,
slideImageScaleMode: "fill",
showTimer: false,
showPause: false,
showDots: false
});
return;
} else {
$(".slideshow").startslider({
slideTransitionSpeed: 500,
slideTransitionEasing: "easeOutExpo",
sliderFullscreen: false,
sliderAutoPlay: false,
sliderResizable: true,
slidesDraggable: true,
slideImageScaleMode: "fill",
showTimer: false,
showPause: false,
showDots: false
});
}
});
</script>
I am completely new to Javascript, so this may be a simple problem; but it's beyond me all the same.
You can wrap your code inside a function like this:
function slider() {
// your code here
}
which is then called on page load:
$(function(){
slider();
});
and also on window resize:
$(window).on('resize', function() {
slider();
});
I am working on jquery's jCarousel, In which i am having some images from database and shown as slider using jCarousel, my functionality is working as per i expected but i want to apply one more functionality is that if image is only 1, then it should not do sliding, I am taking image count from database then setting it in jCarousel visible property
$('.carousel').jCarouselLite({
visible: #ViewData["ImgTotalCount"].ToString(),
activeClass: 'current',
btnNext: ".carousel-next",
btnPrev: ".carousel-prev",
auto: 2000,
speed: 600
});
curently it is sliding even on one image
If you have only one image, set the auto parameter to null. It will restore it to its default value, and to its default behavior, which is not moving.
See documentation here : http://www.gmarwaha.com/jquery/jcarousellite/#doc
I'm using AnythingSlider (fun toy) as a website where the panels are the site's pages. As such, I want to disable and remove the Start/Stop button but leave the rest of the navigation. I'm under the impression that it's part of the navigation and can't be optioned out. If that's correct, how do I do it?
Actually, I want to move the navigation to the top right of the panel, as well.
Cheers
Completely removing the "start/stop" button:
buildStartStop: false
(no hiding, no tricks, simply removed)
From the examples here: http://css-tricks.com/examples/AnythingSlider/
The 2nd example does not have the button. If you read the source:
$('#slider2').anythingSlider({
width : 600, // if resizeContent is false, this is the default width if panel size is not defined
height : 350, // if resizeContent is false, this is the default height if panel size is not defined
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
autoPlay : false, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
navigationFormatter : formatText // Format navigation labels with text
})
Look at autoPlay. It is clearly responsible for the start/stop functionality, including the button.
Hiding play/stop button, but still working with autoplay:
startText : '',
stopText : '',
Call of the dogs. It is an option:
autoPlay : false,