I have created a HTML page with different sections. Each section is contained within a DIV. My requirement is to make transition between each divs. For Eg, after couple of seconds, section1 blurs out and section2 blurs in and so on. Now within a particular section I want the section contents to autoscroll until the end of the section is reached, from bottom to top. I am able to create toggle between different sections but am not able to scroll the contents of each section, so that for eg, the first section autoscrolls and when the end of section is reached, it only then goes to another section and then scrolls that. Can anybody please help me with this? I have paste my code at below link,
http://pastebin.com/rE8h5NK0
Also, I have given fixed position to each section heading but when I minimize the page the heading doesnt align correctly. And if I do not have it fixed, it is not properly visible on the page.
I would suggest running JQuery scrollTop in a loop, looking for when the scrolling reaches the bottom by matching the div's height minus the container's height with the amount scrolled:
function scroll() {
if ($('#div').scrollTop() == $('#div').height() - $('#container').height()) {
scrollInterval.clearInterval();
// Transition to next section
} else {
$('#div').scrollTop($('#div').scrollTop() + 1);
}
}
var scrollInterval = setInterval(scroll,20 /* Scroll speed */);
Related
I would like to display a sliding panel in my project, from a bottom fixed div (so sliding in the top direction).
This sliding panel will be used to extend a view of an existing element.
I have some problems to make it works great (where to start sliding, respect the padding of his parents, etc, etc)
I made a Plunker of a sample project representing my problem :
In this Plunker i would like to :
open my sliding panel from the top of my div (in red). As you will notice, when you click on the button to open it, the sliding panel start his animation from the bottom of the page and go over my div (in red).
align my sliding panel with my div (in red).
So here are my questions:
How can i start my sliding animation from the top of my div (in red).
I already tried that :
.sliding-panel-wrapper {
/* Other Css property */
margin-bottom: /*Height of the red div*/;
bottom: 0;
}
$("#mybtn").click(function() {
// Increase height instead of moving it from outside of the page to inside
$("#slidingPanel")[0].style.height= '500px'
});
This solution works for the starting position of my panel, but i don't want the sliding panel to increase his size, but to slide .
How can i give him the exact same size / padding / margin etc etc than the div in red ( because recursively looking for padding and margin of his parent seems not to be the best solution).
Edit : I'm looking for a "generic" solution if possible, i would like to be able that my sliding panel adapt itself to the constraint that i defined above if they change (so i would like to avoid giving hard coded value in my css).
Edit 2: Summarizing my question is : How can i make a panel slide NOT from the bottom of the page, but from the Top of another div (Please see my plunker)
If i'm understanding your question, you would like a sliding panel which is off page and then when a button is clicked it slides on page.
If this is the case then this will answer your question.
This is the html code which sets a div id as slide. The button has an onclick function called Slide().
<div id="slide"></div>
<button onclick="Slide()">Slide</button>
Make sure the div has a position of fixed and then set the bottom attribute to whatever you require.
#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}
This javascript is called when you click the Slide button. If the div is off screen then it will "slide" onto screen and if the div is on screen then it will "slide" slide off screen. But make sure you set your values to suit your needs because these values may not work for your solution.
var a = false;
function Slide() {
if (a) {
$('#slide').css('bottom', '-52%');
a = false;
}
else {
$('#slide').css('bottom', '0%');
a = true;
}
}
Any questions, just ask.
I've an div element #1 which stick on top the screen while scrolling. Thats working so far. Now further down on the page there is another element #2 and the element #1 should stop scrolling when it gets in contact with #2. To illustrate the scenario I made a sick picture with my paint skills.
Do somebody have an idea how to do it?
$el1.offset().top + $el1.outerHeight();
this will give you the bottom position of first div. Now When you scroll check if taht bottom position of first div is less than top position of second div. if it is less its ok but if it is greater than you can do whatever you want with first div. You can hide it on make its position absolute.
$(window).scroll(function(){
var bott = $el1.offset().top + $el1.outerHeight();
if(bott > $el2.offset().top){
$el1.css('display','none');
// OR
$el1.css('position','absolute');
}
});
hope this helps
Hello. I know there are a lot of questions about sticking a div to top or bottom when scrolling, but my problem is more specific.
The problem is that I want the div to stick to the top or the bottom, depending on how the user scrolls.
I made this jsFiddle snippet to show how the content is set up: https://jsfiddle.net/DTcHh/6155/.
The result I want is: whenever the user is scrolling, the content on the side should also scroll at the same time with the other content. If the content on the side reached the end (top or bottom), then it should stick to the top or bottom (depending on where the end of the content is reached)
For example, in the snippet I provided, I want the content on the side to scroll until the "Fixed content Last." is visible, then stick to the bottom as the user scrolls down. Now, if the user scrolls up, I want the side content to also scroll up until "Fixed content First." is visible, then stick to the top.
Html of the side contnet:
<nav >
<div id="filterAnchor"></div>
<div id="filterScroll" class="fixed_div">
Fixed content First.</br>
Fixed content.</br>
Fixed content.</br>
...
[more "Fixed content."]
...
Fixed content.</br>
Fixed content.</br>
Fixed content Last.</br>
</div>
</nav>
In the first place you need to know the scroll direction. And if I'm right you want the sticky side bar to scroll with the content but never out of sight.
I've edited the fiddle to do this.
It should need some optimization but I hope you get the idea. The tricky part is to check if the bottom is reached and I'm still not sure if this is the right way:
if ($window.height() <= $filterClass.height() + top) {
$filterClass.addClass('stick-bottom');
$filterClass.css('top', '');
}
Edit (see comments for more context):
With this updated fiddle I added support for different situations:
1. When the side content is longer than main content:
The default position is absolute. No javascript is needed for this to work properly.
2. When the side content is longer than the window height:
The position is set to fixed. When scrolling down (content moves up) the side sticks to the bottom when reached:
// top means position top of the fixed side
if(top < 0 && fixedHeight + top < windowHeight) {
$filterClass.addClass('stick-bottom');
$filterClass.css('top', '');
} else {
$filterClass.css('top', top+diff);
}
3. When the side content is shorter than the window height:
The position is set to fixed. Situation as in original answer above.
I have a page involving 3 sections, for e.g. top, middle and bottom.
Each of the sections are of fixed height. Lets say in this case 600px;
Within the middle section, I have some content that exceeds the stated 600px height. For e.g. 1200px of content. Creating an overflow, an inner scroll bar in the middle section.
My question is:
How can I implement a jQuery solution that will provide the following scenario.
User scrolls down past the top section to the middle section, the main scroll then snaps/switches to the middle - inner content with the overflow with 1200px height. Once they have scrolled down to the end of the content, they leave the middle section and the scroll snaps/switches back to the end section.
Can you provide a solution?
Thanks in advance
UPDATED:
this is probably not exactly the way you want it to work, but it does what you need in a way: DEMO
var passed=false;
$(document).scroll(function(){
if($('body').scrollTop()>=$('#middle').offset().top && !passed){
$('body').css('overflow','hidden');
$('#container').css('overflow','auto');
$('#container').attr("tabindex",-1).focus();
$('#container').scrollTop(0);
}
else if($('body').scrollTop()<$('#middle').offset().top){
passed=false;
}
});
$('#container').scroll(function(){
if($(this).scrollTop()+$(this).height()>=$('#long').height()){
$(this).css('overflow','hidden');
$('body').css('overflow','auto');
passed=true;
}
});
I am facing a problem with set scroll bar top position. Actually what I need is; I am using a JQuery Keyboard plugin where for all the elements I need to display the virtual keyboard at the center bottom of the page and its done.
But the problem I am having is when I have a input field near to the bottom of the page where that page does not display the scroll bar (It means there is no need of overflow because all the elements I have is visible in my page). Since I am displaying the virtual keyboard at the bottom of the page and when the focused element also is at the bottom of the page I need to initiate the scroll bar and page should go up by scroll down automatically so active input field element is visible to me.
I tried to set the scroll bar by using this
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where _scroll_top is my current scroll top position, _el_top is focused elements top position, _el_height is my focused elements height and _keyboard_top is the top position of the keyboard.
Now the problem is when I have a more height page (It means scroll bar size is small i.e. scroll bar size may be around 60% of the screen.Height) scrollTop is correctly working and I can see the active input element even though keyboard is visible. But when I have small height of a page (Example: scroll bar size is around 90% or it may be same size of screen.Height) scrollTop is is not working correctly so the active input element is not visible and it is behind to virtual keyboard.
How can I set the scroll top correctly so I will be able to see the active input element then at the bottom of that element I can see virtual keyboard.
Please see the attached image. That is where actually active input element should be displayed.
First Image is Before Enable the keyboard: Just see the element's position, sroll top
Second Image is After Enable the keyboard: Just see the element's position, sroll top
This is what I need when my scroll bar size is big (Around 90% of the screen.Height)
Thanks in advance.
P.S: I am extremely sorry if I confuse by the way I expressed my question.
use jQuery('html,body').scrollTop('other things here');
Thanks for the responses.
I have found the solution for my question.
At the bottom of the page I have created a dummy div element.
<div id="scroll_dummy"></div>
Initially this div will be having zero height. I applied the height of the keyboard to this div. As a result your page size will be increased so it can easily move the scroll top. At the time of close again revert back this style.
Then at the place of I am applying scrollTop I have done this.
$("#scroll_dummy").css("height", _keyboard_height);
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where
_scroll_top : scroll top position
_el_top : active element top position
_el_height : active element height
_keyboard_top : keyboard element top position
_keyboard_height : keyboard element height position
Done with this... :)