Trigger a file download when clicking an HTML button

We can use HTML5 download attribute to simply download a file on a button click.

This download attribute is used in an anchor tag to prepare the location of the file that has to be a downloaded.  The name of the file needs to be the value of the attribute.

<a download="filename">

filename: attribute specifies the name for the file that will be downloaded.

Share your solutions!   

Video mute or unmute with jQuery

Initially when the video is loaded it will be mute.  If user wants then click on the unmute button to listen the sound.

There is a button used with id #mute-video, its a toggle button which will work both ways mute and unmute.  

Simple condition in the jquery for the video element with property muted true or false will do the magic for you.  

In the below code you will find another line removeClass(muteOn) and addClass(muteOff), that is used for adding and removing a class to the button element.  Using that class you can style the button with mute/unmute icon.

HTML

<button id="mute-video">Toggle Mute</button>

  <video controls="" src="http://s3.amazonaws.com/servingsites-videos/firstbaptistchurchofnorfolk/sample-welcome-video-2.mp4" width="240"></video>

JQUERY SCRIPT

  $("#hero-video-wrapper").prop('muted', true);

$("#toggleMuteBtn").click( function (){

    if( $("#hero-video-wrapper").prop('muted') ) 

    {

        $("#hero-video-wrapper").prop('muted', false);

$(this).removeClass("muteOn").addClass("muteOff");

    }

    else {

    $("#hero-video-wrapper").prop('muted', true);

$(this).removeClass("muteOff").addClass("muteOn");

    }

});

Equal placement of list items horizontally from left edge to right edge

 I wanted to place <li> elements which I used in a horizontal menu to be distributed evenly across the full width of the parent element <ul>.  I used to float my elements from left and add margins for the space in between the each element or I used to display:inline-block;  <li> elements and give text-align:center; to the parent <ul>. 

But again it places the items in middle, this was not I was looking for I wanted to distribute the items in complete width form left edge to the right edge.

Following is the css you can use to simply arrange the items from left to the right edge with equal spacing.

ul{ display:block; clear:both; width:70%; display: flex; justify-content: space-between; padding:0; }

display:flex; and justify-content:space-between will do the magic for you.

Share Your Solutions!