Media-Queries

 

 

a) The Standard Breakpoints. Working with fluid images.


@media all and (max-width: 1690px) { ...}
@media all and (max-width: 1280px) { ...}
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }


b) The Standard Breakpoints. But possibly this is a slightly complicated situation.

@media all and (min-width:1200px){ ... }
@media all and (min-width: 960px) and (max-width: 1199px) { ... }
@media all and (min-width: 768px) and (max-width: 959px) { ... }
@media all and (min-width: 480px) and (max-width: 767px){ ... }
@media all and (max-width: 599px) { ... }
@media all and (max-width: 479px) { ... }




c) The Standard Bootstrap 3.x Breakpoints

@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 480px) { ... }

d) The Standard Bootstrap 4.x Breakpoints

@media all and (max-width: 1199px) { ... } 
@media all and (max-width: 991px) { ... } 
@media all and (max-width: 768px) { ... } 
@media all and (max-width: 575px) { ... }
 
e) The Material Design Lite (MDL) Breakpoints 

@media all and (max-width: 1024px) { ... } 
@media all and (max-width: 839px) { ... } 
@media all and (max-width: 480px) { ... }


f) Retina Breakpoints(@2x)

@media(-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-resolution:1.5dppx){ ... }

Insecure password warning in Firefox

Solve in 5 step:

step 1 : open a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful.

step 2 : In the search box above the list, type or paste insec and pause while the list is filtered

 

step 3: Double-click the security.insecure_field_warning.contextual.enabled preference to switch the value from true to false

step 4: Double-click the security.insecure_password.ui.enabled preference to switch the value from true to false

Done.

 

 

 

ffmpeg examples

Frame rates

Link to Find From — example

Create a video (using the encoder libx264) from series of numerically sequential images such as img001.png, img002.png, img003.png, etc.

Important: All images in a series need to be the same size and format.

You can specify two frame rates:

• The rate according to which the images are read, by setting -framerate before -i. The default for reading input is -framerate 25 which will be set if no -framerate is specified.
• The output frame rate for the video stream by setting -r after -i or by using the fps filter. If you want the input and output frame rates to be the same, then just declare an input -framerate and the output will inherit the same value.

By using a separate frame rate for the input and output you can control the duration at which each input is displayed and tell ffmpeg the frame rate you want for the output file. If the input -framerate is lower than the output -r then ffmpeg will duplicate frames to reach your desired output frame rate. If the input -framerate is higher than the output -r then ffmpeg will drop frames to reach your desired output frame rate.

In this example each image will have a duration of 5 seconds (the inverse of 1/5 frames per second). The video stream will have a frame rate of 30 fps by duplicating the frames accordingly:

ffmpeg -framerate 1/5 -i img%03d.png -c:v libx264 -r 30 -pix_fmt yuv420p out.mp4

Starting with a specific image

For example if you want to start with img126.png then use the -start_number option:

ffmpeg -framerate 1/5 -start_number 126 -i img%03d.png -c:v libx264 -r 30 -pix_fmt yuv420p out.mp4

If your video does not show the frames correctly

If you encounter problems, such as the first image is skipped or only shows for one frame, then use the ​fps video filter instead of -r for the output framerate (see ticket:1578 and ticket:2674 / ticket:3164 for more info):

ffmpeg -framerate 1/5 -i img%03d.png -c:v libx264 -vf fps=25 -pix_fmt yuv420p out.mp4

Alternatively the ​format video filter can be added to the ​filterchain to replace -pix_fmt yuv420p. The advantage to this method is that you can control which filter goes first:

ffmpeg -framerate 1/5 -i img%03d.png -c:v libx264 -vf "fps=25,format=yuv420p" out.mp4

Color space conversion and chroma sub-sampling

By default when using libx264, and depending on your input, ffmpeg will attempt to avoid color subsampling. Technically this is preferred, but unfortunately almost all video players, excluding FFmpeg based players, and many online video services only support the YUV color space with 4:2:0 chroma subsampling. Using the options -pix_fmt yuv420p or -vf format=yuv420p will maximize compatibility.

Using a glob pattern

ffmpeg also supports bash-style globbing (* represents any number of any characters). This is useful if your images are sequential but not necessarily in a numerically sequential order as in the previous examples.

ffmpeg -framerate 1 -pattern_type glob -i '*.jpg' -c:v libx264 out.mp4

For PNG images:

ffmpeg -framerate 1 -pattern_type glob -i '*.png' -c:v libx264 -pix_fmt yuv420p out.mp4

Using a single image as an input

If you want to create a video out of just one image, this will do (output video duration is set to 30 seconds with -t 30):

ffmpeg -loop 1 -i img.png -c:v libx264 -t 30 -pix_fmt yuv420p out.mp4

Adding audio

If you want to add audio (e.g. audio.wav) to one “poster” image, you need -shortest to tell it to stop after the audio stream is finished. The internal AAC encoder is used in this example, but you can use any other supported AAC encoder as well:

