Text Field Auto CSS

.t-Form-inputContainer input[type="text"], .t-Form-inputContainer input.text_field,

.t-Form-inputContainer input.password, .t-Form-inputContainer textarea.textarea,

.t-Form-inputContainer input.datepicker, .t-Form-inputContainer span.display_only,

.t-Form-inputContainer input.popup_lov, .t-Form-inputContainer select,

.u-TF-item--text, .u-TF-item--textarea, .u-TF-item--datepicker, .u-TF-item--select {

    width: 100px;

    box-sizing: border-box;

    border: 5px solid #ccc;

    border-radius: 10px;

    font-size: 16px;

    background-color: white;

    background-position: 10px 10px; 

    background-repeat: no-repeat;

    padding: 12px 20px 12px 40px;

    -webkit-transition: width 0.4s ease-in-out;

    transition: width 0.4s ease-in-out;

}

input[type=text]:focus {

    width: 100%;

}

Date Picker and Interactive Report Manu Over Lapping Problem in Oracle Apex

If any where over all date picker day and interactive report manu then you can try like this.
Go to report  User Interface then  select Display Point: body and Template : Form Region.

Then save and try.

Date Picker Month and Year Navigation in Oracle Apex

In this picture here we see Month and Year Navigation bar. Normally in apex it is not available.  But it can enable.
1. Goto date picker setting then select Navigation list for : month and year
 and set range of year.

How To Create a Scroll Top/Down/Right/Left for a Report in Oracle Apex

How To Create a Scroll Top/Down/Right/Left for a Report in Oracle Apex

1. First goto Report Attribute 
2. Goto Heading and Fixed to: Region
3. Then set a suitable Maximum Report Height. 
4.Then goto pagination and set pagination  type: Row Ranges X to Y Of Z to showing report next button. 

Invalid set of rows requested, the source data of the report has been modified. Reset Pagination

Invalid set of rows requested, the source data of the report has been modified.
Reset Pagination

It's a very common problem. But still many of us have not any more idea about this. Actually it's happen for data page structure. Some times when we see more(next page) values from a report and then load another page like the same report then it might by seen this problem. After clicking "Reset Pagination" you may get the value. To solve this problem you can try this.

1. Create a  Page Processing Branch  and set Branch Point After Processing. 

2. Go Action and set Target type : Page in this Application.  And finally click radio button      reset pagination for this page 

3. Now save the process and load the page this time you will not face the problem..

Fixed a Static Value to Get data In Oracle Apex 5

Now I am going to describe about a Fixed static value by which we can retrieve data from database by Select List, Popup Lov.
Here I show an example too.
1. First Create a item with  Select List /Popup Lov and set a static value in Default option Default value.
2. Then make a query like this

    select 'ALL' ret ,'ALL' dis   from dual 
   union all
   select column_name ret , column_name dis  from TABLE  ;
Now you can get data respecting this query and by showing Static Value.

MongoDB Tutorial PDF (Know about MongoDB)

MongoDB is a NoSQL and open source document database. MongoDB is developed by 10gen in 2007 and release in 2009. Using MongoDB create and deploy high scale able and performance-oriented database.
Here I provide you an excellent PDF tutorial to learn MONGODB easily. I am studying this PDF and get a lot of idea and learn many things from this PDF.   DOWNLOAD PDF

Changing Oracle HTTP port

set your new port in the parameter place

Upload an Excel file into an Apex Collection Using Plugins

First download the Plugins and install to your APEX environment. Link is here  DOWNLOAD  (insert "demo" as username and password).

 1.  Create a page and a Region for uploading Excel file with a FILE BROWSE item  and a button for UPLOAD. Choose SQL insert action as Database Action. 

2.  Create a another Region for showing uploaded excel report as CLASSIC REPORT. The SQL will be like :     Select * from apex_collections ;

3.  Now create a PROCESS for the taking the PLUGIN as type Excel2Collection(Plugin). Then provide file browse item name in  BROWSE FILE give a name for COLLECTION NAME . 

