JavaScript

  <script type="text/javascript">
         var CurrentPage = 1;
         function GetImageIndex(obj) {
             while (obj.parentNode.tagName != "TD")
                 obj = obj.parentNode;
             var td = obj.parentNode;
             var tr = td.parentNode;
             if (td.rowIndex % 2 == 0) {
                 return td.cellIndex + tr.rowIndex;
             }
             else {
                 return td.cellIndex + (tr.rowIndex * 2);
             }
         }
         function LoadDiv(url, lnk) {
             var img = new Image();
             var bcgDiv = document.getElementById("divBackground");
             var imgDiv = document.getElementById("divImage");
             var imgFull = document.getElementById("imgFull");
             var imgLoader = document.getElementById("imgLoader");
             var dl = document.getElementById("<%=DataList1.ClientID%>");
             var imgs = dl.getElementsByTagName("img");
             var captionText = document.getElementById("caption");

             CurrentPage = GetImageIndex(lnk.parentNode) + 1;
             imgLoader.style.display = "block";
             img.onload = function () {
                 imgFull.src = img.src;
                 imgFull.style.display = "block";
                 imgLoader.style.display = "none";
                 captionText.innerHTML = this.alt;
             };
             img.src = url;
             Prepare_Pager(imgs.length);
             var width = document.body.clientWidth;
             if (document.body.clientHeight > document.body.scrollHeight) {
                 bcgDiv.style.height = document.body.clientHeight + "px";
             }
             else {
                 bcgDiv.style.height = document.body.scrollHeight + "px";
             }

             imgDiv.style.left = (width - 1000) / 2 + "px";
             imgDiv.style.right = (width - 1000) / 2 + "px";
         
             imgDiv.style.top = "100px";
             bcgDiv.style.width = "100%";

             bcgDiv.style.display = "block";
             imgDiv.style.display = "block";
             return false;
         }
         function HideDiv() {
             var bcgDiv = document.getElementById("divBackground");
             var imgDiv = document.getElementById("divImage");
             var imgFull = document.getElementById("imgFull");
             bcgDiv.style.display = "none";
             imgDiv.style.display = "none";
             imgFull.style.display = "none";
         }
         function doPaging(lnk) {
             var dl = document.getElementById("<%=DataList1.ClientID%>");
    var imgs = dl.getElementsByTagName("img");
    var imgLoader = document.getElementById("imgLoader");
    var imgFull = document.getElementById("imgFull");
    

    var img = new Image();
    if (lnk.id == "Next") {
        if (CurrentPage < imgs.length) {
            CurrentPage++;
            imgLoader.style.display = "block";
            imgFull.style.display = "none";
            img.onload = function () {
                imgFull.src = imgs[CurrentPage - 1].src;
                imgFull.style.display = "block";
                imgLoader.style.display = "none";
               
            };
        }
    }
    else {
        if (CurrentPage > 1) {
            CurrentPage--;
            imgLoader.style.display = "block";
            imgLoader.style.display = "none";
            img.onload = function () {
                imgFull.src = imgs[CurrentPage - 1].src;
                imgFull.style.display = "block";
                imgLoader.style.display = "none";
               
            };
        }
    }
    Prepare_Pager(imgs.length);
    img.src = imgs[CurrentPage - 1].src;
}
function Prepare_Pager(imgCount) {
    var Previous = document.getElementById("Previous");
    var Next = document.getElementById("Next");
    var lblPrevious = document.getElementById("lblPrevious");
    var lblNext = document.getElementById("lblNext");
    if (CurrentPage < imgCount) {
        lblNext.style.display = "none";
        Next.style.display = "block";
    }
    else {
        lblNext.style.display = "block";
        Next.style.display = "none";
    }
    if (CurrentPage > 1) {
        Previous.style.display = "block";
        lblPrevious.style.display = "none";
    }
    else {
        Previous.style.display = "none";
        lblPrevious.style.display = "block";
    }
}
</script>

    <style type = "text/css" class="modal" style="vertical-align: middle; text-align: center">
     .modal
     {
        display: none; 
        position: absolute;
        top: 0px; 
        left: 0px;
        background-color:black;
        z-index:100;
        opacity: 0.8;
        filter: alpha(opacity=60);
        -moz-opacity:0.8;
        min-height: 100%;
        text-align:center;
        width:100%;
        
     }

       .modal-content {
           margin: auto;
           display: block;
           width: 80%;
           max-width: 1000px;
             border-radius: 10px;
      
       }
      
     .imgg:hover{
   opacity: 0.7;


     }
     /* Caption of Modal Image (Image Text) - Same Width as the Image */

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

      

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


 /* Add Animation - Zoom in the Modal */
       .modal-content, #caption { 
           animation-name:   zoom;
         
           animation-duration: 0.6s;
       }
     #divImage
     {
        display: none;
        z-index: 1000;
        position: fixed;
        top:50%;
        left: -1000px;
        border-radius:10px;
        background-color:White;
        height: 700px;
        width: 950px;
        padding: 3px;
        padding-right:8px;
        border: solid 1px black;
         text-align:center;

         
     }
    .dlTable
    {
        border:double 1px #D9D9D9;
        width:200px;
        text-align:left;
    }
        .auto-style1 {
            width: 1189px;
        }
        .auto-style2 {
            height: 50px;
            width: 1189px;
        }
    </style>
