YouTube like progress bar to appear each time a link is clicked? - youtube

I found this JsFiddle for a YouTube like progress bar but I don't know how to make the progress bar appear each time a link is clicked. Does anyone have any ideas on how I can do this?
HTML:
<div id="progress" class="waiting">
<dt></dt>
<dd></dd>
</div>
CSS:
body {
background-color:#D4D4E2;
}
#progress {
position:fixed;
z-index:2147483647;
top:0;
left:-6px;
width:0%;
height:2px;
background:#3399FF;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
-moz-transition:width 500ms ease-out,opacity 400ms linear;
-ms-transition:width 500ms ease-out,opacity 400ms linear;
-o-transition:width 500ms ease-out,opacity 400ms linear;
-webkit-transition:width 500ms ease-out,opacity 400ms linear;
transition:width 500ms ease-out,opacity 400ms linear
}
#progress.done {
opacity:0
}
#progress dd,#progress dt {
position:absolute;
top:0;
height:2px;
-moz-box-shadow:#FFFFFF 1px 0 6px 1px;
-ms-box-shadow:#FFFFFF 1px 0 6px 1px;
-webkit-box-shadow:#FFFFFF 1px 0 6px 1px;
box-shadow:#FFFFFF 1px 0 6px 1px;
-moz-border-radius:100%;
-webkit-border-radius:100%;
border-radius:100%
}
#progress dd {
opacity:1;
width:20px;
right:0;
clip:rect(-6px,22px,14px,10px)
}
#progress dt {
opacity:1;
width:180px;
right:-80px;
clip:rect(-6px,90px,14px,-6px)
}
#-moz-keyframes pulse {
30% {
opacity:1
}
60% {
opacity:0
}
100% {
opacity:1
}
}
#-ms-keyframes pulse {
30% {
opacity:.6
}
60% {
opacity:0
}
100% {
opacity:.6
}
}
#-o-keyframes pulse {
30% {
opacity:1
}
60% {
opacity:0
}
100% {
opacity:1
}
}
#-webkit-keyframes pulse {
30% {
opacity:.6
}
60% {
opacity:0
}
100% {
opacity:.6
}
}
#keyframes pulse {
30% {
opacity:1
}
60% {
opacity:0
}
100% {
opacity:1
}
}
#progress.waiting dd,#progress.waiting dt {
-moz-animation:pulse 2s ease-out 0s infinite;
-ms-animation:pulse 2s ease-out 0s infinite;
-o-animation:pulse 2s ease-out 0s infinite;
-webkit-animation:pulse 2s ease-out 0s infinite;
animation:pulse 2s ease-out 0s infinite
}
Javascript:
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
});

Related

How can I Integrate this code in .html file and .ts file?

I want to drag and drop functionality using this below URL into .html(which contains the drag and drop element) and .ts file(file contains the backend part)
https://www.npmjs.com/package/material-ui-dropzone
You don't need to use an npm package for this check out my example here
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
let uploadProgress = []
let progressBar = document.getElementById('progress-bar')
function initializeProgress(numFiles) {
progressBar.value = 0
uploadProgress = []
for(let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}
function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
console.debug('update', fileNumber, percent, total)
progressBar.value = total
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
let img = document.createElement('img')
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}
function uploadFile(file, i) {
var url = 'the service url to upload the file'
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', url, true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
xhr.upload.addEventListener("progress", function(e) {
updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
})
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
updateProgress(i, 100) // <- Add this
}
else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
}
})
formData.append('upload_preset', 'ujpu6gyk')
formData.append('file', file)
xhr.send(formData)
}
body {
font-family: sans-serif;
}
a {
color: #369;
}
.note {
width: 500px;
margin: 50px auto;
font-size: 1.1em;
color: #333;
text-align: justify;
}
#drop-area {
border: 2px dashed #ccc;
border-radius: 20px;
width: 480px;
margin: 50px auto;
padding: 20px;
}
#drop-area.highlight {
border-color: purple;
}
p {
margin-top: 0;
}
.my-form {
margin-bottom: 10px;
}
#gallery {
margin-top: 10px;
}
#gallery img {
width: 150px;
margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;
}
.button {
display: inline-block;
padding: 10px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ccc;
}
.button:hover {
background: #ddd;
}
#fileElem {
display: none;
}
<div id="drop-area">
<form class="my-form">
<p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select some files</label>
</form>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery" /></div>
</div>

