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

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.

Related

anchor with hashbang, preventDefault

I'm working on a cordova project. I have a few links which have a listener, the href is set to "#".
Now in all my functions I'm providing the event and calling preventDefault().
For some reason (when visiting the app in browser). It will still navigate to /#.
Which causes the browser to open a new tab.
I used javascript:void(0) before which works perfectly, but it throws a list of errors on windows phone (metro app). since javascript: is not valid.
Anyone know how I should be able to solve this? (i'm using jQuery and simple HTML5 for this one).
e.g.:
/**
* Toggle the menu
*/
toggleMenu: function(e) {
if (e) {
e.preventDefault();
}
App.Core.menuOpen ? App.Core.hideMenu() : App.Core.showMenu();
return false;
},
So we bind the event like this, so when it's dynamically added it still works.
$(document).on("click", ".header-menu", App.Core.toggleMenu);
html with some strips
<div class="page" data-init="App.Functions.Purchase.init()">
<div id="panel-purchase" class="panel" data-init="App.SomeModule.init()">
<div class="panel-header">
<div class="panel-header-inner">
<span class="icon icon-menu"></span>
<div class="panel-header-title"><span>Some Title</span></div>
<span class="button dummy"></span>
</div>
</div>
...
As long as I don't get a better solution, for now I'm using no href
it's a standard in HTML5, allthough some sites complain it could target to itself. It works fine for a hybrid app, and I've never seen it targeting to itself in this case.
Better solutions are always better, there must be something nasty in the source (It's initially created by a third party).

Jquery click/toggle not working on mobile

I tried some old answers from other questions, but none of them resolved my case. The toggle function is not working fro me. Below is the jquery:
jQuery(document).ready(function($) {
$(".team-member").click(
function() {
$(this).children(".description").toggle();
}
);
});
HTML:
<div class="team-member" data-style="meta_below">
<img alt="yes" src="source/to/img.jpg" title="Candice Rauter">
<h4 class="light">Name</h4>
<div class="position">Position Goes Herer</div>
<p class="description">blablabla</p>
</div>
Link for the section of the website(#our-team section).
Any help would be appreciated!
Thanks!
When you inspect your site on mobile, using sdk and Chrome, you get
Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
warnings on your page.
Try using .on('click') rather than .click()
$(".team-member").on('click', function(){
$(this).children(".description").toggle();
});
This should work even for dynamically added elements. And I think your page is using ajax to load its content (from what I can see in the inspector).

Can't attach mousedown event to embed element

I seem to have hit a wall with this crap and can't make sense of it. I have a page with a relatively complex SVG (it has 6 other smalled SVGs embedded into it) in it embeded inside embed tag. When I try to attach a mousedown event to it, it simply doesn't work. Here is the markup:
<body>
<embed type="image/svg+xml" src="images/cog.svg" id="cog">
</embed>
</body>
then in javascript I do
$(function(){
var cog = document.getElementById("cog");
document.addEventListener('mousedown', function(e){
console.log(e);
});
});
It doesn't work. Moreover when i attach events to document, they do not fire when I click on that embed object either!
I searched this thing for 3 hours and everywhere I look it appears as if the embed should support mousedown even without any problem. What is the problem here?
Edit:
If it's any help here is how the full markup looks like (I use Foundation framework):
If CORS aren't an issue, you can try :
document.querySelector('embed').addEventListener('load', function(){
this.getSVGDocument().addEventListener('mousedown', function(){
alert('hello')});
});
According to the specs:
3 . If the previous step determined that the content's type is
image/svg+xml, then run the following substeps:
If the embed element is not associated with a nested browsing context, associate the element with a newly created nested browsing context,[...]
Navigate the nested browsing context to the fetched resource, with replacement enabled, and with the embed element's node document's
browsing context as the source browsing context. (The src attribute of
the embed element doesn't get updated if the browsing context gets
further navigated to other locations.)
The embed element now represents its associated nested browsing context.
But I can't find anything about actually how it should handle events.
Nevertheless, it appears that when its src is set and returns something, the events are captured by the new context (whether reached or created).
See #Marius comment for a demo when no src is set, it fires the event.
I think the embed tag is sandboxed and can't be accessed from external sources. Just use the img tag.
$('#logo').click(function() {
alert('410');
});
img{
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click the SVG</h3>
<img id='logo' src="http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg">

On page load, jquery is running before a certain div has been created

I'm trying to do a .show() on page load, however, the div is not yet loaded
It looks like jquery is running before a certain div has been created.
Wondering how can I solve this ?
my code consists of the following:
<script>
function choose_category(category_id)
{
$('#' + category_id).show(); // this is the part which doesn't work, as on page load the div mentioned later is not yet available.
}
</script>
<script>
function load()
{
choose_category('<?php echo $model->category_id->__toString(); ?>');
}
</script>
<img onload="load();" src="http://media.sociopal.com/ires/images/homepage/status-socio-icon.png" alt="" width="0" height="0" style="display:none;"></img>
The html embeds php code which runs a loop and generates (among other divs) the following div:
<div id='thecategoryid!!' onclick='choose_category("51d552eb2c8751766000016d");return false;' class = 'settings_menu_item'>
<p class='settings_menu_item_text'>Design Channels<i class='icon-chevron-right right'></i></p>
</div>
However, as mentioned, when the page loads (only when the page loads) the .show() does nothing because it looks like the div is not yet created.
If I debug this in chrome and go step-by-step, there is no problem (the div is created on time and the .show() works fine)
Will appreciate your help.
I can see no error in the code you have posted.
It might be that your assumption of what $.show() does is wrong.
$.show simply removes any occurences of "display: hidden;" in the inline styling of the selected element/node.
<div style="color:red; display:none;">
would become
<div style="color:red;">
http://api.jquery.com/show/
Instead of using that inline onload stuff, try this giving your image an id (we'll use img here.
Since you are calling choose_category with an inline click event listener, do not place that function inside $(document).ready as it won't be able to be accessed.
Then, use the following JavaScript:
$(document).ready(function(){
var img = $("#img");
img.load(function(){
load();
});
if (img[0].complete)
img.load();
});
What this is doing:
When the doc is ready, get the image. Attach a load event listener. If the image has already loaded by the time we got here (especially with caches), trigger a load event anyway.
Also note that you shouldn't put special put exclamation points in your id.

Using iScroll in iframe

All
I want to use iScroll in iframe.
This is my code
HTML
<form>
<input type="text" class="frmUrlVal">
<input type="submit" class="frmSubmit" value="Go">
</form>
<iframe src="http://www.css-tricks.com" width="360" height="500" id="dynFrame"></iframe>
JS
$(function()
{
$('.frmSubmit').click(function(e)
{
$('#dynFrame').attr('src', $('.frmUrlVal').attr('value'));
e.preventDefault();
});
});
This is my jsfiddle link : http://jsfiddle.net/ajaypatel_aj/JtCJa/
​
​You can see here there is vertical scrollbar, i want to use iSroll instead of that regular scroller.
I tried with applying the id but it not work for me.
Thanks In Advance !
I think the closest option you would have is http://jsfiddle.net/JtCJa/9/ it will still need tweaking and you cannot click the links but it works as you would expect :)
You can't do this from parent frame. You must add iScroll's script directly to "http://www.css-tricks.com" page. If this site doesn't belong to you, you can't do this because executing JavaScript code on pages from different domain is forbidden for security reasons.
You can set very big height of frame, so scroll bar inside the frame will disappear, only the scroll bar of parent frame will remain. This scrollbar can be styled with JavaScript because it belongs to your domain. But I think scrolling page with mouse inside frame will not work (you can't receive mouse events from third-party frame). And page height becomes very big (you can't determine the height of frame contents).
Well, you can download entire page contents on server side and display its copy on your site. In this case JavaScript on this page will work and scrollbar can be styled. There are several scripts for doing this. Trey're called "web proxies". You can use one of them, for example, PHProxy. It's complicated to implement this functionality yourself because there are some techinal difficulties (downloading related files, redirecting ajax requests, saving cookies etc).
hey ajajy you have to add class also in your file
<iframe src="http://www.css-tricks.com" width="360" height="500" id="navbar" class="navbar_relative"></iframe>
and js funcation
function magentoScrollMimic(){
j(document).scroll(function(e){
if(j(window).scrollTop()>138)
{
j('#dynFrame').addClass('navbar_fixed');
j('#dynFrame').removeClass('navbar_relative');
}
else
{
j('#dynFrame').removeClass('navbar_fixed');
j('#dynFrame').addClass('navbar_relative');
}
});
}
samjyo
and use directly
<ul id="dynFrame" class="navbar_relative">
i used this and its working
j(document).ready(function(){
magentoScrollMimic(); }

Categories