</head>
<body style="background-color: #CCCCCC">
        <form id="form1" runat="server">
       <center>
       
              <div style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);width: 1203px; border-top-right-radius:10px;border-top-left-radius:10px; height: auto; vertical-align: top; background-color: #CECECE;">

        <table class="style1" style="background-repeat: no-repeat; background-position: center center; margin-top: 0px;border-top-right-radius:10px;border-top-left-radius:10px;  background-color: #CECFCE; border-collapse: collapse;" align="center">
            <tr>
               


                <td  style="  background-color: #FFFFFF; text-align: center; vertical-align: top;border-top-right-radius:10px;border-top-left-radius:10px;" class="auto-style1">
                         

                  
                <div style="  height: 348px; border-radius:15px; text-align: center; background-image: url('image/Banner.jpg'); background-repeat: no-repeat; width: 1200px;">
                     <div style="z-index:initial; background-image: url('bbb.png'); background-repeat: repeat; left: 0px; margin-top:-5px;height: 292px; ">
                         <p style="text-align: right;margin-top:-15px; "> <asp:HyperLink CssClass="a"  ID="HyperLink7" runat="server" NavigateUrl="index.aspx" style="color: #003768" Font-Names="Arial">Home</asp:HyperLink> | <asp:HyperLink CssClass="a"  target="_blank" ID="HyperLink1" runat="server" NavigateUrl="http://10.1.200.19:7777/webcenter/system/login.jsp" style="color: #003768" Font-Names="Arial">Login</asp:HyperLink>  
                      
                     
    
    
    </div>
                                          
                </td>
            </tr>
            <tr>
                <td align="center" class="auto-style1" style="background-position: 100%;  background-color:#FFFFFF";  valign="top " >
              <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">
                </asp:ScriptManager>      

       <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
            <ContentTemplate>
                
                <div class="auto-style144" style="margin-top:10px; color: #18446B; width: 1162px;">
                    <asp:Label ID="Proj" runat="server" style="font-weight: 700; font-size: x-large"></asp:Label>
                    <br />
                    <br />
                    Project  
                    <asp:DropDownList ID="project" runat="server" AutoPostBack="True" style="font-weight: 700; font-size: large;" Width="195px">
                        <asp:ListItem Value="No Porject's selected">Choose Project ....</asp:ListItem>
                        <asp:ListItem>Haram Project</asp:ListItem>
                        <asp:ListItem>Madina Project</asp:ListItem>
                    </asp:DropDownList>
                                   Year  
                     
                    <asp:DropDownList ID="year" runat="server" AutoPostBack="True" style="font-weight: 700; font-size: medium;" Width="72px">
                        <asp:ListItem>2018</asp:ListItem>
                        <asp:ListItem>2017</asp:ListItem>
                        <asp:ListItem>2016</asp:ListItem>
                        <asp:ListItem>2015</asp:ListItem>
                        <asp:ListItem>2014</asp:ListItem>
                    </asp:DropDownList>
                            Month
                    <asp:DropDownList ID="month" runat="server" style="font-weight: 700; font-size: medium;" AutoPostBack="True">
                        <asp:ListItem>January</asp:ListItem>
                        <asp:ListItem>February</asp:ListItem>
                        <asp:ListItem>March</asp:ListItem>
                        <asp:ListItem>April</asp:ListItem>
                        <asp:ListItem>May</asp:ListItem>
                        <asp:ListItem>June</asp:ListItem>
                        <asp:ListItem>July</asp:ListItem>
                        <asp:ListItem>August</asp:ListItem>
                        <asp:ListItem>Spetember</asp:ListItem>
                        <asp:ListItem>October</asp:ListItem>
                        <asp:ListItem>November</asp:ListItem>
                        <asp:ListItem>December</asp:ListItem>
                    </asp:DropDownList>
                          
                    <br />
                    <br />
                    
                    <hr style="height: 0px;margin-top:10px; width: 1130px" />
                    <br />
                   
                    <asp:DataList ID="DataList1" runat="server"  FooterStyle-Height="20px" Height="375px" RepeatColumns="5" RepeatLayout= "Table" Width="975px" CellPadding="0" CellSpacing="0" AllowPaging="True">
                        <FooterStyle Height="20px" />
                        <ItemTemplate>
                            <table class="table" style="border-right-style:solid; border-width:2px;border-color:#18416A;  margin-right:10px  ">
                                <tr>
                                    <th colspan="2"> <!--<span style="margin-right:30px"><%# Eval("imageid")%></span></th> -->
                                    </span>
                                </tr>
                                <tr>
                                    <td colspan="2"></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                     <!--   <img class="myImg" src ='<%#Eval("attach")%>' width="300" onclick="oo" height="250" style="margin-right:20px" alt="Name: <%# Eval("Imagename")%> </br> Year: <%# Eval("Year")%> </br> Year: <%# Eval("month")%>" /> -->
                                    <img id="imgLoader" class="imgg"  onclick = "LoadDiv(this.src, this)"  src = '<%# Eval("attach")%>'    width ="200"  height = "150"   alt="Mohammed alsofi" style ="cursor:pointer;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius:8px; margin-right:10px " />
                                         </td>
                                </tr>
                                <tr>
                                    <td colspan="2"><span style="font-size:12px">Name:</span> <span style="font-size:12px"><%# Eval("imagename")%></span></td>
                                </tr>
                                
                                <tr>
                                    <td colspan="2"><span style="font-size:12px">Date:</span> <span style="font-size:12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td>
                                     <tr>  <td colspan="2"> <span style="font-size:12px; margin-bottom:30px ">
                                        <asp:LinkButton ID="LinkButton1" runat="server">Dawnload</asp:LinkButton></tr>
                                        </span></td>
                                </tr>
                            </table>
                        </ItemTemplate>
                        <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />

                      
                    
                    
                    
                    </asp:DataList>
                       
            </ContentTemplate>
        </asp:UpdatePanel>
    <br />
    <div>
    </div>
                    
                    </td>
            </tr>
            <tr>
                <td align="center" class="auto-style2" style="background-position: 100%;  background-color:#00346B; ";  valign="top " >
                    
                     </td>
            </tr>
            </table></div> </center>


    <div>
     
       
       

    <br />
         



     </div>
         <center>
        <div id="divImage" >
                    
    <table style="height: 100%; width: 100%" >
        <tr>
             <td valign="middle" align="center" colspan = "3" style ="height:500px;" >
                <img id="imgLoader" />
                 <div id="caption"> </div>
                     
           
        
      
 
