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
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;
}
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.)
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
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;
}
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.