Smooth scroll to div in polymer element - javascript

I am using the Polymer 1.0 tools to build a webapp and I am having trouble starting a smooth scroll to a specific div. I have success using the polymer method this.$.div.scrollIntoView() but this just moves to the specific div without scrolling to it. I would like to use the jQuery method scrollTop() but cannot seem to figure where to fire this function and when/how I can attach this function to a paper-fab. Here is what I have so far:
<div align="center">
<paper-fab icon="arrow-downward" id="fab" on-click="scrollToView"></paper-fab>
</div>
And here are my scripts at the bottom of this specific Polymer element:
<script>
Polymer({
is: 'my-view',
scrollToView: function() {
this.$.parallax.scrollIntoView(false);
}
});
</script>
<script type="text/javascript">
function goToByScroll() {
$('html, body').animate({
scrollTop: $("#section_one_cont").offset().top}, 'slow');
}
$("#fab").click(function(e) {
goToByScroll();
})
</script>
So the first 'Polymer' script does in fact work but not in an appealing way, and then if I try to only use the jQuery scripts, they don't do anything.
This is the jQuery CDN I am using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Any and all help is appreciated, I would really like to figure out how to use non polymer scripts within Polymer elements as that would open up a few more things I would like to achieve with this. Thanks in advance!

I was trying for several hours to find a solution for my own project (preferable one that doesn't require JQuery). Unfortunately all options come with a twist.
scrollIntoView()
With scrollIntoView it is possible to define a behavior which can be set to smooth, instant or auto.
The catch is that the scrollIntoViewOptions which are defined in the scrollIntoView are only supported by Firefox.
element.scrollIntoView({block: "end", behavior: "smooth"});
scroll-behavior
I in person would prefer this solution. As it is just a simple CSS snippet.
However, similar to the above example not all Browser support it and Chrome and Opera only do it when enabling the experimental web platform features.
Which doesn't really help your users.
scroll-behavior: smooth;

Related

jQuery Mobile Scroll Events

Having issues with getting the scroll series of events to function (at all, not just as designed). Have been trawling through all articles, code suggestions and other help topics regarding this, but no-one can explain why this example doesn't work at all:
Basic page html:
<!DOCTYPE html>
<html>
<head>
<title>JQM Test</title>
<script src="/inc/jQuery/jquery-1.11.3.js"></script>
<script src="/inc/jQuery/mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
var scroll = 0;
$(function() {
$(window).on('scroll',function(e) {
console.log("Scrolled - "+scroll);
scroll++;
});
});
</script>
</head>
<body>
Contents blah blah.
</body>
</html>
Ok so the inclusion files need substituting if you copy paste, and version may be differnet. Anwyays onto the behaviour. When I take out the jquery.mobile inclusion the script works as expected, logging scroll notes into the console whenever scroll position is altered.
When I include the jquery.mobile it fires once when the page loads and thats it. Have tried document/window changes in the jquery script section, scrollstart and scrollstop events. Even tried explicitly binding an even to the scroll using native javascript. Same result, all works fine without jqm inclusion, fails when I include the jqm.
Can someone explain to me why the JQM stuff breaks the scroll functions?
EDIT:
THe following JS functions have been attempted with the EXACT same result (function until JQM inclusion added)
$(document).on("scrollstart",function(){
****
$(document).on("scrollstop",function(){
****
$(window).on("scrollstart",function(){
****
$(window).on("scrollstop",function(){
****
$(document).scrollstart(function(){
****
$(document).scrollstop(function(){
****
$(window).scrollstart(function(){
****
$(window).scrollstop(function(){
****
window.onscroll=myFunction;
document.onscroll=myFunction;
window.attachEvent("scroll",myFunction,false);
document.attachEvent("scroll",myFunction,false);
Try this :
$(function() {
$(window).on('scroll',function(e) {
console.log("Scrolled - "+scroll);
window.scrollBy(100, 0); // for scroll horizontally.
});
});
With help from #FraserCrosbie turns out it was a bit of CSS I was ignoring: https://jsfiddle.net/nzwodyte/4/
The CSS was assigned to a [data-role=page]{ elements and had the height: 100% and position: relative tags.
Didn't realise that JQM was assigning data-role="page" to elements in my HTML without my declaration of said tags.
So for anyone with the same issues, check height and position CSS of your pages (from a debug point of view, not in the original DOM)

IE8 seems to execute js before css is rendered

I've got a weird problem. I'm using Bootstrap for a website that has to be optimized for IE8. When i test the html prototype in a real IE8 (no IE emulation) the javascript seems to be executed before the website is rendered.
To prevent this I placed the javascript at the bottom of the body and the script is surrounded by a window load function.
Do i miss something? I don't want to use a SetTimeout.
A short js code example.
$(window).load(function() {
// for example a function that resets the sliders offset
function reset_slider() {
$('.slider-main').css({'margin-top': '0px'});
}
reset_slider();
}
All Browsers beside IE8 execute this script after the site is rendered.
Thanks in advance
Marcus
Set your js function to load after the page has.
window.onload = yourfunction
or you could use:
<body onload="yourfunction();">

Going to a page anchor after load adding transition

I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()

Selecting :target on document.ready()

The following is a simple test case to demonstrate what I'm trying to do:
<html>
<head>
<title>Test</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(":target").css('color', 'red');
});
</script>
<ul>
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
</ul>
</body>
</html>
The idea is to do something through jQuery/Javascript to the targetted item, when something is targetted (for example, test.html#two).
This works as I expect it to in Firefox and IE 10, but not in Chrome, Opera or Safari, which leaves me wondering if this is a bug in some browsers, if what I'm trying to do is somehow wrong, or if I've run afoul of an inadequately precise part of some specification or other.
If I change the jQuery code to do
alert($(":target").length);
it becomes apparent that Chrome, Opera and Safari can't find the :target element during document.ready(), but calling the same code later (via console or function attached to a click event) does find the elements.
When should :target become accessible to JS?
This was posted as a comment but was later removed, you can try waiting for the window load event:
$(window).on('load hashchange', function(){
$(':target').css('color', 'red');
});
This for me produced mixed results on Chrome, it worked when doing a page refresh (F5) but not when hitting enter in the address bar.
I don't know if there's any way to handle this correctly on page load using the :target selector but you could always get the hash value and use it as your selector:
$(window).on('load hashchange', function(){
var target = window.location.hash;
$(target).css('color', 'red');
});
UPDATE
I've been doing some research on the issue plus some tests and I have a couple of insights to share:
First off, we need to understand that when calling $(':target') jQuery internally makes use of querySelectorAll(':target') which means it's directly related to the CSS specification of the pseudo-class, but why isn't working inside document.ready()?
Well, I found that wrapping the code inside setTimeout(fn,0) actually makes the selector available:
$(document).ready(function(){
setTimeout(function(){
$(':target').css('color', 'red'); //THIS WORKS
},0);
});
You can read this answer for an explanation on how adding a zero-ms timeout actually makes a difference, but basically it allows the browser to complete other non-javascript related tasks (in which we would find making the actual CSS pseudo-class available for query). I believe Firefox somehow manages its internal processes differently and that's why the code works there without the need for a timeout.
Now I also discovered that jQuery's internal sizzle selector engine provides a fallback for browsers that do not support CSS :target pseudo-class, which you can use inside document.ready() without issue:
$(document).ready(function(){
$(':target()').css('color', 'red');
});
This works because instead of relying on the CSS class it is a javascript implementation that makes use of the hash property on the window.location object, internally it is defined as follows:
"target": function( elem ) {
var hash = window.location && window.location.hash;
return hash && hash.slice( 1 ) === elem.id;
}
The only think you should note is that this function will go through every element on the page if it's not passed a selector like :target(div), so I believe using the workaround I provided earlier would still be a better option than this.
Because the page is not been reloaded. You need bind it to hashchange:
$(window).on('hashchange', function(){
$(":target").css('color', 'red');
});
http://jsfiddle.net/sXsYx/
Notice that you have much more work to make it right, maybe combine it with $(document).ready
you can use css3 target selector for styling work
:target
{
color:red;
}
Since there is no specialized logic in your example (if statements or such), why don't you just do the styling in CSS? The :target pseudo-class is a CSS3 selector.
:target {
color: red;
}
Note that this will work in all modern browsers, and even some very old browsers (Chrome 1 and Firefox 1.3, for instance), but with Internet Explorer it is only supported starting from version 9.
You can also do it in both places if you wish (CSS and JavaScript), however the JavaScript would seem redundant unless you specifically need IE <= 8 compatibility.
I've noticed that you are using jQuery version 1.10.1, which retains support for IE <= 8. Is that important? If not you can also move to jQuery 2.0.2 (latest version at time of writing).
You should do like this
$("li:target")
This will select the element. This is the better way
Refer this please,
http://api.jquery.com/target-selector/
Or you should remove document ready and put the script at the end of the html document

Open links in div container in JQuery Mobile

i have a multi-column layout where "#content-primary" is the div i want the actual content loaded, and "#content-secondary" holds a generated listview of links(effectively a navigation menu).
I'm using this code to change the page, pretty much following the JQM Docs, however the browser is following the links to entirely new pages, instead of loading the content from them into the "#content-primary" div. There's obviously something I'm missing.
$(function(){
$('#menu a').click(function() {
$.mobile.changePage($(this).attr('href'), {
pageContainer: $("#content-primary")
} );
});
});
Using Django on the backend, but it probably isn't relevant.
I finally found an answer here. JQuery Mobile's changePage() and loadPage() methods do too much post-processing and triggers a lot of events that really makes implementing your own dynamic loading more complicated than it should be.
The good old fashioned #("div#primary-content").load(); works, but I'm still struggling to apply JQM styles to it.
interestingly, this contradicts with this:
$.mobile.changePage() can be called
externally and accepts the following
arguments (to, transition, back,
changeHash).
And when tested this works: $.mobile.changePage("index.html", "slideup"); but this does not:
$.mobile.changePage("index.html", { transition: "slideup" });
Perhaps documentation is not quite right?
Update to the new beta 1 release

Categories

Resources