Bootstrap Dynamic Tiles in Apex

How to make stylish bootstrap dynamic tiles in oracle apex ? Yes it’s possible to create a stylish bootstrap tiles in oracle apex.

Bootstrap library (JS & CSS) files to be update in apex shared components “User Interfaces“.
Create Static Content region in a page.
Update required HTML content in Source text.
Update required CSS and JS scripts in page inline css and global variable declaration area.

Demo: Click to view working demo

Bootstrap Library JS URL:-

https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js

Page Inline CSS Code:-

.dynamicTile .col-sm-2.col-xs-4{
    padding:5px;
}

.dynamicTile .col-sm-4.col-xs-8{
    padding:5px;
}

#tile1{
    background: #c74634;
    color:white;
    text-align:center;
}

#tile2{
    background: rgb(243,243,243);
}

#tile3{
    background: rgb(71,193,228);
}

#tile4{
    background-image: url('http://handsontek.net/demoimages/tiles/facebook.png');
    background-size: cover;
}

#tile5{
    background: rgb(175,26,63);
}

#tile6{
    background: rgb(62,157,215);
}

#tile7{
    background: white;
}

#tile8{
    background: rgb(209,70,37);
}

#tile9{
    background: rgb(0,142,0);
}

#tile10{
    background: #009688;
}

.tilecaption{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%); 
    margin:0!important;
    text-align: center;
    color:white;
    font-family: Segoe UI;
    font-weight: lighter;
}

Page Function and Global Variable Code:-

$( document ).ready(function() {
    $(".tile").height($("#tile1").width());
    $(".carousel").height($("#tile1").width());
     $(".item").height($("#tile1").width());
     
    $(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
	this.resizeTO = setTimeout(function() {
		$(this).trigger('resizeEnd');
	}, 10);
    });
    
    $(window).bind('resizeEnd', function() {
    	$(".tile").height($("#tile1").width());
        $(".carousel").height($("#tile1").width());
        $(".item").height($("#tile1").width());
    });

});

Page Static Region HTML Code:-

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container dynamicTile">
<div class="row ">
   <div class="col-sm-2 col-xs-4">
      <div id="tile1" class="tile">
         <div class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
               <div class="item active">
                  <img src="https://apexthamarai.files.wordpress.com/2020/06/oracle_apex_new_logo.png" class="img-responsive"/>
               </div>
               <div class="item">
                  <h1> Built with <span class="fa fa-heart" aria-hidden="true"></span> Oracle APEX </h1>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-2 col-xs-4">
      <div id="tile2" class="tile">
         <div class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
               <div class="item active">
                  <img src="http://handsontek.net/demoimages/tiles/hot.png" class="img-responsive"/>
               </div>
               <div class="item">
                  <img src="https://apexthamarai.files.wordpress.com/2020/06/thamarai_apex.png" class="img-responsive"/>
               </div>
               <div class="item">
                  <img src="http://handsontek.net/demoimages/tiles/hot3.png" class="img-responsive"/>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-2 col-xs-4">
      <div id="tile3" class="tile">
         <div class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
               <div class="item active">
                  <img src="http://handsontek.net/demoimages/tiles/weather2.png" class="img-responsive"/>
               </div>
               <div class="item">                  
                  <img src="https://apexthamarai.files.wordpress.com/2020/06/dougnut.png" class="img-responsive"/>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-2 col-xs-4">
      <div id="tile4" class="tile">
         <div class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
               <div class="item active">
                  <img src="http://handsontek.net/demoimages/tiles/facebook3.png" class="img-responsive"/>
               </div>
               <div class="item">
                  <img src="http://handsontek.net/demoimages/tiles/facebook2.png" class="img-responsive"/>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-2 col-xs-4">
      <div id="tile5" class="tile">
         <div class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
               <div class="item active">
                  <img src="http://handsontek.net/demoimages/tiles/neews.png" class="img-responsive"/>
               </div>
               <div class="item">
                  <img src="http://handsontek.net/demoimages/tiles/neews2.png" class="img-responsive"/>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-2 col-xs-4">
      <div id="tile6" class="tile">
         <div class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
               <div class="item active">
                  <img src="http://handsontek.net/demoimages/tiles/skype.png" class="img-responsive"/>
               </div>
               <div class="item">
                  <img src="http://handsontek.net/demoimages/tiles/skype2.png" class="img-responsive"/>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div class="col-sm-4 col-xs-8">
      <div id="tile7" class="tile">
         <div class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
               <div class="item active">
                  <img src="http://handsontek.net/demoimages/tiles/gallery.png" class="img-responsive"/>
               </div>
               <div class="item">
                  <img src="http://handsontek.net/demoimages/tiles/gallery2.png" class="img-responsive"/>
               </div>
               <div class="item">
                  <img src="http://handsontek.net/demoimages/tiles/gallery3.png" class="img-responsive"/>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-2 col-xs-4">
      <div id="tile8" class="tile">
         <div class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
               <div class="item active">
                  <img src="http://handsontek.net/demoimages/tiles/music.png" class="img-responsive"/>
               </div>
               <div class="item">
                  <img src="http://handsontek.net/demoimages/tiles/music2.png" class="img-responsive"/>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-2 col-xs-4">
      <div id="tile9" class="tile">
         <div class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
               <div class="item active">
                  <img src="http://handsontek.net/demoimages/tiles/calendar.png" class="img-responsive"/>
               </div>
               <div class="item">
                  <img src="http://handsontek.net/demoimages/tiles/calendar2.png" class="img-responsive"/>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-4 col-xs-8">
      <div id="tile10" class="tile">
         <div class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
               <div class="item active">
                  <h3 class="tilecaption"><i class="fa fa-user fa-4x"></i>Thamaraiselvan</h3>
               </div>
               <div class="item">
                  <h4 class="tilecaption">Oracle Application Express is a web-based software development environment that runs on Oracle database.</h4>
               </div>
               <div class="item">
                  <h3 class="tilecaption">&P1_DAILY_QUOTE.</h3>
               </div>
               <div class="item">              
                  <img src=&P1_QUOTE_BG_URL. class="img-responsive"/>
               </div>               
            </div>
         </div>
      </div>
   </div>
</div>

2 thoughts on “Bootstrap Dynamic Tiles in Apex”

Waseem says:

October 7, 2020 at 7:55 am

Thanks for sharing.
Can you please share how to enable voice activation in oracle apex

LikeLike

1. apexthamarai says:
  
  October 9, 2020 at 12:41 pm
  
  Sure Waseem, My next post will be a voice to text and search based on the text.
  
  Keep blogging!
  
  LikeLike

Oracle Apex Tutorials and Tricks

Oracle Apex is the latest one!

Bootstrap Dynamic Tiles in Apex

2 thoughts on “Bootstrap Dynamic Tiles in Apex”

Leave a Reply Cancel reply

Share this:

Like this:

2 thoughts on “Bootstrap Dynamic Tiles in Apex”

Leave a Reply Cancel reply