How to do Jquery Animation Floating Correctly - javascript

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

Related

How do I add a smooth slide from left to right effect with CSS and Javascript on my side nav?

I am trying to make a CSS and JavaScript side-nav. Here is the code I have so far:
var nav = document.getElementById('nav');
function show(){
nav.style.display = "block";
}
.side-nav{
background-color:black;
height:100%;
width:250px;
position: absolute;
display:none;
}
#myLink{
color:gray;
text-decoration: none;
display:block;
margin-left:15px;
margin-bottom:10px;
font-size:25px;
transition: .5s;
font-family: 'Marck Script', cursive;
margin-top:10px;
}
#myLink:hover{
color:white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class = "side-nav" id = "nav">
<div id = "myLinks">
Home
Contact
Blog
Products
</div>
</div>
Show nav
<script src="script.js"></script>
</body>
</html>
How do I achieve a smooth slide from left to right with the side nav? Do I still need to use JavaScript? Or is there some way to do that with just CSS? Thanks in advance!!!

Do you want like this ?
var nav = document.getElementById('nav');
function show(){
nav.classList.toggle("active");
}
.side-nav{
background-color:black;
height:100%;
width:250px;
position: absolute;
display:none;
}
#myLink{
color:gray;
text-decoration: none;
display:block;
margin-left:15px;
margin-bottom:10px;
font-size:25px;
transition: .5s;
font-family: 'Marck Script', cursive;
margin-top:10px;
}
#myLink:hover{
color:white;
}
.side-nav.active{
display:block;
animation:animate 1s linear forwards;
}
#keyframes animate{
from{
opacity:0;
width:0;
}
to{
width:250px;
opacity:1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class = "side-nav" id = "nav">
<div id = "myLinks">
Home
Contact
Blog
Products
</div>
</div>
Show nav
<script src="script.js"></script>
</body>
</html>

If you want to use jQuery you would need something like this. I've also added the close button.
$( '.show-nav' ).click( function() {
$( '#nav' ).animate( {width: 'toggle'} );
} );
.side-nav{
background-color:black;
height:100%;
width:250px;
position: absolute;
display: none;
}
#myLink{
color:gray;
text-decoration: none;
display:block;
margin-left:15px;
margin-bottom:10px;
font-size:25px;
transition: .5s;
font-family: 'Marck Script', cursive;
margin-top:10px;
}
#myLink:hover{
color:white;
}
#nav .show-nav {
position: absolute;
top: 0;
right: 0;
padding: 10px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class = "side-nav" id = "nav">
<div id = "myLinks">
Home
Contact
Blog
Products
<a class="show-nav" href = "#">Close</a>
</div>
</div>
<a class="show-nav" href = "#">Show nav</a>
<script src="script.js"></script>
</body>
</html>

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>

blank space occurs after footer in my html page

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.

When adding divs elements to my page all the other draggable items move?

Why does this keep happening?
I add a draggable element, move it into place and then it prepends and moves everything down or make the page huge? Is there a way I can make the div appear in the same place and not move the other elements on the page? This is driving me crazy!
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>draggable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="stylesheet.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2></h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<table><tr><td id="place"></td></tr></table>
</body>
</html>
JavaScript:
$(document).ready(function()
{
//$( '#draggable' ).draggable();
$('#button').click(function()
{
var toAdd = $('input[name=checkListItem]').val();
var $newdiv = "<div id='draggable'>" + toAdd + "</div>";
//$("#place").html($($newdiv).draggable());
$("#place").prepend($($newdiv).draggable());
});
});
CSS:
#draggable {
z-index:1;
width: 100px;
height: 100px;
background: #ccc;
}
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#button{
display:inline-block;
height:20px;
width:70px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
#item {
font-family:garamond;
color:#000000;
width:90%;
height:800px;
background-color:#cc0000;
}
#place {
z-index:1;
font-family:garamond;
color:#000;
width:800px;
height:800px;
background-color:#f00;
}
Cheers in advance!!!!

Here is the fully working code: jsFiddle: http://jsfiddle.net/ycgmt/
Changes:
1: <div> instead of <table>
2: append() instead of prepend()
3: class instead of id
4: position:absolute
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>draggable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<h2></h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div id="place"></div>
</body>
</html>
CSS
.draggable {
width: 100px;
height: 100px;
background: #ccc;
position:absolute;
}
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#button{
display:inline-block;
height:20px;
width:70px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
#item {
font-family:garamond;
color:#000000;
width:90%;
height:800px;
background-color:#cc0000;
}
#place {
z-index:1;
font-family:garamond;
color:#000;
width:800px;
height:800px;
background-color:#f00;
}
JS
$(document).ready(function()
{
$('#button').click(function()
{
var toAdd = $('input[name=checkListItem]').val();
var newdiv = $("<div class='draggable'>" + toAdd + "</div>");
$("#place").append(newdiv);
$(newdiv).draggable();
});
});

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