Blocking scroll in CSS doesn't work - html

I want to block scroll in my pages
this is the html pages :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script src="frise.js"></script>
<link rel="STYLESHEET" type="text/css" href="style.css">
<script>
var a;
function start()
{
a = new frise("frisekk", 'Mon Nov 15 2014 19:25:00', 'lab', 600);
}
</script>
</head>
<body onload="start();">
<div id="blocantiscroll">
<div id="frisekk"> <br/> </div>
</div>
</body>
</html>
So I call my CSS in <div id="blocantiscroll">
but nothing happen, I have look on the web and this should work but it doesn't, the sroll is always active.
Is there a problem in my html page or in my CSS ?
my CSS :
blocantiscroll {
height: 100%;
overflow: hidden;
}

blocantiscroll is an ID so you need to use # in your selector:
#blocantiscroll {
height: 100%;
overflow: hidden;
}
Your current selector is looking for an element of type blocantiscroll which doesn't exist.
Further reading
Also, if you want #blocantiscroll to be 100% height of the window, you will need to set the below:
html, body {
height: 100%;
}

blocantiscroll is an ID..
so you need to specify # before "blocantiscroll"
give it as:
#blocantiscroll

Add this to your css
body {overflow: hidden;}

Related

Images not rendering with dangerouslySetInnerHTML

React 15.6.2 (I know, that's where we are for now).
I'm trying to render an html page using dangerouslySetInnerHTML (it's sourced from our server, no user input). It's working, except images aren't rendering - I just get the broken image icon. There are no errors or warnings in the console. Same problem on Chrome, Firefox and Edge.
Here's the test html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
img {
width: 80%;
height: 80%;
overflow: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1 align="center">Test page</h1><br/>
<img src="images/help-feature_main-menu.jpeg" alt="main menu" style="vertical-align:middle"/><br/>
</body>
</html>
Here's the code to render the page
componentDidMount() {
fetch('/assets/getting_started/index.html')
.then(response => {
if(response.status >= 400) {
throw new Error(`${response.status}: ${response.statusText}`);
}
return response.text();
})
.then(html => this.setState({ html: html }));
}
render() {
return (
<Segment>
<div dangerouslySetInnerHTML={{ __html: this.state.html }} className="html-import" />
</Segment>
);
}
I've tried the path for fetch in different forms, including putting the image files in the same dir as the source file.
I've checked the contents of this.state.html and it looks good, i.e. the img tag is in there looking right.
If I render the page in an iframe like below, it works correctly with the images. But I don't want to do this because I end up with a scrollbar for both the iframe and the browser window, which is awkward, or if I mess with the height prop of the iframe's container (e.g. height: 70vh), I can get it sized within the window so there's no window scrollbar, but at different heights the iframe will still start to cut off, or it ends up looking too small for the height of the window.
<div className="html-iframe-container">
<iframe src="/assets/getting_started/index.html"</iframe>
</div>
Any suggestions? Thanks

want to include one html page to another page in the client-side

I have a common header for all the html pages, so I want the header.html page to be included in another html page.
Suggest some ways as this header needs to be given in all the html pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
header#arriba {
width:1350px;
height:30px;
clear:both;
margin:auto;
text-align:center;
background-color:red;
color: white;
}
header#arriba img {
vertical-align:middle;
margin:2px 700px 2px 35px; /* YOU CAN ADJUST IMAGES SPACE WITH THIS MARGINS */
}
header img{
float:left;
margin-right:5px;
}
</style>
</head>
<body>
<header id="arriba">
<h2><img src="header.png" alt="1" width="150px" height="25px"/>Data</h2>
</header>
</body>
</html>
First of all change the extension of all the pages from "html" to "shtml".
Create an HTML Page having your header.
And now what you can do it you can include your header into any shtml page by the following command
<!--#include virtual="Web/Controls/TopPanel.html" -->
The only thing which is the prerequisite is the SSI(Server Side Injection) should be supported by the server.
Client side page inclusion is only possible using AJAX. Look at jQuery for a simple AJAX library.
Example code (assuming jQuery is included):
$.ajax("includes/header.html").then(function(data) {
$('body').prepend(data);
});
This will insert the html in the includes/header.html at the top of the body element.
You could also insert stuff to the head. (replace 'body' with 'head')

