blank space occurs after footer in my html page - javascript

i have a html page,it's displaying well if i put my css code in the html.for example
<html>
<head>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">My header</div>
<div id="content">
Content
</div>
<div id="footer">My Footer</div>
</div>
</body>
</html>
when i put this css into external stylesheet it displaying well in first time but after i reloading the same page the empty space occurs at bottom of the page.For example
style.css
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
my.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How To Keep Your Footer At The Bottom of The Page - CSSReset.com</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div><!-- #header -->
<div id="content">
content
</div><!-- #content -->
<div id="footer">
footer
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
how to correct this error?
Any help will be greately appreciated.

try after removing height from footer (in css).footer will take height automatically as per data.

Related

How to do Jquery Animation Floating Correctly

I recently have been trying to use Jquery to create and html animation and I am trying to make a bar float to the right as it is currently floated to the left. Although when I try to do this it wont work please help
Html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="assests/css/main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".bar").animate({float: 'right'});
});
</script>
</head>
<body>
<div id="wrapper" align="center" >
<div class="obj">
<div class="bar"></div>
<div class="body">
<h1> Welcome </h1>
</div>
</div>
</div>
</body>
</html>
Css :
#import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin:0px;
padding:0px;
font-family:Raleway;
}
#wrapper {
width:100%;
height:100vh;
}
.obj {
width:500px;
height:200px;
margin-top:14%;
}
.bar {
float:left;
height:200px;
width:5px;
background-color:#95a5a6;
transition: all .5s ease-in-out;
}
.body {
width:495px;
height:200px;
float:right;
}
.body > h1 {
font-size:70px;
color:#333;
padding-top:50px;
}
You can animate the position like this:
$(document).ready(function() {
$('.bar').animate({"left" : 700 +'px'});
});
http://codepen.io/anon/pen/eZpbaP

Error responsive design, not showing fine on a phone

I'm trying to make a mobile/tablet website. I don't know why on my phone this thing happen:
But then.. when I open the sidebar:
I don't know why the body resizes itself. The content <div> moves to the right when the menu opens on the mobile. I want it to stay underneath the menu, so that the menu is on top of it.
Here's the HTML and CSS:
#charset "utf-8";
/* CSS Document */
body {
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
overflow-y:hidden;
}
#sidebar {
width:250px;
height:100%;
position:absolute;
background-color:#2a2a2a;
border-right:1px solid #1d1d1d;
}
#sidebar ul {
list-style:none;
padding:0;
margin:0;
}
#sidebar a {
display:block;
color:#fff;
text-decoration:none;
padding:0px 10px;
border-bottom:1px solid #1d1d1d;
transition:all 0.3s;
height:55px;
line-height:55px;
}
#sidebar a:hover {
background-color:#444;
}
#content {
width:100%;
height:100%;
position:absolute;
background-color:#fff;
transition:all 0.3s;
}
#menu {
position:relative;
width:100%;
height:56px;
box-sizing:border-box;
border-bottom:1px solid #CCC;
line-height:56px;
}
#menu span {
cursor:pointer;
font-size:30px;
width:55px;
height:56px;
background-color:#445A87;
color:#fff;
display:block;
text-align:center;
line-height:56px;
}
.open {
margin-left:251px;
}
#logo {
position:absolute;
right:50%;
top:0px;
margin-right:-80px;
height:55px;
width:160px;
font-size:24px;
color:#282828;
background:url(../../img/Logo.png);
background-size:cover;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baby & Home · Servicio doméstico · Limpieza industrial<</title>
<link href="css/styles_min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="css/icons.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="sidebar">
<ul>
<li>Inicio</li>
<li>Quiénes somos</li>
<li>Doméstico</li>
<li>Industrial</li>
<li>Promociones</li>
<li>Ofertas de empleo</li>
<li>Contacto</li>
</ul>
</div>
<div id="content">
<div id="menu">
<span id="open_sidebar" class="icon-list2"></span>
<div id="logo"></div>
</div>
</div>
<script type="text/javascript">
$("#open_sidebar").click(function(){
$("#content").toggleClass("open");
if($("#open_sidebar").hasClass("icon-list2")) {
$("#open_sidebar").removeClass("icon-list2");
$("#open_sidebar").addClass("icon-cross");
}
else {
$("#open_sidebar").addClass("icon-list2");
$("#open_sidebar").removeClass("icon-cross");
}
});
</script>
</body>
</html>
Thanks!
(I should say that in a web browser on a PC this works fine! Why not on a phone?)
<div id="content"> contains the images, and moves right, but you do not want it to. This is the cause of the layout problems. The code which controls this is applied to **all* screen sizes but only looks bad on tiny ones:
.open { margin-left:251px;}
You can delete this line to stop the <div id="content"> moving 251px to the right - but the images and text would still be too big for the screen - and the menu would take up too much of the screen.
A better idea would be to make your code more responsive. Add this to your CSS - this will make the menu text and menu size smaller for screens 600px or less
#media only screen and (max-width:600px)
{
#sidebar {
width: 150px;
margin:0; padding:0;
font-size: 12px;
}
}
This is called a media query and screens larger than 600px will stay the same. You can add to it, for example line-height:1.1em means each line is 1.1 characters wide

