"overflow:hidden" invalid in ie - javascript

<html>
<head>
<style>
html{ overflow:hidden;}
body{ overflow:hidden; height:100%; background-color:blue; margin:0px;}
div{ height:3000px; background-color:red; margin:30px;}
</style>
</head>
<body>
<div>dasdasd</div>
</body>
</html>
Here is the html code. When it running on a standard browser, the div tag keep showing in the window.
But it run in ie, when you select the words "dasdasd" and drag down, the body tag will scroll and the words "dasdasd" will hide unless you disable the select function.
Could someone give me other solution?
Like Spudley's answer,the DOCTYPE cause the problem,but when in the standard mode,the body tag still scroll, anyone can solve the problem?

The problem is that you're missing the <!DOCTYPE> declaration.
When IE sees HTML code without a DOCTYPE, it goes into quirks mode.
In quirks mode, the browser is effectively rendering the page to be backward compatible with IE5. It changes the way it renders the basic box layout, and removes support for a lot of standard CSS.
Add the following doctype to the top of your page (above the <html> tag), and you should see things come right:
<!DOCTYPE html>

Try this:
body {
background-color: blue;
height: 100%;
margin: 0 auto;
overflow: auto;
}
div {
background-color: red;
margin: 30px;
overflow: auto;
}
Hope it works...Best Luck.

Related

Clicking inside window is required in order for onpaste to work

The idea is to handle paste event at the level of page as such (contrary to handling it at the level of individual input fields/elements). The solution is to have paste event handler bound to a top level div element.
The problem is that before paste event starts to be firing, user must first physically click anywhere inside the browser window after the page loads for the first time (even though the browser window as such is in focus).
The question is: How to make the page sensitive to paste without this step (of having to click inside the window)?
Techniques I've tried that didn't work:
Focussing the outer div programmatically on load (see the js code below)
Clicking the outer div programmatically on load (see the js code below)
Note: My actual project is a rather complex angular web page, fortunately, I was able to replicate the behaviour using pure HTML/javascript.
Note: Paste event on div seems to be working only in Chrome. So don't even try this in MSIE or FF. Nevertheless, cross browser support is another issue that I'd like to tackle separately.
Test html page to replicate the problem:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>paste test</title>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
div#outer {
margin: auto;
height: 100%;
padding: 20px;
background-color: whitesmoke;
box-sizing: border-box;
}
div#inner {
margin: auto;
margin-top: 20px;
padding: 20px;
width: 500px;
height: 500px;
border: solid 3px green;
}
</style>
</head>
<body onload="load()">
<div id="outer" onpaste="paste()" tabindex="1">
First click anywhere to make the paste work.
<div id="inner">
Just any content.
Not important for example.
</div>
</div>
<script type="text/javascript">
function load() {
document.getElementById('outer').focus();
document.getElementById('outer').click();
}
function paste() {
alert('paste');
}
</script>
</body>
</html>

Blank space under body in Chrome Device Mode

Why there is a blank space under body tag on mobile view ( chrome only, ff and ie work fine )
the code is simple:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head></head>
<style>
body{
margin: 0;
padding: 0;
height: 100%;
display: flex;
width: 500%;
background: pink}
</style>
<body>
</body>
</html>
image:
It's just the Chrome device view. You have scrolled the view down. The screen height is set at 1024px, so the body won't go any lower. There's no need to worry since you won't be able to scroll down once you have it opened on an actual device. It's just the Chrome viewer, there's nothing wrong with your site.
Edit:
I noticed you had solved it by using a fixed position. You shouldn't do that. It won't be useful in normal use, and might lead to problems in later development.

i cant make div or any image 100% in html5/css3