</div>
               
                   
                <img id="imgFull" alt="" src="" 
                 style="display: none;
                height: 600px;width: 950px" />
                
            </td>
        </tr>
        <tr>
     
            <td align = "left" style="padding:10px;width:200px">
              <a id = "Previous" href = "javascript:" onclick = "doPaging(this)" style ="display:none"><img src="image/prev.png" /></a>
             
                <span id = "lblPrevious"></span>

            </td>
             <td align="center" valign="middle" style ="width:200px">
                
               <!-- <input id="btnClose" type="button" value="close"onclick="HideDiv()"/> -->
<asp:ImageButton ID="btnClose" runat="server" Width="50" Height="50" ImageUrl="image/close.png"></asp:ImageButton>
               
                     <img  class="modal-content" id="img01">
  
            </td>
            <td align = "right" style ="padding:10px;width:200px">
                <a  id = "Next" href = "javascript:" onclick = "doPaging(this)" ><img src="image/next.png" /></a>
                <span id = "lblNext" style ="display:none"> </span>
                
            
            </td>
        </tr>
        
    </table>
                </center>
</div><div id="divBackground" class="modal" >
   
</div>

@{
      <!--Script outputs input value-->
      <script type="text/javascript"src="http://code.jquery.com/jquery-1.6.1.min.js" >
          var sData;
         var sDate = function myFunction() {
             var sData = document.getElementById("myText").value;
             document.getElementsById("demo").innerHTML = sData;
          }
      </script>

      string sData ="I would like to pass the value here";

      <!--Demo that script works-->
      <p id="demo"></p>

      <p id="myData" onclick="myFunction()">
          @Html.ActionLink("Click Me", "DownloadFile", new { sData  }, null)
      </p>

      <label>Monthly Report</label>
      <input type="text" id="myText" value="" name="myText" size="10" maxlength="6" pattern="[0-9]" placeholder="yyyymm" style="text-align:center" />

  }

