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;