I wonder if there is any way I can move the automatic Gravity forms DOM load script in the head tag to footer that starts with:
<script type="text/javascript">if(!gform){document.addEventListener("gform_main_scripts_loaded",function(){gform.scriptsLoaded=!0}),window.addEventListener("DOMContentLoaded",function(){gform.domLoaded=!0});var gform={domLoaded: ...
According to the GF support there is no way to do this.
if you are not using ajax then you can use:
add_filter( 'gform_init_scripts_footer', '__return_true' );
https://docs.gravityforms.com/gform_init_scripts_footer/
Related
I am trying to show MathML equations using MathJax. I have included the script reference for MathML in the head portion. For Razor pages application, MathML is rendered properly. In Blazor (server side app), it shows as plain linear text.
When I refresh the page, it seems like it renders the MathML correctly but quickly reverts to plain text.
I am using .NET Core 3.0. I have also tried it on .NET Core 2.2 but does not work either.
Using the script below does not work...
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/mml-svg.js"></script>
but if I use this instead,
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
it works only after page is refreshed manually.
<p>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn><mi>a</mi>
</mrow>
</mfrac>
</mrow>
<mtext>.</mtext>
</math>
</p>
Instead of showing the value of x of quadratic equation, it shows "x = − b ± b2 − 4ac 2a ." All math symbols / formatting are omitted.
If I refresh the page, then the MathML formatting is rendered properly. If I navigate to other pages and back to the page with MathML, page has to be refreshed in order to see the correct rendering.
The basic answer is that MathJax used this way is not going to work in Blazor. Anything that modifies the DOM is going to conflict with Blazor.
As soon as a Blazor re-render occurs, Blazor is going to wonder what happened to the tags that used to be there that MathJax removed.
Either:
You need to render this as part of a component where the MathML is not part of the DOM but rather a string parameter to your component.
For every re-render, you need to undo what MathJax has done to the page, let it re-render, then re-do MathJax's stuff.
I've done #1 for both Tex and MathML. For #2, I've only done this with Tex formatting... I haven't been able to get it to work with MathML yet. See how in my repo or just try the Nuget package.
https://github.com/limefrogyank/MathJaxBlazor
I have an SVG file containing a number of xlinks that navigate to a different page. For example:
<a xlink:href="us/ak">...</a>
The SVG is a US map, and I'd be happy to provide it, but it's too big to include here.
When I try to use this SVG in an AMP page, the xlinks don't work. I see in the AMP spec that xlinks in an SVG are required to have a target URI starting with "#", so I think that's why my xlink isn't working. It behaves the same whether I use an amp-img or img tag.
It works fine if I put it in an img tag on a non-AMP page.
Is there a way to get my links to go to a new page, and not just to a #-link on the same page?
The color change on hover also stops working when I put the SVG on an AMP page, but I'm tackling one problem at a time.
If you just want to link to another page, <a href="..."> should work...
I have a very big table to display on a HTML page. And I have to do that with HTML, not EXCEL.
How can I make it as fast as possible? By setting no CSS to it or by setting some special CSS to it? (like small fonts)
I use jQuery to generate those <td> - the whole process is quite slow. After adding some tracking code I found it's not about the DOM query but just the DOM rendering.
I'm trying to use jsPlumb with the YUI framework to make some divs draggable and connected. However, I find when I try to make the divs draggable but contained within their parent, using:
jsPlumb.draggable("window2", {
containment:"parent"
});
the div is still draggable outside the bounds of its parent. If I set the parent's css to "overflow: hidden" I won't see the div when it's dragged beyond the parent's bounds but I'll still see the connector to the div, which looks really awkward.
To see this all in a fiddle: http://jsfiddle.net/xXYwX/3/
Does anyone know if there is a way to use jsPlumb's draggable function with YUI and still restrict the movement of the draggable div?
Thanks!
First make the div draggable using jsPlumb:
jsPlumb.draggable("window2");
Then add necessary jsPlumb end points:
jsPlumb.addEndpoint("window2", { ----});
Then add the HTML draggable like
$('#window2').draggable({
containment: 'parent'
});
Its working for me..
No, it seems not possible with the yui version of jsPlumb. The 'dd-constrain' module is missing and i found no way to plug this module in, because you can't get access to the Y.DD.Drag object.
You can send a feature request to the creator or do a pull request on github.
Here is a plain yui example with a constrained drag:
http://yuilibrary.com/yui/docs/dd/constrained-drag.html
make your container overflow: visible in css
I created a script to publish the following html page using Html Service:
<html>
<div id="fixeddiv"></div>
<script>
var div=document.getElementById("fixeddiv");
div.style.position="fixed";
alert(div.style.position);
</script>
</html>
The alert window shows an empty string.
Isn't possible to set a fixed position for a div element?
I just ran into the same thing and the answer appears to be NO. Apparently they're worried fixed divs are a security exposure.
Next thing they'll be wanting to remove the keys from our keyboards too ;-)
I used this to get a 'fixed' effect for a global navbar at the top. It might be of use to you or others.
$(document).ready(function() {
$( window ).scroll(function() {
$( '.fixed' ).css('top', $( this ).scrollTop());
});
});
Note: in GAS the $( window ).scroll() wasn't working for me so I instead created a div block the size of the view port with a scroll bar overflow and used that instead.
I've found another 'solution' for this:
I created 2 divs, fixedHeader and content
<div id="fixedHeader"></div>
<div id="content"></div>
The css code, where we set #fixedHeader to be always on top and for #content we set a padding-top matching the height of #fixedHeader so the elements won't get under #fixedHeader:
#fixedHeader {position:absolute; top:0;}
#content {padding-top:50px; overflow:auto;}
And finally javascript to make #contet match the height of the viewport when document loads:
$(function(){ $("#content").css('height',window.innerHeight); }
Hope it helps
It appears that position:fixed is not allowed due to security concerns: http://code.google.com/p/google-apps-script-issues/issues/detail?id=1840