Skip to content

Commit a5eb6b0

Browse files
committedMay 9, 2014
- Updated README.md
1 parent 5028a48 commit a5eb6b0

File tree

1 file changed

+30
-26
lines changed

1 file changed

+30
-26
lines changed
 

‎README.md

+30-26
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ A simple plugin to create multi scrolling websites with two vertical scrolling p
88
Invite me to a coffe
99
[![Donate](https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/es/cgi-bin/webscr?cmd=_donations&business=BEK5JQCQMED4J&lc=GB&item_name=multiScroll%2ejs&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted)
1010

11+
Customizations of the plugin available upon request for some reasonable price. <a href="http://alvarotrigo.com/#contact-page">Contact me</a>.
12+
1113
## Introduction
12-
Suggestion are more than welcome, not only for feature requests but also for coding style improvements.
13-
Let's make this a great plugin to make people's lives easier!
14+
This plugin its in Beta version. Suggestion are more than welcome, not only for feature requests but also for coding style improvements.
1415

1516
## Compatibility
1617
multiScroll.js is fully functional on all modern browsers, as well as some old ones such as Internet Explorer 8, 9, Opera 12...
@@ -29,7 +30,7 @@ As you can see in the example files, you will need to include the JavaScript fil
2930
one rather than "linear" or "swing". You can also add the full jQuery UI instead of this file if you prefer -->
3031
<script src="vendors/jquery.easings.min.js"></script>
3132

32-
<script type="text/javascript" src="jquery.fullPage.js"></script>
33+
<script type="text/javascript" src="jquery.multiscroll.js"></script>
3334
```
3435

3536
###Required HTML structure
@@ -63,23 +64,24 @@ A more complex initialization with all options set could look like this:
6364
```javascript
6465
$(document).ready(function() {
6566
$('#multiscroll').multiscroll{
66-
'verticalCentered' : true,
67-
'scrollingSpeed': 700,
68-
'easing': 'easeInQuart',
69-
'menu': true,
70-
'sectionsColor': false,
71-
'navigation': false,
72-
'navigationPosition': 'right',
73-
'navigationColor': '#000',
74-
'navigationTooltips': [],
75-
'loopBottom': false,
76-
'loopTop': false,
77-
'css3': false,
78-
'paddingTop': 0,
79-
'paddingBottom': 0,
80-
'fixedElements': null,
81-
'normalScrollElements': null,
82-
'keyboardScrolling': true,
67+
verticalCentered : true,
68+
scrollingSpeed: 700,
69+
easing: 'easeInQuart',
70+
menu: false,
71+
sectionsColor: [],
72+
navigation: false,
73+
navigationPosition: 'right',
74+
navigationColor: '#000',
75+
navigationTooltips: [],
76+
loopBottom: false,
77+
loopTop: false,
78+
css3: false,
79+
paddingTop: 0,
80+
paddingBottom: 0,
81+
fixedElements: null,
82+
normalScrollElements: null,
83+
keyboardScrolling: true,
84+
touchSensitivity: 5,
8385

8486
//events
8587
onLeave: function(index, nextIndex, direction){},
@@ -91,7 +93,7 @@ $(document).ready(function() {
9193
```
9294

9395
#### Using anchor links
94-
In order to create links to certain sections, if you are using multiscroll.js with anchor links for the sections (using the `anchors` option), then you will be able to use anchor links also to navigate directly to a certain slide inside a section.
96+
In order to create links to certain sections, if you are using multiscroll.js with anchor links for the sections (using the `anchors` option), then you will be able to use anchor links also to navigate directly to a certain section by using the URL.
9597

9698
You can do it by creating accessing to the URL by adding the anchor. For example: `http://youriste.com/#secondSection`.
9799

@@ -122,7 +124,7 @@ It requieres the file `vendors/jquery.easings.min.js` or [jQuery UI](http://jque
122124

123125
- `loopBottom`: (default `false`) Defines whether scrolling down in the last section should scroll to the first one or not.
124126

125-
- `css3`: (default `false`). Defines wheter to use JavaScript or CSS3 transforms to scroll within sections and slides. Useful to speed up the movement in tablet and mobile devices with browsers supporting CSS3. If this option is set to `true` and the browser doesn't support CSS3, a jQuery fallback will be used instead.
127+
- `css3`: (default `false`). Defines wheter to use JavaScript or CSS3 transforms to scroll within sections. Useful to speed up the movement in tablet and mobile devices with browsers supporting CSS3. If this option is set to `true` and the browser doesn't support CSS3, a jQuery fallback will be used instead.
126128

127129
- `paddingTop`: (default `0`) Defines the top padding for each section with a numerical value and its measure (paddingTop: '10px', paddingTop: '10em'...) Useful in case of using a fixed header.
128130

@@ -132,6 +134,8 @@ It requieres the file `vendors/jquery.easings.min.js` or [jQuery UI](http://jque
132134

133135
- `keyboardScrolling`: (default `true`) Defines if the content can be navigated using the keyboard
134136

137+
- `touchSensitivity`: (default 5) Defines a percentage of the browsers window width/height, and how far a swipe must measure for navigating to the next section.
138+
135139
- `menu`: (default `false`) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will activate the corresponding element in the menu using the class `active`.
136140
This won't generate a menu but will just add the `active` class to the element in the given menu with the corresponding anchor links.
137141
In order to link the elements of the menu with the sections, an HTML 5 data-tag (`data-menuanchor`) will be needed to use with the same anchor links as used within the sections. Example:
@@ -154,7 +158,7 @@ $('#multiscroll').multiscroll({
154158

155159
- `navigationPosition`: (default `none`) It can be set to `left` or `right` and defines which position the navigation bar will be shown (if using one).
156160

157-
- `navigationTooltips`: (default []) Defines the tooltips to show for the navigation circles in case they are being used. Example: `navigationTooltips: ['firstSlide', 'secondSlide']`.
161+
- `navigationTooltips`: (default []) Defines the tooltips to show for the navigation circles in case they are being used. Example: `navigationTooltips: ['firstSection', 'secondSection']`.
158162

159163

160164
## Methods
@@ -174,8 +178,8 @@ $.fn.multiscroll.moveSectionDown();
174178
### moveTo(section)
175179
Scrolls the page to the given section. The first section parameter can be the index of the section or its anchor link.
176180
```javascript
177-
/*Scrolling to the section with the anchor link `firstSlide` */
178-
$.fn.multiscroll.moveTo('firstSlide');
181+
/*Scrolling to the section with the anchor link `firstSection` */
182+
$.fn.multiscroll.moveTo('firstSection');
179183

180184
```
181185

@@ -231,7 +235,7 @@ Example:
231235
}
232236

233237
//using anchorLink
234-
if(anchorLink == 'secondSlide'){
238+
if(anchorLink == 'secondSection'){
235239
alert("Section 2 ended loading");
236240
}
237241
}

0 commit comments

Comments
 (0)
Please sign in to comment.