locked
Mouse over on hyperlink that shows what was selected on previous page RRS feed

  • Question

  • User-501297529 posted

    Can someone assist me on how to do a mouse over on a hyperlink that shows what the user selected on the page they just left or saved. For example, the user clicks a link that says 'Add' and it opens a popup window where they select a list of items that have checkboxes, they check the items they want and then they click save to close the popup and they return to the original page. The user then hovers over another link that says 'Edit' and it shows them what they selected on the popup page. Can this be done and if so how?

    Monday, August 15, 2016 7:48 PM

Answers

  • User-501297529 posted

    Hi bootzilla,

    Firstly, you want click the link, then open a popup window where have some checkboxes for user to select. You could use Bootstrap Modal Plugin. when you click the ok button, the popup will be closed and return to the original page.

    Such as

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <body>
        <form id="form1" runat="server">
        <div>
         <h1>main page</h1>
                <a id="A1" data-toggle="modal" data-target="#myModal" runat="server">link1</a><br/>
                <!-- Modal -->
                <div id="myModal" class="modal fade" role="dialog">
                   <div class="modal-dialog">
     
                      <!-- Modal content-->
                       <div class="modal-content">
                           <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Add</h4>
                            </div>
                            <div id="allCheckboxes" class="modal-body">
                                <asp:CheckBox ID="CheckBox1" runat="server" Text="blue"  />
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="red" />
                                <asp:CheckBox ID="CheckBox3" runat="server" Text="black"/>
                                <asp:CheckBox ID="CheckBox4" runat="server" Text="pink"/>
                            </div>
                            <div class="modal-footer">
                                <asp:Button ID="btnok" runat="server" CssClass="btn btn-primary" Text="OK" />
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
     
                    </div>
                </div>
            </div>
        </form>
    </body>
    

    Secondly, when you hover the link it will shows the text you selected. You could added hover event or mouseover and mouseout event to control your lable show or hidden.

    Such as

     $(function(){
     $("a").mouseover(function () {
       $("#Label1").show();
         })
     $("a").mouseout(function () {
        $("#Label1").hide();
         })
    })
    

    I hope these suggestions will be helpful with you.

    Best Regards,

    Ailleen

    OK Aileen, I think I have this figured out but I think you may have misunderstood what I am for. When I hover the link I want it to show what I selected on the popup page. I don't want to hover over it and it shows and hides the link. Does that make sense?

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 17, 2016 5:58 PM

