Using Google Polymer, I am attempting to animate the scrolling of the content of my core-scroll-header-panel with little success. I attempted scroll the the <body> tag like in most classic cases:
$('html, body').animate({
scrollTop: element.offset().top
}, 400);
Does not work.
So I assumed that there is an overlaying scrollable <div> that is being generated. Yet, upon looking through the DOM and attempting the scroll on multiple elements, it had all failed. So, I decided to try the ultimate test:
$('html /deep/ *').animate({
scrollTop: element.offset().top
}, 400);
This works.
So the question is, how do I animate the scrolling of core-scroll-header-panel? Or is there a way to tell which element is being altered by html /deep/ * selector? I attempted something along the lines of this (followed by the second example) without success:
$('html /deep/ *').scroll(function(e) {
console.log(e.currentTarget.id);
}
Nothing returned.
My current setup:
<core-scroll-header-panel flex fit condenses keepCondensedHeader>
<core-toolbar class="tall category-toolbar" slide-down>
<div class="bottom fit-margin">
<div id="pay-tag" inline flex center fit>pay to</div>
<div id="results-user" inline center-center fit>John Doe</div>
</div>
</core-toolbar>
<div class="center-panel" flex auto>
<!-- content that scrolls -->
</div>
</core-scroll-header-panel>
I'm surprised that no one has attempted to give an answer to this, but after some fiddling I managed to find the solution.
Looking through the source with the help of some javascript, I found that core-scroll-header-panel generates a scrollable element in it's shadow DOM refered to as #mainContainer which hold the main content and a #headerContainer which holds the header content.
I used the method I posted earlier with some small changes (polymer-element being your custom node):
// query all possible elements in question
var $this = $('html /deep/ {polymer-element} /deep/ *');
// register scroll event to log id
$this.scroll(function(e) {
console.log(e.currentTarget.id);
});
// begin animated scroll
$this.animate({
scrollTop: 200
}, 400);
This resulted in the events of #mainContainer being logged to the console and ultimately the culprit I have been looking for. So to wrap it all up, the resulting (cross-browser) code would look like this:
var element = $('#myElement');
var scope = this.shadowRoot.querySelector('core-scroll-header-panel');
var scrollable = scope.shadowRoot.querySelector('#mainContainer');
$(scrollable).animate({
scrollTop: element.offset().top
}, 400);
Hopefully this helps out anyone else that encounters this issue, and hopefully Google will add this quirk to it's polymer documentation.
Related
I'm attempting to cause a chevron to fade out when I scroll down. I can get it to work with the following code when I scroll down the body element:
<script>
$(window).scroll(function(){
$(".arrow").css("opacity", 1 - $(window).scrollTop() / 250);
});
</script>
However, the chevron is placed inside of a long div element (id="scrollsnap-container" class="scrollsnap-container) and I want it to fade out when I scroll down within the div (as opposed to the body itself).
I have attempted
$(document.getElementById('scrollsnap-container').scroll(function(){
$(".arrow").css("opacity", 1 - $(document.getElementById('scrollsnap-container')).scrollTop() / 250);
});
but am yet to have luck with that.
You can achieve result with js also
const element=document.querySelector('ELEMENT');
window.onscroll=function(){checking()};
function checking(){
element.style.opacity=Math.max(0,1-(window.scrollY/250))
}
It turns out I was loading jquery in the wrong spot (it was after this code rather than before). The code I was using worked:
$(document.getElementById('scrollsnap-container').scroll(function(){
$(".arrow").css("opacity", 1 - $(document.getElementById('scrollsnap-container')).scrollTop() / 250);
});
Importing jquery at the correct point resolved the issue.
I have a simple blog, and each blog post has a number of images ranging from 1 to 10. If you click on any of the images in the post, it should scroll you down to the next post. I thought something as simple as this would've worked:
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function () {
var $this = $(this);
$('.journal-container').animate({
scrollTop: $this.closest('.each-journal-entry').next().offset().top
}, 500);
});
But when I click another image, except for the first one, it just scrolls to an odd position.
I managed to achieve this with some help, and you can see the output here: http://jsfiddle.net/w7rtcmp0/3/ which works great, but the difference for me is that my content is in a scrollable div (hence .journal-container and not html, body.
Any ideas why I am having this issue? I have created a jsFiddle with the scrollable div, and if you click an image further down... it replicates this issue... so hopefully this helps.
http://jsfiddle.net/w7rtcmp0/5/
Thanks.
jQuery adjusts offset().top() based on the current scroll position.
Using JavaScript's offsetTop property should fix the problem:
scrollTop: $this.closest('.each-journal-entry').next()[0].offsetTop
Fiddle: http://jsfiddle.net/m7cm5oL6/
So I think you were trying to use the wrong height.
Here I set a variable of height and set it to the height of the current journal/blog object. This allows me to scroll my height all the way down to the next available blog object.
http://jsfiddle.net/w7rtcmp0/24/
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function() {
$this = $(this);
var height = $this.closest('.each-journal-entry').height();
$('.scrollable').animate({
scrollTop: height
}, 2000);
});
You may want to look at Ariel Flesler's jQuery scrollTo plugin, I had the same issue and using this saved me hours of debugging.
I want to write an Jquery or JS script to scroll down a given page if it has the vertical scrollbar. This is to automate the web page navigation using the mouse wheel, so I should be able to animate it with time.
I was reading the web but seems that to do something like this you need to know an element name. Is it possible without knowing any element name? Something like $(document).scrollDown(speed)?
You could animate scrollTop property of html and body elements, like this:
$(window).load(function() {
$("html, body").animate({ scrollTop: yPosition }, 1000);
});
In this snippet, yPosition represents the height you want to reach, and 1000 controls the speed.
To detect if the page has a vertical scroll bar you could do:
if((document).height() > (window).height())
{
$('html').animate({scrollTop : ((document).height()},'slow');
}
I've searched everywhere but couldn't find anything that suited to me.
I would like to do something like on this site:
http://fromtheroughmovie.com
I've looked into the js (800kb!), and from what I could see, it's using scrollTo to stealthily scroll towards elements depending on mouse position.
The closest script I could find was this : http://scripterlative.com/files/cursordivscroll.htm
But it scrolls only when towards the edges (I hacked it to try with a superior size but it stutters with Chrome).
Does anyone know how to do a complete mouse scroll (div is 4000px large, with 6 big divs positionned as absolute)? I tried a lot of things but this leads to nowhere for now.
If more information is needed, just ask.
Thanks in advance.
Have you looked at this plugin?
http://demos.flesler.com/jquery/scrollTo/
It's a pretty adaptable plugin with lots of scrolling functionality. It uses a function called 'scrollTo' which is maybe what you saw in that site's code?
In your example code from scripterlative, you can adjust the scroll area to be from just around the edges. The example is set to 20% boundary:
new CursorDivScroll( 'userComment', 20, 10 );
You can change the second param to be 50 and see if that helps.
As for the original site you need to tidy the javascript up to see how it all works. The page content is loaded via AJAX. Search for function runTransition(page). This pulls in the 'home' page, after the intro. This content contains a more useful bit of javascript: http://www.fromtheroughmovie.com/js/main-home.js
From there, you can see how the cast images are scrolled:
<div id="home-mosaic">
<ul>
<li id="cast-image1">...</li>
<ul>
</div>
The javascript that does the hard work seems to be a jQuery animate:
$("#home-mosaic > ul > li").mouseenter(function() {
$(this).find("div.home-mosaic-separation").animate({'width': (currentWidth*0.20) + 'px', 'left': (currentWidth*0.40) + 'px'}, 400);
});
$("#home-mosaic > ul > li").mouseleave(function() {
$(this).find("div.home-mosaic-separation").css({'width': (currentWidth*0.02) + 'px', 'left': (currentWidth*0.49) + 'px'});
});
Hope that helps!
I have html elements with id's assigned. Now I want to scroll to those elements. I see jQuery has a scrollTop which takes an integer value.. How do I easily just make a particular html element with an id scroll to the top? Ideally, with nice and smooth animation.
A quick search showed many scrolling plugins... if a plugin is needed for the above functionality, what's the most popular one? I'm also using jquery-ui.
You could use something like this to scroll to #someElement when the page loads:
$(document).ready(function() {
$("html, body").animate({scrollTop: $("#someElement").offset().top}, 1000);
});
It simply animates the scrollTop property of the body element, and uses the top offset of some specific element as the position to scroll to. The animation lasts for 1000ms.
Note: it selects both html and body so it works across browsers. I'm not sure on the specifics, but some quick tests show that Chrome uses body, but Firefox and IE use html.
Here's a working example.
Consider the following snippet:
$('#myDiv').bind('click',function(){
var pos = $(this).offset().top,
scrollSpeed = 2;
for (var i = pos; i > 0; i=i-scrollSpeed) {
$(window).scrollTop(i);
}
});
It scrolling was binded to #myDiv element on click just for example. Code determines a position of #myDiv element, than calculates number of scroll steps (speed/smoothness). Than does jQuery .scrollTop() thing.