const aws = require('aws-sdk');
aws.config.region = 'us-west-2';
aws.config.update({ accessKeyId: '', secretAccessKey: '' });
const PROFILE_S3_LINK = "https://sabio-training.s3.amazonaws.com/";
module.exports = {
  getUrl: getUrl
}
function getUrl(req, res) {
  const s3 = new aws.S3();
  const fileName = 'C56/'+"filename"+'/' ;    //hardcoded filename and filetype for it to work.
  const fileType = "filetype";              //How to take filename from uploaded file to insert into "fileName" along with the "filetype"?
  const s3Params = {                                        getSignedURL looks like this : https://sabio-training.s3.us-west-2.amazonaws.com/C56/filename/?AWSAccessKeyId=AKIAJF53EJKW7SJUV55Q&Content-Type=filetype&
    Bucket: 'sabio-training',                                                                       Expires=1536877443&Signature=WxSvLSzfyZKDRN9LawVOwj1ayVY%3D&x-amz-acl=public-read
    Key: fileName,                                            URL looks like this :                 https://sabio-training.s3.amazonaws.com/C56/filename/filetype
    Expires: 3000,
    ContentType: fileType,
    ACL: 'public-read'
  };
  s3.getSignedUrl('putObject', s3Params, (err, data) => {
    if (err) {
      console.log(err);
      return res.end();
    }
    const returnData = {
      signedRequest: data,
      url: `${PROFILE_S3_LINK}${fileName}${fileType}` //unsigned URL
    };
    res.write(JSON.stringify(returnData));
    res.end();
  });
}
=========================================================================
fileUploadRoute.js
const router = require("express").Router();
const fileUploadController = require("../controllers/fileUploadController")
router.put("/", fileUploadController.getUrl);
module.exports = router;
==========================================================================
fileUploadController.js
const fileUploadService = require('../services/fileUploadService')
const responses = require("../models/responses");
module.exports = {
    getUrl: getUrl
}
function getUrl(req, res) {
    fileUploadService.getUrl(req, res)
        .then(response => {
            res.send(response)
        })
        .catch(error => {
            res.send(error)
        })
}
===========================================================================
index.js in node portion
const router = require("express").Router();
const pogsRoutes = require("./pogs.routes");
const userFromJWT = require("../filters/jwt.user");
const validateUser = require("../filters/validate.user");
const testRoutes = require("./test.routes");
const profileRoute = require("../profile/profileRoute");
const fileUploadRoute = require("../fileUpload/fileUploadRoute")
module.exports = router;
// router.use("/api/profilePage", profileRoute)
router.use("/api/pogs", pogsRoutes);
router.use("/api/upload", fileUploadRoute)
router.use("/api/profilePage", profileRoute)
// -----------------------------------
// Authenticated routes go below this:
// -----------------------------------
router.use(userFromJWT);
router.use(validateUser);
router.use("/api/test", testRoutes); // TODO: remove this before delivery to the client
============================================================================
USED IN REACT
Axios pulled from profile page
handleClickUpload = evt => {
        evt.preventDefault()
        console.log("RESULT : ", this.state);
        // var file = evt.target.files[0]; <-- havent used this yet but I know its for upload
        axios.put(`${NODE_API_URL}/api/upload`, {
                // f:file
        })
        .then(response =>{
                console.log(
                response,"URL SIGNED REQUEST : ",response.data.signedRequest, " URL : ",response.data.url
                )
        })
        .catch(error => {
                console.log(error);
        })
}
Upload button and file upload portion inside profile page
               <div method="post" encType="multipart/form-data" action="/">
        <input type="file" name="fileName" className="btn" />
        <input type="submit" value="Upload" className="btn" onClick={this.handleClickUpload}/>

