We Keep Coding

How to scroll two pdf side by side synchronously in html?

I am creating a side by side view in html to compare two pdfs , i tried to use pdfjs to display two pdfs side by side but dropped the ide , currently i have this code :
<div class="row">
<div class="col-md-6">
<object data="uploaded\\1.pdf" id="pdf1" onscroll="scroll1();" type="application/pdf" width="100%" height="100%">
</object>
</div>
<div class="col-md-6">
<object data="uploaded\\2.pdf" id="pdf2" onscroll="scroll2();"
type="application/pdf" width="100%" height="100%">
</object>
</div>
</div>
it did display the pdf correctly side by side but there scroll isn't sync.
For scrolling i have used on scroll event and tried to print something in console just to check whether onscoll event is working or not but no luck , also i tried iframe in place of object , but issue remains , is there any way to display pdf side by side and sync there scrolls.?
Any other approach rather than this is also welcome.

Maybe this could help you:
http://jsfiddle.net/a3mo6tpb/2/
I first used the scroll event, but ended up having a chain reaction that scrolling one would scroll the other and the event would be triggered on the other which, in turn, would trigger the one again, and so on, making both them scroll all the way down. So I used the wheel event to have it working, as I don't have too much time to fix the chain reaction issue at the moment

I solved my issue with this :
$("#pdf1").on('load', function() {
$("#pdf1").contents().find("#viewerContainer").on('scroll', function() {
$("#pdf2").contents().find("#viewerContainer").scrollTop($(this).scrollTop());
});
});
$("#pdf2").on('load', function() {
$("#pdf2").contents().find("#viewerContainer").on('scroll', function() {
$("#pdf1").contents().find("#viewerContainer").scrollTop($(this).scrollTop());
});
});
I removed the scroll function calling on onScroll of iFrame which doesn't work and added on load function,then i added the scroll function on child of the iFrame and sync the iFrame's child's it.

Javascript to image fallback

I am working on a web widget that can be embedded on 3rd party websites.
Since a lot of content management systems do not allow users to post/execute scripts, I want my widget to show an image instead of JS-generated content if such situation occurs.
<script type="text/javascript">
(function(){var s = document.createElement('script');s.src = '//example.com/file.js';s.async = "async";document.body.appendChild(s);}());
</script>
<img src="//example.com/image.svg?param1=value1" src="" id="my_fallback">
For now I am using the code above. Is there any way to show the image only if the script did not load? The goal is to reduce transfer usage and provide better user experience.
The first line of my widget script is removing #my_fallback, but it is not fast enough - sometimes I can see the image for a second before the actual widget content replaces it.
The only thing I came up with is to delay creation of the image by including something like sleep() in the beginning of my image generator.
EDIT
No, <noscript> won't work here. I do not want to fallback if user has disabled javascript. I want to fallback when a script has not loaded - for any reason, especially if some security mechanism cut off the <script> section.

Use html tag Noscript
<noscript>Your browser does not support JavaScript! or a image here</noscript>
Remember
In HTML 4.01, the tag can only be used inside the element.
In HTML5, the tag can be used both inside and .
Edit : -
add one html tag
<span class="noscript">script is loading.....or put image</span>
inside your script tag
now in your scripts which has to be load add one code like
add this line at the end
$('.noscript').hide();
This is the other way which you can handle the same!

One quick fix is to create a global variable from that script, visible to the window object.Also the image must be hidden. Then, on a main.js script check for that variable. If it exists then run your widget code from there. If it doesnt exist then fadeIn the fallback image.
Heres a demo
The default img is an image 272x178 size and the widget image is an image 300x400 size.
To simulate the action when the script is unavailable, just name the variable myWidgetIsEnabled with a different name so the condition fails.
Here is some code:
// Code goes here
var widget = (function(){
window.myWidgetIsEnabled = true;
return {
init: function(){
var s = document.createElement('script');s.src = 'file.js';s.async = "async";
document.body.appendChild(s);}
}
}());
$(document).ready(function(){
if(window.myWidgetIsEnabled){
widget.init();
}else{
console.log('not enabled, the default behavior');
$('.fallback').fadeIn();
}
})

DOM Events - Progress Indicator for Iframe location change

I am looking for a solution to show a progress indicator when an iframe page changes, but prior to the iframe loading completely.
There are 100's of pages on Stack Overflow going over the differences between jQuery ready(), JavaScript window.load, document.load, DOMContentReady, on('pageinit'...) and after reading the differences on all these various techniques I'm now a bit stuck on how to accomplish trapping the event within the iframe.
So far I have only succeeded in capturing when the iframe has changed once the DOM is built. I would like to be able to detect when a page is about to load so I could have some sort of indicator/spinner in my header.
This is what I have so far (capturing the iframe change on the onload):
.....
<iframe id="rssID" src="http://feeds.reuters.com/reuters/oddlyEnoughNews"
onload="blerg()" style="width: 800px; height:600px"/>
......
$(document).on('pageinit','#index', function(){
alert('pageinit'); //gets called on first load
});
$(document).on('pageinit','#rssID', function(){
alert('pageinit rssFeed'); //nothing happens.
});
function blerg() {
var myIframe = document.getElementById("rssID");
myIframe.onload = func;
};
function func() {
alert("changed");
}
http://jsfiddle.net/Gdxvs/
It would appear that pageinit is the correct path but I have no idea on how to trap that within an iframe. I would prefer not using jQuery, but I'm not sure that is possible without huge amounts of code.
One final: Do I need to use a die("pageinit");

