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

javaScript of Live Digital Clock

<table>
<td>
<tr>test</tr>
</td>
<td>
<tr>test</tr>
</td>
<td><tr>test</tr>
</td>


</table><table>
<td>
<tr>test</tr>
</td>
<td>
<tr><div style="background-color:white;  border-top:0px #996 solid; ">
<div style="text-align:center; height:20px; position:absolute;position: absolute; top: 10px;left: 50%; margin-left: -160px;font-size:16px;color:#6633FF; font-weight:bold;">&P1_COMPNAME.<br><font size='2' color='#6633FF'>&P1_COMPADD.</font>

<div

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
var don="AM"
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);

if (h>=12){ don="PM" }
if (h>12) { h-=12 }
if (h==0) { h=12 }

document.getElementById('txt').innerHTML=h+":"+m+":"+s+" "+don;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
</head>

<body onload="startTime()">
<div id="txt"> </div>
</body>
</html>

</div>

</div>

<br><br>
</div></tr>
</td>


<td><tr></tr>
</td>

</table>

Image show in Oracle Apex 5.1

Example of Image show in Oracle Apex 5.1

select EMPLOYEEID,
       EMPLOYEENAME,
       EMAIL,
       MOBILE,
       DEPARTMENTID,
       JOBID,
       SALARY,
       HIREDATE,
'<img src="'||apex_util.GET_BLOB_FILE_SRC('P8_PICTURE',EMPLOYEEID)
||'" height="100px" width="100px"'
    photo
       from EMPLOYEES

Image memory size restriction PL/SQL code oracle apex 5.1

1. Right Click on the File Browser item name and create a Validation Action 
2. Then write this code as PL/SQL function body return text as condition
(Please replace the name of File Browser item name like "P15_RCAPPIMG_temp")

 declare
 cursor c is 
 select doc_size
 from apex_application_files
 where name = :P15_RCAPPIMG_temp;
 v_size number := 0;
 v_msg varchar2(100);

 begin
 open c; 
 fetch c into v_size; 
 close c;
 --Here is 15360 means 15kb image size because 1 latter= 8 byte 
 if (v_size < 15360) then
 v_msg  := 'Image must be at least 15KB!';
 DELETE from APEX_APPLICATION_FILES WHERE name = :P15_RCAPPIMG_temp;
 return v_msg;

 elsif (v_size > 30720) then
 v_msg  := 'Image size cannot be more than 30kb!';
 DELETE from APEX_APPLICATION_FILES WHERE name = :P15_RCAPPIMG_temp;
 return v_msg;

 end if;
 end;