Solved

Popup with div and javascript

Posted on 2011-02-23
5
1,302 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
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now