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.
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);")')
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...
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!).
I'm trying to place a flash video (object, swf) inside a div, and have that div draggable around the user's page. My code below works fine in everything except Chrome, where all the buttons in the player become un-clickable. (you can still hover over buttons for some reason and get feedback, like a mouseover in the flash player, but you can't click it)
This means that mute, pause, volume, fullscreen, etc are all broken in chrome. Clicking anywhere on the player just treats it like a drag click (any click anywhere on the player gives no feedback, but holding it and dragging will drag the div)
What I'm looking for is a click/draggable border around the div, with a functioning video player inside (like it works in IE and FF), that stays in its current position on the screen as the user scrolls up and down the page's contents.
I'm just running the following in my js:
$('#video').draggable();
and my relevant CSS is:
#video
{
position: fixed;
right: 0;
bottom: 0;
padding: 10px;
border-radius: 10px;
background-color: #0DD0FC;
display: block;
width: 640px;
cursor: pointer;
height: 360px;
}
and in my HTML I have
<div id="video" style="z-index: 4500;">
<object width="100%" height="100%">
<param name="movie" value="http://www.domain.com/value;autoplay=true" />
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<embed src="http://www.domain.com/value;autoplay=true" type="application/x-shockwave-flash"
allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%"
wmode="transparent"></embed></object>
</div>
You can specify which children should not activate draggable, but I can't vouch for how this works with Flash content I'm afraid.
My CMS system allows people to post some SWF's on my homepage however, sometimes there is a video which is included in the SWF (not two files like swf+flv). When the SWF video loads it uses up the bandwidth and so the page seems non-responsive for a while. Can I use jQuery to control all of the SWF's in a page that they load after the others are done; or maybe just load it after 3s?
Thanks!
Use AJAX to fetch the .swf and add to the page dynamically. or,
Place the html for .swf just before the </body> tag with style as display:none and using JavaScript, add it to the proper node.
$.ready(function(){
//move swf to proper place
});
Perhaps you should wrap your flash file in a div tag
<div id="image" align="center"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="281" height="28">
<param name="movie" value="whatever.swf">
<param name="quality" value="high">
<embed src="contactb.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="281" height="28"></embed>
</object>
</div>
and use the following CSS code:
.image {
display: none;
}
then call at your last image declartion an onload event that will display the swf block
<img onload="document.getElementById('image').style.display = 'block'" src="whatever" />
Good luck!