I have div which have id name is #monthlyconfirm_grid. I used that jQuery process to control scroll from gridview but it works only for IE and doesn't work on Chrome and Firefox.
$(document).ready(function () {
var expi = $("#monthlyconfirm_grid").scrollLeft - 2;
var expr = "calc("+ expi +")";
$(".locked").css("left", expr);
});
P.S: I used <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> to work on IE.
Why it doesn't work on chrome and Firefox? How can I solve that?
/* property: calc(expression) */
width: calc(100% - 80px);
Try like this and make sure corresponding parent elements has proper width
Related
EDIT: Please refer to bottom of post with a workaround I found which works in Chrome but not in Safari/Firefox.
I have a textarea which I want the width & height to grow/shrink as user types in it. While most solutions on stack overflow are regarding height auto-grow, I have used the similar technique to get width auto-grow too.
This works well with the default sans-serif font. But if I use a Google font, then the scrollWidth being reported onload is not based on the custom font, it's being reported using the default font and therefore wrong. It seems like the onload method gets called before custom fonts have been applied.
I have implemented a simple test case for this demo. Note that the JSFiddle seems to only show the issue first time sometimes - it seems to cache the font afterwards and no longer shows the issue. But if I use chrome and open the developer tools and disable cache in the Network tab, then it continues to show the issue.
https://jsfiddle.net/fpr0dns6/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#font-face {
font-family: 'Poppins';
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2);
}
textarea {
font-family: "Poppins", sans-serif;
font-size: 25px;
padding: 0;
margin: 0;
background: aquamarine;
border: none;
resize: none;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<script>
onload = function () {
document.body.innerHTML = `<textarea id="mytext" rows="1" cols="1" placeholder="Something Long String" onfocus="auto_grow(this)" onclick="auto_grow(this)" oninput="auto_grow(this)"></textarea>`
auto_grow(document.getElementById('mytext'))
}
function auto_grow(element) {
console.log(getComputedStyle(element).fontFamily)
element.style.width = "auto";
element.style.width = (element.scrollWidth) + "px";
element.style.height = "auto";
console.log(element.scrollHeight + ", " + element.scrollWidth)
element.style.height = (element.scrollHeight) + "px";
}
</script>
</body>
</html>
Here's the result:
For troubleshooting purposes, I have added onfocus and onclick listeners to the textarea. So if the user focuses on the textarea after load, it corrects itself.
I am not sure how to solve this. Is there a way for onload to wait for custom font to apply?
Another thing I noticed in Firefox with an even worse behavior. Even after click/focus, the textarea doesn't show the correct width:
I am aware of the setTimeout way to delay it for 300ms before calling my function but this seems like a hack which will fail sometimes.
EDIT:
I found a workaround using document.fonts.onloadingdone to call auto_grow(document.getElementById('mytext')) which works in Chrome. But it doesn't work on Safari or Firefox. Apparently it's an experimental feature:
https://caniuse.com/?search=onloadingdone
Any better solutions?
EDIT 2: I found this which I am testing now and will update this question with my findings:
https://github.com/typekit/webfontloader
EDIT 3: I just tested with webfontloader library above and it does seem to work well in Safari and Chrome. Firefox for some reason continues to report the wrong scrollWidth but I don't think that's related to this fonts issue.
I am trying to remove through CSS the scroll bar that appears by default on Elementor on a Pop Up.
Can someone help ?
https://www.onservatory.com/recursos-gratuitos/
I tried different things based on similar questions but doesnt seem to work.
.dialog-message dialog-lightbox-message::-webkit-scrollbar {
display: none;
}
or
#elementor-popup-modal-21529 > div > div.dialog-message.dialog-lightbox-message {
overflow: hidden!important;
}
I thought maybe I can't do it trhough CSS because the pop up shows later but then I tried to create a listener like
<script>
(function() {
// Use events from https://developer.mozilla.org/en-US/docs/Web/Events
var eventName = 'elementor/popup/show';
// Attach listener directly to element or document if element not found
var el = document.querySelectorAll(".dialog-lightbox-message")[0]||document;
// Leave useCapture to true if you want to avoid propagation issues.
var useCapture = true;
el.addEventListener(eventName, {{JS - Popup Event callback}}, useCapture);
})();
</script>
using the following documentation https://developers.elementor.com/elementor-pro-2-7-popup-events/ but doesn't work neither.
Can someone help ?
Thank you!
I guess you are talking about the scroll bar on the <body>. if it is the problem, then you need to set the overflow property as overflow: hidden for the <body> tag it can be done by both CSS and JS.
I think there was an issue with the cache of the browser/cdn.
I think now it's working.
I created a new ticket on hot to avoid caching for the experts! Thank you!
Caching on wordpress and pagebuilders
Apologies for my mistake.
Thank you!
Use this for Chrome and Safari:
.elementor-popup-modal .dialog-message.dialog-lightbox-message::-webkit-scrollbar {display: none;}
For Firefox use this:
.elementor-popup-modal .dialog-message.dialog-lightbox-message { scrollbar-width: none; }
Add it to your Popup Settings > Advanced > Custom CSS
screenshot: https://snipboard.io/PeDl18.jpg
"Use this for Chrome and Safari:
.elementor-popup-modal .dialog-message.dialog-lightbox-message::-webkit-scrollbar {display: none;}
For Firefox use this:
.elementor-popup-modal .dialog-message.dialog-lightbox-message { scrollbar-width: none; }
Add it to your Popup Settings > Advanced > Custom CSS
screenshot: https://snipboard.io/PeDl18.jpg"
_____ This Works!
I would like to remove the page responsiveness in Bootstrap 3 but only for versions of Internet Explorer. I have reviewed the documentation to remove page responsiveness overall, but can it be device or browser specific?
Quick and dirty javascript solution for IE8 and 9: (assumes grid size ~980)
if ( ( (/msie 8./i).test(navigator.appVersion) || (/msie 9./i).test(navigator.appVersion) ) {
var body = document.querySelector('body');
body.style.minWidth = '980px';
}
You could also accomplish this with CSS if you're setting classes on the <html> tags in IE conditionals.
Assuming <html class="ie8"> for example,
html.ie8 {
min-width : 980px;
}
html.ie8 body {
min-width : 980px;
}
An even more thorough way would be to override the #media calls with your own, targeting the ie html class again, and use css load hierarchy or the odd !important tag to get it done.
I am trying to add css only for iE 10.
Actually my css is working fine in chrome and firefox. But is creating some problem in IE 10.
I tried this code and made ie10.css but it is not working.
<script>
if (/*#cc_on!#*/false) {
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '<link type="text/css" rel="stylesheet" href="css/ie10.css">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}
</script>
It is not working. Kindly help.
You can easily track the latest versions of IE (mostly IE 10 and IE 11) using
1. CSS media query hack:
/*
#ie10,11 will only be red in MSIE 10,
both in high contrast (display setting) and default mode
*/
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
//-- Put your IE specific css class here
}
OR
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
Read this
Working Example
2. Browser Detection:
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
3. Using script (NOT Tested):
<script>
/*#cc_on
#if (#_jscript_version == 10)
document.write('<link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
#end
#*/
</script >
Note : I know document.write is considered bad practice.
Conditional comments (ie10 dropped conditional comments):
if you want to load external css file for IE, you can use conditional comments. But as you mentioned in question you wants for IE 10 and ie10 dropped conditional comments.
microsoft drop conditional comments in ie10.
Here is the another tricks which I used in my project, you can replace h1 with your class or own CSS
IE10 Only
http://css-tricks.com/ie-10-specific-styles/
Use this JavaScript:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
Then use this CSS:
html[data-useragent*='MSIE 10.0'] h1 { color: blue; }
Click here for all earlier version for IE
I am trying to disable phone rotation affecting the web page of one of my HTML5 mobile apps. No reorganizing of the layout, resizing, orientationchange behavior.
I want it so that you rotate the phone and the initial layout loaded will stay the same, forcing the user into using the app in the original orientation. There are many subtleties to user logic and I truly feel this is needed in my app, so please no comments on that choice, rather help for my question in the first sentence.
I tried listening for BOTH 'orientationchange' and 'resize' events and calling preventDefault and stopPropagation on them, to prevent any browser behavior of reorganizing the page to fit a landscape view when turned. Well, obviously preventing ANYTHING (ideally).
window.addEventListener("orientationchange", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
window.addEventListener("resize", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
Made absolutely no difference. Browser still reorganized the page on Android (both pre2.1 and after) and iPhone 4-5.
tried meta tags
<meta name="viewport" content="initial-scale=1.0, user-scalable=no />
then got pissed, tried
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
neither made a difference.
looked furiously on StackOverflow, saw what I did in step 1. put out there several times...tried again to make sure I wasn't messing something up. Didn't work.
sucked in my pride, then decided to keep running into a brick wall due to pride, then really sucked in my pride and posted here.
HALP.
The obvious solution is to use javaScript for this:
if(window.innerHeight > window.innerWidth){
document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)";
}
When the screen rotates, rotate it right back.
I did it using the following work around, which asks user to switch back to Portrait mode. Once the user switch back to Portrait mode, he will be allowed to interact with application.
<head>
<style type="text/css">
#landscape{
position: absolute;
top: 0px;
left: 0px;
background: #000000;
width: 100%;
height: 100%;
display: none;
z-index: 20000;
opacity: 0.9;
margin:0 auto;
}
#landscape div{
color: #FFFFFF;
opacity: 1;
top: 50%;
position: absolute;
text-align: center;
display: inline-block;
width: 100%;
}
</style>
<script>
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
document.getElementById("landscape").style.display="block";
break;
case 90:
document.getElementById("landscape").style.display="block";
break;
default:
document.getElementById("landscape").style.display="none";
break;
}
}
//Listen to orientation change
window.addEventListener('orientationchange', doOnOrientationChange);
</script>
</head>
<body onload="doOnOrientationChange();">
<div id="landscape"><div>"Rotate Device to Portrait"</div></div>
</body>
You can't disable the mobile orientation in web app. What you can do is rotating the page to portrait (using css rotation from JS) when they change orientation to horizontal model. By this way they will be forced to use your web app in portrait mode.
You can also show them a message ("portrait mode only" when they try to view in horizontal mode)
Keep it short and simple! :]
window.addEventListener('orientationchange', function ()
{
if (window.innerHeight > window.innerWidth)
{
document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)";
}
});
adding android:configChanges="keyboardHidden|orientation" to your AndroidManifest.xml. This tells the system what configuration changes you are going to handle yourself - in this case by doing nothing.
<activity android:name = "MyActivity"
android:configChanges="keyboardHidden|orientation">