if (this.settings.mode === 'edit') {
       var $this = this;
       period.draggable = true;
       period.draggable({
         grid: [0, this.periodPosition],
         containment: 'parent',
         drag: function (event, ui) {
           $('.jqs-period-time', ui.helper).text($this.periodDrag(ui));
           $this.closeOptions();
         },
         stop: function (event, ui) {
           if (!$this.isValid($(ui.helper))) {
             console.error('Invalid position');

             $(ui.helper).css('top', Math.round(ui.originalPosition.top));
           }
         }
       }).resizable({
         grid: [0, this.periodPosition],
         containment: 'parent',
         handles: 'n, s',
         resize: function (event, ui) {
           $('.jqs-period-time', ui.helper).text($this.periodResize(ui));

           $this.periodText(period);
           $this.closeOptions();
         },
         stop: function (event, ui) {
           if (!$this.isValid($(ui.helper))) {
             console.error('Invalid position');

             $(ui.helper).css({
               'height': Math.round(ui.originalSize.height),
               'top': Math.round(ui.originalPosition.top)
             });
           }
         }
       });

#myImg {
 border-radius: 5px;
 cursor: pointer;
 transition: 0.3s;
 }

#myImg:hover {opacity: 0.7;}


 .modal {
 display: none;
 position: fixed;
 z-index: 1;
 padding-top: 100px;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgb(0,0,0);
 background-color: rgba(0,0,0,0.9);
 }


 .modal-content {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 }

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


.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)}
 }


 .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;
 }


 <a href="https://www.codeproject.com/Members/media">@media</a> only screen and (max-width: 700px){
 .modal-content {
 width: 100%;
 }
 }
 .nvgt{
 position:absolute;
 top: 120px;
 height: 50px;
 width: 30px;
 opacity: 0.6;
 }
 .nvgt:hover{
 opacity: 0.9;
 }
 #prev{
 background: #000 url('./image/prev.png') no-repeat center;
 left: 0px;
 }
 ul {
 list-style-type: none;

}
 ul li {
 display: inline-block;
 background:white;
 margin-bottom:10px;
 } 
 .change_btn {
 text-align:center;
 font-size:30px;
 float:left;
 }




