Comments (15)
Hi, here's a working example:
www.pixxelfactory.net/downloads/jInvertScrollX.zip
from jinvertscroll.
Yes, the waypoint navigation is an utter failure. Even I faced this issue recently when I was doing a small project(www.sakshamsaxena.in/demo_for_cansat) which extensively employed jInvertScroll. Since I was dealing with a deadline, I came up with quick work-around (I used ScrollTo for navigation scrolling) :
var dynamicWidth = window.screen.availWidth;
var trueWidth;
if(dynamicWidth>=1360&&dynamicWidth<=1370){
trueWidth = dynamicWidth+130}
else{trueWidth = dynamicWidth+101}
//and then
$("#l1").click(function(){$('body').scrollTo({top:trueWidth},800,{axis:'y'})});
//proceed similarly for other links
from jinvertscroll.
Hi guys, no, do not do it manually like sakshamasaxena, do it this way (i will upload this example and provide a link today when i'll have 5min):
jInvertScroll Example
<div class="menu">
<a href="#" data-target="el1">El1</a>
<a href="#" data-target="el2">El2</a>
<a href="#" data-target="el3">El3</a>
<a href="#" data-target="el4">El4</a>
</div>
<div class="horizon scroll">
<img src="images/horizon.png" alt="" />
</div>
<div class="middle scroll">
<img src="images/middle.png" alt="" />
</div>
<div class="front scroll">
<img src="images/front.png" alt="" />
<div class="elements">
<div class="el el1"></div>
<div class="el el2"></div>
<div class="el el3"></div>
<div class="el el4"></div>
</div>
</div>
<script type="text/javascript" src="../libs/jquery.min.js"></script>
<script type="text/javascript" src="../dist/js/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
$.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
{
height: 6000, // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
onScroll: function(percent) { //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
}
});
$('.menu a').on('click', function(e) {
e.preventDefault();
var target = '.'+$(this).data('target');
var left = $(target).position().left;
var total = $('.front.scroll').width();
var perc = left / (total - $(window).width()) * 100;
var height = $('html').height();
var final = ((height - $(window).height())/ 100 * perc);
$('html, body').animate({scrollTop: final}, 500);
});
}(jQuery));
</script>
from jinvertscroll.
@pixxelfactory It's not working for me. When I click on the menu link, it is not navigating to the target location. If I scroll the mouse to some location then I click on any of the menu links it is navigating to top of the page. All the menu links navigating to top of the page only, because always the var final = 0.
from jinvertscroll.
@sakshamsaxena Your example is working, but we need to define exact trueWidth for every section.
from jinvertscroll.
@pixxelfactory Thanks, your demo is very helpful for me.
from jinvertscroll.
@nag-uf No problem, please let me know if it worked for you, otherwise send me a link to your site, so i can check it out ;-)
from jinvertscroll.
Sure!
from jinvertscroll.
@pixxelfactory Neat! I think you can close this issue now, if @nag-uf is satisfied with the solution.
from jinvertscroll.
Let's see if it works for him..
Anyway, when i'll finally have a few hours i will integrate the menu script into the plugin, so we can fix this problem one and for all =)
from jinvertscroll.
Yah, that's a cool script and it's working perfectly. Thanks @pixxelfactory
from jinvertscroll.
Thank you! @pixxelfactory is there any way to make the elements or pages responsive? Everytime I set a height variable other than a fixed value it doesn't display the divs.
from jinvertscroll.
Hello @pixxelfactory
The demo you uploaded works great in chrome but I cannot get it to work at all in either Microsoft Edge or Internet Explorer? Any idea on which approach to take to fix it?
Cheers!
from jinvertscroll.
Hi @daniantong
I just tried the demo i uploaded in IE 11 on Win 8.1 and it works,
can you send us a link of your project, so we can check it out?
Best regards
from jinvertscroll.
Hello @pixxelfactory
Thanks for the reply!
I managed to get it to work now.
I am now trying to create previous and after arrows that you can click to go to the next section, any idea on where to start?
Cheers
from jinvertscroll.
Related Issues (20)
- working with jQuery v1.11.1 HOT 5
- Typo on website HOT 3
- Start scrolling at a given point only HOT 6
- How can i implement smooth scrolling. HOT 7
- Bower package HOT 1
- Callback Function on init HOT 2
- Different "Scenes"
- How to fix on mobile ? HOT 9
- anchors issue
- Creating 'Next' and 'Prev' links
- Start scroll in middle of page
- how to 'stop' the inverse scroll HOT 1
- How do I vertical align my content? HOT 1
- Scroll Bar position HOT 3
- how to implement it in wordpress HOT 1
- Body Height HOT 1
- Mouse click and drag to scroll
- Elementoffset scroll to the center of the element
- Slow performance on ipad HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jinvertscroll.