I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:
<html>
<style>
.AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
Test
<script type="text/javascript">
<!-- var obj = {}; //-->
</script>
</span>
</html>
In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->
The content of the script block becomes visible somehow.
I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).
Would anyone have an explanation ?
base, basefont, datalist, head, meta, script, style, title, noembed and param tags are hidden by the simple expedient of setting display: none; in html.css (which is a UA stylesheet). So they are subject to being unhidden by page CSS such as your example. area on the other hand has display: none ! important; because it has special internal handling (the image effectively owns the area).
Don't put JavaScript there. Insert it just before </body></html>.
Test your HTMl in the Echochamber.
fascinating bug!
you can add .AllInline script {display: none;} to your css to hide it.
Related
I created a classic report in oracle apex 5.0 which has a few product info (colour, szie, price etc.) as well as a Barcode column. To display the barcode column in a specific barcode font, I uploaded a piece of jquery code as plugin and managed to get the barcode displayed correctly like below
But when it comes to printing, the print function that comes with APEX doesn't work, because it only prints out the original barcode value (6208217iFiEiGi1i) which is returned by the sql. As a workaround, I created a button that calls a javascript which does window.print(), and used some CSS to get rid of the header and the sidebar of the web page, and managed to only print the main content of the web page which is the report.
The way I did is, I have the below CSS code in the html header of my page
<style media="print" type="text/css">
#media print
{
body * { visibility: hidden; }
#print-content * { visibility: visible; }
#print-content { position: relative; top: 0; left: 0; width:100%; padding:0; }
}
</style>
and the below in the region header and footer section I want to print
<div id="print-content" >
</div>
However, this approach left me with another issue. Sometimes the row gets cut off at the end of the page, that makes it look like below
Can anyone give me some suggestions on how I get around with this issue?
Thanks a lot
Try using this CSS - I'm not sure what you should apply it to, perhaps table rows in general:
#media print {
tr {page-break-inside: avoid;}
}
Possibly a more specific selector would be preferable like div#myreport tr.
I'm using animate.css to add some transistions to my meteor app. However, there is this problem that animate.css creates an almost transparant overlay over my buttons/images etc.
I have a main div where the animate.css class is added depending on changing page views etc. Very simplified this is my HTML.
<body>
<header class="header></header>
<div class="animate-holder {{animated class}}>
<div class="class1></div>
<div class="class2></div>
</div>
</body>
From what I've tested this will happen all the time and it doesn't matter how I use transistions. Is there a simple way to NOT have this overlay?
EDIT:
I can hack it like this, but this is very very ugly. But maybe it creates more insight into the problem:
Template.DetailsSubmit.rendered = function() {
Meteor.setTimeout(function() {
var classes = $('div.animated').attr('class');
$('div.animated').removeClass(classes);
}, 1000)
}
You can make this specific div clickable through using the very useful (and not famous enough) pointer-events css property:
div.animated {
pointer-events: none;
}
I am attempting to use Chrome-Frame on a site I'm building.
In IE8 and below, everything works fine...
In IE9 I get this error:
SCRIPT5: Access is denied.
cf-dlpage.js, line78 character 209
No idea what to do!
here is the conditional that is triggering the behaviour:
<!--[if lte IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>
body {
overflow-y:hidden;
}
.chromeFrameOverlayContent {
border:none;
overflow:hidden;
}
.chromeFrameOverlayContent iframe {
border:none;
overflow:hidden;
}
.chromeFrameOverlayCloseBar {
display:none;
}
.chromeFrameOverlayUnderlay {
background-image:url(/img/bg.png);
opacity: 1;
filter: alpha(opacity = 100);
}
</style>
<script type="text/javascript">
window.onload = function() {
CFInstall.check({
url: "/fix/update.html",
mode: "overlay",
destination: "/"
});
};
</script>
<![endif]-->
Any help greatly appreciated!
Try this it sounds that its related to your problem. i hope it helps.
read comment from erikwright#chromium.org, is the last comment right now.
The problem is caused by this:
Your page is on www.example.com
The installation routine creates an iframe with a url www.google.com/...
The iframe page itself executes Javascript and tries to read window.parent, but...
... this is not allowed because both frames have different domains.
The only solutions seem to be:
Create your own install script
Google fixes their script
I wasted a whole day trying to work around this problem (nested frames, custom scripts, routing Google requests through my server,...) until it dawned me why Google seems to ignore this bug:
Most people simply don't notice the problem. The installation is performed successfully, regardless of this error. To actually get a message box you have to enable Javascript debugging or the Show Javascript errors feature.
You and I have enabled said features because we are developers, so naturally we freak out, but Average Joe won't notice anything.
I am trying to display an ajax spinner when loading AJAX content.
The following code appears to work fine in Firefox but not in IE7. The functions to show and hide the spinner are being called but the browser just does not display it.
Here is the jQuery:
$.ajax({
url: filterorSearch,
data: {filterParams: JSON.stringify(filters), requestTime: new Date().getTime()},
beforeSend: function(){
showLoadingGraphic();
},
complete: function(){
hideLoadingGraphic();
},
success: function(data){
$("#BreakingNews").html(data);
GetRelatedarticles();
}
});
function showLoadingGraphic() {
alert("show");
var showSpinner = $('#page-placeholder-wrapper #main-left').prepend('<div id="ajaxLoader"></div>');
return showSpinner;
}
function hideLoadingGraphic() {
alert("hide");
var hideSpinner = $('#ajaxLoader').remove();
return hideSpinner;
}
And the associated CSS for the spinner:
#page-placeholder-wrapper #main-left
{
position:relative;
}
#ajaxLoader
{
background:rgba(255,255,255,.7) url("../images/icon-ajax-loading.gif") no-repeat center center;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:9999;
}
To get you working try this:
background: url("../images/icon-ajax-loading.gif") no-repeat center center rgba(255,255,255,.7);
I don't know why the rgba has to be last!
[EDIT]
IE does not support rgba, therefore with it starting on background: it errors and the rest of the line isn't executed for the css
See: Browser Support for RGBa
JQuery actually fires events when it's doing ajax.
$(document).ajaxStart(function(){
$('#ajaxIndicator').show();
}).ajaxStop(function(){
$('#ajaxIndicator').hide();
});
This will save you a lot of time over manually doing it for each individual call.
You could have a DIV relative to the top of the document which you can show/hide which overlays everything else on the page. (I forget the exact CSS which makes it always be 200px from the top of the screen, etc) update: I think it's position:fixed, although I'm not sure how well this will work in IE.
<body>
<div id="ajaxIndicator" style="position:fixed; top:200px; text-align:center">
<img src="../indicator.gif" /> Loading ...
</div>
...
Might be problems with Z sorting of your DOM elements;
IE handles Z sorting of objects in a bit different way then other browsers. Try setting z-index on your wrapper element and it should help. Generally it's a best practice if you want to save you troubles with elements positioned with relatie or absolute positioning to always give their parent proper z-index;
Having the actual page to debug would make it easier.
For the sake of my sanity and getting this done today.
I have added the "ajaxLoader" element to the markup, hidden initially with CSS and then show/hide when AJAX starts/stops.
This works fine for all browsers.
Thanks to all for their input.
The text-overflow:ellipsis; CSS property must be one of the few things that Microsoft has done right for the web.
All the other browsers now support it... except Firefox.
The Firefox developers have been arguing over it since 2005 but despite the obvious demand for it, they can't seem to actually bring themselves to implement it (even an experimental -moz- implementation would be sufficient).
A few years ago, someone worked out a way to hack Firefox 3 to make it support an ellipsis. The hack uses the -moz-binding feature to implement it using XUL. Quite a number of sites are now using this hack.
The bad news? Firefox 4 is removing the -moz-binding feature, which means this hack won't work any more.
So as soon as Firefox 4 is released (later this month, I hear), we're going to be back to the problem of having it not being able to support this feature.
So my question is: Is there any other way around this? (I'm trying to avoid falling back to a Javascript solution if at all possible)
[EDIT]
Lots of up-votes, so I'm obviously not the only one who wants to know, but I've got one answer so far which basically says 'use javascript'. I'm still hoping for a solution that will either not need JS at all, or at worst only use it as a fall-back where the CSS feature doesn't work. So I'm going to post a bounty on the question, on the off chance that someone, somewhere has found an answer.
[EDIT]
An update: Firefox has gone into rapid development mode, but despite FF5 now being released this feature still isn't supported. And now that the majority of users have upgraded from FF3.6, the hack is no longer a solution. The good news I'm told that it might be added to Firefox 6, which with the new release schedule should be out in only a few months. If that's the case, then I guess I can wait it out, but it's a shame they couldn't have sorted it sooner.
[FINAL EDIT]
I see that the ellipsis feature has finally been added to Firefox's "Aurora Channel" (ie development version). This means that it should now be released as part of Firefox 7, which is due out toward the end of 2011. What a relief.
Release notes available here: https://developer.mozilla.org/en-US/Firefox/Releases/7
Spudley, you could achieve the same thing by writing a small JavaScript using jQuery:
var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
// -4 to include the ellipsis size and also since it is an index
var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4);
trimmedText += ellipsis;
$('#limitedWidthTextBox').val(trimmedText);
}
I understand that there should be some way that all browsers support this natively (without JavaScript) but, that's what we have at this point.
EDIT
Also, you could make it more neat by attaching a css class to all those fixed width field say fixWidth
and then do something like the following:
$(document).ready(function() {
$('.fixWidth').each(function() {
var limit = 50;
var ellipsis = "...";
var text = $(this).val();
if (text.length > limit) {
// -4 to include the ellipsis size and also since it is an index
var trimmedText = text.substring(0, limit - 4);
trimmedText += ellipsis;
$(this).val(trimmedText);
}
});
});//EOF
EDIT 09/30/2011
FF7 is out, this bug is resolved and it works!
EDIT 08/29/2011
This issue is marked as resolved and will be available in FF 7; currently set to release on 09/27/2011.
Mark your calendars and get ready to remove all those hacks you've put in place.
OLD
I have another answer: wait.
The FF dev team is in hot pursuit to resolve this issue.
They have tentative fix set for Firefox 6.
Firefox 6!! When will that come
out?!?
Easy there, imaginary, over-reactive person. Firefox is on the fast dev track. FF6 is set for release six weeks after Firefox 5. Firefox 5 is set for release June 21st, 2011.
So that puts the fix sometime in the beginning of August 2011...hopefully.
You can sign up for the mailing list following the bug from the link in the original poster's question.
Or you can click here; whichever is easiest.
I must say I'm a little disappointed that the only browser specific hack in my application is going to be to support FF4. The above javascript solution doesn't account for variable width fonts. Here is a more verbose script that accounts for this. The big problem with this solution is that if the element containing the text is hidden when the code is run then the width of the box isn't known. This was a deal breaker for me so I stopped working on/testing it... but I thought I'd post it here in case it is of use to someone. Be sure to test it well as my testing was less than exhaustive. I intended to add a browser check to only run the code for FF4 and let all the other browsers use their existing solution.
This should be available for fiddling here:
http://jsfiddle.net/kn9Qg/130/
HTML:
<div id="test">hello World</div>
CSS:
#test {
margin-top: 20px;
width: 68px;
overflow: hidden;
white-space: nowrap;
border: 1px solid green;
}
Javascript (uses jQuery)
function ellipsify($c){
// <div $c> content container (passed)
// <div $b> bounds
// <div $o> outer
// <span $i> inner
// </div>
// <span $d></span> dots
// </div>
// </div>
var $i = $('<span>' + $c.html() + '</span>');
var $d = $('<span>...</span>');
var $o = $('<div></div>');
var $b = $('<div></div>');
$b.css( {
'white-space' : "nowrap",
'display' : "block",
'overflow': "hidden"
}).attr('title', $c.html());
$o.css({
'overflow' : "hidden",
'width' : "100%",
'float' : "left"
});
$c.html('').append($b.append( $o.append($i)).append($d));
function getWidth($w){
return parseInt( $w.css('width').replace('px', '') );
}
if (getWidth($o) < getWidth($i))
{
while (getWidth($i) > (getWidth($b) - getWidth($d)) )
{
var content = $i.html();
$i.html(content.substr(0, content.length - 1));
}
$o.css('width', (getWidth($b) - getWidth($d)) + 'px');
}
else
{
var content = $i.html();
$c.empty().html(content);
}
}
It would be called like:
$(function(){
ellipsify($('#test'));
});
I have run into this gremlin over the past week as well.
Since the accepted solution does not account for variable width fonts and wwwhack's solution has a While Loop, I will throw in my $.02.
I was able to drastically reduce the processing time of my problem by using cross-multiplication. Basically, we have a formula that looks like this:
The variable x in this case is what we need to solve. When returned as an Integer, it will give the new length that the over-flowing text should be. I multiplied the MaxLength by 80% to give the ellipses enough room to show.
Here is a full html example:
<html>
<head>
<!-- CSS setting the width of the DIV elements for the table columns. Assume that these widths could change. -->
<style type="text/css">
.div1 { overflow: hidden; white-space: nowrap; width: 80px; }
.div2 { overflow: hidden; white-space: nowrap; width: 150px; }
.div3 { overflow: hidden; white-space: nowrap; width: 70px; }
</style>
<!-- Make a call to Google jQuery to run the javascript below.
NOTE: jQuery is NOT necessary for the ellipses javascript to work; including jQuery to make this example work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Loop through each DIV element
$('div').each(function(index) {
var myDiv = this; //The original Div element which will have a nodeType of 1 (e.g. ELEMENT_NODE)
var divText = myDiv; //Variable used to obtain the text from the DIV element above
//Get the nodeType of 3 (e.g. TEXT_NODE) from the DIV element. For this example, it will always be the firstChild
divText = divText.firstChild;
//Create another variable to hold the display text
var sDisplayText = divText.nodeValue;
//Determine if the DIV element is longer than it's supposed to be.
if (myDiv.scrollWidth > myDiv.offsetWidth) {
//Percentage Factor is just a way of determining how much text should be removed to append the ellipses
//With variable width fonts, there's no magic number, but 80%, should give you enough room
var percentageFactor = .8;
//This is where the magic happens.
var sliceFactor = ((myDiv.offsetWidth * percentageFactor) * sDisplayText.length) / myDiv.scrollWidth;
sliceFactor = parseInt(sliceFactor); //Get the value as an Integer
sDisplayText = sDisplayText.slice(0, sliceFactor) + "..."; //Append the ellipses
divText.nodeValue = sDisplayText; //Set the nodeValue of the Display Text
}
});
});
</script>
</head>
<body>
<table border="0">
<tr>
<td><div class="div1">Short Value</div></td>
<td><div class="div2">The quick brown fox jumps over the lazy dog; lots and lots of times</div></td>
<td><div class="div3">Prince</div></td>
</tr>
<tr>
<td><div class="div1">Longer Value</div></td>
<td><div class="div2">For score and seven year ago</div></td>
<td><div class="div3">Brown, James</div></td>
</tr>
<tr>
<td><div class="div1">Even Long Td and Div Value</div></td>
<td><div class="div2">Once upon a time</div></td>
<td><div class="div3">Schwarzenegger, Arnold</div></td>
</tr>
</table>
</body>
</html>
I understand this is a JS only fix, but until Mozilla fixes the bug, I'm just not smart enough to come up with a CSS solution.
This example works best for me because the JS is called every time a grid loads in our application. The column-width for each grid vary and we have no control over what type of computer our Firefox users view our app (which, of course, we shouldn't have that control :) ).
This pure CSS solution is really close, except for the fact that it causes ellipsis to appear after every line.