I'm using Alfresco 4.2b
I've a issue. When using some browsers (chrome by now) the document preview shows collapsed (it have the document but it is at 38px height)
The div that contains the embed field has a height in "style" that is always in 38px (also if i try to change it in firebug, it returns to 38px)
<div id="template_x002e_web-preview_x002e_document-details_x0023_default-full-window-div" style="position: absolute; left: 10px; top: 226px; width: 824px; height: 38px;" class="web-preview real">
<embed type="application/x-shockwave-flash" src="/share/components/preview/WebPreviewer.swf" width="100%" height="100%" style="" id="WebPreviewer_template_x002e_web-preview_x002e_document-details_x0023_default" name="WebPreviewer_template_x002e_web-preview_x002e_document-details_x0023_default" quality="high" allowscriptaccess="sameDomain" allowfullscreen="true" wmode="transparent" flashvars="fileName=Minuta2.docx&paging=true&url=http%3A%2F%2Fintra.jaimeillanes.cl%2Fshare%2Fproxy%2Falfresco%2Fapi%2Fnode%2Fworkspace%2FSpacesStore%2F0a41947e-5054-4c6d-a861-caa7b0bb07e2%2Fcontent%2Fthumbnails%2Fwebpreview%3Fc%3Dforce%26lastModified%3Dwebpreview%253A1356554282043&jsCallback=Alfresco.util.ComponentManager.get('template_x002e_web-preview_x002e_document-details_x0023_default').plugin.onWebPreviewerEvent&jsLogger=Alfresco.util.ComponentManager.get('template_x002e_web-preview_x002e_document-details_x0023_default').plugin.onWebPreviewerLogging&i18n_actualSize=Tama%C3%B1o%20actual&i18n_fitPage=Adaptar%20a%20la%20p%C3%A1gina&i18n_fitWidth=Adaptar%20a%20lo%20ancho&i18n_fitHeight=Adaptar%20a%20lo%20alto&i18n_fullscreen=Pantalla%20completa&i18n_fullwindow=Maximizar&i18n_fullwindow_escape=Pulse%20la%20tecla%20Esc%20para%20salir%20del%20modo%20de%20pantalla%20completa&i18n_page=P%C3%A1gina&i18n_pageOf=de&show_fullscreen_button=true&show_fullwindow_button=true&disable_i18n_input_fix=false">
</div>
I've been searching but i can't find anything.
I think you need to search a bit 'deeper' in Alfresco.
Check the flash previewer freemarker template which is injected in the document-details template (xml). In that ftl or a reference to another one should be the div your referring to.
See https://issues.alfresco.com/jira/browse/ALF-16914, is that your issue?
You would be recommended to upgrade to the latest 4.2 version, where I believe it is fixed. Alternatively you could try removing the file tablet.css file which it seems triggers the problem (note this could have unintended side-effects, however!).
Related
Explain better:
I am automating the issuance of a certificate that is being generated in iframes
Through the selenium grid I managed to get to this last screen where the pdf is
I tried to print the screen with window.print running a javascript, I see the window for print but I couldn't proceed
:
$this->driver->executeScript("window.print()");
document.querySelector('pdf-viewer').shadowRoot.querySelector('viewer-toolbar').shadowRoot.querySelector('viewer-download-controls').shadowRoot.querySelector('cr-icon-button').click();//this work in browser, nope with selenium
From where I am I think there could be some ways to solve which I tried but didn't make any progress:
after windows.print() ,
press o key enter, maybe(two times),
click button save
maybe using keyboard control + s , key enter
right click, save page as, confirm
maybe using control + p
maybe using mouse for click in arrow down for download, but I got not find element, or dont know how to use coordinates for mouse
set preferences/capabilities for browser for when the window.print() not show where I liked save my pdf
I too tried set a preferences
I too tried $this->driver->getPageSource();
$options->addArguments(['--print-to-pdf']);
that I find here but not sure if it is working or how to use it.
<iframe src="asintegrarelatorio?UGsAuJNIMg0Bs79efCz_UN+WLY3wJLa3shybBaN2MhtwcBuQ28HYLHZjlWoShKh3akHt0HZM3+pL7TP3ksZMQQ==" name="EMBPAGE" width="900px" height="500px" frameborder="1" align="center" title="" style="" scrolling="auto">
<html><head><script src="chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/prompt.js"></script></head><body style="height: 100%; width: 100%; overflow: hidden; margin:0px; background-color: rgb(82, 86, 89);"><embed name="C065A881B0E7E51799DF65DCF351573F" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" src="about:blank" type="application/pdf" internalid="C065A881B0E7E51799DF65DCF351573F"></body></html>
</iframe>
driver.execute_script('document.querySelector("#printDiv > a").setAttribute("onclick","setTimeout(() => window.print(), 0);")')
Google PageSpeedInsights flags Base.js as unused Javascript in my report. It's pretty substantial at 487kb. Appears to come from including the Youtube player iframe api. Is this file needed and if so, does anyone know why it is being flagged as unused JS in the report?
Iframe API: https://developers.google.com/youtube/iframe_api_reference
Large file that gets flagged on PageSpeedInsights as unused JS:
https://www.youtube.com/s/player/c88a8657/player_ias.vflset/en_US/base.js
If a script is listed under the "Remove Unused Javascript" tab, it doesn't mean the entire script is unused, it means a certain amount of the script's code isn't doing anything on the page.
The algorithm for finding unused code isn't perfect either, I often see scripts that aren't used at all on a page having some sort amount of used code according to google.
The "Remove Unused Javascript" should really be taken with a pinch of salt, and in cases of plugins, like youtube's API, it should be ignored since you can't edit a external API to be more efficient.
In your case, the file is very much needed if your using an embedded Youtube video.
If you want to optmize how you load your Youtube video, consider lazyloading it.
If you want to fix it with just HTML you can setup the embed to load when the video clicked using the srcdoc attribute.
You basically write an HTML link inside the attribute and the video won't load until the link inside srcdoc is clicked.
Here's an example:
<!-- Reference: https://vumbnail.com/examples/srcdoc-iframe-for-lighthouse -->
<iframe
srcdoc="
<style>
body, .full {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
display: flex;
justify-content: center;
object-fit: cover;
}
</style>
<a
href='https://www.youtube.com/embed/Q-X_ED4LHrQ?autoplay=1'
class='full'
>
<img
src='https://vumbnail.com/Q-X_ED4LHrQ.jpg'
class='full'
/>
<svg
version='1.1'
viewBox='0 0 68 48'
width='68px'
style='position: relative;'
>
<path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
<path d='M 45,24 27,14 27,34' fill='#fff'></path>
</svg>
</a>
"
style="max-width: 640px; width: 100%; aspect-ratio: 16/9;"
frameborder="0"
></iframe>
It can be a bit clunky to write HTML inside an attribute but it gets the job done.
If you don't want to have to go in and replace all the YouTube IDs I wrote a simple builder here: https://vumbnail.com/embed-builder
I have been looking for 2 days to find a way to download YouTube videos, and I found out that this file is really important, because it loads all video/audio files:
I have added a PDF to a webpage using the embed tag. The width of the embed window is smaller than the width of the PDF. So, A horizontal scroll bar appears. However, there are wide margins on the left and the right of the PDF document itself. If user scrolls center to the PDF, the PDF's content fits perfectly.
I would like to have this scrolling happen automatically if possible.
The code is here http://shop.stelladoradus.com/product/gsm-repeater/
You must click on the specification tab to see the PDF.
For google chrome I did the following:
I used an Iframe instead of the embed
<iframe id='pdf_embed' height='1300' style='width: 734px; margin-left: -40px;' src='iframe_url?pdf=pdf_url.'></iframe>
on the iframe page I have:
<style>
object{
width: 200%;
margin-left: -370px;
margin-top: -150px;
}
embed{
width:100%;
height:95%;
}
</style>
<html>
<body >
<object height='1430' data="<?php echo $_GET['pdf']; ?>" type="application/pdf">
<embed height='1430' src="<?php echo $_GET['pdf']; ?>" type="application/pdf" />
</object>
</body>
</html>
This solution is actually exactly what I was looking for, as the pdf is zoomed in so the margins aren't showing, and its easier to read (bigger text). I couldn't get it to work for firefox or IE, for that you can use #Infer-On solution below.
Ok I think you have only to pass some paramenters to your PDF, as specified from documentation:
You could try something like this:
zoom=scale
Sets the zoom and scroll factors, using float or integer values. For
example, a scale value of 100 indicates a zoom value of 100%.
or else
view=Fit
Set the view of the displayed page, using the keyword values defined
in the PDF language specification. For more information, see the PDF
Reference.
See the related documentation to find the parameter will better fit for you
http://example.org/doc.pdf#zoom=50
http://example.org/doc.pdf#view=Fit,100
EDIT
What i already tried:
<object data="http://www.stelladoradus.com/wp-content/uploads/2014/03/en_spec_RP1000G3.pdf"
type="application/pdf"
width="300" height="500">
<param name="view" value="fit" />
</object>
http://jsfiddle.net/InferOn/wVaGa/23/
this works, but not in Chrome...
On some pages the twitter share button is not showing its full width. I have traced the problem, the iframe in which it is displayed is only set to 24px width, however i need to set it to the correct width. Problem is.. I have no access to the iframe directly since this is the code to insert it:
<div style="margin:4px 0 0 5px; float:left; position: relative;">Tweet</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div><!-- END #socialNetworking -->
<script>
Does anybody know how I can edit the iframe? The generated HTML does not show the iframe, however digging into the html inspector on chrome web dev tools, i can see it there:
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1347008535.html#_=1347624904492&count=none&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fwww.dgfdg.co.uk%2F&size=m&text=Web%20Design%20Kendal%20%7C%20Website%20Design%20Cumbria%20%7C%20Graphic%20Design%20%7C%20Marketing%20%7C%20Advertising%20%7C%20Designworks%20%7C&url=http%3A%2F%2Fwww.fdfdg.co.uk%2F" class="twitter-share-button twitter-count-none" style="width: 24px; height: 20px; " title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>
Look at https://dev.twitter.com/docs/tweet-button, I think it's the "size" attribute you're looking for. It only accepts categorical values, though. I don't think you can set it to some arbitrary size.
I've created a jQuery plug-in that allows a selected panel of a web page to be pinned to the top of the browser view-port when the user scrolls a long page after passing a particular horizontal point on the page.
When the panel is pinned or unpinned, a strange thing occurs: if a Flash SWF object is present as a descendant element of the container, the Flash object either restarts its animation or disappears completely.
The pin or unpin change occurs when the CSS property "position" switches between fixed, absolute and static. This forces Firefox to redraw its elements and it causes the <object> to reload and reanimate the Flash movie. I read this post with interest: http://alexw.me/2010/12/firefox-problems-with-javascript-animation/
Does anyone know of a workaround that prevents the <object> tag from reloading? I admit the Flash is an ad, but this problem only occurs in Firefox. Although there are suggestions that this may be a bug, I have searched without success and I'm scratching my pate with a deadline fast approaching.
Thanks in advance!
Peter
This is a known bug in firefox itself... Actually its been listed on their bugzilla reporting system since 2001 and still has not been fixed, and probably wont be fixed by the looks of it.
https://bugzilla.mozilla.org/show_bug.cgi?id=90268
The simplest workaround I've found is to add the css {overflow: hidden} to the parent of the swf object. That works in the two instances I've had this problem.
In one of our webapp we have two panels each one containing a flash animation. Only one of the panels is shown while the other is hidden. Initially we used jquery .hide() and .show() on the panels but with Chrome (21.0) everytime the visibilty of one panel changed from hidden to block the flash animation put inside restarted.
We tried different solutions suggested on the Net, but only one is working well: avoid changes to the display or the visibility css properties and hide the panels by changing the absolute position instead.
Something like this:
<div class="panelContainer">
<div id="panel1">
<object>...flash code here...</object>
</div>
<div id="panel2" class="active">
<object>...flash code here...</object>
</div>
</div>
.panelContainer {
position: relative;
}
.panelContainer > div {
position: absolute;
top: 0;
left: -3999px;
}
.panelContainer > div.active {
left: 0;
}
function showPanel(id) {
$('#panelContainer > div.active').removeClass('active');
$('#'+id).addClass('active');
}
showPanel('panel1');
Strange but true, we have this problem with Chrome only, while IE9 and FireFox 15 works with .hide() and .show().
I hope it helps.
I was looking for solution to support overflow: hidden; property in Firefox when embedded flash content in it. So I have different work around.
I have played with zIndex property on new-banner div in the code below, which avoids the problem discussed above in the question "the pin or unpin change occurs when the CSS property".
In my case I was using CSS property overflow:hidden; which I was toggling, causing an error in Firefox.
Check out the code below for a solution that worked for me:
<div class="footerbannerbox" style=" background-image:none; position:relative; top:-3px; width:690px; height:90px; margin:0 0 0 64px; padding:0;" id="footerBannerBox" onmouseover="handleFlash();">
<div id="new-banner" style="position: absolute; width: 690px; height: 300px; top:-213px; left:-1px;">
<div id="exp-banner" style=" position:absolute;clip: rect(0px 690px 300px 0px);">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" name="expandable" width="690" height="300" align="middle" id="expandable">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="/swf/Unbelievable_JK_RB_690x300.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#fff" />
<param name="menu" value="false" />
<embed src="/swf/Unbelievable_JK_RB_690x300.swf" width="690" height="300" align="middle" quality="high" wmode="transparent" bgcolor="#fff" name="expandable" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" menu="false" />
</object>
</div>
</div>
<script type="text/javascript">
function expand() {
document.getElementById("exp-banner").style.clip="rect(0px 690px 300px 0px)";
document.getElementById("new-banner").style.zIndex = '0';
}
function retract() {
document.getElementById("exp-banner").style.clip="rect(0px 690px 300px 0px)";
document.getElementById("new-banner").style.zIndex = '-1';
}
function handleFlash(){
document.getElementById("new-banner").style.zIndex = '0';
}
</script>
</div>
expand() and retract() functions are called internally from the SWF file.