<pre>

  

 

 

 Blog 

 

thepast 

  
.

 ASP.NET	
Home


Get Started


Learn


Hosting


Downloads


Community


Forums


Help

.
Home/ASP.NET Forums/General ASP.NET/jQuery for the ASP.NET Developer/modal popup window with datalist 


modal popup window with datalistRSS 


4 replies Subscribe via Email 

Last post 1 hour, 15 minutes ago by thepast
.
‹ Previous Thread|Next Thread ›



Print
Share	


Shortcuts

Active Threads


Unanswered Threads


Unresolved Threads


My Threads


Forum Subscriptions


Support Options


Advanced Search

 Reply|
Edit|
Favorites|
Alert Moderators
.

thepastthepast 
None


0 Points

8 Posts

 
modal popup window with datalist

10 hours, 6 minutes ago|LINK|85.194.71.226


I am using datalist to retrieve images from database  and everything is working perfectly 

I want when I click on image  modal popup show image with next and previous buttons  show next images which in page    if in page  5 images  show 5       if in page 20 images   popup show 20



please help me   I am stuck in that.



my data list is

<asp:datalist id="DataList1" runat="server" footerstyle-height="20px" height="375px" repeatcolumns="5" repeatlayout="Table" width="975px" cellpadding="0" cellspacing="0">
 <itemtemplate>
 
 <table class="table" style="margin-right: 10px"><tbody><tr> <th colspan="2"> 
 
 </th></tr> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td>  <br> Year: <%# Eval("Year")%> <br> Year: <%# Eval("month")%>" />
 </td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Name:</span> <span style="font-size: 12px"><%# Eval("imagename")%></span></td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Date:</span> <span style="font-size: 12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td> </tr><tr> <td colspan="2"> <span style="font-size: 12px; margin-bottom: 30px">
 <asp:linkbutton id="LinkButton1" runat="server">Dawnload</span></td></tr>   </tbody></table>
 
 <selecteditemstyle backcolor="#E2DED6" font-bold="True" forecolor="#333333">





 



.
 Reply|
Mark As Answer|
Edit|
Favorites|
Alert Moderators
.

thepastthepast 
None


0 Points

8 Posts

 
Re: modal popup window with datalist

9 hours, 52 minutes ago|LINK|85.194.71.226


Please Help   I am waiting for this issue  



Thanks in advance
.
 Reply|
Mark As Answer|
Edit|
Favorites|
Alert Moderators
.

thepastthepast 
None


0 Points

8 Posts

 
Re: modal popup window with datalist

8 hours, 10 minutes ago|LINK|85.194.71.226


I found  some code   work  with popup modal    but  moving between images not working    ( next and precious)   not working

 can any one modify it  please




#myImg {
 border-radius: 5px;
 cursor: pointer;
 transition: 0.3s;
 }

#myImg:hover {opacity: 0.7;}


 .modal {
 display: none;
 position: fixed;
 z-index: 1;
 padding-top: 100px;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgb(0,0,0);
 background-color: rgba(0,0,0,0.9);
 }


 .modal-content {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 }

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


.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)}
 }


 .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;
 }


 <a href="https://www.codeproject.com/Members/media">@media</a> only screen and (max-width: 700px){
 .modal-content {
 width: 100%;
 }
 }
 .nvgt{
 position:absolute;
 top: 120px;
 height: 50px;
 width: 30px;
 opacity: 0.6;
 }
 .nvgt:hover{
 opacity: 0.9;
 }
 #prev{
 background: #000 url('./image/prev.png') no-repeat center;
 left: 0px;
 }
 ul {
 list-style-type: none;

}
 ul li {
 display: inline-block;
 background:white;
 margin-bottom:10px;
 } 
 .change_btn {
 text-align:center;
 font-size:30px;
 float:left;
 }