4.   Now just upload a excel file then it will show in Classic Report from apex_collections table.

if you want to insert the excel data into database. Then make a database table  according to all column of the excel.

Then use query like this :  

BEGIN
   INSERT INTO DATABASE_TABLE_NAME  
(NAME OF ALL COLUMN  )

      (SELECT C001,
              C002,
              C003,
              C004
    ALL COLLECTION TABLE'S COLUMN NAME WHAT EVER YOU WANT TO INSERT
              
         FROM apex_collections
        WHERE COLLECTION_NAME = 'use the collection name what you provide at the time of calling Plugin' 
AND SEQ_ID > 1(more then 1 because row number 1 will be the column name));
END;

LAST DATE OF YEAR, FIRST DAY OF YEAR, FIRST FRIDAY OF YEAR, SECOND FRIDAY OF YEAR IN ORACLE SQL

SELECT ADD_MONTHS (TRUNC (SYSDATE, 'YEAR'), 12) - 1 "LAST DATE OF YEAR"
  FROM DUAL;

SELECT TRUNC (SYSDATE, 'YEAR') "FIRST DAY OF YEAR" FROM DUAL;

SELECT NEXT_DAY (TRUNC (SYSDATE, 'YEAR'), 'FRIDAY') "FIRST FRIDAY OF YEAR"
  FROM DUAL;


SELECT NEXT_DAY (NEXT_DAY (TRUNC (SYSDATE, 'YEAR'), 'FRIDAY'), 'FRIDAY')
          "SECOND FRIDAY OF YEAR"
  FROM DUAL;

Create Same Table and Insert Data One Table to Another Table

Create a Table as same as another table:

create table new_table as ( select * from old_table); 

and then insert

insert into new_table ( select * from old_table);

If you want to create table without data . You can use :

create table new_table as ( select * from old_table where 1=0);

Copy Table From Database to Another Database Using Copy SQLPlus Command

Using SQLPlus copy command

SQL> COPY {FROM database | TO database | FROM database TO database} {APPEND|CREATE|INSERT|REPLACE} destination_table [(column, column, column, ...)]
USING query

example - (from any machine in your network)

SQL> copy from hr/hr@orcl to scott/tiger@orcl2 create employees_copy using 

select * from employees ;


Be carefull- SQLPlus COPY supports only the following datatypes:

    CHAR
    DATE
    LONG
    NUMBER
    VARCHAR2

How to make a boot able pen drive

How to make a boot able pen drive: 
cmd: diskpart
:list disk
:select disk (number of your pen drive like; 1) (Please be careful to select disk, Disk 0 is always may hard disk) 
:clean ( to format all )
:create partition primary
:active
:format fs=fat32 quick 
:assign

Email Validation in Oracle Apex 5

Steps...

Step 1. Create a item type as Textfield .
Step 2. Create Validation on this Textfield and select Validation>>Type >> Item Match Regular Expression.
Step 3. Then type this code in Regular Expression .Always Execute will >>No

Email Validation Expression:

^[a-zA-Z0-9][a-zA-Z0-9\.\-]{1,}@[a-zA-Z]{1}[a-zA-Z\.\-]{1,}\.{1}([a-zA-Z]{3,3}|[a-  zA-Z]{2,2}\.{1}[a-zA-Z]{2,2})$

Step 4. Give a Error Message for wrong email type. And Display Location will inline with Field and in Notification. 

It will work. I guess. 

How to Create Modal or Popup or Dialog in Oracle apex by Java script

Steps...

Step 1.  First create a region and give it a Static ID like random word  modal . Then you can do anything what you need to show in our dialog.
Step 2. Then create a button or any other item to calling a Dynamic Action.
Step 3. Now create a Dynamic Action on this item select Execute Java Script Code as Action.
         and use this code :
   $('#modal').dialog({ "title":"Group","minheight":"60%", "width":"50%", "position":"top" }); 

    Or

 javascript:openModal('modal');

