On my page I have an embedded PDF file and I want to detect if the user scrolled at least once to make a continue button visible. I tried a few things the came to my mind, namely:
Putting the onscroll event into the HTML
<object data="flgs/EUW/EUW.pdf#zoom=38&toolbar=0&navpanes=0&scrollbar=0&view=fit"
type="application/pdf" width="60%" height="60%" onscroll="PDF()" style="position:relative; right:20%; left:20%;">
</object>
In JS
document.getElementById('PDF').addEventListener('scroll')
$('#PDF').on('scroll')
and $('#PDF').scroll()
All three of those are different examples I tried and not in the same script at once.
Is there a way I can detect whether the user scrolled in the PDF or not?
Related
We have a page that has a video on it, embedded with an iframe.
The iframe js code for the player has the following code in it:
m.default.focus(function (e) {
var t = e.playButton;
(0, y.focusElement) (t)
})
This basically makes the play button visible on the screen if it isn't already. Which is fine for stand alone videos, but not on a page where we have the video embedded.
What it does framed in on our page is cause the entire page to scroll to that content.
We'd like to prevent that if possible.
Here is the iframe code:
<div class="embed-responsive mb-5 embed-responsive-16by9" id="myFrame" style="height: auto;">
<iframe allowfullscreen="" class="embed-responsive-item" sandbox="allow-scripts allow-downloads-without-user-activation allow-same-origin" src="https://sourcefile.onthesamedomain.com" title="Video"></iframe>
</div>
We've tried the scroll to 0,0 on the parent but that didn't work.
Apologies, but I forgot to add that this is only an issue in Firefox. The other browsers work with the attributes on the iframe.
Any help would be appreciated.
The 3rd party owner of the js within the iframe ended up providing a fix. There was no way we could do this without the screen scrolling back and forth.
I'm using <embed src="<%= path %>" type="application/pdf" /> to preview pdf file on the page. It works great until I open my custom modal window with position fixed covering pdf preview area. Modal window has buttons and I cannot click on any. It seems modal is covered by something invisible. I tried to play around with z-indexes but it didn't work out. Embedding with tag <object data="" type="application/pdf"></object> caused the same problem - I cannot click on the button.
The main problem of the issue is that it can be reproduced at particular computers in spite of the same Chrome version (version: 69.0.3497.100 64-bits) Did anyone face such pdf rendering issues in Chrome?
Here is the link to test this issue https://fatuk.github.io/test-pdf-render
Many times I am only interested in the first portion
and would like to make a "collage", say of arriving buses at nearby stops and fit more on a small screen.
I found I can use "iframe", but having the cursor in the frame of course scrolls the frame
rather than scroll me further down the web page. Just for variety I include an image too.
Is there a better way to post "heads" of web pages? (I probably know to little about CSS and Bootstrap, etc.)
Running the snippet here shows only the traffic cam, but pasting it for example into http://htmledit.squarefree.com/ or local html file runs just fine. https://codepen.io/pen/ shows pugetsound "refuses to connect".
<div class="thumbnail-container">
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_14961" frameborder="0"></iframe>
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_15540" frameborder="0"></iframe>
<img src="http://www.seattle.gov/trafficcams/images/WSB_Midspan_EW.jpg" width="400" /> <!-- or a placekitten.com ;-) -->
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_19930" frameborder="0"></iframe>
</div>
Just to show that there are other example applications I run into frequently
would be the weather for the next 2 days only, or the temperature for the last few days.
An answer to above would solve many problems.
height=380px http://forecast.weather.gov/MapClick.php?lat=47.578&lon=-122.403&FcstType=text&TextType=2
height 120px https://atmos.washington.edu/~neal/uwp/index72.cgi
If the issue is you do not want the iFrame to scroll, you can try:
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
I have a simple iframe which is used to display a vimeo video on my site, as so:
<div class="video">
<iframe src="//player.vimeo.com/video/88893424" width="960px" height="540px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And it works like a charm on all standard computer browsers. Ajax is used throughout the site, and transitioning between pages that have videos and don't work exactly as you would expect - Ajax grabs the new page content, slides it on, deletes the old content, and the video works perfectly.
However, on iOS Safari, the video does NOT load. The space for the video is reserved - the other content on the page flows around the area where the video should be, which tells me the div is loading, and the height and width information of the iframe element is being registered by the browser. But no video, nothing. Reload the new page, though, and the video is there and plays just fine.
So my question is: Why is the reload required? What could I be doing wrong that is causing the AJAX to fail? I have read several answers across SO that seem to incriminate header information and cross-site drama, but it is danced around and not explained. Can anyone give me a clear understanding of what's going on here?
suppose I have an Iframe from other site in my page and there some links to other sites.
I want to do this
when a user click on a link in the iframe instead to navigate to the destination, the page navigate to URL I interest
<iframe src="......." width="100%" height="100%"
align="middle" frameborder="0" scrolling="yes"> </iframe>
if you are opening a cross-domain iframe it is not possible to alter the contents or for the sake anything on the page. In case you want to achieve a similar effect what you can do is
1) Save the page as HTML
2) Change the to the webiste.com so that everything works properly
3) Host this page locally on your server
4) now what you can do is open this page as iframe src so it become same domain iframe, and you can modify whatever you want just writing $('iframe').contents().<your code>
It seems like a manual process but you can write a PHP or .NET script to achieve the effect, thats how i had done it and it works perfectly.