ffmpeg -loop 1 -i img.jpg -i audio.wav -c:v libx264 -c:a aac -strict experimental -b:a 192k -shortest out.mp4

If your audio file is using a codec that the output container supports (e.g. MP3 audio in AVI or M4A/AAC audio in MP4), you can copy it instead of re-encoding, which will preserve the audio quality:

ffmpeg -loop 1 -i img.jpg -i audio.m4a -c:v libx264 -c:a copy -shortest out.mp4

 compress video using ffmpeg in ubuntu

ffmpeg -i input.mp4 -b 1000000 output.mp4

 

Jquery

Scroll div to bottom

$(document).ready(function(){
var $t = $(‘#chat_viewport’);
$t.animate({“scrollTop”: $(‘#chat_viewport’)[0].scrollHeight}, “slow”);
});

Ho World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!

 

 

scroll div top to bottom and bottom to top

$(function () {
var height = 0;
function scroll(height, ele) {
this.stop().animate({ scrollTop: height }, 1000, function () {
var dir = height ? “top” : “bottom”;
$(ele).html(“scroll to “+ dir).attr({ id: dir });
});
};
var wtf = $(‘#scroll’);
$(“#bottom, #top”).click(function () {
height = height < wtf[0].scrollHeight ? wtf[0].scrollHeight : 0;
scroll.call(wtf, height, this);
});
});

 

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<span id=”bottom”>scroll to bottom</span>
<br />
<br />
<br />

There’s Plenty of Room at the Top, seriously?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at enim dignissim, eleifend eros at, lobortis sem. Mauris vel erat felis. Proin quis convallis neque, quis molestie augue. Vestibulum aliquam elit sit amet venenatis eleifend. Donec dapibus mauris ac lorem mattis pulvinar. Curabitur cursus elit commodo tellus bibendum, ut euismod nisi luctus. Pellentesque id magna nunc. Nam luctus nisi sapien, ac porta sem ultrices vitae. Suspendisse aliquet eleifend nunc, in mattis tellus dapibus rutrum. Nullam a sem venenatis, suscipit lorem eu, facilisis leo. Nunc eget eleifend magna. Curabitur dictum dui in massa vestibulum sagittis. Mauris sodales neque at tincidunt feugiat. Curabitur iaculis purus nec tortor elementum pulvinar. Donec non mattis augue.

Integer sit amet iaculis nulla. Cras vehicula nunc eu leo aliquet, et convallis erat aliquet. Aenean tempor faucibus justo, porta blandit felis semper at. Maecenas auctor nibh sit amet tellus consectetur, et varius velit iaculis. Phasellus convallis lacinia dapibus. Praesent tempus nunc elit, id volutpat tellus sagittis commodo. Vestibulum ultrices quam vel congue viverra. Integer varius diam quis tempor consequat. Integer pulvinar neque lorem, eu lobortis augue pharetra vel. Praesent ornare lacus quis nisi fermentum dignissim. Curabitur hendrerit augue eu interdum interdum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam a ex non dolor rutrum suscipit vitae sit amet nibh. Donec pulvinar odio non ultrices dignissim. Quisque in risus lobortis, accumsan ante et, pellentesque erat. Quisque ultricies tortor sed tortor venenatis posuere. Integer convallis nunc ut tellus sagittis, et imperdiet erat volutpat. Sed non maximus augue. Sed mattis ipsum sed sem rutrum, at mollis ligula facilisis. Etiam fringilla hendrerit mi eu molestie. Etiam semper feugiat nunc, eu pellentesque metus porta pretium. Duis tempor neque ut libero scelerisque euismod. Vivamus molestie, quam a mattis scelerisque, dolor turpis accumsan quam, a cursus sem quam at ex. Suspendisse congue elit quis sem scelerisque commodo.

Ut eu odio at urna hendrerit ullamcorper. Nulla ut turpis molestie diam aliquet luctus. Curabitur dignissim tellus ut porta sagittis. Vivamus ut erat ut neque consequat interdum. Duis vitae risus eget arcu pulvinar venenatis. Maecenas erat arcu, hendrerit id tortor ut, viverra elementum nibh. Nam quis metus sit amet lacus rhoncus porttitor ac non ipsum. Nullam lacus dui, tempus sed elementum ut, venenatis eget ipsum. Quisque blandit maximus enim eu porta.

Donec mollis diam eros, eu ultrices magna sollicitudin vitae. Nullam quam sapien, elementum a metus nec, facilisis scelerisque nulla. Praesent lobortis nisi ac leo laoreet, quis molestie ipsum porta. Suspendisse aliquet in velit eu ullamcorper. Maecenas auctor, mi ut viverra elementum, metus turpis commodo orci, eu commodo erat dolor malesuada arcu. Fusce condimentum augue

Voila!! You have reached the bottom, already! 🙂