End of this steps  Execute the item. Comment for any query.

User Image Show in Navigation Bar

1. Create application item name > 'FILE_ID',> Session State Protection > Unrestricted.

2. Create Application Processes > 'GETIMAGE',> Process Point > Ajax Callback, > PL/SQL Code >

begin

    for c1 in (select * from table_name

                where column_id = :FILE_ID) loop

        --

        sys.htp.init;

        sys.owa_util.mime_header( c1.PIC_TYPE, FALSE );

        sys.htp.p('Content-length: ' || sys.dbms_lob.getlength( c1.PIC));

        sys.htp.p('Content-Disposition: attachment; filename="' || c1.PIC_NM || '"' );

        sys.htp.p('Cache-Control: max-age=3600');  -- tell the browser to cache for one hour, adjust as necessary

        sys.owa_util.http_header_close;

        sys.wpg_docload.download_file( c1.PIC );

     

        apex_application.stop_apex_engine;

    end loop;

end;

3. Create/Select navigation bar where you want to show image > User Defined Attributes 1.

<img style="width:35px;height:35px;border-radius:50%;background" 

src="f?p=&APP_ID.:0:&APP_SESSION.:APPLICATION_PROCESS=GETIMAGE:::FILE_ID:&APP_USER." alt="No Image">

How to do Tooltip on Oracle apex 5

----For Element Custom Attributes ----
-----------------Uning Tooltip----------------------
Use this function:

onmouseover="toolTip_enable(event,this,'This is a tooltip')"

IMAGE SHOW ON SINGLE ITEM STEP BY STEP ON ORACLE APEX 5

 1.FIRST INPUT THE FOLLOWING CODE IN PAGE HTML HEADER

 <script type="text/javascript">

function getImage(event) {
    var P35_IMAGE = document.getElementById('P35_IMAGE');
    P35_IMAGE.style.width = "150px";
    P35_IMAGE.style.height = "175px";
    P35_IMAGE.title="Customer Photo";
    P35_IMAGE.src = URL.createObjectURL(event.target.files[0]);
}
</script>

2. THEN INPUT THE BELOW CODE ON SINGLE ITEM ON PRE ELEMENT TEXT

<div id="select-img">
<img id="P35_IMAGE"/>

3. THEN CLOSE THE CODE  POST ELEMENT TEXT
</div>

4. THEN CALL THE FUNCTION ON BROWSE ITEM ON CHANGE EVENT  ON HTML Form Element Attributes

onchange="getImage(event);"

select rowid,
        JOB_ID,
       JOB_TITLE,
       MIN_SALARY,
       MAX_SALARY,
      '<img src="'||APEX_UTIL.GET_BLOB_FILE_SRC('P35_IMAGE',JOB_ID)||'"/>'   "IMAGE"
  from JOBS
;

Zoom in on Click and Zoom out on Another Click in Oracle Apex 5 using JavaScript

Steps :

1. Copy the code to your page HTML HEADER

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function()

{

$("#image").css("width", "800px");

$("#image").toggle(function()

{

$(this).animate({width: "100%"}, 1000);

$('p').text("Click To Zoom Out");

}, function(){

$(this).animate({width: "800px"}, 1000);

$('p').text("Click To Zoom In");

});

});

</script>

1. Put this  id="image"   in your photo retrieving SQL Query 

Then try it.

Image Memory Size limitation at Upload time on Oracle Apex 5

To make a limitation on uploading image on Oracle Apex 5. You can do this steps.
Step-1
Select the File Browser field and Create a Validation
Step-2
Then  Validation>> Type >> PL/SQL Function (Return Error Type)
and pest the code:

 declare
 cursor c is 
 select doc_size
 from apex_application_files
 where name = :P18_IMAGE; -- where write the name of file upload field
 v_size number := 0;
 v_msg varchar2(100);
