Javascript S1E6 : Materializecss – Content Modals with Image and Texts

Javascript S1E6 : Materializecss – Content Modals with Image and Texts



Rating : 5/5 (1)




Introduction

In this tutorial we'll make a sortable list of materialize cards. The cards will be rendered in a two column list, as grids. Each card will comprise title, description and action buttons. Wehen one action button is clicked, we get the title while when another is clicked we get the description. We then have two buttons for sorting our cards in either ascending or descending manner.
We use Materializecss to theme our app.

Questions this Project answers.

  • Material design cards with action buttons.
  • Materializecss action cards.
  • Two column list in css.
  • Grid list with material cards.
  • Material cards sort ascending and descending javascript.

Libraries Used

These are the third parties used in this project.

Screenshots

  • Here's the screenshot of the project.

Project Structure

Tools used

Language: Javascript,HTML,CSS
IDE: PHPStorm.
Topic: Javascript Modals,Materializecss Modals.

Source Code

Lets have a look at the source code.

index.htmlmain.jsVideo TutorialDownload
  • Our html markup.
  • First we reference.
  • Define our navigationbar.
  • Define content section. where we will have a button to display our modal when clicked.
  • Define footer.
  • Import scripts
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Camposha.info </title>
    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="assets/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    <link href="assets/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<!--NAVIGATION BAR-->
<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="" class="brand-logo">Camposha.info</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
        </ul>
        <a href="" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>
<!--CONTAINER-->
<div class="container">
    <h3 class="header center orange-text">Javascript Materialize Modals</h3>
    <h5 class="center light-blue-text"><i>Materialize Modals with header, footer and Callbacks</i></h5>
    <p class="left">Modals can be used for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal
        to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class .modal-close
        to your button.</p>
    <div class="center">
        <!-- Modal Trigger -->
        <button data-target="modal1" class="btn center modal-trigger">Open Modal</button>
    </div>
    <!-- Modal Structure -->
    <div id="modal1" class="modal modal-fixed-footer">
        <div class="modal-content">
            <!--Modal header-->
            <h4>Cosmos Redshift(CR7)</h4>
            <!--Modal content-->
            <p>Cosmos Redshift 7 (also known as COSMOS Redshift 7, Galaxy Cosmos Redshift 7, Galaxy CR7 or CR7) is
                a high-redshift Lyman-alpha emitter galaxy (meaning CR7 is one of the oldest, most distant galaxies),
                in the constellation Sextans, about 12.9 billion light travel distance years from Earth, reported to
                contain the first stars (first generation; Population III)—formed soon after the Big Bang during the
                reionisation epoch (redshift, z ∼ 6−7),[1] when the Universe was about 800 million years old—to have
                provided the chemical elements (like oxygen, nitrogen, carbon, calcium and iron) needed for the later
                formation of planets and life as it is known.</p>
            <img src="assets/img/cosmos_redshift.jpg">
            <p>Galaxy Cosmos Redshift 7 is reported to be three times brighter than the brightest distant galaxy known
                up to the time of its discovery and to contain some of the earliest first stars that produced the chemical
                elements needed for the later formation of planets and life as it is known</p>
        </div>
        <!--Modal Footer-->
        <div class="orange modal-footer">
            <a href="#!" id="agreeBtn" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
            <a href="#!" id="disagreeBtn"
               class="modal-action modal-close waves-effect waves-green btn-flat ">Disagree</a>
        </div>
    </div>
</div>
<br>
<br>
<br>
<br>
<br>
<!--FOOTER-->
<footer class="page-footer orange">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5 class="white-text">Company Bio</h5>
                <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's
                    our full time job.</p>
            </div>
            <div class="col l3 s12">
                <h5 class="white-text">Languages</h5>
                <ul>
                    <li><a class="white-text" href="#!">Javascript</a></li>
                    <li><a class="white-text" href="#!">PHP</a></li>
                    <li><a class="white-text" href="#!">Java</a></li>
                    <li><a class="white-text" href="#!">C#</a></li>
                </ul>
            </div>
            <div class="col l3 s12">
                <h5 class="white-text">Connect</h5>
                <ul>
                    <li><a class="white-text" href="#!">Facebook</a></li>
                    <li><a class="white-text" href="#!">Twitter</a></li>
                    <li><a class="white-text" href="#!">Google Plus</a></li>
                    <li><a class="white-text" href="#!">LinkedIn</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>
<!--REFERENCE SCRIPTS-->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/materialize.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

 

  • Our mainClass.
  • We have one method here: initializeApp().
  • We initialize our modal here and handle our button callbacks
/*
- Our mainClass.
- We have one method here: initializeApp().
- We initialize our modal here and handle our button callbacks
 */
var mainClass= function () {
    this.initializeApp=function()
    {
        $(document).ready(function(){
            // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
            $('.modal').modal();
            //clicks agree
            $('#agreeBtn').on('click',function(){
                alert("Alright agreed");
            });
            $('#disagreeBtn').on('click',function(){
                alert("Disagreed");
            });
        });
    }
}
//Initailize app
m=new mainClass();
m.initializeApp();

 

  • We have a youtube channel with over 600 video tutorials as of now. We add videos almost on a daily basis and we explain everything in details.We take a practical approach instead of so much theory. So please subscribe to stay tuned.
  • Otherwise below is the detailed video version of this tutorial.

Javascript S1E6 : Materializecss - Content Modals with Image and Texts

  • Download the Project below.
Download

How to Download and Run.

  1. Download the project above.
  2. You'll get a zipped file,extract it.
  3. You'll have three files : html,css and javascript.
  4. Place them in a folder and run the index.html file.That's it.

More

  • Visit our channel for more examples like these.
  • Lets share tips and ideas in our Facebook Page.

Oclemy,Cheers.



Rating :

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    18 + fifteen =

    COMMENTS