cursor:auto behaviour in IE 8 and 9 - javascript

What I want is specify cursor:pointer for the whole body tag, so the background of the page is clickable, but I also want the remainder of the page to work as it did, so I try setting cursor:auto for div, which contains the page.
In FF, Chrome and safari it works fine, also in IE 6 and 7. But it seems that IE 8 and 9 and also (screw it) OPERA have their own opinion on what cursor:auto means.
Here is a snippet to see what happens:
<!DOCTYPE html>
<html>
<head>
<title>Cursor test</title>
</head>
<body>
<div id="newBody" style="width:400px; height:300px; cursor:pointer; background:#ffddee; border:2px solid #ddaa66;">
<div id="pageContent" style="width:200px; cursor:auto; background:#fff;">
<p>This is a paragraph click here.</p>
</div>
</div>
</body>
</html>
Although this is an HTML snippet everything is done with javascript with the same outcome.
The standard says something really vague: The UA determines the cursor to display based on the current context. , also these pages didn't help on the issue
http://www.w3.org/TR/CSS2/ui.html
http://msdn.microsoft.com/en-us/library/aa358795%28v=vs.85%29.aspx
http://www.w3schools.com/cssref/pr_class_cursor.asp
https://developer.mozilla.org/en/CSS/cursor
Can anyone explain this behaviour or know a possible way around it?

Use CSS:
#pageContent {cursor:default}
#pageContent * {cursor:auto}​
The cursor still ends up always being 'default' in IE, but at least other browsers display the expected behaviour.

I think auto is inheriting the parent style (not sure), I tried cursor:default; and It worked fine in IE 8 and FF 3.6.
<div id="newBody" style="width:400px; height:300px; cursor:pointer; background:#ffddee; border:2px solid #ddaa66;">
<div id="pageContent" style="width:200px; cursor:default; background:#fff;">
<p>This is a paragraph click here.</p>
</div>
</div>

Related

Website scrolling stops for a tiny time when reaching a specific spot

If i refresh the page and scroll down, the website lags for a few milliseconds and continues afterwards. the problem is only coming back after I refresh the page.
Any possible solutions for that?
Thanks
try to add this.see if it helps. clear your cache and try to run in in a different browser if thats a browser problem.
html {
scroll-behavior: smooth;
}
I understand your problem. I write a simple code for scroll behavior watch my codepen link and
html {
scroll-behavior: smooth;
}
#test1 {
height: 600px;
background-color: green;
}
#test2 {
height: 600px;
background-color: black;
color:white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Smooth Scroll</h1>
<div class="main" id="test1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
Click Me to Smooth Scroll to Section 2 Below
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="test2">
<h2>Section 2</h2>
Click Me to Smooth Scroll to Section 1 Above
</div>
<p><strong>Note:</strong> The scroll-behavior property is not supported in Internet Explorer.</p>
</body>
</html>
I would also suggest this:
html {
scroll-behavior: smooth;
}

How to hide an image by src attribute in IE?

I’m trying to find an image that has a src that starts with a particular url and hide it. I can do it but it doesn’t work on IE.
Is there a version of this css (maybe javascript) that will also work for edge and IE
img[src ^= "https://www.google"]{
display: none;
}
Use this CSS3 attribute selector:
img[src*="hideme"] {
display: none;
}
As usual, some versions of IE are known to have bugs with CSS3 attribute selectors. The SitePoint Reference is useful: Link
Below is the example tested with IE 11 and MS Edge browser version 44. In both and other browsers the code is working fine.
<!DOCTYPE html>
<html>
<head>
<style>
img[src*="i.postimg.cc"] {display: none;}
</style>
</head>
<body>
<img src="https://i.postimg.cc/13D5v67n/223.png" alt="Trulli" width="500" height="333">
</body>
</html>
Reference:
Hide image of specific size, by CSS? (Refer the accepted answer in the thread.)

Run Skrollr In IFrame

I am attempting to run some very simple Skrollr animations in an IFrame. When I populate the IFrame with the simple HTML Skrollr outputs the error to the console (in FireFox):
'Not well formed'
I have confirmed that the IFrame contents are correct and run just fine if they are not in an iframe and in a standard webpage. And I've confirmed that the Skrollr javascript file/s are loading successfully. All CSS, JS and images are all on the same domain as the parent webpage so there's no cross-domain occurring. The problem exhibits itself when the content is placed in an IFrame. Which makes me think this is a Cross-Scripting issue or that Skrollr is coded to detect cross-domain/cross-scripting?
Any idea's whats going wrong and how I can overcome this? I can provide a simple example if you wish. Hoping to grab Prinzhorn's attention, yes I know Skrollr's not currently maintained and that IFrame's are not officially supported but if I have an idea of whats going wrong or what the problem is I can fork Skrollr and add this functionality.
Edit: Heres a simple JSFiddle example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tasks</title>
<style>
#main-container {
width : 1200px;
height : 1000px;
background-color : #eee;
}
iframe {
width: 100%;
height: 100%;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container text-center">
<button id="load-btn">Load Iframe</button>
<br/>
<div id="main-container" class="text-center">
<iframe id="mf-preview" frameborder="0"></iframe>
</div>
</div>
<!-- Javascript files -->
<script src="js/custom.js"></script>
</body>
</html>
everything is working brother
when the size of your iframe is more then 1000px then it will show the scroll bar
Like example :
<iframe id="mf-preview" src="http://onhax.net" frameborder="0"></iframe>
I have add the source of iframe which is larger then 1200px
and after add this like it will show the scroll bar
check it in JSFiddle

Calculating the distance (in pixels) between the edge of one element and the edge of the body?

For instance, I have a div, with a margin of, say, 20%, and I want to find the distance between [the left side of] it and [the left side of] the body. Is there a way of doing this that supports all major browsers and is guaranteed to work for at least the latest versions (eg. ie 7+, safari 3+, firefox (whatever they're up to now)+, etc.), and is possibly contained inside of other elements?
<!DOCTYPE html>
<html>
<head>
<!--stuff that goes here-->
</head>
<body>
<div id="outer">
<div id="calculateDistance">et cetera
</div>
</div>
</body>
</html>
and the css
#outer{
margin:10%;
padding:5%;
border:1px solid #000000;
}
#calculateDistance{
margin:20%
border:3em solid #000000;
}

Jquery html() bug?

I have a bug in IE8, but works in firefox, chrome and safari. Here's my HTML code
<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
header {display:block; background-color:#333; color:#fff;height:30px;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bug">
<header><h2>h2</h2></header>
</div>
<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>
<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>
You can see the code in action here - http://evermight.com/jquerybug/index.html
In IE8, how come when I press the "press" button, the h2 with black background turns to white background instead of remaining as black background? When I remove the white space in between html(' and <header> of the button's onclick event handler, then the black bakground persists as expected.
Why does an empty space affect the CSS appearance of the header tag in IE8?
This isn't a jQuery bug -- its an IE combined with HTML5shiv bug. Or you could just call it an IE bug in general.
If you try your code, replacing
<header> .... </header>
with
<div class='header'> .... </div>
you'll find it works correctly, even with the leading space.
If you read the issues page on the html5shiv site this is a known bug (dynamically created HTML5 elements not styling).
You can also read this stackoverflow post for more information on what's going on and some workaround suggestions.
You need the innershiv.

Categories