fadeToggle is malfunctioning with animate width?

Here is my attempt at replicating the code I have. For some reason, the code works perfectly in jsfiddle, but malfunctions with my own website. Maybe someone can somehow figure out what the issue is regardless.
http://jsfiddle.net/neowot/g0teoyrc/
So like I said, it works well in jsfiddle, but in my actual website, clicking the Button makes Div2 instantly disappear and then instantly reappear again before beginning its fade animation. Obviously this looks very bad and weird.
Does anyone have ideas as to what might be happening?
HTML
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
</body>
CSS
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
JS
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
Works for me as fiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery animate </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
</style>
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
<script>
$(document).ready(function(){
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
});
</script>
</body>
</html>

Html file also opens a picture?

I'm on a mac, and when I double-click the html file, it opens a photo that I'm using in Preview. If I "open with" Google Chrome, then the picture opens in it's own tab. The html file itself loads and functions correctly, and the picture appears just as it should. I just have NO CLUE why it also opens the picture file in a new tab(Chrome) or Preview(safari).
html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src="jQuery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id=top>
<h1>Lamborghini</h1>
</div>
<div id=navbar>
<div id=navlink> Home </div>
<div id=navlink> Photos </div>
<div id=navlink> Videos </div>
<div id=navlink> About Us </div>
<div id=navlink> Contact </div>
</div>
<div>
<div id=leftpanel></div>
</div>
</body>
</html>
Javascript
if(typeof jQuery === "undefined")
{console.log("jQuery is not loaded.")}
else
{console.log("jQuery is loaded.")}
$(document).ready(
$(document).scroll(
function()
{$("div").fadeTo(1000,1)}
)
);
I'm doing everything locally (just a beginner learning), and I have a jQuery database linked. Not sure if any of that is important.
CSS
body
{opacity:0}
.fade2
{opacity:1;
position:fixed;
z-index:-1;
width:100%;
opacity:0}
div#navbar
{height:50px;
width:100%;
opacity:0;
border-radius:7px;
background-color:rgba(0,150,255,0.8);
margin:auto;
overflow:hidden}
div#navlink:hover
{background-color:rgba(0,105,180,0.6)}
div#navlink
{width:20%;
display:inline-block;
border:1px solid black;
height:100%;
margin:0;
float:left;
text-align:center;
box-sizing:border-box;}
a
{text-decoration:none;
color:white;
position:relative;}
#top
{text-align:center;
height:544px;
background:url("Lambo2.jpg") bottom no-repeat;
background-size:100%;
background-color:white;
margin:0px;
margin-top:-45px;
width:100%;
background-color:transparent;
opacity:0.9}
h1
{position:relative;
font-size:4em;
top:.38em;
color:black;
font-family:cursive;
text-align:left}
#leftpanel
{height:1000px;
width:45%;
margin-left:4%;
margin-top:1%;
float:left;
background-color:rgba(0,150,255,1);
opacity:0}
span
{position:relative;
top:1em}

I need help getting the JQuery Function slideDown to work in my code

I have the script in my html code. The video div is not displayed because it cant be displayed in the beginning. Any ideas why this is not sliding down and showing?
Here is the html code and java script code:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="http://code.jquery.com/jquery-latest.js">
$(document.body).ready(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown("slow");
}
else {
$("#video").hide();
}
});
</script>
</head>
<body>
<div id ="content">
<div id="header">
<h1>Software Picture</h1>
</div>
<span id="menu">
<ul>
<li>Main Tab</li>
<li>Video Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
</ul>
</span>
<div id="video"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Here is the CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#333;
}
#content
{
width:800px;
border:solid 1px #FFFFFF;
margin:auto;
}
#header
{
float:left;
margin:0px;
width:800px;
height:100px;
text-align:center;
background-color:#FFF;
}
#menu
{
float:left;
width:800px;
height:50px;
width:800px;
}
#menu ul
{
padding:0px;
list-style-type:none;
}
#menu li
{
float:left;
padding:5px 30px;
font-size:20px;
color:#FFFFFF;
border-right:solid 2px #FFF;
}
#video
{
display:none;
float:left;
width:800px;
height:500px;
background-color:#000000;
}
#footer
{
width:800px;
margin:auto;
}
Try replacing
<script src="http://code.jquery.com/jquery-latest.js">
with
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
and I think you should be fine
Your code is to show the div if it is already hidden and show if it is not visible.
Your else condition is always being executed so the video div will be always hidden.
Change the $("#video").hide(); to $("#video").fadeOut("slow"); then you can see it is going away when the dom finished loading.
IF you want to show the vide div, hide the div initially. So that it will be displayed
<div id="video" style="display:none;">
<h3>Video div content </h3>
</div>
</div>
jsfiddle sample for that : http://jsfiddle.net/uzARd/4/
Why dont you just use $("#video").slideToggle(); instead of the if else check?
and also set the display:none property initially
use seperate script tag for both like
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown('slow');
}
else {
$("#video").hide();
}
});
</script>

Categories