I'm try to load the page content via the JQuery load() method.
Here is the code
$(window).ready(function() {
$('#content').load('views/login.html');
});
.mdl-layout {
align-items: center;
justify-content: center;
}
.mdl-layout__content {
padding: 24px;
flex: none;
}
<link href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main class="mdl-layout__content" id="content">
</main>
</div>
(Sorry but i can't add the login.html to the snippet editor. It's a login form powerd by the mdl framework:/)
Now the Javascript functions for the form element from mdl does not work correctly. There are no errors in the developer console. I've also tried to reload all my javascript files after the load request by jquery?
Does anyone have any idea what's going wrong with my script?
I've solved this problem by myself. Here the solution:
I simply call the mdl javascript after the load method again.
$.getScript('https://code.getmdl.io/1.3.0/material.indigo-blue.min.css');
Now it works perfectly. Thanks to all!
if code you provided is copied from your .html file then structure is not good.
Here is working version:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<style>
.mdl-layout {
align-items: center;
justify-content: center;
}
.mdl-layout__content {
padding: 24px;
flex: none;
}
</style>
<link href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main class="mdl-layout__content" id="content">
</main>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#content').load('views/login.html');
});
</script>
</body>
</html>
CSS styles needs to be enclosed with tags, and Javascript code must be closed within tags
Hope this helps you.
Completely new to HTML, I need an html file which does the above:
Some background color for the whole page.
In the center of the page, a block of text within a box of white background color.
Directly under (outside of) the white box, a small line of text at the center of page.
There is probably a better way to do it, but this is my way:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:color here;
}
#example-name {
background-color:white;
}
#example-2 {
text-align:center;
}
</style>
</head>
<body>
<div id='example-name' style="margin: 0 auto">
example content
</div>
<div id='example-2'>
<p>example text</p>
</div>
</body>
<html>
<html>
<body style="background-color:tan">
<p style="margin-left: 30%;margin-right: 30%; background-color: white; padding: 20px 20px 20px 20px;">
Hi.<br>
Thanks for using Mailgun! Please confirm your email address by clicking below!<br>
I hope this answers your question!
</p>
</body>
</html>
Use the css elements margin, background-color, and padding.
Sorry, but I am not getting where actually I did the mistake (as I am a newbie to javascript). I wrote this code for the flipbook effect using turn.js with the help of a tutorial. But the output in a browser is just showing the blank screen. I guess, there must be an awkward mistake but m still not getting it . plz help.
<html>
<head>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
<style type="text/css">
body{
background: #9988aa;
}
#book{
width: 1152px;
height: 400px;
}
#book .turn-page{
background-color: #ddd;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="book">
<div style="background-image:url('images/1.jpg');"></div>
<div style="background-image:url('images/2.jpg');"></div>
<div style="background-image:url('images/3.jpg');"></div>
<div style="background-image:url('images/4.jpg');"></div>
<div style="background-image:url('images/5.jpg');"></div>
<div style="background-image:url('images/6.jpg');"></div>
<div style="background-image:url('images/7.jpg');"></div>
<div style="background-image:url('images/8.jpg');"></div>
</div>
<script type="text/javascript">
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50;
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
</script>
</body>
</html>
Hi there is small error in your code, kindly just remove semi colon from following line.
elevation:50;
It should be like following, just remove semi colon. Hope it will resolve your issue.
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
this is my 1st time posting here, so thanks to everyone who can give me some advice!
<html>
<head>
<style>
</style>
<script src="jquery-1.5.2.js"></script>
</head>
<body>
<div
class="super"
style="
border: solid black 1px;
height:100px;
width:100px;
">
</div>
<div
class="super .eight"
style="
background: blue;
">
</div>
<script>
$(".super").click(function () {
$(this).addClass(" .eight");
});
</script>
</body>
</html>
So basically the problem is that I want to add for example a background or some other type of element onto class that is already defined as super. I am trying to use subclasses but it does not seem to be working.
Please ask me if there is anything unclear, I apologize if there is.
No dot (in the classname).
$(".super").click(function () { $(this).addClass("eight"); });
$(".super").click(function () { $(this).addClass("eight"); });
I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}