Don't understand why simple Greensock animation doesn't run - css

I'm following along this tutorial: https://ihatetomatoes.net/greensock-timelinelite-tutorial
My code pen so far (only at about 1/4 of the tutorial):
http://codepen.io/Chiz/pen/qOxVvm
Based on the JS code, the 3 boxes should run right? I compare the code in the tutorial article and it's the same. I wonder if there's errors in the tutorial code.
Another thing is: the JQuery UI slider should show up below the 3 boxes, but nothing shows up in mine although I'm very sure the JQuery UI slider code is correct.
Any ideas?
// 1. Create a variable
var $box = $("#box"),
$box2 = $("#box2"),
$box3 = $("#box3"),
t1 = new TimelineLite();
tl.from($box, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
}) // no comma or semi-colon
.from($box2, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
}) // no comma or semi-colon
.from($box3, 1, {
y: '-=40',
autoAlpha: 0,
ease: Power4.easeInOut
});
// 4. Create a Slider to Control Playback
$("#slider").slider();
// updateSlider function
function updateSlider() {
$("#slider").slider("value", tl.progress() * 100);
}
html,
body {
height: 100%;
}
body {
background-color: #262626;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
h1 {
font-size: 16px;
width: 300px;
color: #838484;
font-weight: 300;
text-align: center;
span {
color: #89c540;
}
strong {
color: #fff;
}
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,
-180px);
padding:10px 20px;
border:1px solid transparentize(white,
.7);
}
.box {
background-color: #88ce02;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-155%, -50%);
z-index: 1;
}
#box2 {
transform: translate(-50%, -50%);
}
#box3 {
transform: translate(55%, -50%);
}
.boxSmall {
position: absolute;
background-color: #70a40b;
position: absolute;
bottom: 0;
left: 0;
width: 25px;
height: 75px;
z-index: 2;
}
.boxTiny {
background-color: #577a14;
height: 50px;
bottom: 0;
right: 0;
left: auto;
z-index: 3;
}
#controls {
position: absolute;
top: 50%;
left: 50%;
width: 310px;
transform: translate(-50%, 120px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<h1><strong>Green<span>Sock</span></strong> - TimelineLite</h1>
<div id="box" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="box2" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="box3" class="box">
<div class="boxSmall"></div>
<div class="boxSmall boxTiny"></div>
</div>
<div id="controls">
<div id="slider"></div>
</div>

It is not supposed to be t1 but it is supposed to be tl.
Change:
t1 = new TimelineLite();
to:
tl = new TimelineLite();

Related

LESS/ CSS : Writing a static text on image

I have following image as following,
How can i write text on image above and achieve the outcome as the following?
Try this, I hope it'll help you out. Thanks
.wrapper {
position: relative;
}
.wrapper img {
width: 100%;
}
.wrapper label {
color: #fff;
font-size: 24px;
position: absolute;
}
.wrapper #id1 {
left: 20px;
top: 20px;
}
.wrapper #id2 {
right: 20px;
top: 20px;
}
.wrapper #id3 {
left: 20px;
bottom: 20px;
}
.wrapper #id4 {
right: 20px;
bottom: 20px;
}
.wrapper #id5 {
right: 20px;
top: 50%;
transform: rotate(90deg)
}
.wrapper #id6 {
left: 20px;
top: 50%;
transform: rotate(-90deg)
}
<div class="wrapper">
<label id="id1">Text Left!</label>
<label id="id2">Text Right!</label>
<label id="id3">Text Bottom Left!</label>
<label id="id4">Text Bottom Right!</label>
<label id="id5">Text Rotate Right!</label>
<label id="id6">Text Rotate Left!</label>
<img src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2015/07/Depth-of-field-landscape.jpg" alt="" />
</div>
Assuming you have HTML like:
<div class="container">
<img />
<p>Foo</p>
</div>
something like this would work (you'll have to fiddle the values obviously):
.container {
position: relative;
img{ z-index: 1; // img styles here }
p { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 3; transform: rotate(90deg) }
}
Step by step:
Position the text absolutely
Rotate it 90 degrees
Set a Z-index higher than the image
Position the text correctly on the image
Profit ...

How to make a button with an image background?

I am using bootstrap 3 and I want to make an image button i.e. the button should have:
an image background
The button should have a custom translucent dark overlay that lightens on hover and becomes even darker on click.
fixed height (of 300px), and width 100% (so that it occupies the entire parent div class="col-md-4").
The image should be cropped i.e. overflow: hidden
I tried to achieve this by setting the image as background to my parent <div> and used a child <div> for the translucent overlays. But I had to write a lot of jquery to change the states onhover, onclick, etc.
I realized I should be using a button, and not a div but I could not style it and make it overlay the parent div.
Current code:
HTML element:
<div class="col-md-4" style="background-image: url('...'); overflow: hidden; height: 200px; margin-bottom: 24px">
<div class="img-panel translucent-overlay-light"> <!-- Should be a button or a tag -->
<div>
Hello
</div>
</div>
</div>
javascript: (ideally there should be no js, all this should be done in CSS)
$('.img-panel').click(function() {
// do something
});
$('.img-panel').mouseenter(function() {
var elm = $(this);
elm.removeClass('translucent-overlay-light');
elm.addClass('translucent-overlay-dark')
}).mouseleave(function() {
var elm = $(this);
elm.removeClass('translucent-overlay-dark');
elm.addClass('translucent-overlay-light')
});
Also, I am using SCSS anyway so both SCSS and CSS answers are fine.
Not hard, just using css:
.my-button {
display: block;
position: relative;
height: 300px;
line-height: 300px;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .2);
cursor: pointer;
font-size: 18px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
background: url('https://placeholdit.imgix.net/~text?txtsize=23&bg=22ffdd&txtclr=000000&txt=&w=250&h=250');
}
.my-button::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, .4);
}
.my-button:hover::after {
background: rgba(0, 0, 0, .2);
}
.my-button:active::after {
background: rgba(0, 0, 0, .8);
}
<div class="my-button">
Click me
</div>
You just may need to adjust background image size and position, read more.
CSS only with pseudo-elements. Hope that works for you.
.col{
width:50%;
display:block;
}
.img-panel{
position:relative;
height: 200px;
background-image: url('https://placeimg.com/640/480/any');
background-size:cover;
color:white;
}
.img-panel:after{
content:"";
width:100%;
height:100%;
top:0;
left:0;
position:absolute;
transition:0.2s;
}
.img-panel:hover:after{
background:rgba(0,0,0,0.5) ;
}
.img-panel:active:after{
background:rgba(0,0,0,0.8) ;
}
<div class="col col-md-4">
<div class="img-panel translucent-overlay-light">
Hello
</div>
</div>
As I understood, you need something like that, please check this. It's pure CSS solution.
.btn-wrap {
.btn-wrap__input {
width: 100%;
height: 300px;
position: absolute;
z-index: 3;
margin: 0;
opacity: 0;
&:checked {
+ .btn-wrap__overlay {
opacity: .7;
}
&:hover {
+ .btn-wrap__overlay {
opacity: .7;
}
}
}
&:hover {
+ .btn-wrap__overlay {
opacity: .5;
}
}
}
.btn-wrap__button {
height: 300px;
width: 100%;
}
.btn-wrap__back {
position: absolute;
height: 300px;
width: 100%;
z-index: 1;
color: white;
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7ixV_dB22rsPTNwbph6uHl62bSSNHK_TQLw1gMOPmoWErkRdK');
}
.btn-wrap__overlay {
background: black;
opacity: 0;
height: 300px;
position: absolute;
z-index: 2;
width: 100%;
}
}
<div class="col-md-4 btn-wrap">
<div class='btn-wrap__button'>
<input type='checkbox' class='btn-wrap__input'>
<div class="btn-wrap__overlay"></div>
<div class="btn-wrap__back"></div>
</div>
</div>

