I would like you to help me make a Javascript code with autoscroll down in one particular div in one page, and while it scrolls down i want to make one procedure.
Im new in javascript but i know these things to help you out
<div class="uiScrollableAreaWrap scrollable" data-reactid=".c6.0">
This is the div of the box that is scrollable.
Could you give me an example of how can i make a javascript code
to take this class and scroll down until the end of the Wrap??
Update one.
http://screencast.com/t/8WNIFZB8rYG
Check out this photo to see all the divs of the box that i want to scroll down.
Relevant SO Link
Just for your case:
This will scroll down to bottom of the div
var objDiv = document.querySelector("._5tee .uiScrollableAreaWrap");
objDiv.scrollTop = objDiv.scrollHeight;
DEMO
Update:
based on your screenshot, Assuming that you want to scroll the ul list to the bottom.
var ulList= document.querySelector("._5tee .uiScrollableAreaWrap");
ulList.scrollTop = ulList.scrollHeight;
In case you want it for other div, use this pattern
.uiScrollableAreaWrap.scrollable yourdivselector
Related
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
I have a list of divs which are floated left. They are inside another div, which can be hovered over to move that inner block of divs left and right. These inner divs or 'events' have class names which include a year.
I also have a range slider at the bottom. The values of this slider are years. When the range slider is changed I would like the first div which includes that year number to slide into view.
See example here... http://thetally.efinancialnews.com/tallyassets/20years/index.html
Currently when you change the slider value the number changes accordingly, but I don't know how to slide everything so the related numbered div comes into view. They are in a row of floated left divs so can't be absolutely positioned.
In the example above the last event div has a class of 'year1998' so would be a good one to test the code on
var slider = $('#range-slider'),
textbox = $('#range-no');
slider.change(function() {
var newValue = parseInt($(this).val());
textbox.empty();
textbox.append(newValue);
( I need something here which would say...
$('.year'+newValue).comeintoviewplease();
... or something to that effect)
});
Thanks in advance for any help
check this out, the same effect can be achieved using css transitions
http://css3.bradshawenterprises.com/transitions/
I am working on building a schedule. So far it's pretty straight-forward. There is one bit of functionality I am having issues with.
I have an ul that has a fixed height to allow scrolling. There are "Labels" (li.dayLabel) withing the ul that separate the hours. What I am trying to do is to have it so that when a label is scrolled out of view it will change the text in the placeholder to it's text. Then once that works, I need it to work in reverse. So when they label scrolls back into view it updates the placeholder. Basically, I am trying to make the placeholder be a title for the available items until another label is then scrolled out of view. This is for scrolling from the top. So as you scroll down the list the placeholder is meant to be a title for the section you are viewing until you reach another section and it takes its place. Then when you scroll back down I need it to replace the text with the previous li.dayLabel so the sections stay organized. I hope this makes sense.
You can see what I am trying to do by looking at the original that I am basing this off of. Notice how the placeholder changes as you scroll down the list and changes back when you scroll back up.
Demo: jsFiddle // Note: line 54 is the part that is in question
I originally used:
$(".snlf-schedule-list li.dayLabel:visible:first").text();
as the :first selector is suppose to only match a single element.
I later tried:
$(".snlf-schedule-list li.dayLabel:visible").filter(":eq(0)")
as this is suppose to be the same thing.
It seems that when an element is out of view it still is considered :visible I believe this is my issue.
Am I doing this completely wrong? I was under the impression that when you scroll an element like this it should no longer be :visible. After reading the documentation I have learned that this is not the correct selector to use.
It would appear that scrollTop is how I should be doing this. Now I have used scrollTop for scrolling down pages to disable animations when not in view but I am not clear on how to untilize this for a ul with scrollbars.
I tried:
var _first = $('li.dayLabel:first'); // next element to scroll out of view?
if( $(this).scrollTop() > (_first.offset().top+_first.height())) {
// Out of view
console.log("out");
} else {
// in view
console.log("in");
}
Updated Demo: jsFiddle
But it seems to be redundant as it's already calculating the first element so I am not sure how to get the correct element (the next one that's about to scroll out of view.) Then I need this to work when they scroll back up...
Any insight on this is much appreciated. Hopefully it's something simple I am just over complicating or missing completely.
Thanks,
Jeremy
The solution for my case was:
// Set placeholder text on scroll
var _scrollCagePositionTop = $(".snlf-schedule-list").offset().top;
var _first = $('li.dayLabel:first'); // first dayLabel element
$(".snlf-schedule-list").scroll(function(){
var _lastOffText = $(_first).text();
$("li.dayLabel").each(function() {
if ($(this).offset().top < _scrollCagePositionTop) {
_lastOffText = $(this).text();
}
});
$("#schedule-placeholder").text(_lastOffText);
});
What I did was set the known position of the top of the scroll cage (_scrollCagePositionTop)
When the user scrolls I set a variable _lastOffText that keeps track of the last item text content when scrolled out of view (less offset top than the palceholder). I then set this value to the placeholder.
This method allows me to have the proper text in my placeholder when the user scrolls up or down.
To fix the issue of an empty placeholder when the user scrolls back to the top I just set the default of _lastOffText to be the text of the first label ($(_first).text())
Hope others find this useful.
Here is the working demo: jsFiddle Final
divs are showing underneath one bye one of DIV
is there any option to show each .slide on the basis of mouse scrolling ?
go to underneath while scroll up
http://jsfiddle.net/WQ3hE/
You can check out the current scroll top, and then based on that, fire a jQuery code to activate the current tab. That's possible. A few things are unclear about your question. First being, this looks like a homework question. We would like to know what you have done so far. Secondly, you didn't provide what you need to do after the scroll.
$(document).ready(function(){
$(window).scroll(function(){
if (window.scrollY > 100)
$(".slide[data-slide='2']").height(2000);
});
});
Fiddle: http://jsfiddle.net/praveenscience/WQ3hE/1/
I can't find a script or example of this... I'd like to have a little div on top of window, when you hover on it, a top horizontal bar slides down. I've made a schema :
thanks
Check the fiddle:
http://jsfiddle.net/EghgN/8/
You can add your menu contents to the structure.