I have a flash object, and when it loads the IE "image not found" graphic shows up for a fraction of a second and then disappears.
I've tried to check for errors, and the only one which may be relevant is this:
SEC7113: CSS was ignored due to mime type mismatch
jquery.uploadify.css
(It is being sent as text/javascript).
I don't know if this is relevant and could cause such behaviour.
On all other browsers, including IE9, it does not happen.
Any ideas?
EDIT:
I am using the uploadify script, which generates the flash object - this is the code:
// Create the button
if (!settings.buttonImage) {
var button = jQuery('<div />', {
id : settings.id + '_button',
'class' : 'uploadifyButton ' + settings.buttonClass,
html : '<span class="uploadifyButtonText">' + settings.buttonText + '</span>'
});
jQuery('#' + settings.id).append(button);
jQuery('#' + swfuploadify.movieName).css({position: 'absolute', 'z-index': 1});
} else {
jQuery('#' + swfuploadify.movieName).addClass(settings.buttonClass);
}
Related
Please, see image below and you will see what I talking about.
When I click on link or picture feature of Summernote BoosTrap Editor ( v0.6.16 ) the Modal appears inside another Modal, that's weird. I don't know if I have some CSS overriding another ones or if its BUG of SummerNote.
Summernote url: http://summernote.org/#/
Thanks.
I found the issue. In my point of view its a incompatibility between SummerNote and bootstrap-modal plugin.
In SummerNote I found code below:
var tplDialog = function (className, title, body, footer) {
return '<div class="' + className + ' modal" aria-hidden="false">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
(title ?
'<div class="modal-header">' +
'<button type="button" class="close" aria-hidden="true" tabindex="-1">×</button>' +
'<h4 class="modal-title">' + title + '</h4>' +
'</div>' : ''
) +
'<div class="modal-body">' + body + '</div>' +
(footer ?
'<div class="modal-footer">' + footer + '</div>' : ''
) +
'</div>' +
'</div>' +
'</div>';
};
What the meaning of this, when i click on Link or Picture feature on SummerNote he calls the .modal() and the default behavior of this function, on Bootstrap-modal Plugin, is create a new div with class="modal-dialog". If I remove this class="modal-dialog" and try again, everything works fine!
i think you just need to enable this option
dialogsInBody: true
$('.summernote').summernote({
height: 300,
dialogsInBody: true
});
As originally pointed on this issue, Summernote´s crew has included the solution in the documentation, which says to include the following option:
$('#summernote').summernote({
dialogsInBody: true
});
But even so you experience a bug that freezes the underlaying modal, you can use this ugly, but handy and short workaround:
$('.modal.link-dialog').on('hide.bs.modal', () => {
setTimeout(() => {
if ($('.modal:not(.link-dialog)').hasClass('show')) {
$('body').addClass('modal-open');
}
}, 0);
});
It basically re-add the modal-open class to the body when another modal is active.
I want to reload the background image for a div with the same url inside directive. When my view load, I used this directive to show the image as a background to a div
app.directive('backImg', function () {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs) {
attrs.$observe('backImg',function(n,o){
if(!n) return;
element.css({
'background-image': 'url(' + n + ')',
'background-size': 'cover'
});
},true);
}
});
My html element looks like this
<div data-ng-if="vm.user.user_id!==undefined" data-back-img="{{vm.serviceUrl}}/image/user/{{vm.user.user_id}}"
class="user-img-div" style="width:100%; height:100%;"></div>
It works fine, but what happens I give a user to re-upload his profile image, so after it uploads, I want to refresh the background image with the same url. How can I make it happen? The above code not seems to be working.
Your issue most possibly is because of spaces in the random string (due to (new Date()).toString()) that you are appending to get the refreshed image from the browser. Spaces mean that you generate a bad image url, so you probably want to wrap url in quotes or use ticks.
Try changing it to:-
element.css({
'background-image': 'url("' + n + '")', //Wrap url in quotes
'background-size': 'cover'
});
Or just get the ticks and append it.
var random = new Date().getTime();
When messing around in the FireBug css panel, you change the their representation of the original css file. Like:
.myCssClass { width: 100px; }
However, if you add a jQuery line to this,
$(".myCssClass").css("width", "200px");
you end (of course) up with changing the style tag for this element and you see that your original width:100px has a strikethough in the FireBug representation.
So my question is, do you know a way to change the "original" width:100px instead of changing the style tag. I guess you have to through a FireBug extension to access that property, and that is not a problem for me. But I don't know where to start :)
Edit: Have to point out that I am need to change the property by code! Either from a FireBug extension or somehow reload the corresponding css so that FireBug think it is the orginal value.
Here is an old JS function that usually worked well for me (Before Stylish and Greasemonkey).
Note that plain JS has security restrictions from accessing some stylesheets. A FF add-on can get around that, but then you need to also beware of corrupting browser-chrome styles.
function replaceStyleRuleByName (sStyleName, sNewRule)
{
var iNumStyleSheets = document.styleSheets.length;
var bDebug = 0;
if (bDebug) console.log ('There are ' + iNumStyleSheets + ' style sheets.');
for (iStyleS_Idx=0; iStyleS_Idx < iNumStyleSheets; iStyleS_Idx++)
{
var iNumRules = 0;
var zStyleSheet = document.styleSheets[iStyleS_Idx];
if (zStyleSheet)
{
/*---WARNING!
This next line can throw an uncaught exception!
Error: uncaught exception:
[Exception... "Access to restricted URI denied" code: "1012"
nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"
location: ... ...]
*/
//--- try/catch for cross domain access issue.
try
{
var zRules = zStyleSheet.cssRules;
if (zRules)
{
iNumRules = zRules.length;
}
}
catch (e)
{// Just swallow the error for now.
}
}
if (bDebug) console.log ("Style sheet " + iStyleS_Idx + " has " + iNumRules + " ACCESSIBLE rules and src: " + zStyleSheet.href);
//for (var iRuleIdx=iNumRules-1; iRuleIdx >= 0; --iRuleIdx)
for (var iRuleIdx=0; iRuleIdx < iNumRules; ++iRuleIdx)
{
if (zRules[iRuleIdx].selectorText == sStyleName)
{
zStyleSheet.deleteRule (iRuleIdx);
if (bDebug) console.log (sNewRule);
if (sNewRule != null)
{
zStyleSheet.insertRule (sStyleName + sNewRule, iRuleIdx);
}
//return; //-- Sometimes changing just the first rule is not enough.
}
}
//--- Optional: Punt and add the rule, cold, to any accessible style sheet.
if (iNumRules > 0)
{
if (sNewRule != null)
{
try
{
zStyleSheet.insertRule (sStyleName + sNewRule, iRuleIdx);
}
catch(e)
{// Just swallow the error for now.
}
}
}
}
return;
}
Sample Usage:
replaceStyleRuleByName ('body', '{line-height: 1.5;}' );
replaceStyleRuleByName ('#adBox', '{display: none;}' );
replaceStyleRuleByName ('.BadStyle', null );
Just right click on the property in question and then edit [stylename]
Look for the "Computed" tab, it displays the actual values used of the properties of an element. The "Style" tab only displays the "stylesheet values" that affects a particular element, which may or may not be actually used by Firefox due to CSS' cascading rule and other layouting considerations.
I am using SimpleModal and i am opening an Iframe (using ff)
it seems to work ok in ie9 but in ff it is calling the iframe src twice
Thanks for any help
the code i am calling looks like
function addNew(){
var src = "/php/ftp/parsehome.php?dir="+userDir+"&idx=new";
$.modal('<iframe src="' + src + '" height="445" width="800" style="border:0">', {
containerCss:{
backgroundColor:"#E1EFF7",
borderColor:"#00A99D",
height:450,
padding:0,
width:840
},
modal: true
});
}
I ran into the same problem. Looking at the plugin code...
// add styling and attributes to the data
// append to body to get correct dimensions, then move to wrap
s.d.data = data
.attr('id', data.attr('id') || s.o.dataId)
.addClass('simplemodal-data')
.css($.extend(s.o.dataCss, {
display: 'none'
}))
.appendTo('body');
data = null;
You can see the data is added to the page body with the line .appendTo('body'); to calculate the correct dimensions for the modal. If you comment out this line, it will prevent the iframe being called twice.
// add styling and attributes to the data
// append to body to get correct dimensions, then move to wrap
s.d.data = data
.attr('id', data.attr('id') || s.o.dataId)
.addClass('simplemodal-data')
.css($.extend(s.o.dataCss, {
display: 'none'
}));
data = null;
Not sure if this modification will cause your modal size to have the wrong dimensions, but my iframe was set to width=100% and height=100% so didn't affect me.
I'm trying to print iframe content.
contentWindow.focus();
contentWindow.print();
This code works in IE, Firefox and Safari. But don't work in Chrome and Opera. These browsers print entire page.
I tried to use this topic How do I print an IFrame from javascript in Safari/Chrome. But it didn't help me.
Could someone help me?
This is a known bug in Opera. In addition to the above ideas for workarounds, you may want to play with something like this:
var clone=document.documentElement.cloneNode(true)
var win=window.open('about:blank');
win.document.replaceChild(clone, win.document.documentElement);
win.print();
I have not tested this but it should create a copy of the page in a popup window and print it, without having to load the content a second time from the server or loosing any DOM modifications you may want printed.
As I understand, it's impossible to implement iframe printing without opening new window.
My print function:
if ($.browser.opera || (/chrome/.test(navigator.userAgent.toLowerCase()))) {
var href = contentWindow.location.href;
href = href.indexOf("?") > -1 ? href + "&print=1" : href + "?print=1";
var printWindow = window.open(href, "printWindow", "scrollbars=yes");
printWindow.focus();
}
else {
contentWindow.focus();
contentWindow.print();
}
Also I added the following code to the end of the body (when print==1):
<script type='text/javascript'>
function invokePrint() {
if (document.readyState && document.readyState!='complete')
setTimeout(function() { invokePrint(); }, 50);
else if (document.body && document.body.innerHTML=='false')
setTimeout(function() { invokePrint(); }, 50);
else {
focus();
print();
}
}
invokePrint();
</script>
I cannot reproduce your problem with Chrome. Opera, however, does indeed still print the entire outer page when trying to only print the iframe.
I have devised a workaround and although it does work mostly, it is not 100% failsafe (amongst others because Opera wraps lines for printing; I don't know how to calculate the correct height in such cases). That said, the following code works at least reasonable (using jQuery for convenience):
if ($.browser.opera) {
var ifr = $('#youriframe');
var ifrbody = ifr.get(0).contentDocument.body;
var sheet = $([
'<style type="text/css" media="print">',
'body * {',
' display: none;',
'}',
'#youriframe {',
' border: none;',
' display: block;',
' height: ', ifrbody.scrollHeight, 'px;',
' margin: 0px;',
' padding: 0px;',
' width: ', ifrbody.scrollWidth, 'px;',
'}',
'<\/style>'
].join(''));
$('head').append(sheet);
window.print();
sheet.remove();
}
Hope this helps.
I tried above code and after making changes to the above codes I came with conclusive code as follows
var win=window.open('about:blank');
win.document.write('<html><head></head><body>');
win.document.write('<iframe frameBorder="0" align="center" src="'+window.location.href+'" onload="test()" style="width: 619px; height: 482px;"></iframe>');
win.document.write('<scr'+'ipt>function test(){window.focus();window.print()}</sc'+'ript></body></html>');
win.document.close();
if (window.focus) {win.focus()}
try this one