I am building a wordpress page using uncode theme and set the pages to scroll to section. However, when I get to the last section which is more than the height of the window, it stops scrolling using my mouse wheel.
How can I force this specific div which is only the last section to scroll as I wanted?
URL: https://powerfulpoints.com.au/SITE_2017/#6
Any help is much appreciated.
Thanks!
The only reason what I can think of is that you can't scroll down is because:
You have the following code:
$(this).attr('data-section', index);
If you look at the #6 html code it looks like this:
<div data-parent="true" class="enabled-scroll row-container onepage-
section boomapps_vcrow" data-label="6" data-name="6" data-section="6">
You see that is has data-section = 6
But the footer doesn't have any data-section
So there is no way it will scroll down with that function because number 6 is the end.
There are 2 thing you can do:
First thing is you can place the footer in to data-section 6
Second thing you can do is create a data-section 7
If you have any other questions just ask.
Related
I am trying to make a page which which have only two section 1st section which is at top have please see the image . Now I m able to go to div 1 to div 2 easily using pagePiling.js. can anyone tell me how to achieve the horizontal effect in div 1 . and after the end of the content on div 1 it must pagePile to div 2 . and when coming back to div 1 it user also see the effect of horizontal scroll.
In case you want to have a section with large content and therefore create an scroll bar for that section, you can do it by adding the class pp-scrollable to that section:
I have prepared a pretty self-explaining jsfiddle:
http://jsfiddle.net/nt7xzxur/ with the following scrolling code inside:
function smoothScroll(hash) {
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 750);
When you click on one of the links available, the browser's window is scrolled to the point where the corresponding item on the right side is located. There's one thing I would like to achieve though:
Obviously last two items won't scroll up to the top because there's not enough content below them for scrolling. I would like for ALL items to be scrollable to the top and so far I haven't found a good way to do it. I could add some blank lines below the last item, but it adds length to the right scroll bar and is not very elegant.
Is there any other way to make it happen through css, js or otherwise?
You can dynamically calculate the extra space and add this to end of the page. I have created one small code you can look at it and use it according to your need http://jsbin.com/mubugusido/6/edit?html,js
This will add extra space at the bottom of your .main div:
wH = $(window).height();
$extraH = $('<div></div>').height(wH);
$('.main').append($extraH);
Or you could add a min-height to .main and set it to some amount to guarantee there's enough space.
I believe that the only way you can achieve this is to actually add some content at the bottom.
You cannot get the page to scroll to the top of the Fifth Item because there isn't anything below to display, because the page has ended.
Making a web app similar to instragrams layout and the post items have a full width image and then a div heading above each once.
e.g.
<div class="blogpost">
<div class="blogtitle">
</div>
<div class="blogimage">
</div>
</div>
This is a simple list of the posts with the title above. On instragram, once the title hits the tops of the page (because of user scroll) that title div is fixed. Once the user scrolls more and the next title div meets the bottom of the current fixed once, the current one is pushed up and the new one fixed to the stop.
Any help on this?
You are looking to create a site that uses parallax scrolling. Here is a link to a helpful site.
Make a variable with a value of zero, and check (in JQuery) $('.blogtitle').eq('variableWithZero')offset().scrollTop() and if it's zero, change its position to fixed, and add one to the variable with zero. Before that, remove() (.blogTitle).eq('numberWithZero - 1)
This will only help with scrolling up, but it should get you started ;)
I have a fixed navigation at the top of the page that has links that smoothly scroll you around to different sections (IDs) of the page via jQuery.
Would there be any possible way to have a css class (e.g. .current) appended to the navigation links depending on what section of the page you're at?
For example, when I click "About", it'll scroll down to the About section and also make the navigation text orange as long as you stay in that section?
I've seen this done somewhere a while ago but I don't remember the website or even how to describe this behavior to search for it.
EDIT: Here's a link to something siliar to what I'm looking for:
http://www.fat-man-collective.com/hello.php
The icons change depending on your position on the page.
Script:
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}
</script>
HTML:
About
[...]
<div id="about">
[...]
</div>
Any help is greatly appreciated.
This would be possible by examing the offset()* function of the desired element and then coding to respond accordingly. You can track the offset of an element, and depending on the resulting offset, you would apply or remove the appropriate classes accordingly.
*See the documentation for offset()
When you click on a section in the navigation, just modify the class so that the style is what you want it to be.
Secondly, you'll need to add an event handler on the scroll event that similar modifies the nav's class.
Try this:
function goToByScroll(id){
$('ul#nav li a').removeClass('active'); // elements in menu
$(this).addClass('active');
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}
Four years later...for those that have the same question since hopefully the OP has solved his problem by now.
Check out Bootstrap's ScrollSpy plugin, which "is for automatically updating nav targets based on scroll position." For an example of using the ScrollSpy plugin see this detailed tutorial on how to make a floating, updating navbar (like the Bootstrap site uses).
Problem in brief
I have got a piece of working two dimensional scrolling code. Scrolling as such is working fine. Scrolling can be done in any direction (not like restricted to only horizontal or only vertical at a ti,e) but there are two problems -
Scrolling beyond the visible area towards top and left, does not bounce back the scrollable area.
Scrolling to right and bottom bounces back.
Problem demo - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Note - Test in webkit browsers only (Google chrome and Safari).
Solution I am looking for
Either, point out what is wrong in my code.
Or share any properly implemented working demo of both ways scroll (horizontal + vertical) using the same version of iscroll, so that I can follow the same. I am using - version 3.7.1, preferable, or using iscroll version 4, fine as well.
Or any pointers, of course, would be appreciated.
Problem Description
Please check working code here - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Note -
Test in webkit browsers only (Google chrome and Safari).
I have knowingly put everything inside the HTML section in the jsfiddle, because if I separate things completely, the scrolling does not work, and I am not sure where exactly it stops working. Thanks if you can point out.
Code
Here is the HTML -
<div class="header">
<div class='left_link'></div>Demo</div>
<div id="main_content" class="main_content">
<b><div id=scroller1><br/>
<div class='center_data'>Scrollable area</div>
<div class='center_data'>hello world!</div>
<br/>
</div></b>
</div>
Note - I know there is invalid html there - <div id=scroller1> is inside <b></b> and I am not sure why if I remove the <b></b> tags, horizontal scrolling does not work anymore - check here.
Here is the js -
var myScroll;
var a = 0;
function loaded() {
//setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below.
// Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
myScroll = new iScroll('scroller1', {desktopCompatibility:true});
//myScroll2 = new iScroll('scroller2', {desktopCompatibility:true});
}
// Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
// If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
I guess the reason is that the scrollable div is by default rendered at the bottom-right corner of the scrollable area. But I am not sure about the proper way to configure those things - how to set where to render the scrollable div inside the scollable area. So far I did not find any working demo of both ways scrolling - horizontal + vertical scrolling.
I checked out the documentation of iscroll and many working demos, but did not find any demo where scrolling can be done both ways - horizontally as well as vertically. I checked the "Accepted options are:" section under "Syntax" section in http://cubiq.org/iscroll but none of those params seem to be what I am exactly looking for.
Other things
Also, one more thing, I am not able to view the area covered by dom elements in chrome browser, while I inspect the given scroll demo. By viewing the area I mean moving the mouse over the dom inspector panel highlights the dom in the browser view. When does it not appear? I checked with validated HTML as in http://jsfiddle.net/sandeepan_nits/pAhjU/12/.
Somebody please create a tag iscroll or iscroll3 so that I can retag my question.
Update
I just want to have normal two dimensional scrolling with the scroll area being properly inside the visible screen and there should be bounce back on taking outside the screen. Right now there is no bounce back (in my jsfiddle) on scrolling towards top and left, outside screen. Bounce back happens on scrolling to right and bottom. I just want the scrolling area to be well placed inside the screen. I guess bounce back will automatically get fixed then.
I think the last version (4.1.8) on the github repo will fix your problem ;) I'm using it on some projects and it is now optimized for desktop browser ;)
Edit
From the documentation :
hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
vScroll, same as above for vertical scroll.
By default, when creating a new iScroll('idOfElement') the scroll is vertical and horizontal. It can be disabled with these parameters. Dual Scroll is totally possible as this video shows it.
So, to force dual Scroll :
var myScroller = new iScroll('idOfElement', {vScroll:true, hScroll:true});
This is not a complete solution, but this might help you.
First of all, The HTML code was not properly nested, and so you were needed to put the <div> inside the <b>. I fixed up the HTML a bit and its working without the <b>
http://jsfiddle.net/Aexhz/
And with properly nested HTML and correct settings, This worked even after dividing the HTML/JS/CSS
For me, it does show some Horizontal as well as Vertical Scrolling, but i don't know if that's how you want it to be. i Edited the Class initialization line as well
myScroll = new iScroll('scroller1', {desktopCompatibility:true});
TO
myScroll = new iScroll('scroller1', {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false,
desktopCompatibility: true
});
This doesn't affects much but i still put that.
I will continue looking into this and update my answer if i find anything new.
I know you want to fix this using iscorll but wanted to share this with you, i had great results using it: http://jscrollpane.kelvinluck.com/#usage
It is highly customizable with css, a demo here with vertical and horizontal scroll: http://jscrollpane.kelvinluck.com/basic.html