<asp:datalist id="DataList1" runat="server" footerstyle-height="20px" height="375px" repeatcolumns="5" repeatlayout="Table" width="975px" cellpadding="0" cellspacing="0">
 <itemtemplate>
 
 <table class="table" style="margin-right: 10px"><tbody><tr> <th colspan="2"> 
 
 </th></tr> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td>  <br> Year: <%# Eval("Year")%> <br> Year: <%# Eval("month")%>" />

</td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Name:</span> <span style="font-size: 12px"><%# Eval("imagename")%></span></td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Date:</span> <span style="font-size: 12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td> </tr><tr> <td colspan="2"> <span style="font-size: 12px; margin-bottom: 30px">
 <asp:linkbutton id="LinkButton1" runat="server">Dawnload</span></td></tr>   </tbody></table>
 
 <selecteditemstyle backcolor="#E2DED6" font-bold="True" forecolor="#333333">





 



<div id="myModal" class="modal">
 ×
 <a href="#">prev</a>
 <div style="width: 70%; float: left">
 
 </div>
 <a href="#">Next</a>
 <div id="caption"></div>
 </div>
 


















var modal = document.getElementById('myModal');


 var img = $('#myImg');
 var modalImg = $("#img01");
 var captionText = document.getElementById("caption");
 $('.myImg').click(function () {

 modal.style.display = "block";
 var newSrc = this.src;
 modalImg.attr('src', newSrc);
 //captionText.innerHTML = this.alt;
 });

$('.change_btn').click(function () {
 var btn_click = $(this).find('a').html();
 var current_src = $('#img01').attr('src');
 $('.myImg').each(function () {
 if ($(this).attr('src') == current_src) {
 current_index = $(this).parent().index();
 if (btn_click == 'prev') {
 var new_index = current_index - 1;
 $('#img01').attr('src', $('attach:eq(' + new_index + ')').find('img').attr('src'));
 }
 else if (btn_click == 'Next') {
 var new_index = current_index + 1;
 $('#img01').attr('src', $('datalist1:eq(' + new_index + ')').find('img').attr('src'));
 }

}
 });
 });

var span = document.getElementsByClassName("close")[0];
 span.onclick = function () {
 modal.style.display = "none";
 }






please any one can modify it       I am stuck  about  4 days  couldn't  solve it 

please

function startGame(){
    gamearea.start();
  }
  function movePlayer(event){
    if(!player.moving){
      moveInterval = setInterval(function(){player.move(event);}, 50);
      player.moving = true;
    }
  }
  function stopPlayer(event){
    clearInterval(moveInterval);
    player.moving = false;
  }
  var gamearea = {
    canvas: document.createElement("canvas"),
    start: function(){
      this.canvas.width = 1100;
      this.canvas.height = 600;
      this.canvas.style.border = "3px solid gray";
      this.canvas.style.display = "block";
      this.canvas.style.margin = "auto";
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);
      this.context=this.canvas.getContext("2d");
      player.draw();
      window.addEventListener("keydown", movePlayer, event);
      window.addEventListener("keydown", stopPlayer, event);
    }
  }
  var player={
    x:40, y:580, moving:false,
    draw:function(){
      gamearea.context.fillStyle="ivory";
      gamearea.context.fillRect(this.x+60, this.y, 80, 20);
      gamearea.context.fillRect(this.x+95, this.y-20, 10, 20);
    },
    update: function(d){
      this.x+=d;
    },
    move: function(ev){
      gamearea.context.clearRect(this.x, this.y, 80, 20);
      gamearea.context.clearRect(this.x+35, this.y-20, 10, 20);
      if(ev.keycode== 37 && this.x>0) this.update(-15);
      else if(ev.keycode == 39 && this+80<1100) this.update(15);
      this.draw();
    }
  }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { CoreModule } from '../core/core.module';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { AppComponent } from './app.component';
import { AdminSharedModule } from '../admin/shared/adminShared.module';
import { HomeSharedModule } from '../home/shared/homeShared.module';
import { PortfoliosSharedModule } from '../portfolios/shared/portfoliosShared.module';