How do I fix this element overlapping issue when I zoom in IE7?

When I zoom in in IE7, the element with position relative gets overlapped..How can I fix this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5</title>
<style type="text/css" media="all">
.wrapper{width:500px;height:1000px;border:1px red solid;}
.block1{border:1px red solid;width:100px ;height:100px;position:relative;}
.block2{border:1px red solid;width:100px ;height:100px;}
.block3{border:1px red solid;width:100px ;height:100px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="block1">A</div>
<div class="block2">B</div>
<div class="block3">C</div>
</div>
</body>
</html>
I tries adding zoom:1 to .block1 also but it didn't work
.block1 {
zoom: 1 ;
}
Try something like this, Hope this helps.

DOCTYPE CSS problem

When I added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
line to the top of my html file, my css rules disappear in firefox. Also i can't see them with firebug.
Do you have any idea about this problem ?
Make sure that the files are sent by the server with the correct MIME type (text/css). Have a look in the error console ( IIRC the menu should be Tools / Error Console in the English version).
Usually, if the file ends with .css, this should happen automatically, however there are still badly configured servers around. If you are using a Apache web server, you may be able to correct this with a .htaccess file, otherwise you'll need to ask your support.
Details: https://developer.mozilla.org/en/incorrect_mime_type_for_css_files
You need to add attributes to your start-html tag to get it right. This is done since XHTML really is XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
The code above suggest you to have the style.css file in the root-catalog of your website.
Please check it
http://www.w3schools.com/tags/tag_doctype.asp
i think you have more idea of doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>

How to force <noscript> to be inline & inherit CSS styles?

Using <noscript> inside of another tag seems to cause it to take on its own style (that is, none), and forces the text inside to take its own line (even if display:inline is set with CSS). Is there any way to avoid this, or a workaround to use instead?
Here is what I mean: http://www.webdevout.net/test?01I
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p { font-family:sans-serif; font-size:12px;}
noscript {display:inline !important;}
</style>
</head>
<body>
<p>This is some text<noscript> that should be displayed on the same line with the same style if JS if disabled.</noscript></p>
</body>
</html>
I would recommend a different approach over using script/noscript tags.
Something like this works best:
<!DOCTYPE html>
<html class="noJS">
<head>
<title>noJS Demo</title>
<style type="text/css">
html.noJS .jsRequired,
html .noJS{
display: none !important;
}
html.noJS span.noJS{
display: inline !important;
}
html.noJS div.noJS{
display: block !important;
}
</style>
<script type="text/javascript">
function onDocumentLoad(){
var html = document.getElementsByTagName("html")[0];
html.className = html.className.replace("noJS", "");
}
</script>
</head>
<body onLoad="onDocumentLoad();">
<p>This is some text<span class='noJS'> that should be displayed on the same line with the same style if JS if disabled.</span></p>
</body>
</html>
Of course, if you use a framework like jQuery the JavaScript is even easier, just remove the JS function and the function from the body, then just use the following JS:
$(document).ready(function(){
$("html").removeClass("noJS");
});
Old but still relevant question - http://www.tigerheron.com/article/2007/10/alternative-noscript-tag presents an excellent and very simple solution:
"Insert the following code into the <head> section of your Web page:
<script type="text/javascript"> document.write('<style>.noscript { display:none }</style>'); </script>
When you need to use <noscript> inline, use <span class="noscript"> instead."
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p { font-family:sans-serif; font-size:12px;}
</style>
</head>
<body>
<script type="text/javascript">document.write('<p>This is some text</p>');</script>
<noscript><p>This is some text that should be displayed on the same line with the same style if JS if disabled.</p></noscript>
</body>
</html>
Something like this should do what you want. You should of course use unobtrusive methods instead but I guess that´s above par for now.
Have you tried putting an element like a span inside the noscript tag, and then styling the span? It's a long shot, but might work.
Alternatively, get very specific with your selector and give that a shot. Something like #content p noscript { display:inline !important; } might work. But it might also be insoluble.
As a last resort, you could ditch the noscript tag and put in a span (or your element of choice) and give it a class of noscript -- then remove that first thing in your js.