Angular material progress spinner

Does anyone know how to show the incomplete portion in material progress spinner when the mode is determinate.Now I'm getting like this
.
but I want like this
This can be done but it's mostly a hack. The idea is to use a div with a border that matches the spinner and place it behind the spinner.
Example on StackBlitz
<div class="spinner-container">
<div class="spinner-background">{{spinner.value}}%</div>
<mat-progress-spinner #spinner
color="primary"
mode="determinate"
value="75">
</mat-progress-spinner>
</div>
The trick is the div styling, which needs to be sized and positioned to match your spinner exactly:
.spinner-container {
position: relative;
}
.spinner-background {
position: absolute;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
overflow: hidden;
border-color: rgba(103, 58, 183, 0.12);
border-radius: 50%;
border-style: solid;
border-width: 10px;
}
EDIT:
I built a simple wrapper component for this that handles sizing and theme coloring automatically:
StackBlitz
spinner-container.ts:
import { coerceNumberProperty } from '#angular/cdk/coercion';
import { AfterViewInit, Component, ElementRef, Input, SimpleChanges } from '#angular/core';
import { CanColor, mixinColor, ThemePalette } from '#angular/material/core';
const BASE_SIZE = 100;
const BASE_STROKE_WIDTH = 10;
export class SpinnerContainerBase {
constructor(public _elementRef: ElementRef) { }
}
export const _SpinnerContainerMixinBase = mixinColor(SpinnerContainerBase, 'primary');
/**
* #title Progress spinner container for spinner circle background and value display
*/
#Component({
selector: 'spinner-container',
templateUrl: 'spinner-container.html',
styleUrls: ['spinner-container.scss'],
host: {
'class': 'spinner-container',
'[style.width.px]': 'diameter',
'[style.height.px]': 'diameter',
'[style.line-height.px]': 'diameter'
}
})
export class SpinnerContainer extends _SpinnerContainerMixinBase implements AfterViewInit, CanColor {
constructor(public _elementRef: ElementRef) {
super(_elementRef);
}
#Input() color: ThemePalette = 'primary';
#Input()
get diameter(): number { return this._diameter; }
set diameter(size: number) {
this._diameter = coerceNumberProperty(size);
}
private _diameter: number = BASE_SIZE;
#Input() displayWith: (number) => string | number;
#Input()
get strokeWidth() { return this._strokeWidth; }
set strokeWidth(newValue: number) {
if (newValue) {
this._strokeWidth = Math.min(this.diameter / 2, coerceNumberProperty(newValue));
if (this._spinnerBackgroundElement) {
this._spinnerBackgroundElement.style.borderWidth = this.strokeWidth + 'px';
}
}
}
private _strokeWidth: number = BASE_STROKE_WIDTH;
#Input()
get value(): number { return this._value; }
set value(newValue: number) {
this._value = Math.max(0, Math.min(100, coerceNumberProperty(newValue)));
}
private _value: number = 0;
private _spinnerBackgroundElement: HTMLElement;
ngAfterViewInit() {
this._spinnerBackgroundElement = this._elementRef.nativeElement.querySelector('.spinner-background');
this._spinnerBackgroundElement.style.borderWidth = this.strokeWidth + 'px';
}
}
spinner-container.html
<div class="spinner-value" *ngIf="displayWith">{{displayWith(value)}}</div>
<div class="spinner-background"></div>
<mat-progress-spinner
[color]="color"
[diameter]="diameter"
mode="determinate"
[strokeWidth]="strokeWidth"
[value]="value">
</mat-progress-spinner>
spinner-container.scss
:host {
display: block;
position: relative;
.spinner-value, .spinner-background {
position: absolute;
width: inherit;
height: inherit;
}
.spinner-value {
text-align: center;
overflow: hidden;
}
.spinner-background {
opacity: .12;
box-sizing: border-box;
border-radius: 50%;
border-style: solid;
}
}
_spinner-container-theme.scss
#mixin spinner-container-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
.spinner-background {
.spinner-container.mat-primary & {
color: mat-color($primary);
}
.spinner-container.mat-accent & {
color: mat-color($accent);
}
.spinner-container.mat-warn & {
color: mat-color($warn);
}
}
}

