Sliding to different pages in website - javascript

I am using Zurb Foundation to create a small website and I have a top navigation bar with four links. On clicking each link, I want to horizontally slide to a different page every time.
The content in the page should be loaded via ajax and not loading all pages on visiting index page itself. (note: content for slide-to page should be loaded not after the slide animation but somehow with the slide itself or else the empty sliding would look a little weird)
In addition, since I am using foundation to get responsive layouts, I am confused how to place the sections for the different pages horizontally. If the website wouldn't have been responsive, I probably would have placed the other pages separated by a margin property and to slide them, I could have done an animate of the margin property.
But, how do I get a horizontal page sliding effect (along with ajax loading) on my current page?

I think you want a 'single page website'? There are a lot of tutorials about this but this one is great:
http://vandelaydesign.com/blog/web-development/single-page-sliding-nav/
A live demo can be found here:
http://vandelaydesign.com/demos/single-page/
This uses jquery to scroll to the element with a specific id on the page. When you click one of the menu items it scrolls/slides automatically to that part of the page.
Just because the code is a bit long I'll only post the Jquery, to give you an idea.
<script type="text/javascript">
$(document).ready(function(){
$('#topnav').onePageNav({
currentClass: 'current',
scrollOffset: 0
});
});
</script>
$('#nav').onePageNav({
currentClass: 'current',
changeHash: false,
scrollSpeed: 750,
scrollOffset: 30,
scrollThreshold: 0.5,
filter: '',
easing: 'swing',
begin: function() {
//I get fired when the animation is starting
},
end: function() {
//I get fired when the animation is ending
},
scrollChange: function($currentListItem) {
//I get fired when you enter a section and I pass the list item of the section
}
});
Hope it helps :)

Related

I have an issue with Slick.js

I'm using a WordPress plugin to create several carousels of posts on my homepage which uses Slick.js to create them.
I have created a tab menu with four categories / carousels, so that when I click on any of the items in the menu, that carousel is displayed while the others are hidden.
I hide all the carousels when the homepage is loaded, and I just display the first one that belongs to the first item in the menu.
On desktop, the script is working perfectly, and all the images and text inside the different carousels are displayed beautifully. But on mobile, it seems that carousels are hidden before all the posts (image, title and text) inside are loaded and the space they occupy is calculated.
I'm writing below the code I'm using to show you what I'm doing. Maybe the code is wrong, as I'm not an expert on Javascript (jQuery). In any case, how could I reset the carousels when I click on any item menu, so that all the posts inside are recalculated by Slick again?
jQuery(window).on('load', function () {jQuery('#' + parents_siblings_id).animate({ opacity: 0, zIndex: -99 }, 600, function() {jQuery(window).on('load', function () {
jQuery('#' + parents_siblings_id).animate({ opacity: 0, zIndex: -99 }, 600, function() {jQuery("#carousel_2").parents('.carousel-wrapper').parent().addClass("hidden");jQuery("#carousel_3").parents('.carousel-wrapper').parent().addClass("hidden");jQuery("#carousel_4").parents('.carousel-wrapper').parent().addClass("hidden");});});});});
Thanks in advance!

Velocity JS slide and scroll

So I have some text on a page that is hidden and when I click a button the text is revealed with a "transition.slideDownIn' and when a button is clicked the text is hidden again using a "transition.slideDownOut". The problem is that the reader is left further down the page and I want them to be brought pack up to the parent div of the text which is slid down/up, ideally animated simultaneously with the slideDownOut. I have tried several different things (queues, etc) but I can't seem to figure out what I am doing wrong. Am I approaching to problem incorrectly or misusing the functions?
Below is my most recent attempt.
$read_close.velocity('transition.slideDownOut', 1000, function() {
$('#services').velocity("scroll", {duration:1000, easing: "spring"} );
});
If what you wish to accomplish is simply scroll back up after the transition then do something like:
$read_close.velocity(
'transition.slideDownOut',
{duration: 1000,
complete: function () {
$('#services').velocity('scroll', {duration:1000, easing: "spring"});
}});
Assuming your scroll call is correct.

Modifying onepage scroll functionality - overlap instead of slide up

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.

jQuery ui tabs : sliding effect when switiching between tabs

I am using jquery ui tabs. I want to apply sliding content effect when switching between tabs i.e on showing and hiding of the tabs content. Here is my DEMO
I'm trying to slide the tab divs with the content in them when I click on the navigation above it all. So Nav link 1 would slide the content of #tabs-1 in front of the screen, etc.
The script I have currently, which has no sliding functionality is :
$(document).ready(function () {
$('#tabs').tabs();
$('.sub-nav a').click(function () {
$('.sub-nav li a').removeClass('subnav-active');
$(this).addClass('subnav-active');
});
});
I've tried to do slideToggle, as well as just a fading out and fading in effect, but couldn't get either to work. So i'm reaching out for some assistance, even if all it is, is somewhere to look, that would be greatly appreciated since i'm not the greatest at javascript or jQuery.
jQueryUI has effects built in. No need to roll your own.
http://api.jqueryui.com/slide-effect/
http://jsfiddle.net/isherwood/9jg4r/4/
$('#tabs').tabs({
hide: {
effect: "slide",
duration: 1000
}
});
Here's an example with show and hide effects: http://jsfiddle.net/isherwood/9jg4r/5

how to slow down Flowslider slider?

I have a flowslider slider, here the page of the project http://www.flowslider.com/
It's a very easy to use slider however I don't know how to reduce the sliding speed, there's no working example in the site
that's my slider initialization code:
<script>
jQuery(document).ready(function($) {
// Select your slider element and call Flow Slider plugin.
var $slider = $("#slider");
$slider.FlowSlider({
controllerOptions: [{
mouseStart:100,
mouseEnd:100,
}],
marginStart:20,
marginEnd:20,
mode:"horizontal"
});
});
</script>
the actual slider is just a
<div id="slider">
a bunch of PHP generated divs here, each one is a slider element
</div>
I tried setting speed and coefficient but without any results
You can't change the sliding speed, it's because the sliding speed depends on user mouse action ( user mouse movement) and the width of content div and the count of images in it. It means when you move your mouse slowly cross the slides the sliding happens slow and when you do it fast slides goe fast. This slide is not that kind of slides that repeats sliding in a period of time.
As written in the documentation of HoverCenter you can use the coefficient or write your own moveFunction. It seems that a list for controllerOptions is missing in the documentation.
To get coefficient to work, use something like:
$('#flowslider').FlowSlider({
mode: 'horizontal',
marginStart: 0,
marginEnd: 0,
controllers: ['HoverCenter'],
controllerOptions: [{
coefficient: 0.1
}]
});

Categories

Resources