earlier it was good but now when I put width and height 100% it doesn't really displays 100% instead a 10 px margin come on all four sides
here's what I tried
<html>
<head>
<style>
.cont img {
display: inline-block;
width :100%;
height : 100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
</html>
what can I do to make it 100% with in any browser?
have a look at this code, set margin:0px on body tag
<html>
<body style="margin:0px; ">
<div style="background-color:red; width:100%;">
hello
</div>
</body>
</html>
Question is not 100% clear, but are you looking for a solution like this?
.container {
height:100%;
width: 100%;
border: 1px red solid;
margin:0;
padding:0;
line-height: 0;
}
.container .imgmy{
height:100%;
width: 100%;
margin:0;
padding:0;
}
Are you sure it was good earlier?
The margins around the image have nothing to do with the image itself.
Browsers define default styles in a so called User Agent Stylesheet. In this case, the white border is the 8px margin (that is in Chrome) on the body.
Luckily you can easily override these user agent stylesheets, and you should in this case.
You can add margin:0 to the body, as mentioned above by Shreya.
But to avoid similar 'errors' it is a good idea to include a reset.css or normalize.css. These files "make browsers render all elements consistently and in line with modern standards" (http://cdnjs.com/libraries/normalize). You don't have to write one yourself, others have done this for you, like Nicolas Gallagher: http://necolas.github.io/normalize.css/
Read more about User Agent Stylesheets here: What is user agent stylesheet
Assuming HTML
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
CSS
.cont img {
max-width: 100%;
max-height: 100%;
}

Fix the background image in IE8

In all browser I use the following css rules, and it works
// it fits the background image to container
background-size: contain;
background-size: cover;
Are there css rules to make it work in IE8 also, or should I use javascript?
In case of javascript I am using jquery.
What is the best way to active my goal?
I had also the same problem but by going through this below link my problem solved
http://css-tricks.com/perfect-full-page-background-image/
There's a jQuery plugin or this javascript fallback with filter
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Check the same page for more cross-browser methods
you can do it like this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="http://i47.photobucket.com/albums/f156/Bob_McBobBob/Awesome_Background_by_smirfy.jpg" class="bgimg" />
<div class="frame">
<div class="contents">
page contents
page contents
page contents
page contents
page contents
</div>
</div>
</body>
</html>
css:
html {
background:#000;
}
html, body {
padding:0;
margin:0;
overflow:hidden;
height:100%;
}
.bgimg {
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
.frame {
color:white;
width:100%;
height:100%;
overflow:auto;
}
.contents {
padding:10px;
}
demo site: http://jsbin.com/enevov/1/edit
you can achieve different effects by changing
width:100%;
height:100%;
on .bgimg, to accomplish different effects, depending on whether you want a distortion or not, for instance just width: 100% will make it touch across the top, etc...
hope this helps -ck
This works for me to stretch image on full window in IE8
http://css-tricks.com/perfect-full-page-background-image/

Javascript Page Wipe Transition with Superscrollorama

What I am trying to do is have different parts of a page slide up and cover up the previous part. I found what I wanted to do at http://johnpolacek.github.com/superscrollorama/, specifically the "Wipe It" portion. I tried copying some of the code and including the same javascript files.
In Firefox, it works. However, in Chrome and IE, when I try to scroll down, the scrollbar jitters and snaps back to the top of the page.
I don't have it up on a site, but I do have the files that I'm using: http://www.mediafire.com/?h28etrbr5t24qyw
Any help (or more practical alternatives) would be greatly appreciated.
Yea that looks pretty cool. I would just create the code from scratch so you can get it exactly how you want. I just created something real basic. A blue main div with a red div that wipes down. Obviously you can put whatever you want on both divs.. Heres the code:
<!doctype html>
<html>
<head>
<style type='text/css'>
body{
margin: 0px;
}
#wipeScreen{
position: fixed;
width: 100%;
background-color: red;
}
#mainScreen{
position: absolute;
background-color: blue;
height: 200%;
width: 100%;
}
</style>
<script type='text/javascript'>
var visHeight;
function loadConstants(){
visHeight = Math.ceil(document.getElementById("mainScreen").offsetHeight/2);
var wipeScreen = document.getElementById("wipeScreen");
wipeScreen.style.height = visHeight+"px";
wipeScreen.style.top = -visHeight+"px";
window.onscroll = runScroller;
}
function runScroller(){
document.getElementById("wipeScreen").style.top = pageYOffset-visHeight+"px";
}
</script>
</head>
<body onload='loadConstants()'>
<div id='mainScreen'></div>
<div id='wipeScreen'></div>
</body>
</html>
Copy and paste it into an HTML document and you will see what I mean

Categories

Resources