We've got an InfusionSoft form on a page (on a WordPress site) that is coming from the InfusionSoft javascript.
<script type="text/javascript" src="https://uu145.infusionsoft.com/app/form/iframe/9ad1af7469e553f569dde3d29b09d319"></script>
on this page:
http://www.heartofbusiness.com/foundations-one-clients-money-mini-series/
Some of our users are reporting that the form only partially shows (it's all there in the iframe, but the viewable area is about half the height of the form). Mostly in Chrome & Firefox on macs. Safari doesn't seem to ever have the problem, but it's not consistent as I'm able to see the form properly in both Chrome and Firefox on my mac.
Any thoughts as to why the height wouldn't be set properly?
Edit: I did some more digging on your webform and it looks like the issue presents itself in Internet Explorer. To fix the issue you can set a manual height on two elements.
First set the div infFormDiv_0 to height of 360.
Second set the height of the iframe to 360 as well.
CSS:
#infFormDiv_0 {
height: 360px;
}
#infFormIframe_0 {
height: 360px;
}
Original Answer:
It is hard to determine the issue if I can't see it myself. The form works fine in the multiple browsers I checked.
I would suggest you change from the javascript form to the HTML form anyways. This would most likely prevent the form from cutting off in the cuture.
Go to the forms details page and click Get the code and select the HTML unstyled version to get the HTML code you will need. Then style the form using CSS to get the look you want.
Related
I'm getting the following error on all chromium browsers when using Skrollr library and loading the website as mobile:
"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>"
The library was working fine last week and now I'm getting this error on every browser I try while loading page as mobile.
Even the examples in official github are broken when loaded on mobile and show the same error.
Does anyone know how this could be fixed?
skrollr.js:730--
https://raw.githubusercontent.com/Prinzhorn/skrollr/master/src/skrollr.js
Examples with the errors from the git links:
http://prinzhorn.github.io/skrollr/examples/docu/1.html
http://prinzhorn.github.io/skrollr/examples/docu/2.html
http://prinzhorn.github.io/skrollr/examples/docu/3.html
http://prinzhorn.github.io/skrollr/examples/docu/4.html
To replicate, - load the page, inspect, choose mobile and refresh. Suddenly it all breaks and reports errors.
HTML tag should have
class="skrollr skrollr-mobile"
if detected mobile device load.
I was developing a website using this and on the 9th of July 21 afternoon I noticed that behavior has changed and that's when I noticed the errors.
I've recreated a simple website using this and saw exactly the same problem. Later on I decided to check git hub linked examples and saw the same problem.
Could it be some sort of update to the browser cores? A fix or bypass would be greatly appreciated.
Update:
I've found out that adding the following line to CSS gets rid of the errors.
* {
touch-action: manipulation;
}
Unfortunately functionality of the library is still not working at 100% on mobile. The scripts that calculate the amount of scrollable area on mobile are off and adds whitespaces to the end of the document. All scroll events are affected by this miss-calculation.
So After looking into this matter a little bit more, I've found a solution which hopefully will help all the folks using this library in 2021 onwards.
To disable the errors add the following CSS:
* {
touch-action: manipulation;
}
And finally to have proper sizing of animations and no white spaces, especially if your:
transform: translateX();
gets disabled on main scroll body when you're on mobile devices, use the below code before your closing tag.
<script type="text/javascript">
if((/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
skrollr.init({
forceHeight: false
});
} else {
skrollr.init();
}
</script>
This will help all who want to imitate horizontal scrolling while using vertical scrollbar.
On the contact portion of my website, I noticed that there is a visual glitch only with Firefox that causes the JSFiddle SVG (and possibly others as well underneath it) to be a full size at refresh. Even after cache it does this. It does not occur on any other browsers. Have any of you seen similar issues to this?
It appears to work well on all other browsers including Chrome, Opera, Edge, etc. My fix with all other browsers for any flashing at refresh was to create a second class for things called .hiddenOnLoad and gave it a CSS display: none;
However, it appears that Firefox does not want to follow this rule and display my SVG even when it is supposed to be hidden until requested to fade in.
You need to remove at least the <a> tag on the <head> section:
<a name="top"></a>
You can also find other unnecessary tags and errors in your markup with the help of the W3C Markup Validation Service, like this: https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.christopherfrydryck.cf%2Fcontact.html
I have been working on a jQuery Mobile site and have been noticing that once the page was loaded it would jump back to the top of the page after a second or two - giving a horrible user experience if the user had scrolled down immediately.
It turns out this only happens when an HTML 5 VIDEO tag is present on the page - even if it has no associated script, absolute size and even if it's in an iframe.
I made a sample test page to demonstrate:
HOW TO TEST BEHAVIOR
Open the jsfiddle http://jsfiddle.net/MR966/1
Click Run
Click within the output panel IMMEDIATELY and hit space bar a couple times to scroll down. You must do this the instant the page loads.
After the Youtube Video has loaded the page will jump to the top.
Click Run and try again if you weren't fast enough.
<HEAD>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"
<BODY>
<h1>JQuery Mobile Video Jump</h1>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<div class="fake-content"></div>
<iframe width="640" height="390" src="//www.youtube.com/embed/EQ1HKCYJM5U" frameborder="0" allowfullscreen></iframe>
The content can be anything - just long enough to be at least one screen length in height.
.fake-content
{
margin: 1em;
background: orange;
height: 10em;
}
NOTES
Removing jQuery Mobile stops this behavior : http://jsfiddle.net/MR966/2/ (you'll see the background is yellow showing it wasn't initialized). So it is definitely doing something to cause this.
Removing the video stops this behavior.
This happens for pure video tags, and YouTube - which is somewhat surprising considering they're within an externally loaded iFrame.
The word 'video' doesn't appear once in the jQuery Mobile sourcecode!
This happens on Chrome / iPad / IE / Firefox.
On an iPad it's particularly bad because the page doesn't jump to the top until the scrolling has completely stopped due to de-acceleration.
If you don't see the issue keep trying, use a slower internet connection or copy out the HTML from the JSFiddle to a local page.
On my actual page with other resources this is a much bigger issue than on this simple quick-fire test page.
I have video on each of my pages and if I can't fix this I'll need to abandon JQM at the eleventh hour :-/
This is normal end expected behavior, let me explain why.
When page content is larger then available page height jQuery Mobile will scroll page to the top before transitioning to the other page. This is happening because, if you transition page which is fully scrolled and second page is not high enough you will be faced with empty screen. So jQuery Mobile need to correct current viewable position before transition can occur.
This is easily solvable with iScroll plugin + iScrollView extension for jQuery Mobile. You want feel any different and everything will work just fine.
This is because height of iScroll div container is as high as screen height while inner div is scrollable and can take as much height as you need. Because top most div is high as available screen height page will normally transition without unnecessary jumping.
Read more about this problem here and here.
This problem only occurs on the initial page load.
Looking at the source code it turns out to be related to this line:
// window load event
// hide iOS browser chrome on load if hideUrlBar is true this is as fall back incase we were too early before
if ($.mobile.hideUrlBar)
{
$window.load( $.mobile.silentScroll );
}
I commented out just the $window.load line and the problem went away.
The problem of course is that $window.load with lots of video / images can take 1-2 seconds. So if the user scrolls in the meantime you get a painful jump.
This hideUrlBar behavior is related to trying to hide some iOS specific toolbars, that I don't even care about anyway. So I can do without this 'fall back'.
The problem with just setting hideUrlBar=false in mobileinit is that this variable is used elsewhere during normal scrolling and means the window doesn't scroll to the top after a transition. I think this is a bug.
Final fix
I settled on this:
In my mobileinit event I set hideUrlBar=false to prevent the $window.load event from running.
When the page is loaded then I re-enable it so as not to break transitions between pages (from a link at the bottom to another page).
// mobile init
$(document).on('mobileinit', function ()
{
$.mobile.hideUrlBar = false;
$.mobile.defaultDialogTransition = "pop";
$.mobile.defaultPageTransition = "none";
});
$(window).load(function ()
{
$.mobile.hideUrlBar = true;
});
This seems to be working fine, but the fact that setting hideUrlBar=false breaks other scrolling is bad. At least I managed to fix it without having to change the source.
Misc notes
I ONLY had this 'jumping' problem during in initial page load. This isn't a problem for me during transitions since the $window.load code above is only ever executed once and not after a transition.
I have transitions turned off anyway.
My application is fully responsive and meant to work on mobile and desktop alike.
So i made a website, basically first time messing around with jquery.
I have a div main-container which contains all the content. This main-slider slides in the window. i'd set it up by doing this in the document.ready function:
<script>
$("#main-slider").hide().animate({left:'+=2000', opacity:'0.0'},0);
$("#main-slider").fadeIn(100).animate({left:'-60', opacity:'1.0'},1000);
$("#inhoud").delay(100).animate({left:'-30', opacity:'1.0'},300);
$("#inhoud").delay(20).animate({left:'-5', opacity:'1.0'},300);
$("#main-slider").animate({left:'-40', opacity:'1.0'},150);
</script>
On normal browsers (tested with safari, chrome and firefox) it looks like how i want to but on mobile devices it starts zoomed out since the main-slider starts animating from +=2000;
Is there a way to hide the div when it's not inside the viewport ?
I made a jsFiddle with a basic concept of what i have, unfortunately it doesn't seem to work tho ;p sorry.
JSFiddle
A concept version of the website : http://paparashie.nl/woonkans
I'm not sure I am understanding correctly, but have you tried with css?
html {
overflow: hidden;
}
Apply this to html or body...
JSfiddle is not working, can you attach screenshot to help us see the problem
In Firefox 3 and later (and probably older versions), selecting content within an iframe always seems to use the grey selection background colour used for a document that doesn't currently have focus, even if the iframe does have focus. The only exception I have been able to find is when the content within the iframe is editable. This is not the case in other browsers. Here's an example illustrating this:
http://jsfiddle.net/97Vjz/
This unfortunately prevents styling the selection within an iframe using the ::-moz-selection CSS pseudo-element because it only applies to non-grey selections:
http://jsfiddle.net/YYXSY/1/
My question is: is it possible to prevent an iframe's selection being grey in Firefox without using contenteditable / designMode?
UPDATE
This only seems to happen on dynamically written iframes: using a separate file and the src attribute solves the problem. However, I do need it to work with dynamically written iframes.
I just tried to reproduce the problem with a "real" page as iframe content and then it works like you want: blue colored selection! (FF 5.0)
see: http://jsfiddle.net/97Vjz/8/
It seems only generated content has this problem, so you could make a page (php/asp(x)) that generates the content for you to circumvent the problem.
Another solution to use javascript generated content is to load it with src="javascript:'<html />'" (actually this is Tim's own solution from the comments below.)
A simple example script: http://jsfiddle.net/97Vjz/9/
iframe.src='javascript:\'<html><body>' + content + '</body></html>\'';
There is a property of the iframe exposed in Firebug's DOM inspector contentDocument->designMode which is set to false for you iFrames. Forcing it to true through the DOM inspector enables the blue highlight you're after.
Hypothesis: It seems that for dynamically written iFrames, either a XUL Iframe is rendered or the Gecko engine doesn't honor the styles.
Short of submitting a bug, the only workaround I can see is to wrap our contents in a textarea and style it to make it 'invisible': http://jsfiddle.net/mrchief/YYXSY/19/