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