We Keep Coding

GSAP stagger animation

If an element has the class .stagger then I'm trying to execute an animation which shows the cards one by one.
In my current demo, the cards all fade in together. Even though I've specified a delay?
How can I the cards to appear one by one?
const boxes = gsap.utils.toArray('.stagger');
boxes.forEach((box, i) => {
const anim = gsap.fromTo(box, {
autoAlpha: 0,
y: 50
}, {
duration: 1,
autoAlpha: 1,
y: 0,
delay: 0.5,
});
ScrollTrigger.create({
trigger: box,
animation: anim,
toggleActions: 'play none none none',
once: true,
});
});
.section{
background: lightblue;
padding: 100px 0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<div class="section">
<div class="container">
<div class="row">
<div class="col-4">
<div class="card text-center stagger">
Card
</div>
</div>
<div class="col-4">
<div class="card text-center stagger">
Card
</div>
</div>
<div class="col-4">
<div class="card text-center stagger">
Card
</div>
</div>
</div>
</div>
</div>

In my current demo, the cards all fade in together. Even though I've specified a delay?
Each card has a 0.5s delay, so the'll move all together.
Use a delay based on the current card index:
delay: 0.5 + (0.5 * i)
So every card will be delayed with (0.5s + half a second for each index)
const boxes = gsap.utils.toArray('.stagger');
boxes.forEach((box, i) => {
const anim = gsap.fromTo(box, {
autoAlpha: 0,
y: 50
}, {
duration: 1,
autoAlpha: 1,
y: 0,
delay: 0.5 + (0.5 * i),
});
ScrollTrigger.create({
trigger: box,
animation: anim,
toggleActions: 'play none none none',
once: true,
});
});
.section{
background: lightblue;
padding: 100px 0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<div class="section">
<div class="container">
<div class="row">
<div class="col-4">
<div class="card text-center stagger">
Card
</div>
</div>
<div class="col-4">
<div class="card text-center stagger">
Card
</div>
</div>
<div class="col-4">
<div class="card text-center stagger">
Card
</div>
</div>
</div>
</div>
</div>

How could i overwrite css typehead js

I would like to overwrite typehead js input form search. Because actually my input is not taking all the place from my column div.
As you can see :
I would like to have the full bar like this ( i can do this when i change the input name but the search don't work after the change):
Here the full code : (hope someone could help me :) )
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Recherche</div>
<div class="panel-body">
<form class="typeahead" role="search">
<div class="form-group">
<input type="search" name="q" class="typeahead form-control" placeholder="Search" autocomplete="off">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins and Typeahead) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Typeahead.js Bundle -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<!-- Typeahead Initialization -->
<script>
jQuery(document).ready(function($) {
// Set the Options for "Bloodhound" suggestion engine
var engine = new Bloodhound({
remote: {
url: 'find?q=%QUERY%',
wildcard: '%QUERY%'
},
datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
queryTokenizer: Bloodhound.tokenizers.whitespace
});
$(".typeahead").typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
source: engine.ttAdapter(),
// This will be appended to "tt-dataset-" to form the class name of the suggestion menu.
name: 'usersList',
// the key from the array we want to display (name,id,email,etc...)
templates: {
empty: [
'<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
],
header: [
'<div class="list-group search-results-dropdown">'
],
suggestion: function (data) {
return '' + data.name + ' - ' + data.email + ''
}
}
});
});
</script>

Try this,
<style>
.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }
</style>
Put this style tag in your the <head> tag.

How to Print the Particular bootstrap Div

I would like to print a bootstrap div.
It is properly displayed in web browser but when I click on the print button then at print preview, the elements are floating and are not properly displayed.
what should I do to solve this problem ?
Div which I want to print with following this style
What I get the output at printing time which I dont want see on school name at the top
Button which call the print function:
<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style=" font-size: 17px;"> Print</i></button>
Print Function:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
Div which i Want to print
<div class="container right-container col-md-6" id="printableArea" style="display:block;">
<span id="link7">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 id="school_title"><?php echo "$school_name";?> </h3>
<p><p>
<p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p>
<div class="row">
<div class="col-md-4">
<div class="header-time-date-marks">
<span id="exam_time">Time: 12 AM - 2 PM</span>
<span id="exam_date">Date: 30/12/2016</span>
</div>
</div>
<div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
<span id="exam_marks">100 Marks</span>
</div>
</div>
</div>
</div>
<hr / id="line" style="margin-top: 13px;">
<div class="row q-question-type-style" id='question_section'>
</div>
</span>
</div>

Check this solution: It is working. The <div> is able to display for print.
Place your <script>-tag above the <html>-tag:
<script>
<html>
https://jsfiddle.net/6cz5br7m/

