Snap to anchor point animation - javascript

I'm using a great plugin that snaps to an anchor point when scrolling within the specified proximity. However, I would like to add animation to this effect but can't seem to get it to work.
Here is the best code I could come up with:
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 200,
}, 300,"easeInOutExpo");
});
</script>
How can I make this work?

Looking at the code, it looks like it will attempt to animate the snap as long as you instantiate the plug-in using an element rather than the document itself:
$(scrollingEl).animate({scrollTop: (matchingEl.offsetTop + settings.offset)}, 200);
Therefore, I would suggest instantiating it with a reference to your page's top-level element instead.
The duration and easing are hardcoded as you can see from the above, but it will be easy enough to amend the plug-in code to allow you to dynamically set these properties via the plug-in settings if you need to.

Related

jquery not quick enough to take effect

I have a need to add a class to certain pages - ones that contain an ID of #hero. For all other pages, the class must not be added.
Because I'm using asp.net with a few layered master pages, its not as simple as just adding a class directly to the html becuase the body tag sits a couple of pages above the aspx page.
I could locate the body tag, but so far I've tried to avoid that due to the added complexity, and instead tried to use jquery.
Here's the code:
$(document).ready(function () {
updateBodyClasses();
});
function updateBodyClasses() {
if($("#hero")) {
$("html, body").addClass("hero");
}
}
Nothing complicated, but here's the rub. By the time the class has been appended, the page has been rendered and the class doesn't seem to have any effect. However, if I test it by adding the class directly to the html, it works - so I know the CSS works and that its a timing issue.
I suppose I could add the code higher up the page - jquery is deferred, so I would need to know the equivalent javascript to try it out.
Would appreciate any thoughts on this potential solution, or perhaps and other ideas.
/* UPDATE */
For clarity, it seems to be the HTML related class that isn't being applied.
You can alter the DOM without waiting for it to be ready.
You need to:
load jQuery in a synchronous way(without defer or async).
Put #hero element i above the script.
Please consider this example:
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hero">I don't care about DOM being ready</div>
<script>
var $el = $('#hero');
if ($el.length) {
$el.addClass('red');
}
</script>
You can use IIFE(Immidiately Invocked Function Expression):
like:
(function()
{
if($("#hero")) {
$("html, body").addClass("hero");
}
})();
just put your function in document ready like
$(function(){
if($("#hero")) {
$("html, body").addClass("hero");
}
});
No real solution provided.
Not reasitic to change the whole site infrastructure - from one that defers jquery to loading it synchronously.
The two other jquery answers are as per the current setup and don't work.
The only working solution was provided by Tushar, although it would still require selective loading of the script, which was not included in the answer.
In the end, I used a workaround, which bypassed the need for any javascript. Instead of selectively adding a class to html tag, I added the css permanently to the html tag, affecting all pages. I then added an inner div, which reverses it out. This means that any page can now manipulate its own functionality directly without having to add classes to the html tag.

Add class to dynamically generated HTML

I'm working to use custom checkbox styles with a checkbox which is dynamically generated by javascript for the Google Identity Toolkit. For example, we add this div:
<div id="gitkitWidgetDiv"></div>
And the Google Identity Toolkit script generates new html for that div.
I need to add a class to the HTML which is added by the javascript without any action by the user and I'm struggling to make it work. For example, here is my code:
$("#gitkitWidgetDiv").on('ready', ".gitkit-sign-in-options label", function() {
$(this).addClass('checkbox');
});
I've tried switching 'ready' for a few other options and also using the livequery plugin, but nothing is working for me. It works if I use an active event like 'click,' but I can't figure out how to do this when the page loads. Could someone please help? Thanks!
Modern browsers (including IE11) support mutation obervers. You can use one to monitor the parent node of the div that will be added. When the div has been added, just add the class.
Here's something I made which comes in handy in annoying cases like this where it's difficult to tell when the element you need has finished loading in: https://gist.github.com/DanWebb/8b688b31492632b38aea
so after including the function it'd be something like:
var interval = 500,
stopTime = 5000,
loaded = false;
setIntervalTimeout(function() {
if($('.dynanicElementClass').length && !loaded) {
$('.dynanicElementClass').addClass('checkbox');
loaded = true;
}
}, interval, stopTime);
It's not perfect and I'm sure there are better solutions out there but in most cases like this it does the job.

Detect CSS Style Rendered

I have a application that loads CSS styles dynamic based on user preference. I use requirejs to load these like:
require(['css!dir/styles'], function(){ .... });
this works great but I don't want to show the screen until all the styles have fully initialized.
I've added a CSS class to the body of the page called hide-page and then remove that class when the callback occurs. Like:
setTimeout(function() { $(document.body).removeClass('hide-page'); }, 100);
but even with the settimeout, the page still loads jumbled until everything has initialized. I was thinking about doing a setInterval and checking if a particular style has been applied to a node like:
setInterval(function(){
if($(document.body).style('background'') === "#FFFFFF"){
$(document.body).removeClass('hide-page');
}
}, 10);
but thats kinda hackey. Is there a better solution anyone has to accomplish this?
You don't say how you're hiding the page content, but that could be the problem if you're using display:none.
Try visibility:hidden instead. This will allow the browser to allocate the space needed to construct the page, so you shouldn't see the jumbled FOUC.

jquery tools overlay - Two on same page

I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.
Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.
This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).

Modifying element from google.translate.TranslateElement results

I'm attempting to embed the very convenient Google Translate translate element into a webpage, which is super simple and works great, but I need to change the default text that displays in the resulting HTML:
Having worked with a number of Google APIsand js libraries, I figured this would be no problem as it would almost certainly be configurable, but having looked around for some time I can't find any reference to a property that let's you set this, and documentation in general seems to be pitiful. The basic code is:
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
var translator = new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
multilanguagePage: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Having dispaired of being able to set this as a property in the when I create the translator, I decided to hack it and use an onDOMNodeInserted listener to just change the resulting HTML once it had loaded into <div id="google_translate_element"></div>. I'm using jQuery here, so my code is:
$(document).ready(function(){
$('#google_translate_element').bind('DOMNodeInserted', function(event) {
$('.goog-te-menu-value span:first').html('Translate');
});
})
And here's where things get interesting. Chrome loads everything perfectly and does the innerHTML substitution beautifully. Internet Explorer (8) ignores the DOMNodeInserted listener altogether and the page loads as if the jQuery function was never called. Firefox (10) appears to load fine (but with no translate element at all) and then freezes, begins gobbling up memory, and crashes.
Any thoughts on how I can get this innerHTML substitution to work? If you're aware of a displayLabel : "Translate"-like property that is of course preferred, but barring that (and a really ugly setTimeout hack) is there any way I can get this to work?
You can do it using CSS, only it will not change the label when a language is selected.
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child{display: none;}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before{content: 'Translate'}
Like you I can't find out how to customize the gadget via init params but it appears possible to write your own customized gadget in HTML then invoke g.translate functionality on it. See http://www.toronto.ca/ (page footer). I'm afraid you will have to do some more digging to see exactly how it's done.
This use of g.translate is also referenced here. Unfortunately the discussion is quite old now but hopefully still relevant.
I'm using this code which checks every 3ms if the translate module has been yet loaded into the page; if so, it then updates the text and clears the interval check after.
function cleartimer() {
setTimeout(function(){
window.clearInterval(myVar);
}, 1000);
}
function myTimer() {
if ($('.goog-te-menu-value > span:first-child').length) {
$('.goog-te-menu-value > span:first-child').html('Translate');
cleartimer();
}
}
var myVar = setInterval(function(){ myTimer() }, 300);

Categories