I am attempting to convert a layout that is currently using frames that works perfectly having a fixed header (this section needs to be named Banner) and a frame on the bottom that scrolls whenever a user posts something in the chatroom (named Body). This works great for frames. I was looking at another conversion post here on stack and trying to use it.
The frame coding is:
<html>
<head><title>$main:roomname$</title></head>
<frameset cols="100%"><frameset rows="120,*">
<frame name="BANNER" src="$BASE$/BANNER?$CONFIG$" scrolling="AUTO" marginheight="1">
<frameset cols="*,140" FRAMEBORDER=YES FRAMESPACING=2 BORDER=2>
<frame name="BODY" src="$BASE$/BODY?$CONFIG$" scrolling="YES">
<noframes>
<body>
Frames are required, sorry folks.
</body>
</noframes>
</frameset></frameset>
</html>
What I'm trying to do is below. The room name pulls and shows as it should for the browser, but it doesn't pull any of the other information. It just shows a white screen.
edit Trying out more coding when I view the page source after trying to load it, it shows the full url pulled from $BASE$/BODY?$CONFIG$ , it just doesn't display it inside the Div like I want it to.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="script.js"></script>
<title>$main:roomname$</title>
<script>
$(document).ready(function(){
$("#BANNER").load("$BASE$/BANNER?$CONFIG$");
});
</script>
<script>
$(document).ready(function(){
$("#BODY").load("$BASE$/BODY?$CONFIG$");
});
</script>
<style>
.BANNER {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 140px;
overflow: hidden;
}
.BODY {
position: absolute;
top: 150px; /* 140px (header) + 10px top padding */
left: 10px; /* 10px padding */
right: 10px; /* 10px padding */
bottom: 10px; /* 10px padding */
overflow: auto;
}
</style>
</head>
<body>
<div id="BANNER"></div>
<div id="BODY"></div>
</body>
</html>
edit 2** with suggestions from below.
Preview : http://embed.plnkr.co/f7LatqNW5hxY2K781edV/preview
HTML main:
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="BANNER"></div>
<div id="BODY"></div>
</body>
</html>
HTML : 1.html(file that you are trying to embed) :
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
JS:
$(document).ready(function(){
$("#BANNER").load("1.html");
});
If the file is not in your local server then may be you need to do some workaround as described here
Related
I am looking to move the js function startTime() to the top center of my page. Would I do this in html or css? Here is my html code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="main.css">
<script src="app.js"></script>
</head>
<body onload = "startTime(),toDate()" > <!--getName()-->
<h1>Noteify</h1>
<a> </a>
<p id="date"></p>
<div id="txt"></div>
</body>
</html>
You'll need CSS.
If you're writing your date into a div with id="date", then:
#date{
margin: 0px auto;
text-align: center;
}
should do.
This is assuming you have no other elements above the div.
But if there are other elements coming before it, then you will have to add a position attribute and specify a distance from the top.
#date{
margin: 0px auto;
text-align: center;
position: fixed;
top: 0;
}
I have been trying to place my Menu Div above my background, and it is failing to appear at all. Even in inspect element nothing appears when I try to show where the div is. I have already tried z-index and position relative/absolute/fixed.
I am trying to make a landing page for my website and have been stuck up on this for a long time now. I have tried rearranging the order of the Menu Div in front of the
This is My HTML Code
.body{
margin: 0;
padding: 0;
height: 100%;
}
.menu_top{
background-color: #ffffff;
position: relative;
top: 0;
width: 100%;
height: 100;
z-index: 5;
}
.home_logo_box{
z-index: 5;
}
.home_logo{
top: 30%;
position: absolute;
left: 42%;
}
<html>
<head>
<title>
Home
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="coincontrast_home.css">
<link rel="stylesheet"; style="text/css" href="style.css">
</head>
<body>
<div src="particles">
<div id="particles-js"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
</div>
<div src="menu_top">
<img src="https://image.flaticon.com/icons/png/128/33/33447.png" class="home_logo">
</div>
<div class="home_logo_box">
<img src="https://image.flaticon.com/icons/png/128/87/87386.png" class="home_logo">
</div>
</body>
</html>
There are no error messages
Your issue is because you are not giving the div elements an id or class.
<div src="menu_top">
Should actually be:
<div class="menu_top">
This means that it will also line up with your CSS. If you wanted to change the div element to an id it would look like this:
<div id="menu_top">
And you need to change your CSS from: .menu_top to #menu_top.
Also, as Thomas Byy said, you should move your <script> tags to outside of the <body> element, they could be moved to the <head> element or just before the closing </html> element.
This will help you
.body{
margin: 0;
padding: 0;
height: 100%;
}
#menu_top{
background-color: #ffffff;
position: relative;
top: 0;
width: 100%;
height: 100;
z-index: 5;
}
.home_logo_box{
z-index: 5;
}
.home_logo{
position: relative;
bottom:0;
left: 42%;
}
<html>
<head>
<title>
Home
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="coincontrast_home.css">
<link rel="stylesheet"; style="text/css" href="style.css">
</head>
<body>
<div src="particles">
<div id="particles-js"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
</div>
<div id="menu_top">
<img src="https://image.flaticon.com/icons/png/128/33/33447.png" class="home_logo">
</div>
<div class="home_logo_box">
<img src="https://image.flaticon.com/icons/png/128/87/87386.png" class="home_logo">
</div>
</body>
</html>
I think you shutdown your computer to solve that problem. Hehehe sorry just kidding, I think JackU was right when you name a class you should use a class element so that we you go to your css files you can easily call it. Because in your situation you didn't declare menu_top as a class name, Unfortunately, you make your menu top as a link or source from.
when I'm refreshing sass file, a new div is added to the page, when I'm refreshing html file this extra div disappears
<html>
<head>
<style type="text/css">
body {
opacity: 0;
overflow-x: hidden;
}
html {
background-color: #fff;
}
</style>
</head>
<body>
<div>
<p>H</p>
</div>
<link rel="stylesheet" href="css/main.min.css">
<script src="js/scripts.min.js"></script>
</body>
</html>
Pastebin CSS
Img2
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 6 years ago.
I was working on an html page, got halfway through, and decided to start styling somethings. . . All of my styling worked fine! That is until I tried to get a Google Font. I followed all of the instructions and inserted everything into css correctly. However, when I view the page on Chrome, it only displays the "fallback" generic sans-serif font. Here is my css:
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Could someone please tell me what I am doing wrong (If I a doing it wrong), or point me in the right direction of getting it to work?
Try to put your import on the top of your file, before any declaration.
Include the #import directive at the top of the file.
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
You can remove:
#import url(https://fonts.googleapis.com/css?family=Raleway);
And add:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
To your <head>. Like so:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Try to add the following in the head section of your html code and see if it fixed the problem:
<meta charset="UTF-8">
In addition, you need to move the #import to the top of the CSS file, so the font will load
I have a canvas fullscreen over a webpage.
The size gets handled in processingjs.
<div id="canvasDiv">
<canvas id="processingCanvas" data-processing-sources="resources/processing/canvas01.pde"> </canvas>
</div>
Behind the canvas is a lot of text. The problem is i can't scroll on a iPad anymore cause the canvas is on top.
Is there a way to ignore the canvas but still show it on top?
This is the current css:
#canvasDiv {
position: absolute;
left: 0;
z-index: 999;
}
#processingCanvas {
position: fixed;
top: 0;
left: 0;
}
Here is how to let elements fall through to underlying elements:
If the browser is Chrome, Firefox, Safari, Blackberry or Android, but not IE or Opera, you can use pointer-events to tell the canvas not to handle click/touch events and then the clicks/touches will be handled by the underlying elements. So,
in CSS:
#topCanvas{ pointer-events: none; }
But in IE and Opera, you have to be tricky:
Hide top canvas,
Trigger event on bottom element,
Show top canvas.
This code shows how to trigger events on underlying elements:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#wrapper{ width:200; height:200;}
#bottom{ position:absolute; top:0; left:0; width:200; height:200; background-color:red; }
#top{ position:absolute; top:0; left:0; width:200; height:200; background-color:blue; }
</style>
<script>
$(function(){
$('#top').click(function (e) {
$('#top').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#top').show();
});
$("#bottom").click(function(){ alert("bottom was clicked."); });
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<canvas id="bottom"></canvas>
<canvas id="top"></canvas>
</div>
</body>
</html>