Responsive website turns white on iPhone

I am making a responsive website, which works on different screens on pc's.
But my media query for the iPhone seems to work not properly. When I launch the website it displayed incorrect. When I refresh 2 things can happen: It turns into the correct display, or it turns the whole page white. Refreshing then keeps the screen white.
This is my css media query:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
body
{
overflow-x:hidden;
}
section#info
{
width:90%;
font-size:350%;
height:auto;
font-family:Futura;
}
section#infoMeenemen
{
width:90%;
font-size:350%;
height:auto;
font-family:Futura;
}
nav
{
min-width:90%;
top:12.5%;
margin-left:2.5%;
font-size:175%;
font-family:Futura;
}
div#navigationSection
{
min-height:300px;
}
div#newsSection
{
min-height:430px;
font-size:175%;
}
section#news
{
padding-top:6%;
text-align:center;
font-family:Futura;
font-size:1.3em;
}
section#food
{
text-align:center;
}
#imgLunch
{
display:block;
margin-left:0%;
min-width:100%;
}
#imgHightea
{
display:block;
margin-left:0%;
min-width:100%;
}
#imgLekkers
{
display:block;
margin-left:0%;
min-width:100%;
}
section#food
{
font-size:300%;
font-family:Futura;
}
section#food img
{
min-width:80%;
}
footer
{
font-size:150%;
height:600px;
}
#footerBack
{
background-color:black;
}
article#tijden
{
margin-left:4%;
float:left;
width:40%;
}
article#informatie
{
float:left;
width:40%;
}
article#werken
{
width:80%;
}
footer article
{
height:auto;
font-family:Futura;
color:white;
}

HTML5 Video Rails