begin

open c; 
fetch c into v_size; 
close c;
  
if (v_size < 51200) then -- (50 kb*1024 byte=51200)
  v_msg  := 'Image must be at least 50KB!';
  DELETE from APEX_APPLICATION_FILES WHERE name = :P18_IMAGE;  ---where write the name of file upload field
  return v_msg;
elsif (v_size > 204800) then -- (200 kb*1024 byte=51200)
  v_msg  := 'Image size cannot be more than 200kb!';
  DELETE from APEX_APPLICATION_FILES WHERE name = :P18_IMAGE;
-- where write the name of file upload field
  return v_msg;
end if;

--:p15_rcremark := :P15_RCAPPIMG_temp;
end;

Then save the page and try.

How to create a popup page / modal dialog manually in oracle apex using open()

Manual definition of  window.open() ;

1. Go to the page from where you want to open a popup. Open it in edit mode.
2. Go to to Page section -> HTML Header.
3. Paste the following java-script.

-- Start script

  <script language="JavaScript" type="text/javascript">

  function callMyPopup (puniq_id) {

 -- parameters are not mandatory  
  var url;

  url = 'f?p=&APP_ID.:27:&APP_SESSION.::::P27_QUNIQ_ID:'+ puniq_id ;

   -- parameters are not mandatory  

  w = open(url,"winLov","Scrollbars=1,resizable=1,width=925,height=400");
  

  }

  </script>

-- End Script

To more clear about WindowName,URL, WindowFeatures of this javascript function

Note :- Change the parameters accordingly in f?p
puniq_id is the parameter that will pass the value from called page to calling page. P27_QUNIQ_ID is the component in Page 27 that will show this value.

4. Go to Report Attribute.
5. Edit the column in report you want to create link.
6. Go to Column Link.
7. Enter Link text.
8. Select URL in target.
9. In URL give calling function with desired parameter.

      javascript:callMyPopup('#Question UID#'); 

 -- parameters are not mandatory  

10. Apply Changes.

Modal Images / Large Image / Image Zoom from Report In Oracle apex 5.1 with HTML,CSS,JavaScript

 Press On the Photo to See Clearly 

Modal Images /  Large Image from Report In Oracle apex 5.1 is a very interesting and different some thing. Here I give some step to do  Modal Image or Zoom Image from Report what ever you say.


1. First click on the name of the page where you create the report and go to HTML HEADER
     then write this code like this:

Press On the Photo to See Clearly 

                          IT'S  CONTAIN  CSS CLASSES  AND JAVASCRIPT FUNCTIONS
 <style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 48px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
    
    #img01{
        height: 500px;
        width:  500px;
    }    
</style>

<script type="text/javascript">
         function ShowLargeImage(image) {
var sorc = $(image).attr("src");

var modalImg = document.getElementById("img01");
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
    modal.style.display = "block";
    modalImg.src = sorc;
    span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
         }
</script>



2. Create a Report and fetch image from database using HTML <img   tag . Here need to call CSS id and JavaScript function.
Like this code:

                                                     Press On the Photo to See Clearly 


  TI'S THE SELECT QUERY  HOW TO FETCH DATA AND IMAGE FROM DATABASE TABLE

select EMPLOYEEID,
       EMPLOYEENAME,
       EMAIL,
       MOBILE,
       DEPARTMENTID,
       JOBID,
       SALARY,
       HIREDATE,
        '<img id="myImg" src="'
       || APEX_UTIL.GET_BLOB_FILE_SRC ('P8_PICTURE',EMPLOYEEID)
       || '" height="60px" width="60px"
        onclick="ShowLargeImage(this); return false;" style="cursor:pointer;"/>'

    photo
       from EMPLOYEES

3. After all create a new REGION with STATIC CONTENT Type. Then click on the name of this REGION and find out SOURCE >> TEXT from properties. 
Write this code:

                                                      Press On the Photo to See Clearly 

