Ive been coding a site for a project a friend and I are working on. After spending more time than I should have researching how to use javascript to make site links load into a "content" div ive gotten it to work, que second problem: The content loads but sits within a small square inside the "content" div I was wondering how to resize the content being displayed within the div below is my page code
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Breezies Blog</title>
<style>
.header {
background-color: white;
background-image: url('file:///C:/Users/Zenga/Desktop/egoblog/bg21.png');
background-size: cover;
background-repeat: no-repeat;
color: black;
text-align: center;
max-width: 1000px;
height: 187px;
margin: 0 auto;
margin-top: 5px;
border: 1px solid white;
border-radius: 20px;
position: static;
}
a {
color: white;
}
ul {
padding: 5px;
background: rgba(0,0,0,.5);
position: relative;
top: 142px;
border-radius: 10px;
}
li {
display: inline;
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
}
body {
background-image: url('file:///c:Users/Zenga/Desktop/egoblog/fullbg.jpg');
background-size: cover;
background-repeat: no-repeat;
color: black;
}
section {
background-color: rgba(0,0,0,.5);
color: white;
position: relative;
height: 600px;
max-width: 1000px;
margin: 0 auto;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="header">
<nav id="menu">
<ul>
<li>Home</li>
<li>Cast Of Characters</li>
<li>History of Ego</li>
<li>Meet the Creators</li>
</ul>
</nav>
</div>
<br>
<section>
<div class="content" id="content"> </div>
</section>
<script>
function load_home(){
document.getElementById("content").innerHTML='<object type="text/html" style="overflow: hidden" data="main.html"></object>';
}
function load_cast(){
document.getElementById("content").innerHTML='<object type="text/html" style="overflow: hidden" data="cast.html"></object>';
}
function load_hist(){
document.getElementById("content").innerHTML='<object type="text/html" data="hist.html"></object>';
}
function load_create(){
document.getElementById("content").innerHTML='<object type="text/html" data="create.html"></object>';
}
</script>
</body>
</html>
you're not giving the content div a size so it just goes auto, give it a min-width and min-height
Related
Hi I am trying to have 20 customize audio players though I could only make the first one work. As soon as I copy and paste the new audio in html it does not start playing. I am not sure if the only way is by giving a unique id to each audio or if there is a way to avoid doing that by changing the javascript code.
thanks!!!
it is also online here http://musictext.yt/audio/audio.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio" width="400" height="400">
<source src="rout.mp3">
</audio>
<nav>
<div id="botones">
<button class="button" id="reproducir" >play</button>
</div>
<div id="barra">
<div id="progreso">
</div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
JS
function iniciar() {
maximo=80;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click', presionar, false);
barra.addEventListener('click', mover, false);
}
function presionar(){
if(!medio.paused && !medio.ended) {
medio.pause();
reproducir.innerHTML='play';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='pause';
bucle=setInterval(estado, 1000);
}
}
function estado(){
if(!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='play';
window.clearInterval(bucle);
}
}
function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}
window.addEventListener('load', iniciar, false);
CSS
body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display : block;
}
#reproductor{
width: 100px;
height: 100px;
margin: 60px auto;
padding: 5px;
background: blue;
border: 1px solid #666666;
}
nav{
margin: 1px 0px;
}
.button {
font-family: arial;
background-color: black;
border: none;
color: white;
padding: ;
text-align: center;
font-size: 12px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
#botones{
background-color: black;
width: 100px;
height: 20px;
}
#barra{
position: relative;
width: 88px;
height: 66px;
padding: 4px;
border: 1px solid black;
background: white;
}
#progreso{
position: absolute;
width: 0px;
height: 60px;
background: black;
}
I need your help. I made a weather app and it looks okay in desktop but when i tested it on my mobile phone, the contents that the white box is holding were going out of bounds vertically. I tried overflow methods and it didnt work so as defining its container height at 100% and 100vh and it didnt work as well? Any solution ideas?
here is the app that i deployed:
https://sleepy-badlands-75629.herokuapp.com/#
here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css "href="../stylesheets/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="appBox">
<div class="container">
<header class="text-center">
<h1>Local Weather App</h1>
</header>
<section class="geolocation">
<h1>Today's weather in your location:</h1>
<h2><span id="location"></span></h2>
</section>
<section class="temperature">
<h1>
<span class="tempDisp"></span>
<a id="fahrenheit" class="selected" href="#">℉</a> |
<a id="celsius" href="#">℃</a>
</h1>
</section>
<section class="condition">
<h1><span class="conDisp"></span></h1>
<div class="highLow col">
<p>
<span class="high"></span>°/
<span class="low"></span>°
</p>
</div>
<div class="humidity col">
<p><i class="wi wi-humidity"></i> </p>
</div>
<div class="wind col">
<p>
<i class="wi wi-small-craft-advisory"></i>
<span class="direction"></span><span class="speed"></span>
</p>
</div>
</section>
<section class="forecast">
<h1>5 Day Forecast</h1>
</section>
</div>
</div>
<script type="text/javascript" src="../src/app.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Raleway:400,800');
*{
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
/* overflow:hidden; */
font-family: raleway;
text-align: center;
background: no-repeat center center fixed;
background-size: cover;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.appBox{
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border-radius: 8px 8px 0 8px;
background: rgba(255,255,255,0.2);
}
.container{
width: 80%;
margin: 0 auto;
}
a{
text-decoration: none;
transition: all 1s;
color: black;
}
a:hover{
color: purple;
}
.selected{
color: blue;
cursor: default;
pointer-events:none;
}
header h1{
text-align: center;
}
.temperature{
font-size: 2em;
}
.condition p{
font-size: 1.3em;
}
.col{
font-size: 1em;
display: inline-block;
width:20%;
/* margin: 5px; */
/* padding: 10px; */
border: 1px solid black;
border-radius: 10px;
background: rgba(250,250,250, 0.3);
-webkit-box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
}
.forecast{
width:100%;
margin: 20px;
}
.forecast h1{
background: rgba(255,255,255,0.3);
border: 1px solid white;
margin-bottom: 0;
}
.fcol{
display: inline-block;
width:20%;
background: rgba(255,255,255,0.3);
border: 1px solid white;
}
#media(max-width:700px){
/* .appBox{
height: 100vh;
} */
.col{
/* display:block; */
width: 35%;
margin: 10px auto;
}
}
In your .forecast class, the margin: 20px; is pushing your forecast element off center in the smaller width screens. On the larger scale it's not quite as noticeable, but that 20px bump becomes much more noticeable once your real estate shrinks.
I used the developer console to reassign it to margin: auto; and it seemed to rectify the problem. Your element should also center fine with this change as it is a nested element.
.forecast {
width: 100%;
margin: auto;
}
That should do the trick!
Since your problem is that the content goes out of bounds, why not make the content size relative or use css media queries.
You can use vh to set the size of the content relative to the height of the viewport.
You can also use something like #media screen and (max-width: 480px) to determine when devices are small enough to cause the content to go out of bounds then write new sizes for the content here.
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.
Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.
General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)
If you want to align the links vertically:
#header a {
...
line-height: 80px;
}
#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.
You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg
I'm using JQuery to load the contents of a text file into a div however when the content goes beyond the div no scroll bar appears.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/common.css">
<script src="JS/common.js"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>The Circuit</li>
<li>Gallery</li>
<li>Further Reading</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
<div id="tabContent5"></div>
</div>
</body>
</html>
CSS:
body {
background-color: #EEEEEE;
font-family: Arial,Helvetica;
font-size: small;
height: 100%;
margin: 100px auto 0;
width: 100%;
}
#tabs {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: -98px;
width: 100%;
}
#tabs li {
float: left;
margin: 0 -15px 0 0;
}
#tabs a {
border-bottom: 30px solid #3D3D3D;
border-right: 30px solid transparent;
color: #FFFFFF;
float: left;
height: 0;
line-height: 30px;
opacity: 0.3;
padding: 0 40px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
#tabs a:hover {
border-bottom-color: #2AC7E1;
opacity: 1;
}
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em;
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
.activeTab {
border-bottom-color: #3D3D3D !important;
opacity: 1 !important;
}
.img {
}
JQuery:
$('a[name="#tabContent2"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$("#tab5").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
$("#tabContent1").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
$("#tabContent5").hide();
});
How can I get the scroll bar to appear?
#tabs {
overflow: scroll;
}
overflow controls how content is hidden. If set to hidden it will be hidden with no scroll bars. You want scroll to add the appropriate scroll bar.
Overflow is visible but just it overflowed by padding:
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em 0 0 2em; /*<--change to this*/
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
Try to use the famous micro clearfix instead of overflow: auto;
/*The famous micro clearfix*/
.group:before,
.group:after,
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after,
.group:after {
clear: both;
}
.group,
.group {
*zoom: 1;
}
And for your jQuery, that can be a lot shorter and, arguable, more readable like this:
$('a[name="#tabContent2"]').click(function () {
$(this).parent().parent().find("a").removeClass("activeTab");
$(this).addClass('activeTab');
$("#content > div").hide();
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
});