{CSS} A different color for the line which is drawn on a text by "text-decoration: line-through"?

Is it possible to change color of the line on wrapped text? I mean, e.g, a black text and a red line!?
You can do some CSS tricks to do it like this:
.line-through-text {
position: relative;
color: blue;
}
.line-through-text:before {
border-bottom: 2px solid orange;
position: absolute;
content: "";
width: 100%;
height: 50%;
}
<h2>
Hello There! <span class="line-through-text">This is wrong,</span> This is correct
</h2>
Sorry, i'll post correct answer in a minute :) (misread)
var pOut = $("span").css("text-decoration"); //line-through
if (pOut == "line-through") {
$("span").css("color", "red");
}
span {
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>hello <span>crazy world</span> world!</p>
Edit:
span {
position: relative;
font-size: 50px;
padding: 0;
margin: 0;
}
span.redline:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 55%;
left: 0;
border-top: rgba(255, 0, 0, 1) 4px solid;
}
<p>hello <span class="redline">crazy</span> world!</p>

google pie chart - center the header - responsive

I have made a google pie chart I am trying to get my heading in center of the pie.
I can get it there by, some css but I cant get it to be responsive, you need to reload the page for the chart to adjust, but then the heading is out?
h4.piechartheader {
position: absolute;
z-index: 100;
top: 268px;
left: 41%;
}
<div class="main-wrap" style="min-height:0px;">
<div class="piechart">
<h4 class="piechartheader">Your Business</h4>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Service', 'link', 'Hours per Day'],
['Marketing', '/ec/marketing.php', 1],
['Accounts', '/ec/bookkeeping.php', 1],
['Administration', '/ec/reception.php', 1],
['Job Execution', '',1],
['Job Management', '/ec/servicem8.php', 1]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 2]);
var options = {
title: 'Your Business',
pieSliceText: 'label',
legend: 'none',
pieHole: 0.4,
slices: [{color: '#CC9933'}, {color: 'black'}, {color: '#876D2D'}, {color: '#777'}, {color: '#0D72A8'}],
'tooltip' : {trigger: 'none'},
titlePosition: 'none',
width: '100%',
height: '100%',
};
$(window).on("throttledresize", function (event) {
initChart();
});
var chart = new google.visualization.PieChart(
document.getElementById('chart_div'));
chart.draw(view, options);
var selectHandler = function(e) {
window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
}
// Add our selection handler.
google.visualization.events.addListener(chart, 'select', selectHandler);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 100%; margin:0;"></div>
</body>
<style>
body{ text-align: center;}
#chart_div{width: 100%; margin: 0 auto;}
</style>
</html>
</div><!---piechart--->
example is on http://www.vestedutility.com.au/ec/
any ideas?
I work it add added some div's and css
<body style="width:100%;">
<div id="chart_wrap">
<div class="centro_total"><div class="alinhar_middle estilo_total">
<h4 class="piechartheader">Your Business</h4>
</div>
</div>
<div id="chart_div"></div>
</div>
</body>
/***********Pie chart****************/
#chart_wrap {
border:1px solid gray;
position: relative;
padding-bottom: 100%;
height: 0;
overflow:hidden;
background:#fff;
}
div#chart_div {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
}
.chart_wrap {
position: relative;
padding-bottom: 100%;
}
.centro_total {
position: absolute;
left: 25%;
top: 25%;
width: 50%;
height: 50%;
vertical-align: middle;
text-align: center;
z-index: 0;
}
.alinhar_middle {
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
/* etc */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
h4.piechartheader {
font-size: 1em;
}
<!----Finish Pie chart--->

How to make this loading overlay effect responsive?

I'm trying to do a loading overlay effect with an rotating icon in the middle. I use fontawesome.
So I coded this: http://jsfiddle.net/eys3d/7/
It works, but I'm trying to make it responsive. I mean, when the section size decreases, the spin size will decrease too (remaining centered). An if the size of the section increases, the oposite.
I tried to use em units, but I didn't get the result I expected.
Is this the best way to do it? How I can make it responsive?
CSS
section {
width: 200px;
height: 200px;
margin: 50px;
}
#overlay {
position: relative;
width: 100%;
height: 100%;
z-index: 99999999999;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
position: absolute;
top: 50%;
left: 50%;
}
.spin-big {
font-size: 50px;
height: 50px;
width: 50px;
margin-top: -25px;
margin-left: -25px;
}
.spin-normal {
font-size: 35px;
height: 35px;
width: 35px;
margin-top: -22.5px;
margin-left: -22.5px;
}
.spin-small {
font-size: 20px;
height: 20px;
width: 20px;
margin-top: -10px;
margin-left: -10px;
}
HTML
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-big"></i>
</div>
</section>
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-normal"></i>
</div>
</section>
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-small"></i>
</div>
</section>
Any tip, advice or help will be appreciated, and If you need more info, let me know and I'll edit the post.
Why you won't try to use display:table attribute to your overlay div and display:table-cell to fontawesome i class? as below:
#overlay {
width: 100%;
height: 100%;
display:table;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
display:table-cell;
vertical-align:middle;
text-align:center;
}
Working Demo
you can use this for good effect
.loading
{
pointer-events: all;
z-index: 99999;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: wait;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
}
Just run into this looking for a similar solution.
The only way to responsively change the font-size would be through media queries.
I.e:
#media min-device-width: 300px{
font-size: 8px;
}
#media min-device-width: 480px{
font-size: 12px;
}
ext..
-----------div in Layout Page---------------
<div class="loading-bg" id="dvSpinner">
<img src="~/Areas/Images/loader.gif">
</div>
----------css-----------
.loading-bg {
background: #e9e9e9;
display: none;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
z-index: 5000;
width: 100%;
}
.loading-bg img{
position: absolute;
top: 42%;
left: 46%;
height: 100px;
width: 100px;
}
-------------html------------
<div class="appendInputFieldForUAIHiddenDiv"
id="appendInputFieldForUAIHiddenDiv">
#Html.TextBoxFor(model => model.PrimaryEmail, new { #class = "form-control enter-email-FPHidden-div", id = "email-address-entered", name = "email-address-entered" })
#Html.ValidationMessageFor(model => model.PrimaryEmail)
<button type="submit" class="btn btn-info submit-button-FPHidden" onclick="submitbuttonFPHidden()">
#ASRP.Resources.Resource.Submit
</button>
</div>
--------------scripts--------------------------
function submitbuttonFPHidden() {
var username = $('#email-address-entered').val();
if (username == null || username == "") {
document.getElementById("email-address-entered").style.borderColor = "#ff0232";
return false;
}
if (!validateEmail(username)) {
document.getElementById("email-address-entered").style.borderColor = "#ff0232";
return false;
}
document.getElementById('dvSpinner').style.display = "block";
$.ajax({
url: "../User/ForgotPassword",
data: { email: username },
dataType: "json",
type: "post",
error: function (error, msg) {
$('div#dvSpinner').hide();
return false;
},
success: function (data) {
if (data.success) {
if (data.emailSent == "Successful") {
document.getElementById('FPHiddenDivContainer').style.display = "none";
document.getElementById('entered-email-address').style.display = "block";
document.getElementById('entered-email-address-para').innerHTML = document.getElementById('email-address-entered').value;
document.getElementById('PwdMsgNew').style.display = "none";
}
else if (data.emailSent == "Failure")
{
document.getElementById('FPHiddenDivContainer').style.display = "none";
document.getElementById('entered-email-address').style.display = "block";
document.getElementById('entered-email-address-para').innerHTML = document.getElementById('email-address-entered').value;
document.getElementById('PwdMsg').style.display = "none";
document.getElementById('lblThankYou').style.display = "none";
}
}
else {
var ddlLangValue = $('#ddlLangs').val();
setCookie("culture", ddlLangValue, 31536e3);
var resources = {}; // Global variable.
(function ($) {
$.getJSON("Resource/GetResources", function (data) {
resources = data;
alert(resources.fpUnabletoProcessReq);
});
})(jQuery);
}
document.getElementById('dvSpinner').style.display = "none";
}
});
return true;
}

Resources