?
Solved

Popup with div and javascript

Posted on 2011-02-23
5
Medium Priority
?
1,326 Views
Last Modified: 2012-05-11
trying to add a div that call javascript's displayText to display a popup

<div id =\"DataBinder.Eval(Container.DataItem, "id")\" class=\"TheTextOff\" onmouseover=\"this.className='TheTextOn'\" onmouseout=\"this.className='TheTextOff'\" onclick=\"displayText(this)\">...</div>

javascript
----------
function displayText(displayText)
    {
      var panel = document.getElementById("content");
     
       document.getElementById("display_content").innerHTML =  document.getElementById("Media" + displayText.id).innerHTML;
       document.getElementById("lblsubject").innerHTML =  displayText.innerHTML;
       document.getElementById("lbldate").innerHTML =  document.getElementById("date" + displayText.id).innerHTML;
                    //Clone the Div that contain data
                    var newContent = document.getElementById("du_content").cloneNode(true);
                    newContent.style.display="block";
                    
                    if (panel.firstChild)
                        panel.removeChild(panel.firstChild);
                    panel.appendChild(newContent);
     
    }


aspx
----
<asp:DataList ID="dlAnnouncement" runat="server" CellPadding="0" 
                                                            CellSpacing="-1" Height="180px" RepeatColumns="1" RepeatDirection="Horizontal" 
                                                            ShowFooter="False" ShowHeader="False" Width="280px">
                                                            <SelectedItemStyle VerticalAlign="Top" />
                                                            <EditItemStyle VerticalAlign="Top" />
                                                            <AlternatingItemStyle VerticalAlign="Top" />
                                                            <ItemStyle Font-Names="Verdana" Font-Size="11px" VerticalAlign="Top" />
                                                            <ItemTemplate>
                                                                <table border="0" cellpadding="0" cellspacing="0">
                                                                    <tr>
                                                                        <td valign="top">
                                                                            &nbsp;&nbsp;<img height="5" src="Images/Bbullet.gif" width="5" /></td>
                                                                        <td>
                                                                            &nbsp;&nbsp; <b style="COLOR: #000000">
																									<%# Replace(trim(DataBinder.Eval(Container.DataItem, "Subject")),"*@*@","'") %>
																								</b>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                        </td>
                                                                        <td>
                                                                            &nbsp;&nbsp;
																								<%# iif(DataBinder.Eval(Container.DataItem, "Description").Length()> 40,Replace(Replace(trim(DataBinder.Eval(Container.DataItem, "Description")), VbCrLf,"<BR>"),"*@*@","'").substring(0,40),Replace(Replace(trim(DataBinder.Eval(Container.DataItem, "Description")), VbCrLf,"<BR>"),"*@*@","'")) %>
																								
																								<div id =\"DataBinder.Eval(Container.DataItem, "id")\" class=\"TheTextOff\" onmouseover=\"this.className='TheTextOn'\" onmouseout=\"this.className='TheTextOff'\" onclick=\"displayText(this)\">...</div>
																								
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </ItemTemplate>
                                                            <HeaderStyle VerticalAlign="Top" />
                                                        </asp:DataList>

<table id="du_content" class="flyout" cellspacing="0" cellpadding="0" style="display: none;
                width: 550px; height: 350px">
                <tr class="flyouthead">
                    <td colspan="3" style="padding-left: 5px">
                        <asp:Label ID="Label13" runat="server" Text="Bulletin" ForeColor="White"></asp:Label>
                    </td>
                    <td>
                        <img src="../Images/MainPage/cancel.gif" style="padding-left: 3px; padding-top: 5px;
                            cursor: pointer" />
                    </td>
                </tr>
                <tr>
                    <td height="18px">
                        &nbsp;
                    </td>
                    <td style="width: 80px">
                        <asp:Label ID="Label14" runat="server" Text="Date" ForeColor="#333333"></asp:Label>
                    </td>
                    <td style="width: 440px">
                        <asp:Label ID="lbldate" runat="server" Text="" ForeColor="#333333"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td height="18px">
                        &nbsp;
                    </td>
                    <td style="width: 80px">
                        <asp:Label ID="Label16" runat="server" Text="Subject" ForeColor="#333333"></asp:Label>
                    </td>
                    <td style="width: 440px">
                        <asp:Label ID="lblsubject" runat="server" Text="Label" ForeColor="#333333" Style="top: auto"></asp:Label>
                    </td>
                </tr>
                <tr height="3px">
                    <td colspan="4">
                        &nbsp;
                    </td>
                </tr>
                <tr height="3px">
                    <td class="flyoutborder" colspan="4" style="width: 100%">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td class="tab">
                    </td>
                    <td colspan="3">
                        <div id="display_content" style="width: 540px; height: 200px; overflow: scroll; text-align: justify;">
                        </div>
                    </td>
                </tr>
                <tr class="flyouthead">
                    <td colspan="4">
                    <asp:Button ID="btnClick" OnClick="btnClick_Click" Visible="false" runat="server" />
                    </td>
                </tr>
            </table>

Open in new window

0
Comment
Question by:doramail05
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 

Expert Comment

by:chenrijano
ID: 34967171
have you consider jquery which have a lot of plugins for that kind of purpose
plus shorter code for achieving the same function. Learning curve is quite low
0
 
LVL 9

Expert Comment

by:EZFrag
ID: 34968701
Hi there,

You can try the modified function I have added below...

Hope it helps ^_^
function displayText(displayText)
    {
      var panel = document.getElementById("content");
     
       document.getElementById("display_content").innerHTML =  document.getElementById("Media" + displayText.id).innerHTML;
       document.getElementById("lblsubject").innerHTML =  displayText.innerHTML;
       document.getElementById("lbldate").innerHTML =  document.getElementById("date" + displayText.id).innerHTML;
                    //Clone the Div that contain data
                    var newContent = document.getElementById("du_content").cloneNode(true);
                    newContent.style.display="";
                    newContent.style.position="absolute";
                    newContent.style.width="200px";
                    newContent.style.height="300px";
                    newContent.style.top="200px";
                    newContent.style.left="200px";
                    
                    
                    if (panel.firstChild)
                        panel.removeChild(panel.firstChild);
                    panel.appendChild(newContent);
     
    }

Open in new window

0
 
LVL 3

Expert Comment

by:deegoy418
ID: 34968932
Hi

I have prepared a demo of Pop up window, you can place your HTML into the <Div>

this is very simple pop-up window and work in all browsers.

I hope, your problem will be resolving and let me know if you have still any issue.

Regards
Deepak pop-up-html.zip
0
 
LVL 1

Accepted Solution

by:
doramail05 earned 0 total points
ID: 34978211
solved already,
function displayText(displayText)
    {
      var panel = document.getElementById("content");
     
       document.getElementById("display_content").innerHTML =  document.getElementById("Media" + displayText.id).innerHTML;
       document.getElementById("lblsubject").innerHTML =  displayText.innerHTML;
       document.getElementById("lbldate").innerHTML =  document.getElementById("date" + displayText.id).innerHTML;
                    //Clone the Div that contain data
                    var newContent = document.getElementById("du_content").cloneNode(true);
                    newContent.style.display="block";
                    
                    if (panel.firstChild)
                        panel.removeChild(panel.firstChild);
                    panel.appendChild(newContent);
      <%=Flyout1.getClientID()%>.AttachTo(displayText.id);
       <%=Flyout1.getClientID()%>.Open();
    }

Open in new window

0
 
LVL 1

Author Closing Comment

by:doramail05
ID: 35015350
missing some lines
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question