I am confuse on how to use html5 video tags with rails. I few questions
1- What is a source file .ogg?? Can't I just use a mp4 file and insert it in my video tags.
2- If i want to show video/image to all member it should be in public? Then how do i access public, and how do i access video in a different folder such as assert/video if i create it.
3- I have the following file but doesn't show anything any file any reason why?
4- Do i need to code it to encode the video first? or just insert it into a file. Is ogg a good encoder or zencoder better?
Javascript (application.js)
function init() {
if( !document.createElement('video').canPlayType ) return;
var videos = document.querySelectorAll( 'div.video' ),
videosLength = videos.length;
for( var i=0; i < videosLength; i++ ) {
var root = videos[i];
video = root.querySelector( 'video' ),
play = document.createElement( 'button' ),
mute = document.createElement( 'button' );
video.controls = false;
// Initial class name
play.className = 'video-button video-play';
play.innerHTML = play.title = 'Play';
play.onclick = function() {
if( video.paused ) {
video.play();
// Additional class names for container and button while playing
root.className += ' video-on';
play.className += ' video-play-on';
play.innerHTML = play.title = 'Pause';
} else {
video.pause();
// Remove additional class names for container and button in paused state
root.className = root.className.replace( ' video-on', '' );
play.className = play.className.replace( ' video-play-on', '' );
play.innerHTML = play.title = 'Play';
}
}
// Initial class name
mute.className = 'video-button video-mute';
mute.innerHTML = mute.title = 'Mute';
mute.onclick = function() {
if( video.muted ) {
video.muted = false;
// Remove additional class name in unmuted state
mute.className = mute.className.replace( ' video-mute-on', '' );
mute.innerHTML = mute.title = 'Mute';
} else {
video.muted = true;
// Additional class name for button in muted state
mute.className += ' video-mute-on';
mute.innerHTML = mute.title = 'Unmute';
}
}
root.appendChild( play );
root.appendChild( mute );
}
}
window.onload = init;
HTML (index.html.erb)
<video controls poster="video/video.jpg" width="854" height="480">
<source src="m/video.ogv" type="video/ogg">
<source src="video/trailer_test.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" data="m/player.swf" width="854" height="504">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=video.mp4">
<!--[if IE]><!--><param name="movie" value="m/player.swf"><!--<![endif]-->
<img src="m/video.jpg" width="854" height="480" alt="Video">
<p>Your browser can’t play HTML5 video. Download it instead.</p>
</object>
</video>
CSS (application.css)
body {
margin:0;
padding:50px;
background:#444;
}
/* Video */
.video {
position:relative;
overflow:hidden;
float:left;
background:#000;
color:#fff;
}
.video video {
display:block;
opacity:.4;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear;
}
.video:hover video {
opacity:.6;
}
.video-on video,
.video-on:hover video {
opacity:1;
}
/* Button */
.video-button {
position:absolute;
z-index:1;
border:none;
background:#CCC;
text-indent:-9999px;
cursor:pointer;
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
transform:scale(1.0);
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear;
}
.video-button:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
}
.video-button:after {
position:absolute;
background:url(i/buttons.png) no-repeat;
content:'';
}
/* Play */
.video-play {
bottom:30px;
left:30px;
-webkit-box-shadow:0 0 50px #FFF,
inset 5px 5px 20px #444,
inset 0 -20px 40px #000;
-moz-box-shadow:0 0 50px #FFF,
inset 5px 5px 20px #444,
inset 0 -20px 40px #000;
box-shadow:0 0 50px #FFF,
inset 5px 5px 20px #444,
inset 0 -20px 40px #000;
width:50px;
height:50px;
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
}
.video-play:after {
top:15px;
left:16px;
width:21px;
height:21px;
background-position:0 0;
}
.video-play-on:after {
background-position:-23px 0;
}
/* Mute */
.video-mute {
bottom:35px;
left:100px;
-webkit-box-shadow:0 0 30px #FFF,
inset 4px 4px 15px #444,
inset 0 -15px 35px #000;
-moz-box-shadow:0 0 30px #FFF,
inset 4px 4px 15px #444,
inset 0 -15px 35px #000;
box-shadow:0 0 30px #FFF,
inset 4px 4px 15px #444,
inset 0 -15px 35px #000;
width:38px;
height:38px;
-webkit-border-radius:19px;
-moz-border-radius:19px;
border-radius:19px;
}
.video-mute:after {
top:13px;
left:11px;
width:17px;
height:14px;
background-position:0 -21px;
}
.video-mute-on:after {
background-position:-18px -21px;
}
Any help is appreciated!
> 1- What is a source file .ogg?? Can't I just use a mp4 file and insert it in my video tags.
Yes you can just use mp4. See the Rails API on video_tag. It works with mp4. http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-video_tag
> 2- If i want to show video/image to all member it should be in public? Then how do i access public, and how do i access video in a different folder such as assert/video if i create it.
An easy way to do this is to use the paperclip gem for handling the video uploads. Very easy to grab the url you need to play it.
> 3- I have the following file but doesn't show anything any file any reason why? > 4- Do i need to code it
If you are using mp4 in HTML5, you just need the video_tag, you don't need any of this

2 colors + different weight on one element using spans

trying to get the span to use the lighter weigth and be a different color
sIFR.replace(xxx, {
selector: 'h1#logo',
css: [
'.sIFR-root { font-size:44px; font-weight:Bold; font-family : Gotham Bold; color:#17140c; letter-spacing:-2; text-transform: uppercase; margin: 0 !important;'
]
,filters: {
DropShadow: {
distance: 1
,color: '#f5f5f5'
,strength: 2
,alpha: .5
,blurX: 0
,blurY: 0
}
}
,wmode: 'transparent'
});
sIFR.replace(xxx, {
selector: 'h1#logo span.thin',
css: [
'.sIFR-root { font-size:14px; font-family : Gotham Light !important; color:#ddd; letter-spacing:-2; text-transform: uppercase; margin: 0 !important;'
]
,filters: {
DropShadow: {
distance: 1
,color: '#f5f5f5'
,strength: 2
,alpha: .5
,blurX: 0
,blurY: 0
}
}
,wmode: 'transparent'
});
The first replacement already replaces the entire <h1>. Put in a new CSS selector within the css argument to sIFR.replace() for .thin that has the Light font family.

Resources