I am new to Tweenmax animation and i am trying to animate an id selector and unfortunately nothing is happening. both selector and content do nothing. Some one help me out, here is the code.
<!DOCTYPE html>
<html>
<head>
<title>my first tween</title>
<style>
body {
background-color:silver;
}
#sample {
width: 402px;
height: 60px;
background-color:teal;
padding: 8px;
}
</style>
<script type="text/javascript" src="jquery.gsap.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js">/script>
</head>
<body>
<div id="sample">
<!-- Some content -->
</div>
</body>
</html>
And here is the js
var drew = document.getElementById("sample"); //or use jQuery's $("#sample")
TweenLite.to(sample, 1.5, {width:100});
<script>
$(function(){
TweenLite.to($("#sample"), 1.5, {width:100});
});
</script>
use
var drew = document.getElementById("sample"); //or use jQuery's $("#sample")
TweenLite.to(drew , 1.5, {width:100});
you put sample instead of drew.
Related
Well i'm new to html/js scripting but i'm working on a project and i want to using hyperlink to show/hide divs
for example if i click on first hyperlink it should show div id:1 only and if i click on second hyperlink it should show 2nd div only.
i managed to find an example of what i need on internet but i have no idea,why whatever i try it doesnot work for me
an example of what i need - my fiddle
and this is my code
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
so you ned to include JQuery that's what $() is.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
It is Working For me on JSFIDDLE. Add jquery library on your local project.
add This on your Head Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you forget to include $ jquery in you script tag
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
You should add jquery in your project.
You can use a CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
OR
you can include your own copy of library in project.
<script src="path/jquery.min.js"></script>
I am starting to learn Anime.JS. To see how it worked, I copied some very basic sample code from their documentation website. Weirdly, the square is not animating to the right 250px like it should be...
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="anime.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="cssSelector">
<div class="line">
<div class="square el"></div>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #232323;
}
.square{
width: 100px;
height: 100px;
background-color: red;
}
And Javascript
var cssSelector = anime({
targets: '#cssSelector .el',
translateX: 250
});
I see the square but there is no animation. The program does read the anime.min.js because there is no error message in the console.
What I believe is that you are trying to run your code before the page is loaded.
Add this:
function main(){
anime({
targets: '#cssSelector .el',
translateX: 250
});
}
document.addEventListener("DOMContentLoaded", main);
Then it should work: https://jsfiddle.net/DerekL/980j4591/
I'm trying to understand how to convert the following JFiddle example into a single html web page: http://jsfiddle.net/zqa511e9/
What am doing wrong? Both the style and javascript code are not being reflected in the form. Any help will be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Expandable Text Area</title>
<style>
textarea {
width: 200px;
height:15px;
line-height:15px;
min-width: 200px;
max-width: 300px;
transition: width 0.25s;
resize:none;
overflow:hidden;
}
</style>
<script>
$('textarea').on('keydown', function(e){
if(e.which == 13) {e.preventDefault();}
}).on('input', function(){
$(this).height(1);
var totalHeight = $(this).prop('scrollHeight') -
parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).height(totalHeight);
});
</script>
</head>
<body>
<textarea placeholder="Autosize" data-autosize-input='{ "space": 40 }'>
</textarea>
</body>
</html>
Updated Code.
You Need to do two things.
1. SImport Jquery Library.
2. Write on load in javascript block.
Try This
<title>Expandable Text Area</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<style>
textarea {
width: 200px;
height:15px;
line-height:15px;
min-width: 200px;
max-width: 300px;
transition: width 0.25s;
resize:none;
overflow:hidden;
}
</style>
<script>
$(document).ready(function() {
$('textarea').on('keydown', function(e){
if(e.which == 13) {e.preventDefault();}
}).on('input', function(){
$(this).height(1);
var totalHeight = $(this).prop('scrollHeight') -
parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).height(totalHeight);
});
});
</script>
</head>
<body>
<textarea placeholder="Autosize" data-autosize-input='{ "space": 40 }'>
</textarea>
</body>
</html>
For one you are using jQuery, but there is no link to jQuery in your html. Jfiddle has it automatically applied I think.
Grab a jQuery CDN and place it in the head tag like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You need external resources: jquery and jquery.autosize.input.js
In your html put this code between the head tag
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>
</head>
I found related articles here but none of them were useful. I am learning jQuery from codecademy and when I try to practice it by myself nothing happens.
HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
<script type='text/javascript' src='MovieSiteBehavior.js'></script>
</head>
<body>
<div></div>
</body>
</html>
CSS looks like this:
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
and Javascript looks like this:
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
There should appear an orange rectangle and when u click it it should disappear, but in fact it only appears and I can't make it disappear. (same example on codecademy works just fine)
P.S some people blame me for bad question and if you think this is a bad one please explain why.
Look like you forgot to add jQuery library - works fine. A suggestion would be to use $(this) inside the click listener so that you hide the same div that you have clicked - see demo below with 2 divs:
$(document).ready(function() {
$('div').click(function() {
$(this).fadeOut('slow');
});
});
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<br/>
<div></div>
You didn't add the jQuery library.
That's why it doesn't work.
Try to add :
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
into the <head>
Add this to the bottom of your <body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
like this:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
<script type='text/javascript' src='MovieSiteBehavior.js'></script>
</head>
<body>
<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
</script>
</body>
</html>
Im trying to implement a simple plugin that resize image based on a container.
The problem is , I don't understand why it's not resizing my image when I placed it inside a container
This is the simple plugin demo page i'm trying to replicate
https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/imgLiquid.html
This is my Code
<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({fill:true, fadeInTime:500});
$(".imgLiquidNoFill").imgLiquid({fill:false});
});
</script>
</head>
<body>
<div class="container" >
<img src="Creek.jpg"/></div>
</div>
</body>
</html>
My CSS
.container {height: 440px; width: 950px; background:#FFFFFF}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Image</title>
<style>
.container{
background-color:#f7f7f7;
border:2px solid #ccc;
margin:10px;
display:inline-block;
}
.imgLiquid {
display:block;
overflow: hidden;
background:transparent url('http://www.lotienes.com/imagenes/loading.gif') no-repeat center center;
}
.imgLiquid img{
visibility:hidden;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({
fill: true,
fadeInTime:200,
horizontalAlign: "center",
verticalAlign: "top"
});
});
</script>
</head>
<body>
<div class="container">
<span class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
<a href="/media/Woody.jpg" target="_blank" title="test">
<img alt="" src="/media/Woody.jpg"/>
</a>
</span>
</div>
</body>
</html>
Your changing the codes and you forgot to define the imgLiquidFill and imgLiquid in the class which is very important to make this plugin effective. In modifying the codes make sure you didn't forgot anything. Another thing is you can rename the class but make sure you also rename it in the script to make it the same.