export const AppRoutes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', loadChildren: '../home/home.module#HomeModule' },
    { path: 'reviews', loadChildren: '../reviews/reviews.module#ReviewsModule' },
    { path: 'portfolios', loadChildren: '../portfolios/portfolios.module#PortfoliosModule' },
    { path: 'admin', loadChildren: '../admin/admin.module#AdminModule' }
];

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        CoreModule.forRoot(),
        BrowserModule,
        BrowserAnimationsModule,
        CommonModule,
        FormsModule,
        HttpModule,
        HttpClientModule,
        ReactiveFormsModule,
        MDBBootstrapModule.forRoot(),
        AdminSharedModule,
        HomeSharedModule,
        PortfoliosSharedModule,
        RouterModule.forRoot(AppRoutes)
    ],
    exports: [
        RouterModule
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

import { RouterModule, Routes } from '@angular/router';
import { ReviewsComponent } from './components/reviews.component';

const reviewsRoutes: Routes = [
    { path: '', component: ReviewsComponent }
];

@NgModule({<br />
    exports: [
        RouterModule
    ],
    imports: [
        CommonModule,
        FormsModule,
        HttpClientModule,
        MDBBootstrapModule.forRoot(),
        RouterModule.forChild(reviewsRoutes)<br />
    ],<br />
    declarations: [
        ReviewsComponent
    ]
})

export class ReviewsModule { }

I'm testing in Chrome, Edge, FF, IE, and O.

The case is that a page has up to 5 iframes that show on a single page. A page is executed in each iframe. These pages have links to other pages that have links. A browser refresh returns the screen to the initial page state in all 5 browsers. But in Chrome and O, the history of the iframes of the set are not deleted. The browser back button or a JavaScript history(-1) button work as originally intended in FF, IE, and Edge. But in Chrome and O, these back buttons start to step back through the sequential history of all iframes.   And the same thing happens with a single frame.

I do a querySelectorAll('iframe') on exit and refresh/load and no iframes are indicated. Yet, in Chrome and Opera, when the page refreshes and the iframes are created again, they remember the history of the same named iframes that were there before the refresh.

I refresh in 3 different ways in this application including the browser refresh button, parent,location,reload(parent.location.href), and parent,location,reload with a particular function. These all work in Edge, FF, and IE. I refresh and can back out of the page to the calling page. In chrome and Opera, even though the iframes have been removed, the new iframes retain the history of the previous iframes. 

I have tried about half dozen approaches in JavaScript to insuring the iframes have been removed. My latest attempt follows. I'm not sure if I'm executing right, but the length is always 0.

var iframesx = document.querySelectorAll('iframe');
for (var i = 0; i < iframesx.length; i++) {
 iframesx.parentNode.removeChild(iframesx);
}

This is a real navigation problem for this application in Chrome and Opera, and I would think for any application in a similar situation. The browser Back button and JavaScript History() methods are fundamental page navigation tools.  Below is a link that demonstrates the problem. The page shows up to the 5 most recent years of a color map. All data is only for testing and some of the data was doubled up for testing.   I believe this is a Chrome and Opera error.   I've tried to find a way to clean up iframe history thouroghly, but with no success.

http://steepusa.no-ip.info/scx/gencm.cgi?str=0b%7ESKY%7EC%3A%2FSteep%2FUSA%20Data%2FState%2FKY%2F%7EC%3A%2FSteep%2FUSA%20Data%2FState%2FKY%2Fchildren2%2Eview

Bring the page up in Chrome or Opera. Take some links in a couple of iframes. Refresh and hit the browser Back button as if you are backing out of the page. In Edge, FF, and IE, instead of going through the history of the iframes before the refresh, the back out works.  

My platform is Windows 10 running Apache/2.0.64 (Win32), mod_perl/2.0.3, and Perl/v5.8.3. I am running the latest versions of all browsers being used in testing.   However, I think this problem exists independent of platform.

Any help will be appreciated. Thanks.