It's working, just try it on your Editor.
<!-- Your Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Another Jquery version, which will be compatible with PrintThis.js -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<!-- CDN/Reference To the pluggin PrintThis.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.js"
integrity="sha512-Fd3EQng6gZYBGzHbKd52pV76dXZZravPY7lxfg01nPx5mdekqS8kX4o1NfTtWiHqQyKhEGaReSf4BrtfKc+D5w=="
crossorigin="anonymous"></script>
<script type="text/javascript">
// important : to avoid conflict between the two version of Jquery
var j = jQuery.noConflict(true);
// define a function that you can call as an EventListener or whatever you want ...
function Print_Specific_Element() {
// the element's id must be unique ..
// you can't print multiple element, but can put them all in one div and give it an id, then you will be able to print them !
// use the 'j' alias to call PrintThis, with its compatible version of jquery
j('#specificElement').printThis({
importCSS: true, // to import the page css
importStyle: true, // to import <style>css here will be imported !</style> the stylesheets (bootstrap included !)
loadCSS: true, // to import style="The css writed Here will be imported !"
canvas: true // only if you Have image/Charts ...
});
}
$("#printBtn").click(Print_Specific_Element);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- It's very important to include the attribute : media='all'-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" media='all'
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
#media print {
#page {
/* To give the user the possibility to choise between landscape and portrait printing format */
size: auto;
/* setting custom margin, so the date and the url can be displayed */
margin: 40px 10px 35px;
}
/* Here you can give a custom styling which will be applied only while printing */
a,
button#printBtn {
display: none;
}
}
</style>
</head>
<body>
<div class="container" id="Page">
<div>
this Element will not be printed
</div>
<div id="specificElement" class="bg-primary m-2 p-2 text-center rounded" style="border: 2px solid black;">
<div class="jumbotron">
<h1 class="display-3">
My custom content which I want to print
</h1>
<p class="lead">Another element</p>
<hr class="my-2">
<p>Nothing ... just another element </p>
<button id="printBtn" class="btn btn-success btn-sm shadow">
CLick Me !
<br>
(Dont worry I will not be printed)
</button>
</div>
</div>
</div>
</body>
</html>

Call this function: PrintElem('printableArea')
function PrintElem(elem){
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
var css = "";
var myStylesLocation = "${pageContext.request.contextPath}/ui/css/bootstrap.min.css";
$.ajax({
url: myStylesLocation,
type: "POST",
async: false
}).done(function(data){
css += data;
})
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<style type="text/css">'+css+' </style>');
// mywindow.document.write('<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/css/bootstrap.min.css" type="text/css" media="print"/>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}

You can try #media print in css.
Like bellow
In css
#media print
{
p.bodyText {font-family:georgia, times, serif;}
.noprint
{
display:none
}
}
In Html
<div class="noprint">
I dont want it on print
</div>
<br><br>
<div>
Prrintable Area
</div>
Fiddle

I was able to look for the section that was undesirably appearing in the print of the modal, and just hiding it, while using your print function:
print() {
let mainLayout = document.querySelector('app-main-layout') as HTMLDivElement;
mainLayout.style.display = 'none';
window.print();
mainLayout.style.display = 'unset';
}
And, make the buttons of my modal go away, by using this css:
#media print {
button.close {display:none !important;}
}

you just need to link your js script properly
<!DOCTYPE html>
<html>
<body>
<div class="container right-container col-md-6" id="printableArea" style="display:block;">
<span id="link7">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 id="school_title"><?php echo "$school_name";?> </h3>
<p><p>
<p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p>
<div class="row">
<div class="col-md-4">
<div class="header-time-date-marks">
<span id="exam_time">Time: 12 AM - 2 PM</span>
<span id="exam_date">Date: 30/12/2016</span>
</div>
</div>
<div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
<span id="exam_marks">100 Marks</span>
</div>
</div>
</div>
</div>
<hr / id="line" style="margin-top: 13px;">
<div class="row q-question-type-style" id='question_section'>
</div>
</span>
</div>
<div> <h1>
asdads
</h1>
</div>
<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style=" font-size: 17px;"> Print</i></button>
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</body>
</html>

getting a method as a json data in angularjs and how to use it

