For some reason, when a user has their display set to 125% from the Control panel, IE9 will add extra width inline to elements like so:
<div class="container" id="main" style="width: 1500px">
<!-- Code goes here-->
</div>
The inline style above (with the width) is the one added by IE9. IE8 does not have this problem, and it's definitely triggered by setting the Windows display settings to 125%. Chrome and Firefox display things properly without the extra style too. Don't suppose anybody has a workaround or fix for this? Can't control what settings the users have, but I've seen other sites render properly.
Ok, so I solved this with a conditional comment and a bit of jQuery:
<!--[if IE 9]>
<script type="text/javascript">
window.onload = function () {
if ( $('#main').attr('style') !== 'undefined' ) {
$('#main').removeAttr('style');
}
}
</script>
<![endif]-->
Basically, it checks to see if IE put a "style" attribute on the offending element, and if so, it removes the attribute.
Yep or if you want to be more selective to width and height
jQuery(document).ready(function () {
removeInlineWidthHeightElements($('#main'));
});
function removeInlineWidthHeightElements(element) {
element.attr('style', function (i, style) {
return style.replace(/width[^;]+;?/g, '').replace(/height[^;]+;?/g, '');
});
}
Is it possible to remove inline styles with jQuery?
Related
I'm attempting to conditionally show/hide two divs using ng-show with a boolean value in $scope, based on when an AJAX call has completed. Basically, with the following layout:
<div id="div1" ng-show="!loadingData">
<!--Some markup here-->
</div>
<div id="loadingMessage" ng-show="loadingData">
Loading...
</div>
The function provoking the change contains the following:
$scope.loadingData=true;
var promise = dao.doAjaxGet("url");
promise.then(function(data){
//Hide loading message
$scope.loadingData=false;
});
The AJAX call is operating correctly, and this works fine in Chrome, Safari, Firefox, but not the two versions of IE that we are required to support - IE7 and IE8. The loading message stays hidden and div1 stays visible regardless of what status the call is in. Can anyone advise on this?
If you have console.log in your controller, get rid of it. It helped to get things working in IE8 e.g. ng-hide
Turns out this is caching related. Chrome and IE both cache ajax calls after the first call. I've managed to resolve the problem in chrome by introducing cache:false into the ajax call configuration but this seems to have no effect in IE. If anybody has further information on this, please let me know.
Here's a fully working Angular ie7 template. Ues a very old Angular, but works
My HTML File
https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css'>
<!--[if lte IE 8]>
<script type="text/javascript">
// IE7 fix for missing
if (!window.console) {
var console = {
log: function() {},
warn: function() {},
error: function() {},
time: function() {},
timeEnd: function() {}
}
}
</script>
<script src="https://cdn.jsdelivr.net/json2/0.2/json2.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script type="text/javascript" src="https://cdn.jsdelivr.net/es5.shim/4.5.7/es5-shim.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angularjs/1.1.5/angular.js"></script>
<script>
/**
* Main AngularJS Web Application
*/
var app = angular.module('myapp', []);
app.controller('MyPageCtrl', pageController);
function pageController($scope) {
$scope.languages = [
{ 'Id': 1, 'Name': 'French' },
{ 'Id': 1, 'Name': 'German' },
];
};
</script>
</head>
<body ng-controller="MyPageCtrl">
<div class="col-xs-12">
<select name="languagesDropDown" id="languagesDropDown" class="form-control" style="width: 200px;">
<option ng-repeat="language in languages" value="{{language.Id}}">{{language.Name}}</option>
</select>
</div>
I faced this same issue of ng-show not working in Internet Explorer.
The official ngShow AngularJS documentation mentions about this, and provides a few workarounds for this.
(I'll copy-paste the text mentioned in that link, in case that link has expired or is not working for some reason)
When using ngShow and / or ngHide to toggle between elements, it
can happen that both the element to show and the element to hide are
visible for a very short time.
This usually happens when the ngAnimate module is included, but no
actual animations are defined for ngShow / ngHide. Internet
Explorer is affected more often than other browsers.
There are several way to mitigate this problem:
Disable animations on the affected elements.
Use ngIf or ngSwitch instead of ngShow / ngHide.
Use the special CSS selector ng-hide.ng-hide-animate to set {display: none} or similar on the affected elements.
Use ng-class="{'ng-hide': expression} instead of instead of ngShow / ngHide.
Define an animation on the affected elements.
The second suggestion (replacing ng-show with ng-if) worked for me. So in your case, you could consider using this -
<div id="div1" ng-if="!loadingData">
<!--Some markup here-->
</div>
<div id="loadingMessage" ng-if="loadingData">
Loading...
</div>
A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:
http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm
Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.
Is there a workaround? At least with pure CSS or DOM hacks?
I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.
You can however work around it with Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.nav_element a').mouseover(function() {
$('.submenu').hide();
$(this).parent().find('.submenu').show();
});
$('.submenu').mouseover(function() {
$(this).show();
});
$('.submenu').mouseout(function (e) {
// Do not close if going over to a select element
if (e.target.tagName.toLowerCase() == 'select') return;
$(this).hide();
});
});
</script>
The code above uses jQuery.
Here is a way to improver select behavior in IE7/8, but it does not fix the issue
Change DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Add script
<script>
function ddlOut(e) {
setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
}
</script>
Add css
#nav .over div.submenu
{
display: block;
}
#nav .nav_element{
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("ddlOut(this)"),
this.style.behavior = null
);
}
It will work better at least but of course not perfect.
My advice is to change select control to html equivalent. I use OboutDropDown that has a nice view. There are many implementations that can suite you needs.
First you need to expand the :hover surface underneath your menu.
So in your css add width:310px;height:220px to #nav .nav_element a.
(also add a class or an id on the second div styled with top:220px)
Now you just need to simulate a mousedown triggered when you click on the select which will halt when the selection between the options is done - you can probably do the last part if you check for the onfocus state of the select which will stop the mousedown.
Edit : Problem wasn't related Event Propagation, if you want to know how to stop propagation in jQuery, then use event.stopPropagation();
When user moves his/her mouse over <span> element my jQuery code appends an <img>into this <span> element and when he moves out his mouse off <span> than the element appended is removed. It helps people to edit the field when clicking on the appended <img> element.
The reason I used append() method to add <img> into <span> is because I want to keep <img> element visible when user moves his mouse over to appended <img> element (<img> is becoming <span>'s child element) But it didn't happen and when user moves his mouse over it <img> is being deleted. I am thinking it is because event propagation but I couldn't find how to activate it in jQuery as we do with addEventListener in Firefox based browsers.
Here is the code :
JQuery Code :
$(document).ready(function() {
$('.EditEnabled').bind("mouseover", ShowEditFields);
$(".EditEnabled").bind("mouseout", HideEditFields);
});
function ShowEditFields(event) {
$(event.target).append(" <img id='editImg' src='images/edit.png' style='margin-bottom:-3px'/>");
}
function HideEditFields(event) {
$(event.target).children("#editImg").remove();
}
Simple HTML :
<span id="something" class="EditEnabled">Something Here</span>
Can you explain my how to solve it.
Thank you.
You want to use the jQuery mouseenter and mouseleave events, not mousover and mouseout. The reason is that mouseout will fire when you move the mouse over the img.
Thankfully, jQuery combines this into a hover method:
$(document).ready(function() {
$('.EditEnabled').hover(ShowEditFields, HideEditFields);
});
However I agree with the other answer that you should use CSS to do this vs. manipulating the DOM. I would just use the :hover pseudo selector, and then add special support for IE6.
CSS
span.EditEnabled img { display: none }
span.EditEnabled:hover img,
span.EditEnabled.hover img { display: block }
Make sure you have the img in the span in your HTML to begin with, and that is all you need for most browsers and IE7+
To support IE6 add:
<!--[if lte IE 6]>
<script type="text/javascript">
$(function(){
$(".EditEnabled").hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover')}
);
});
</script>
<![endif]-->
Firstly, I would avoid as much DOM manipulation as you can. The ideal scenario is to construct your markup like this:
<span class="editEnabled">Some data<img ...></span>
with CSS:
span.editEnabled img { display: none; }
span.editEnabled img.visible { display: inline; }
and Javascript:
$(function() {
$("span.editEnabled").hover(function() {
$(this).children("img").addClass("visible");
}, function() {
$(this).children("img").removeClass("visible");
});
});
That should pretty much do it.
I would avoid the jQuery effects as making things visible will make them block level elements rather than inline like you want.
I've found another answer actually, the way I am looking for. It might not be a best practice but at least I've found out how to solve that.
$(document).ready(function() {
// $('.EditEnabled').bind("mouseenter", ShowEditFields);
// $(".EditEnabled").bind("mouseleave", HideEditFields);
$(".EditEnabled").hover(ShowEditFields, HideEditFields);
});
function ShowEditFields(event) {
var target = $(event.target);
if (target.is(":has(#editImg)") == false)
target.append(" <img id='editImg' src='images/edit.png' style='margin-bottom:-3px;display:inline'></img>");
}
function HideEditFields(event) {
// event.stopPropagation();
// if ($(event.relatedTarget).is("#editImg") == false)
$(event.target).children("#editImg").remove();
}
I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.
Is there javascript or HTML code which would hide the link button when I click the print link?
Example:
"Good Evening"
Print (click Here To Print)
I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.
In your stylesheet add:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.
Bootstrap 3 has its own class for this called:
hidden-print
It is defined like this:
#media print {
.hidden-print {
display: none !important;
}
}
You do not have to define it on your own.
In Bootstrap 4 and Bootstrap5 this has changed to:
.d-print-none
The best practice is to use a style sheet specifically for printing, and set its media attribute to print.
In it, show/hide the elements that you want to be printed on paper.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Here is a simple solution
put this CSS
#media print{
.noprint{
display:none;
}
}
and here is the HTML
<div class="noprint">
element that need to be hidden when printing
</div>
CSS FILE
#media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ELEMENT
<div class="no-print"></div>
You could place the link within a div, then use JavaScript on the anchor tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).
The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOption ID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.
#media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
The best thing to do is to create a "print-only" version of the page.
Oh, wait... this isn't 1999 anymore. Use a print CSS with "display: none".
The accepted answer by diodus is not working for some if not all of us.
I could not still hide my Print this button from going out on to paper.
The little adjustment by Clint Pachl of calling css file by adding on
media="screen, print"
and not just
media="screen"
is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments.
The user should include the ",print" in css file with the desired formating.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
and not the default media = "screen" only.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
That i think solves this problem for everyone.
If you have Javascript that interferes with the style property of individual elements, thus overriding !important, I suggest handling the events onbeforeprint and onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
As Elias Hasle said, JavaScript can override !important. So, I extended his answer with a theoretical implementation.
This code identifies all elements with the class no-print, hides them with CSS before printing, and restores the original style after printing:
var noPrintElements = [];
window.addEventListener("beforeprint", function(event) {
var hideMe = document.getElementsByClassName("no-print");
noPrintElements = [];
Array.prototype.forEach.call(hideMe, function(item, index) {
noPrintElements.push({"element": item, "display": item.style.display });
item.style.display = 'none'; // hide the element
});
});
window.addEventListener("afterprint", function(event) {
Array.prototype.forEach.call(noPrintElements, function(item, index) {
item.element.style.display = item.display; // restore the element
});
noPrintElements = []; // just to be on the safe side
});
I'm trying to dynamically hide certain DIV's when a print (or print preview) occurs from the browser.
I can easily differentiate statically by having two style sheets, one for normal and one for print media:
But I need to go one step further and hide some elements dynamically when the print style sheet becomes active during a print based upon certain criteria
One way to easily solve it would be to handle a DOM event for handling print / printview, then I could just use jQuery to change the display:none on the classes that need to be hidden, but I can't find a DOM print event!!
Anyone know what the solution is?
Not all browsers allow you to capture the print event. I've seen this tackled by adding a 'print this page' link and then using that click event to accomplish what you need.
I don't think you need a print event. All you need to do is adjust your #media print styles based on your Javascript(?) criteria. When the user attempts to print the page, the #media print style will apply and your styles will be in effect:
<html>
<head>
<style id="styles" type="text/css">
#media print { .noprint { display:none; } }
</style>
<script type="text/javascript">
var x = Math.random();
if (x > .5) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#media print { .maybe_noprint { display:none; } }';
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</head>
<body>
<div class="noprint">This will never print.</div>
<span class="maybe_noprint">This may print depending on the value of x.</span>
</body>
</html>
If you are using server-side criteria to determine what prints, then just have server-side code spit out #media print to decorate the classes as necessary. Also, you may want to consider modifying an existing class that's already inside #media print, or building up the new CSS using something other than innerHTML, which I'll admit smells awful to me, but seems to work in Opera 9.6, Safari for Windows 3.1.2, IE 6 and Firefox 2.0.0.17 (I didn't test any other browsers).
Just tag those DIVs with a class that's hidden on the print stylesheet:
HTML
<div id='div19' class='noprint'>
...
</div>
print.css
.noprint {
display: none;
}
If you don't know in advance which elements you need to hide, you can use javascript to set the class for the given objects:
Javascript
document.getElementById('div19').className='noprint';
There's an onbeforeprint event in IE. It doesn't appear to be supported by other major browsers. (I tested Firefox 3.0.3 and Safari 3.1.2.)