<div id="myModal" class="modal">
    <span class="close">&times;</span>
  <div class="modal-content">    
<img class="img" id="img01">
  </div>
      <div id="caption"></div>
</div>



(PRESS SAVE AFTER DOING EVERY CHANGE OR WRITING CODE) 

Then Run the page report and click on the Reports Image file. It will be turn to large size.

THANK YOU

Learn HTML

You can learn HTML form this link. Here are lot of html tutorial and example code which's are ready maid.
Learn HTML

Add Visitor Counter to Your Blogger Website.

Click on the button and create a CODE to make a visitor counter for your website and then Layout >> Add a GadGet copy pest the code into the gadget with suitable position.
                                             CLICK HERE

What is APEX_APPLICATION_FILES ?

In File Browse item, the files we upload are stored in a table called wwv_flow_file_objects$. Every workspace has access to this table through a view called APEX_APPLICATION_FILES.

SELECT id,name FROM APEX_APPLICATION_FILES

Run this code to the files what we uploaded in the workspace.

How to Display Javascript,html,css in Blogger Website as Post

When you write a JavaScript, HTML or CSS code in your blogspot/blogger website then the code may not show properly. So look at the image and configer like the Red border and press Done.
In Sha Allah then your all code will show your website properly.   

Upload, Show and Zoom in/out Image in Oracle Apex 5.1 step by step.

Here I write to Upload, Show and Zoom in/out Image in Oracle Apex 5.1 step by step.

1.  Create a Page >> Then create a Region with a suitable name like "Image Upload" >> Then create a Item for uploading image suitable name like "P3_Image" >> So make type as File Browse.

2. Then create another Region for showing the image with a suitable name like "Image Show".

3. Then click on then name of page and find out HTML HEADER option and write the given code.

THIS CODE IS FOR READING THE URL WHERE YOU UPLOAD THE IMAGE.HERE IS A JAVASCRIPT FUNCITON.

<script>
function readURL(input) {
if (input.files && input.files[0])
{
var reader=new FileReader();
reader.onload = function(e){
$('#myImg')
.attr('src',e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}

</script>

4. Now click on the second region call "Image Show" and find out SOURCE option TEXT.     here write the code.

THIS CODE IS FOR SHOW THE IMAGE WITH  ZOOM AND ZOOM OUT. HERE IS TWO JAVASCRIPT FUNCTION AND TWO CLASS OF CSS.

<head>
<script>

function zoom(){
var divlClass=$('#myDiv').attr('class');
if (divlClass==="ex"){
$('#myDiv').css('cursor','zoom-in');}else
if ( divlClass=== "exZoom" ) {
$('#myDiv').css('cursor','zoom-out');}
}


function my_class(){
var divlClass= $('#myDiv').attr('class');
if(divlClass=== "ex"){
$("#myDiv").removeClass("ex");
$("#myImg").removeClass("ex");
$("#myDiv").addClass("exZoom");
$("#myImg").addClass("exZoom");} else
if(divlClass==="exZoom"){
$("#myDiv").removeClass("exZoom");
$("#myImg").removeClass("exZoom");
$("#myDiv").addClass("ex");
$("#myImg").addClass("ex");}
}
</script>

    <style>
    .ex
    {
    height:120px ;
    width:150px;
    padding:2px ;
    }
    .exZoom 
    {
    height:1000px;
    width:1000px;
    padding:0px;
    }

    </style>
    </head>
    <div align="center">
    <div id="myDiv" class="ex">
    <img id="myImg" class="ex" onmouseover="zoom();" onClick="my_class(); zoom();" src="#" alt="" />

    </div> </div>

Watch Video To get all code's more fresh click here

5. And Finally go to the first region and the item what you was create.Click on the item and Find out "CUSTOM ATTRIBUTE" and write the code.

onchange="readURL(this);" onload="readURL(this);"

DON'T FORGET TO SAVE PAGE AFTER DOING EVERY TASK