I have been working on an ui chart that takes data from my json and show it..
my json file is job.json
{
"days": [{
"dayname": "Sun,23 Aug 2015",
"date": "2015-08-23",
"hours": "hoursArray()"
}, {
"dayname": "Mon,24 Aug 2015",
"date": "2015-08-24",
"hours": "hoursArray()"
}, {
"dayname": "Tue,25 Aug 2015",
"date": "2015-08-25",
"hours": "hoursArray()"
}, {
"dayname": "Wed,26 Aug 2015",
"date": "2015-08-26",
"hours": "hoursArray()"
}]
in which hoursarray() is a method but while using it in my code as an expression
its not giving any result as when i was giving hardcoded value in angularjs controller. so please if you could tell me how to pass a hoursarray() method in my angularjs
the code for my angularjs file is
var myApp = angular.module("myDashboardApp", []);
var array24 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
myApp.controller("mainController", function($scope,$http) {
$http.get("job.json")
.success(function(response) {
$scope.big = response;
});
$scope.addition = function(index, add) {
return Number(index) + Number(add);
};
});
$(document).ready(function() {
$("#scheduleApp").schedule();
});
function hoursArray(from) {
var output = [];
for (var i in from) {
output.push(zeropreffix(i));
}
return output;
}
function zeropreffix(i) {
return (String(i).match(/^[0-9]$/)) ? "0" + i : i;
}
function flightTime( hours) {
var output = [];
for (var i in hours) {
if (i != 0 && i % 2 == 0) {
output.push({
breakhours : {
station : "COK"
}
});
} else {
output.push({
timing : {
real : {
start : zeropreffix(i) + ":00",
end : zeropreffix(i) + ":59",
code : "EK531"
},
actual : {
start : zeropreffix(i) + ":00",
end : zeropreffix(i) + ":59",
code : "EK531"
}
}
});
}
}
return output;
}
EDIT This is the html i am using you can see that i am inserting hours in the <> file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dashboard</title>
<meta name="description" content="">
<meta name="author" content="USER">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<body ng-app="myDashboardApp">
<div class="section-main">
<div class="schedule" id="scheduleApp" ng-controller="mainController">
<div class="schedule-row">
<div class="schedule-route pad0px border-r-dark-blue-fade">
<div class="schedule-table schedule-field-head bg-dark-blue" data-row="0">
<span class="schedule-cell"> UTC </span>
<span class="schedule-cell text-linetight text-center"> <span>+</span> <span>-</span> </span>
<span class="schedule-cell">00:00</span>
</div>
<div class="schedule-table schedule-field-head" ng-repeat="route in big.route" data-row="{{addition($index,1)}}">
<span class="schedule-cell bg-{{route.stylename}}">{{route.name}}</span>
<span class="schedule-cell text-center bg-{{route.stylename}}"><span class="circle-icon" ng-hide="!route.info.icon"><i class="fa {{route.info.icon}}"></i></span></span>
</div>
</div>
<div class="schedule-content valign-top pad0px">
<div class="schedule-content-inner" id="scheduleContentInner">
<div class="schedule-drag-wrap">
<div class="schedule-current-time-marker">
<span class="schedule-time-marker-pills">00:00</span>
</div>
<div class="schedule-h-divider" ng-repeat="dayitem in big.days" data-divider="{{$index}}"></div>
<div class="schedule-table row-minh bg-dark-blue" data-row="0" id="scheduleAllDays">
<div class="schedule-cell pad0px after-left-border" ng-repeat="dayitem in big.days" data-row="{{addition($index,1)}}" data-date="{{dayitem.date}}">
<div class="schedule-row">
<div class="schedule-dayname pad-y10px pad-l20px">
{{dayitem.dayname}}
</div>
</div>
<div class="schedule-row border-t-dark-blue-fade">
*<span class="schedule-cell schedule-hours" ng-repeat="hour in dayitem.hours" data-col-hours="{{hours}}"> {{hour}} </span>*
</div>
</div>
</div>
<div class="schedule-table row-minh schedule-pills-container" ng-repeat="route in big.route" data-row="{{addition($index,1)}}" data-flight-row="flight-{{addition($index,1)}}">
<div class="schedule-cell">
<div class="schedule-block">
<div class="schedule-cell pad0px" ng-repeat="flight in route.flight" >
<div class="schedule-table bg-{{flight.timing.real.color}} radius2px" ng-if="flight.timing.real" data-flight-record="duration~{{flight.timing.real.duration}}|start~{{flight.timing.real.start}}|end~{{flight.timing.real.end}}">
<span class="schedule-cell pad-r0px" ng-if="flight.timing.real.start">{{flight.timing.real.start}}</span>
<span class="schedule-cell pad-r0px" ng-if="flight.timing.real.code">{{flight.timing.real.code}}</span>
<span class="schedule-cell pad-r0px" ng-if="flight.timing.real.end">{{flight.timing.real.end}}</span>
</div>
<div class="schedule-table text-center" ng-if="flight.breakhours" data-flight-record="duration~{{flight.breakhours.duration}}|start~{{flight.breakhours.start}}|end~{{flight.breakhours.end}}">
<span class="pad-x2px">{{flight.breakhours.station}}</span>
</div>
</div>
</div>
<div class="schedule-table autowidth">
<div class="schedule-cell pad0px" ng-repeat="flight in route.flight" >
<div class="schedule-table bg-{{flight.timing.actual.color}} radius2px" ng-if="flight.timing.actual" data-flight-record="duration~{{flight.timing.actual.duration}}|start~{{flight.timing.actual.start}}|end~{{flight.timing.actual.end}}">
<span class="schedule-cell pad-r0px" ng-if="flight.timing.actual.start">{{flight.timing.actual.start}}</span>
<span class="schedule-cell pad-r0px" ng-if="flight.timing.actual.code">{{flight.timing.actual.code}}</span>
<span class="schedule-cell pad-r0px" ng-if="flight.timing.actual.end">{{flight.timing.actual.end}}</span>
</div>
<div class="schedule-table" ng-if="flight.breakhours.maintenance" data-flight-record="duration~{{flight.breakhours.maintenance.duration}}|start~{{flight.breakhours.maintenance.start}}|end~{{flight.breakhours.maintenance.end}}">
<span class="schedule-cell pad-y0px" ng-if="!flight.breakhours.maintenance.blank"> <span class="schedule-table bg-{{flight.breakhours.maintenance.color}} radius2px" > <span class="schedule-cell">{{flight.breakhours.maintenance.reason}}</span> <span class="schedule-cell text-right"><i class="fa {{flight.breakhours.maintenance.icon}}" ng-if="flight.breakhours.maintenance.icon"></i> {{flight.breakhours.maintenance.time}}</span> </span> </span>
<div class="schedule-cell pad0px" ng-if="flight.breakhours.maintenance.blank">
{{flight.breakhours.maintenance.blank}}
</div>
</div>
</div>
</div>
</div>
<div class="schedule-cell">
</div>
<!-- <div class="schedule-cell" ng-if="flight==null"> </div> -->
</div>
</div>
</div>
</div>
<div class="schedule-route pad0px border-l-dark-blue-fade valign-top overflow-visible">
<div class="schedule-table schedule-field-head bg-dark-blue" data-row="0">
<span class="schedule-cell"> UTC </span>
<span class="schedule-cell text-linetight text-center"> <span>+</span> <span>-</span> </span>
<span class="schedule-cell">00:00</span>
</div>
<div class="schedule-table schedule-field-head" ng-repeat="route in big.route" data-row="{{addition($index,1)}}">
<span class="schedule-cell bg-{{route.stylename}}">{{route.name}}</span>
<span class="schedule-cell text-center bg-{{route.stylename}}"><span class="circle-icon" ng-hide="!route.info.icon"><i class="fa {{route.info.icon}}"></i></span></span>
</div>
</div>
</div>
</div>
</div>
<script src="angular.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="schedule.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>

JSON format strings are like a XML strings: just a way to send data. You cannot send executable code in a JSON (well, there is a way using eval, but it is not a good idea).
If I am receiving a JSON structure from a server, I'd expect that all the data I need is already present, so the hours array should be populated in server side. If I had to populate a field once I receive the response, then I'll choose how to do so instead receiving the code from server side. You can accept a "hint" about how to populate it or not, but no the code itself.
So, to summarize:
Ensure the data is populated in server side, or
Populate it in client side with your own method.
For example:
function hoursArray() {...};
var data;
$http.get('job.json').success(function(response) {
data=JSON.parse(response);
for (var i=0;i<data.days.length;i++) {
data.days.hours=hoursArray();
}
});

The is at least one way to do that without using eval. First, pass only the function name without parentheses, i.e. a day object will look like that:
// day object:
{
"dayname": "Sun,23 Aug 2015",
"date": "2015-08-23",
"hours": "hoursArray"
}
Then in the controller, declare the function as a property of the controller:
myApp.controller("mainController", function ($scope, $http) {
var vm = this;
vm.hoursArray = function () {
// ...
}
}
Then you can dynamically get the function like that:
vm[day.hours]

Link in typed.js text

How do i put link in typed.js script? I need Contact me, to be linked to contact page.
<script src="js/typed.js"></script>
<script>
$(function(){
$(".element").typed({
strings: ["Welcome to my Website.", "Random text... Contact me"],
typeSpeed: 0
});
});
</script>
**HTML**
<div class="col-md-12 col-xs-12">
<h1 class="element"></h1>
</div>

Use the callback parameter.
Example:
$(function() {
$('#awesome').typed({
strings: ["Welcome to my Website.", "Random text... Contact me"],
typeSpeed: 0,
callback: function() {
$('#awesome').html('' + $('#awesome').html() + '')
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/js/typed.js"></script>
<div class="col-md-12 col-xs-12">
<h1 class="element" id="awesome"></h1>
</div>