Jump to iframe once it loads

Im looking for my webpage to jump to an iframe when someone click. I've found one solution which works pretty well which is this: http://jsfiddle.net/RGjCL/4/
<ul>
<li>
Class Name
</li>
</ul>
<script type="text/javascript">
function IFrameScroll(link){
window.myIframe.location=link;
window.location.hash='myIframe'
}
</script>
<IFRAME id = "myframe" onload = "setIframeHeight( this.id )" name="myIframe">
I've tried on my web and it partially works except for the fact it scrolls to the iframe before it loads so it doesn't goes that far to the bottom because once the iframe its loaded the page fully extends.
The web in question is the following: http://www.clavederock.com.ar -
The links are under the tabs "Quienes Somos" "Programacion" and "Archivo".
I hope i made myself clear so you can help me. Thanks in advance!

Try moving window.location.hash='myIframe' from the function IFrameScroll() to setIFrameHeight(), so you'll change the hash once the iframe have the desired size.
EDIT #3:
Since you need to wait until iframe is loaded in order to resize it and window.location.hash doesn't works the second time in chrome, you can try this:
<script type="text/javascript">
function IFrameScroll(link){
window.myIframe.onload = function() {
// this will ensure that the height will be updated after load
setIframeHeight('myIframe');
// This works on FF and IE, and let users to bookmark
window.location.hash='myIframe';
// and this will allow it to scroll the second time for chrome
document.getElementById('myIframe').scrollIntoView(true);
}
window.myIframe.location=link;
}
</script>
I really hope this solve your problem :)

Instead of jumping to the iframe, you could make a smooth scroll. This would give a little more time for the iframe to load after the link has been clicked.
Alternatively and probably more effectively, you could load the iframe with the rest of the page but make it invisible. Then you just need to show it when the user clicks the link
//load the page with the iframe hidden
//in css
#myIframe { visibility: hidden; }
//use jquery to make it visible when the user clicks the link
//you could do this with javascript if you don't want to import jQuery, but I find jQuery easier
$(document).ready(function() {
$('#myAnchorTagId').click(
function() {
$('myIframe').css('visibiliy', 'visible')
}
)
});

Scrolling in web application in iOS with iScroll

I have a few web applications that were previously developed for use in Android apps, and we're trying to port them to iOS.
The first problem was that the ad we had was not staying in place, since position:fixed is no good in mobile Safari. So, I downloaded iScroll.
I figured out that iScroll doesn't play nice with our RSS feed reader (zRSSFeed for jQuery). In fact, when both are enabled on the same page, the iScroll functionality "works", but gets stuck at the top of the page.
I posted to the iScroll user group (https://groups.google.com/group/iscroll/browse_thread/thread/5dd274ff4159a672) but got no useful answers.
I even tried to change to a different RSS library, but it seems they all elicit this issue.
Has anyone had this issue before? Has anyone solved it? Should I just give up and put the ad at the bottom of the webapp, or what?
Thanks, all.
EDIT: I figured I should add in a bit of code.
Basic structure of web stuff:
....
<div id="appBody">
<div id="feedResults">
<!-- rss entries go here -->
</div>
</div>
<div id="appAdvertisements">
<!-- admob JS stuff goes here -->
</div>
....
Basic JS:
var scroll;
document.addEventListener('touchmove', function (e) { e.preventDefault();}, false);
function loaded() {
scroll = new iScroll('appBody');
$('#feedResults').rssfeed('<feedurl>', {<options>}, function() { scroll.refresh() });
}
document.addEventListener('DOMContentLoaded', loaded, false);

I would suggest you first populate the #feedResults with your parsed rss and oncomplete of this action, you start the iScroll. Don't start both at same time nor use refresh() without setTimeout like Matteo said in iScroll4 documentation.
Considering the function() after stands for the onComplete, try something like this:
var scroll;
function loaded() {
$('#feedResults').rssfeed('<feedurl>', {<options>}, function() {
scroll = new iScroll('appBody');
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault();}, false);
document.addEventListener('DOMContentLoaded', loaded, false);
I think that will give time to the DOM to have your rss on it and then iscroll will calculate the correct height of your entire wrapper (appBody in this case).

I just had the exact same problem. The solution for me was to add position: absolute; to the element directly inside your wrapper, in your case you would need to add position: absolute; to feedResults.

In HTML5 based application, smooth scrolling is always challenging. There are third parties libraries available to implement smooth scroller but there implementation is very complex. In this scroller library, user only need to add scrollable=true attribute in the scrollable division, then that div will scroll like smooth native scroller. Please read readme.doc file first to start working on it
library link
http://github.com/ashvin777/html5
Advantages :
1 No need the manually create scroller object.
2 Scroller will automatically refreshed in case of any data being changed in the scroller. 3 So no need to refresh manually.
4 Nested Scrolling content also possible with no dual scrolling issue.
5 Works for all webkit engines.
6 In case if user wants to access that scroller object then he can access it by writing “SElement.scrollable_wrapper”. scrollable_wrapper is id of the scrollable division which is defined in the html page.