Click here to Skip to main content
15,843,498 members
Home / Discussions / JavaScript
   

JavaScript

 
Questioncouldn't read from datalist Pin
thepast16-Sep-18 22:01
thepast16-Sep-18 22:01 
QuestionHow to pass JavaScript output to an HTML String Variable outside the <script>? Pin
Member 1348136115-Sep-18 16:45
Member 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
mveRichard Deeming18-Sep-18 4:45 
QuestionTrouble uploading files with aws s3 Pin
Member 1398382813-Sep-18 14:15
Member 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
Gopal Kan12-Sep-18 20:49 
AnswerRe: getting error period.draggable is not a function Pin
Graham Breach12-Sep-18 22:08
Graham Breach12-Sep-18 22:08 
QuestionModal popup with datalist Pin
thepast12-Sep-18 9:18
thepast12-Sep-18 9:18 
I am using datalist to get images from database and working good

what I want is modal popup with next and previous to show my image which appears in page


I try some code popup worked fine but next previous not working

#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

QuestionJavascript and extensions Pin
Member 1398114211-Sep-18 16:10
Member 1398114211-Sep-18 16:10 
QuestionWhen pressing right and left keys object not moving in javascript game. Pin
Member 1396097131-Aug-18 12:10
Member 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
Rokas Steiblys17-Aug-18 11:21 
AnswerRe: Coding Newbie Pin
Richard MacCutchan17-Aug-18 22:37
mveRichard 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
Member 1395671021-Aug-18 7:28 
QuestionExsplicit JavaScript regular exspression Pin
calmchess16-Aug-18 14:17
calmchess16-Aug-18 14:17 
AnswerRe: Explicit JavaScript regular expression Pin
Richard Deeming17-Aug-18 8:02
mveRichard Deeming17-Aug-18 8:02 
QuestionUsing data from odata in react-native Pin
Mike V Baker12-Aug-18 17:59
Mike V Baker12-Aug-18 17:59 
AnswerRe: Using data from odata in react-native Pin
Richard MacCutchan12-Aug-18 22:03
mveRichard MacCutchan12-Aug-18 22:03 
QuestionWeb Application Pin
Awal Swed9-Aug-18 5:35
Awal Swed9-Aug-18 5:35 
AnswerRe: Web Application Pin
Richard MacCutchan9-Aug-18 6:48
mveRichard MacCutchan9-Aug-18 6:48 
Questioniframe history not cleaned up on refresh in Chrome and Opera Pin
CCTuss9-Aug-18 4:25
CCTuss9-Aug-18 4:25 
AnswerRe: iframe history not cleaned up on refresh in Chrome and Opera Pin
F-ES Sitecore10-Aug-18 0:35
professionalF-ES Sitecore10-Aug-18 0:35 

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.