All replies

  • User-1142886626 posted

    Hi bootzilla,

    Firstly, you want click the link, then open a popup window where have some checkboxes for user to select. You could use Bootstrap Modal Plugin. when you click the ok button, the popup will be closed and return to the original page.

    Such as

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <body>
        <form id="form1" runat="server">
        <div>
         <h1>main page</h1>
                <a id="A1" data-toggle="modal" data-target="#myModal" runat="server">link1</a><br/>
                <!-- Modal -->
                <div id="myModal" class="modal fade" role="dialog">
                   <div class="modal-dialog">
     
                      <!-- Modal content-->
                       <div class="modal-content">
                           <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Add</h4>
                            </div>
                            <div id="allCheckboxes" class="modal-body">
                                <asp:CheckBox ID="CheckBox1" runat="server" Text="blue"  />
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="red" />
                                <asp:CheckBox ID="CheckBox3" runat="server" Text="black"/>
                                <asp:CheckBox ID="CheckBox4" runat="server" Text="pink"/>
                            </div>
                            <div class="modal-footer">
                                <asp:Button ID="btnok" runat="server" CssClass="btn btn-primary" Text="OK" />
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
     
                    </div>
                </div>
            </div>
        </form>
    </body>
    

    Secondly, when you hover the link it will shows the text you selected. You could added hover event or mouseover and mouseout event to control your lable show or hidden.

    Such as

     $(function(){
     $("a").mouseover(function () {
       $("#Label1").show();
         })
     $("a").mouseout(function () {
        $("#Label1").hide();
         })
    })
    

    I hope these suggestions will be helpful with you.

    Best Regards,

    Ailleen

    Tuesday, August 16, 2016 7:01 AM
  • User-501297529 posted

    Hi Aileen when I add the bootstrap code I get a message that says ' Unable to edit <then the url to that style sheet> The style sheets must be part of the current project and the project must be a Web Site or Web Application project' Do I need to go to that url and add that stylesheet to my project?

    Tuesday, August 16, 2016 5:45 PM
  • User-501297529 posted

    Hi bootzilla,

    Firstly, you want click the link, then open a popup window where have some checkboxes for user to select. You could use Bootstrap Modal Plugin. when you click the ok button, the popup will be closed and return to the original page.

    Such as

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <body>
        <form id="form1" runat="server">
        <div>
         <h1>main page</h1>
                <a id="A1" data-toggle="modal" data-target="#myModal" runat="server">link1</a><br/>
                <!-- Modal -->
                <div id="myModal" class="modal fade" role="dialog">
                   <div class="modal-dialog">
     
                      <!-- Modal content-->
                       <div class="modal-content">
                           <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Add</h4>
                            </div>
                            <div id="allCheckboxes" class="modal-body">
                                <asp:CheckBox ID="CheckBox1" runat="server" Text="blue"  />
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="red" />
                                <asp:CheckBox ID="CheckBox3" runat="server" Text="black"/>
                                <asp:CheckBox ID="CheckBox4" runat="server" Text="pink"/>
                            </div>
                            <div class="modal-footer">
                                <asp:Button ID="btnok" runat="server" CssClass="btn btn-primary" Text="OK" />
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
     
                    </div>
                </div>
            </div>
        </form>
    </body>
    

    Secondly, when you hover the link it will shows the text you selected. You could added hover event or mouseover and mouseout event to control your lable show or hidden.

    Such as

     $(function(){
     $("a").mouseover(function () {
       $("#Label1").show();
         })
     $("a").mouseout(function () {
        $("#Label1").hide();
         })
    })
    

    I hope these suggestions will be helpful with you.

    Best Regards,

    Ailleen

    Hi Aileen, 

    Hopefully you are still around to answer my question.

    Thanks

    Wednesday, August 17, 2016 2:23 PM
  • User-501297529 posted

    I was able to get something using LabelHover function but I get a "LabelHover() is undefined" error. Here is my code. What do I need to do to get rid of this error. This is on the page that has the link to the popup page.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="NASA_LoD_Phase_1.WebForm3" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        
    
        <title><script language="javascript" type="text/javascript">
                  
                   function LabelHover() {
                       
                       var text = "event";
                      
                       document.getElementById("EditHyperLink").innerHTML = text;
                       
                   }
                   
        </script>
    </title>
        <style type="text/css">
    
            .auto-style1 {
                width: 100%;
            }
            .auto-style2 {
                text-align: left;
            }
            .auto-style4 {
                text-align: right;
            }
        </style>
         
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
            <table class="auto-style1">
                <tr>
                    <td class="auto-style2" colspan="2">
                        <asp:Label ID="lblProgram" runat="server" Text="Program:" style="text-align: left"></asp:Label>
                        &nbsp;<asp:HyperLink ID="AddHyperLink" runat="server" 
                NavigateUrl="javascript:var w=window.open('addprogramcode.aspx','','width=640,height=450');" 
                CssClass="style19" ForeColor="#A90D39">Add Program Code</asp:HyperLink>&nbsp; <asp:HyperLink ID="EditHyperLink" onmouseover="LabelHover()"  runat="server" 
                NavigateUrl="javascript:var w=window.open('serviceset.aspx','','width=640,height=450');" 
                CssClass="style19" ForeColor="#A90D39">Edit</asp:HyperLink>&nbsp; <asp:HyperLink ID="DeleteHyperLink" runat="server" 
                NavigateUrl="javascript:var w=window.open('newdonors.aspx','','width=640,height=450');" 
                CssClass="style19" ForeColor="#A90D39">Delete</asp:HyperLink>
                       
                        <br />
                        <asp:DropDownList ID="DropDownList1" runat="server" Width="400px">
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style7">
                    <asp:Button ID="BackButton" runat="server" OnClick="Button2_Click" Text="Back" />
                        </td>
                    <td class="auto-style4" rowspan="2">
                    <asp:Button ID="NextButton" runat="server" Text="Next" OnClick="SearchButton_Click" />
                    </td>
                </tr>
            </table>
        
        </div>
        </form>
    </body>
    </html>

     

    Wednesday, August 17, 2016 4:46 PM
  • User-501297529 posted

    Hi bootzilla,

    Firstly, you want click the link, then open a popup window where have some checkboxes for user to select. You could use Bootstrap Modal Plugin. when you click the ok button, the popup will be closed and return to the original page.

    Such as

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <body>
        <form id="form1" runat="server">
        <div>
         <h1>main page</h1>
                <a id="A1" data-toggle="modal" data-target="#myModal" runat="server">link1</a><br/>
                <!-- Modal -->
                <div id="myModal" class="modal fade" role="dialog">
                   <div class="modal-dialog">
     
                      <!-- Modal content-->
                       <div class="modal-content">
                           <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Add</h4>
                            </div>
                            <div id="allCheckboxes" class="modal-body">
                                <asp:CheckBox ID="CheckBox1" runat="server" Text="blue"  />
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="red" />
                                <asp:CheckBox ID="CheckBox3" runat="server" Text="black"/>
                                <asp:CheckBox ID="CheckBox4" runat="server" Text="pink"/>
                            </div>
                            <div class="modal-footer">
                                <asp:Button ID="btnok" runat="server" CssClass="btn btn-primary" Text="OK" />
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
     
                    </div>
                </div>
            </div>
        </form>
    </body>
    

    Secondly, when you hover the link it will shows the text you selected. You could added hover event or mouseover and mouseout event to control your lable show or hidden.

    Such as

     $(function(){
     $("a").mouseover(function () {
       $("#Label1").show();
         })
     $("a").mouseout(function () {
        $("#Label1").hide();
         })
    })
    

    I hope these suggestions will be helpful with you.

    Best Regards,

    Ailleen

    OK Aileen, I think I have this figured out but I think you may have misunderstood what I am for. When I hover the link I want it to show what I selected on the popup page. I don't want to hover over it and it shows and hides the link. Does that make sense?

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 17, 2016 5:58 PM
  • User-1142886626 posted

    Hi bootzilla,

    You could use a div or label to store the message . Attach a change event to check the state of each checkbox. If the checkbox is checked , append the record to the div :

    The following code is for your reference.

    <script type="text/javascript">
        $(function () {
            $("#showtext").hide();
            $("a").mouseover(function () {
                $("#showtext").show();
            })
            $("a").mouseout(function () {
                $("#showtext").hide();
            })
            $("input:checkbox").change(function () {
                var ischeck= $(this).is(":checked");
                var $lable = $("<label></label>");
                var sew = $(this).next().text();
                if (ischeck) {  
                    $lable.append(sew);    
                    $("#showtext").append($lable);
                } else {
                    $("#showtext label").each(function () {
                        var gettext = $(this).text();
                        if (gettext=sew) {
                            $(this).remove();
                        }
                    })
                }
            })
            $("#btnok").click(function () {
                $("#myModal").modal("hide");
                return false;
            })
        })
    </script>
    
    <body>
         <form id="form1" runat="server">
        <div>
         <h1>main page</h1>
                <a id="A1" data-toggle="modal" data-target="#myModal" runat="server">link1</a><br/>
               <div id="showtext">
               <asp:Label ID="Label1" runat="server" Text="Add"></asp:Label>
               </div>
              <!-- Modal -->
                <div id="myModal" class="modal fade" role="dialog">
                   <div class="modal-dialog">
                      <!-- Modal content-->
                       <div class="modal-content">
                           <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Add</h4>
                            </div>
                            <div id="allCheckboxes" class="modal-body">
                                <asp:CheckBox ID="CheckBox1" runat="server" Text="blue" />
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="red" />
                                <asp:CheckBox ID="CheckBox3" runat="server" Text="black"/>
                                <asp:CheckBox ID="CheckBox4" runat="server" Text="pink"/>
                            </div>
                            <div class="modal-footer">
                                <asp:Button ID="btnok" runat="server" CssClass="btn btn-primary" Text="OK" />
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>

    Best Regards,

    Ailleen



    Thursday, August 18, 2016 5:59 AM