Click here to Skip to main content
14,427,400 members

JavaScript

 
QuestionCan't match this string in typescript using if and else if Pin
jkirkerx18-Sep-18 14:04
professionaljkirkerx18-Sep-18 14:04 
AnswerRe: Can't match this string in typescript using if and else if Pin
Graham Breach18-Sep-18 22:21
MemberGraham Breach18-Sep-18 22:21 
GeneralRe: Can't match this string in typescript using if and else if Pin
jkirkerx19-Sep-18 8:27
professionaljkirkerx19-Sep-18 8:27 
QuestionCan't match this string in typescript using if and else if Pin
jkirkerx18-Sep-18 14:04
professionaljkirkerx18-Sep-18 14:04 
QuestionHow to cancel a drag event Pin
jkirkerx18-Sep-18 10:25
professionaljkirkerx18-Sep-18 10:25 
AnswerRe: How to cancel a drag event Pin
Richard Deeming18-Sep-18 11:53
communityengineerRichard Deeming18-Sep-18 11:53 
GeneralRe: How to cancel a drag event Pin
jkirkerx18-Sep-18 12:54
professionaljkirkerx18-Sep-18 12:54 
Questioncouldn't read from datalist Pin
thepast16-Sep-18 22:01
Memberthepast16-Sep-18 22:01 
  <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> <span class="auto-style130">|</span> <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  <span class="auto-style132">
                    <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>
                                   </span><span class="auto-style134">Year </span> <span class="auto-style132">
                     
                    <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>
                            </span><span class="auto-style134">Month</span>
                    <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>



please help me I did everything but my caption couldn't read from datalist column
QuestionHow to pass JavaScript output to an HTML String Variable outside the <script>? Pin
Member 1348136115-Sep-18 16:45
MemberMember 1348136115-Sep-18 16:45 
AnswerRe: How to pass JavaScript output to an HTML String Variable outside the <script>? Pin
Richard Deeming18-Sep-18 4:45
communityengineerRichard Deeming18-Sep-18 4:45 
QuestionTrouble uploading files with aws s3 Pin
Member 1398382813-Sep-18 14:15
MemberMember 1398382813-Sep-18 14:15 
AnswerRe: Trouble uploading files with aws s3 Pin
jkirkerx1-Oct-18 9:04
professionaljkirkerx1-Oct-18 9:04 
Questiongetting error period.draggable is not a function Pin
Gopal Kan12-Sep-18 20:49
MemberGopal Kan12-Sep-18 20:49 
AnswerRe: getting error period.draggable is not a function Pin
Graham Breach12-Sep-18 22:08
MemberGraham Breach12-Sep-18 22:08 
QuestionModal popup with datalist Pin
thepast12-Sep-18 9:18
Memberthepast12-Sep-18 9:18 
QuestionJavascript and extensions Pin
Member 1398114211-Sep-18 16:10
MemberMember 1398114211-Sep-18 16:10 
QuestionWhen pressing right and left keys object not moving in javascript game. Pin
Member 1396097131-Aug-18 12:10
MemberMember 1396097131-Aug-18 12:10 
QuestionAngular 6, lazy loading, with routerLink="/reviews" it works, type the Url localhost:5000/reviews and page not found Pin
jkirkerx17-Aug-18 14:06
professionaljkirkerx17-Aug-18 14:06 
AnswerRe: Angular 6, lazy loading, with routerLink="/reviews" it works, type the Url localhost:5000/reviews and page not found Pin
jkirkerx18-Aug-18 14:31
professionaljkirkerx18-Aug-18 14:31 
General[Solved] Pin
jkirkerx20-Aug-18 10:25
professionaljkirkerx20-Aug-18 10:25 
QuestionCoding Newbie Pin
Rokas Steiblys17-Aug-18 11:21
MemberRokas Steiblys17-Aug-18 11:21 
AnswerRe: Coding Newbie Pin
Richard MacCutchan17-Aug-18 22:37
communityengineerRichard MacCutchan17-Aug-18 22:37 
AnswerRe: Coding Newbie Pin
Nathan Minier20-Aug-18 2:34
professionalNathan Minier20-Aug-18 2:34 
SuggestionRe: Coding Newbie Pin
Member 1395671021-Aug-18 7:28
MemberMember 1395671021-Aug-18 7:28 
QuestionExsplicit JavaScript regular exspression Pin
calmchess16-Aug-18 14:17
Membercalmchess16-Aug-18 14:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.