locked
How to keep both of them in the page without losing any element? RRS feed

  • Question

  • User-2071692902 posted

    Hi all,

    I have designed a webpage that contains bootstrap elements. Then I added a navbar with dropdown menu that depends on Awesome reference, here the Awesome ref:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    

    But unfortunately the dropdown menu that depends on Awesome reference refuse to work properly until I removed the Bootstrap reference: here the Bootstrap ref:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    

    Here is the whole page with the navbar that depends on Awesome reference:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    .navbar {
      overflow: hidden;
      background-color: #0daeeb;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .dropdown {
      float: left;
      overflow: hidden;
    }
    
    .dropdown .dropbtn {
      cursor: pointer;
      font-size: 16px;  
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }
    
    .navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
      background-color: red;
    }
    
    .dropdown-content {
      display: none;
      ;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .dropdown-content a:hover {
      background-color: #ddd;
    }
    
    .show {
      display: block;
    }
    </style>
    </head>
    <body>
    
    <div class="navbar">
      <div class="dropdown">
      <button class="dropbtn" onclick="myDropDownFunction()">
              <img src="https://imgur.com/57AweD4.png" alt="appleschat"width="20">
    
          ApplesChat
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content" id="myDropdown">
        <a href="#">Profile</a>
        <a href="#">Sign Up</a>
        <a href="#">Login</a>
        <a href="#">Setting</a>
        <a href="#">Privacy Policy</a>
    
      </div>
      </div> 
    </div>
    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myDropDownFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn')) {
      var myDropdown = document.getElementById("myDropdown");
        if (myDropdown.classList.contains('show')) {
          myDropdown.classList.remove('show');
        }
      }
    }
    </script>
    </body>
    </html>

    And here the whole page 2 that contains of bootstrap reference that conflict with Awesome Navbar :

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    <!DOCTYPE html>
    <html lang="en">
        <head>
    <meta charset="utf-8" />
    <meta name="description" content="Universal and confidential chat,<br> where you can communicate with others, privately or publicly">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
           
            
                  <title>ApplesChat</title>
        <link rel="icon" sizes="57x57" href="https://imgur.com/57AweD4" />
      <link rel=" shortcut icon"  href="https://imgur.com/57AweD4.png" />
    
            <style >
        .banner {
        width: 100%;
        height: 50px;
        background-color:  #0daeeb;;
       
    }
    .userInfoDiv
               {
             margin: auto;
             border: 3px solid red;
             padding: 5px;
             width:320px;
    	     height:250px;
             background-color:lightblue ;
             box-shadow: 10px 10px 8px red;
            } 
    .changeBottun
        {
        text-align:center;
        }
    #avatar {
      vertical-align: middle;
      width: 50px;
      height: 50px;
      border-radius: 50%;
       display: block;
      margin-left: auto;
      margin-right: auto;
      z-index: 1;
       ;
    }
    
    #myUserName {
        color: red;
        border:2px solid blue;
        border-radius: 4px;
    }
                #status {
        color: #000;
        border:2px solid blue;
        border-radius: 4px;
    }
    .EnterChatBottun 
        {
        text-align:center;
        }
        </style>
        <link rel=" shortcut icon"  href="Media\Images\apple.png"/>    
        </head>
    
    <body>
            <div class=" banner">
    <h2 style="font-family: Times New Roman ; text-align: center ;color: red"> ApplesChat</h2>
    </div>
            <div>
      <img style=" 
             display:block;
             margin:auto;
             width:200px;
             height: 200px;
      "src="Media\Images\apples.png"
       alt=".." />
       </div>
    <p style=" color: blue; text-align: center;font-family: Times New Roman ">                     Universal and confidential chat.</p>
        <div class=" EnterChatBottun">
     <button  onclick=" checkUsername()"><img src='Media\Images\apple.png'style="width:20px;height:20px"alt=".."> Enter ApplesChat</button>
            </div>
        <div class=" EnterChatBottun">
     <button  onclick=" checkUsernameForOnlineUsers()"><img src='Media\Images\apple.png'style="width:20px;height:20px"alt=".."> Online Users</button>
            </div>
                <br/>
    
        <div class=" userInfoDiv">
    <img  alt="Avatar" 
          id="avatar" 
          src='Media/Images/ah.png'>
    <div class=" changeBottun">
    <input  id="fileInput"
            type="file" 
        style="display: none" /> 
        <input type="button"
        style="display:inline"
         value="Change Avatar!" 
        onclick="document.getElementById('fileInput').click()"  />
    
         <button 
    onclick="document.getElementById('avatar').src='Media/Images/ah.png'">
    <img id="btnImg"src='Media/Images/ah.png'style=" width:20px;height:20px" alt=".." />
        Use Default
    </button>
        </div>
                Username:
       <div class=" UsernameLabelDiv">
     <input id="myUserName"
           type="text" 
           style="width: 280px" 
           placeholder="Username" 
           maxlength="15"
           onkeyup="saveValue(this)"
           onkeypress="return AvoidSpace(event)"/>
           </div>
            Status:
     <input id="status"
           type="text" 
           style="width: 280px" 
           placeholder="Write Your Status" 
           maxlength="25"
           onkeyup="saveValue2(this)"
          />
    </div>
    </div>
    </div>
       <br/>
        <div class=" EnterChatBottun">
     <button onclick=" checkUsername()"><img src="https://imgur.com/u82MtgI.png"style="width:20px;height:20px"alt=".."> Enter ApplesChat</button>
                <br/>
                <br/>
               <!--To save image in the localStorage after browsing for it and keep it even after refreshing the page.-->
    <script>
           window.onload = function () {
                if (localStorage.getItem("imgData") === null) {
                    var avatarImage = document.getElementById("avatar");
                    avatarImgData = getBase64Image(avatarImage);
                    localStorage.setItem("avatarImgData", avatarImgData);
    
                }
                else {
                    var dataImage = localStorage.getItem('avatarImgData');
                    storyImg = document.getElementById('avatar');
                    storyImg.src = dataImage;
                }
                document.getElementById("fileInput").onchange = function () {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        document.getElementById("avatar").src = e.target.result;
                        storyImgData = (e.target.result);
                        localStorage.setItem("avatarImgData", storyImgData);
                    }
    
                    reader.readAsDataURL(this.files[0]);
    
                }
    
            }
            
            function getBase64Image(img) {
                //save the image as a Base64.
                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
    
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
    
                var dataURL = canvas.toDataURL("image/png");
    
                return dataURL;
            }
        </script>
          
      <!--To remove spaces from the beginning , the ending and between letters and words inside myUserName input text.-->
         <script> 
           function AvoidSpace(event) {
           var k = event ? event.which : window.event.keyCode;
           if (k == 32) return false; }
     </script>  
    <!--To save myUserName text even after refreshing the page and to transfer it to another page.-->
    <script type="text/javascript"> 
    document.getElementById("myUserName").value = getSavedValue("myUserName");         function saveValue(e){
                var id = e.id;
                var val = e.value; 
                localStorage.setItem(id, val);
            }  
            function getSavedValue  (v){
                if (localStorage.getItem(v) === null) {
                    return ""; 
                }
                return localStorage.getItem(v);
            }
    </script>
            <!--To save status text even after refreshing the page and to transfer it to another page.-->
    <script type="text/javascript"> 
    document.getElementById("status").value = getSavedValue("status");     
            function saveValue2(e){
                var id = e.id;
                var val = e.value; 
                localStorage.setItem(id, val);
            }  
            function getSavedValue2 (v){
                if (localStorage.getItem(v) === null) {
                    return ""; 
                }
                return localStorage.getItem(v);
            }
    </script>
            <!--To check username field -->
    <script >
        function checkUsername() {
            var userName = document.getElementById("myUserName").value;
            var regex = new RegExp("^[A-Za-z0-9]+$");
            if (regex.test(userName) & userName != "") {
                window.location.href = "ApplesChat.html";
            } else  {
           alert("Please Enter Your Username To Start Chat,Only English Letters              And Numbers are Allowed Without Spaces Between Them.");
                document.getElementById("myUserName").value = "";
                document.getElementById("myUserName").focus();
            }
        }
    </script>
            <script >
        function checkUsernameForOnlineUsers() {
            var userName = document.getElementById("myUserName").value;
            var regex = new RegExp("^[A-Za-z0-9]+$");
            if (regex.test(userName) & userName != "") {
                window.location.href = "OnlineUsers.html";
            } else  {
           alert("Please Enter Your Username To Start Chat,Only English Letters              And Numbers are Allowed Without Spaces Between Them.");
                document.getElementById("myUserName").value = "";
                document.getElementById("myUserName").focus();
            }
        }
    </script>
    <!--==========================================================-->
                <p>Send us Feedback on</p>
       <div class="container">
      <a href="https://twitter.com/omanxp45/status/1152591452280688641?s=19"><button type="button" class="btn btn-outline-info">Twitter</button></a>
           <!--==========================================================-->
    <a href="https://www.facebook.com/695139910599253/posts/2304514852995076/">
    <button type="button" class="btn btn-outline-primary">Facebook</button></a>
          <!--==========================================================-->
     <a href="https://www.snapchat.com/add/omanxp45"> 
    <button type="button" class="btn btn-outline-warning">Snapchat</button></a>
           <!--==========================================================-->
     <a href="https://wa.me/+96899420026"> 
     <button type="button" class="btn btn-outline-success">WhatsApp</button></a>
        <!--==========================================================-->
    </div>
    </div>
        <!--Page Views-->
        <div style="text-align:center;">
                	Page Views
              <br/>
        <a href="http://www.hitwebcounter.com" target="_blank">
    <img src="http://hitwebcounter.com/counter/counter.php?page=7108744&style=0005&nbdigits=9&type=page&initCount=0" title=""  
        Alt="Page Views">
    </a>                
                                               
      </div>    
    
                                          
        </body>
    </html>

    I am planning now to remove the banner from page 2 and replace it with the navbar but the problem is the conflict between bootstrap and the Awesome reference

    So any help to keep both of them in the page2 without losing any element?

    THanks

    </div> </div> <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"></div> </div>

    Thursday, February 27, 2020 7:10 PM

Answers

  • User1535942433 posted

    Hi Omanxp45-1,

    Accroding to your description, I suggest you could check your codes whather exist bootstrap.min.js.

    What the version of the bootstrap?I have used v4.4.1.

    More details,you could refer to below codes:

    <head runat="server">
        <meta charset="utf-8" />
        <meta name="description" content="Universal and confidential chat,<br> where you can communicate with others, privately or publicly">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <script src="Scripts/jquery-3.0.0.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <title>ApplesChat</title>
        <link rel="icon" sizes="57x57" href="https://imgur.com/57AweD4" />
        <link rel=" shortcut icon" href="https://imgur.com/57AweD4.png" />
    
        <style>
            .banner {
                width: 100%;
                height: 50px;
                background-color: #0daeeb;
                ;
            }
    
            .userInfoDiv {
                margin: auto;
                border: 3px solid red;
                padding: 5px;
                width: 320px;
                height: 250px;
                background-color: lightblue;
                box-shadow: 10px 10px 8px red;
            }
    
            .changeBottun {
                text-align: center;
            }
    
            #avatar {
                vertical-align: middle;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: block;
                margin-left: auto;
                margin-right: auto;
                z-index: 1;
                ;
            }
    
            #myUserName {
                color: red;
                border: 2px solid blue;
                border-radius: 4px;
            }
    
            #status {
                color: #000;
                border: 2px solid blue;
                border-radius: 4px;
            }
    
            .EnterChatBottun {
                text-align: center;
            }
        </style>
        <link rel=" shortcut icon" href="image/image5.jpg" />
    </head>
    <body>
        <form id="form1" runat="server">
    
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <asp:Label ID="Label1" runat="server" Text="ApplesChat" CssClass="lb"></asp:Label>
                                </a>
                                <!-- Here's the magic. Add the .animate and .slide-in classes to your .dropdown-menu and you're all set! -->
                                <div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
                <div class="snippet-code"></div>
            </div>
            <div>
                <img style="display: block; margin: auto; width: 200px; height: 200px;"
                    src="image/image5.jpg"
                    alt=".." />
            </div>
            <p style="color: blue; text-align: center; font-family: Times New Roman">Universal and confidential chat.</p>
            <div class=" EnterChatBottun">
                <button onclick=" checkUsername()">
                    <img src='image/image5.jpg' style="width: 20px; height: 20px" alt="..">
                    Enter ApplesChat</button>
            </div>
            <div class=" EnterChatBottun">
                <button onclick=" checkUsernameForOnlineUsers()">
                    <img src='image/image5.jpg' style="width: 20px; height: 20px" alt="..">
                    Online Users</button>
            </div>
            <br />
    
            <div class=" userInfoDiv">
                <img alt="Avatar"
                    id="avatar"
                    src='image/image5.jpg'>
                <div class=" changeBottun">
                    <input id="fileInput"
                        type="file"
                        style="display: none" />
                    <input type="button"
                        style="display: inline"
                        value="Change Avatar!"
                        onclick="document.getElementById('fileInput').click()" />
    
                    <button
                        onclick="document.getElementById('avatar').src='Media/Images/ah.png'">
                        <img id="btnImg" src='image/image5.jpg' style="width: 20px; height: 20px" alt=".." />
                        Use Default
                    </button>
                </div>
                Username:
       <div class=" UsernameLabelDiv">
           <input id="myUserName"
               type="text"
               style="width: 280px"
               placeholder="Username"
               maxlength="15"
               onkeyup="saveValue(this)"
               onkeypress="return AvoidSpace(event)" />
       </div>
                Status:
     <input id="status"
         type="text"
         style="width: 280px"
         placeholder="Write Your Status"
         maxlength="25"
         onkeyup="saveValue2(this)" />
            </div>
    
            <br />
            <div class=" EnterChatBottun">
                <button onclick=" checkUsername()">
                    <img src="https://imgur.com/u82MtgI.png" style="width: 20px; height: 20px" alt="..">
                    Enter ApplesChat</button>
                <br />
                <br />
                <!--To save image in the localStorage after browsing for it and keep it even after refreshing the page.-->
                <script>
                    window.onload = function () {
                        if (localStorage.getItem("imgData") === null) {
                            var avatarImage = document.getElementById("avatar");
                            avatarImgData = getBase64Image(avatarImage);
                            localStorage.setItem("avatarImgData", avatarImgData);
    
                        }
                        else {
                            var dataImage = localStorage.getItem('avatarImgData');
                            storyImg = document.getElementById('avatar');
                            storyImg.src = dataImage;
                        }
                        document.getElementById("fileInput").onchange = function () {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                document.getElementById("avatar").src = e.target.result;
                                storyImgData = (e.target.result);
                                localStorage.setItem("avatarImgData", storyImgData);
                            }
    
                            reader.readAsDataURL(this.files[0]);
    
                        }
    
                    }
    
                    function getBase64Image(img) {
                        //save the image as a Base64.
                        var canvas = document.createElement("canvas");
                        canvas.width = img.width;
                        canvas.height = img.height;
    
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0);
    
                        var dataURL = canvas.toDataURL("image/png");
    
                        return dataURL;
                    }
                </script>
    
                <!--To remove spaces from the beginning , the ending and between letters and words inside myUserName input text.-->
                <script> 
                    function AvoidSpace(event) {
                        var k = event ? event.which : window.event.keyCode;
                        if (k == 32) return false;
                    }
                </script>
                <!--To save myUserName text even after refreshing the page and to transfer it to another page.-->
                <script type="text/javascript"> 
                    document.getElementById("myUserName").value = getSavedValue("myUserName"); function saveValue(e) {
                        var id = e.id;
                        var val = e.value;
                        localStorage.setItem(id, val);
                    }
                    function getSavedValue(v) {
                        if (localStorage.getItem(v) === null) {
                            return "";
                        }
                        return localStorage.getItem(v);
                    }
                </script>
                <!--To save status text even after refreshing the page and to transfer it to another page.-->
                <script type="text/javascript"> 
                    document.getElementById("status").value = getSavedValue("status");
                    function saveValue2(e) {
                        var id = e.id;
                        var val = e.value;
                        localStorage.setItem(id, val);
                    }
                    function getSavedValue2(v) {
                        if (localStorage.getItem(v) === null) {
                            return "";
                        }
                        return localStorage.getItem(v);
                    }
                </script>
                <!--To check username field -->
                <script>
                    function checkUsername() {
                        var userName = document.getElementById("myUserName").value;
                        var regex = new RegExp("^[A-Za-z0-9]+$");
                        if (regex.test(userName) & userName != "") {
                            window.location.href = "ApplesChat.html";
                        } else {
                            alert("Please Enter Your Username To Start Chat,Only English Letters              And Numbers are Allowed Without Spaces Between Them.");
                            document.getElementById("myUserName").value = "";
                            document.getElementById("myUserName").focus();
                        }
                    }
                </script>
                <script>
                    function checkUsernameForOnlineUsers() {
                        var userName = document.getElementById("myUserName").value;
                        var regex = new RegExp("^[A-Za-z0-9]+$");
                        if (regex.test(userName) & userName != "") {
                            window.location.href = "OnlineUsers.html";
                        } else {
                            alert("Please Enter Your Username To Start Chat,Only English Letters              And Numbers are Allowed Without Spaces Between Them.");
                            document.getElementById("myUserName").value = "";
                            document.getElementById("myUserName").focus();
                        }
                    }
                </script>
                <!--==========================================================-->
                <p>Send us Feedback on</p>
                <div class="container">
                    <a href="https://twitter.com/omanxp45/status/1152591452280688641?s=19">
                        <button type="button" class="btn btn-outline-info">Twitter</button></a>
                    <!--==========================================================-->
                    <a href="https://www.facebook.com/695139910599253/posts/2304514852995076/">
                        <button type="button" class="btn btn-outline-primary">Facebook</button></a>
                    <!--==========================================================-->
                    <a href="https://www.snapchat.com/add/omanxp45">
                        <button type="button" class="btn btn-outline-warning">Snapchat</button></a>
                    <!--==========================================================-->
                    <a href="https://wa.me/+96899420026">
                        <button type="button" class="btn btn-outline-success">WhatsApp</button></a>
                    <!--==========================================================-->
                </div>
            </div>
            <!--Page Views-->
            <div style="text-align: center;">
                Page Views
              <br />
                <a href="http://www.hitwebcounter.com" target="_blank">
                    <img src="http://hitwebcounter.com/counter/counter.php?page=7108744&style=0005&nbdigits=9&type=page&initCount=0" title=""
                        alt="Page Views">
                </a>
    
            </div>
     </form>
    </body>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 2, 2020 9:35 AM

All replies

  • User-474980206 posted

    You don’t specify the issuer you are facing, but typically its size. See docs

    https://www.tnaboard.com/forumdisplay.php

    Thursday, February 27, 2020 8:50 PM
  • User1535942433 posted

    Hi Omanxp45-1,

    Accroding to your description and codes,I create a demo and keep Awesome and bootstrap.It works fine.I suggest you could use navbar dropdown-menu.

    Could you tell us where is the dropdown menu in the page2 and what do you want to do about this code:

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"></div> </div>

    More details,you could refer to below codes:

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <asp:Label ID="Label1" runat="server" Text="ApplesChat" CssClass="lb"></asp:Label>
                                </a>
                                <!-- Here's the magic. Add the .animate and .slide-in classes to your .dropdown-menu and you're all set! -->
                                <div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

    Result:

    Best regards,

    Yijing Sun

    Friday, February 28, 2020 3:24 AM
  • User-2071692902 posted

    Hi yij sun

     the problem is that the dropdown menu that depends on Awesome reference refuse to work properly until I removed the Bootstrap reference: here the Bootstrap ref:

    Friday, February 28, 2020 5:01 PM
  • User1535942433 posted

    Hi Omanxp45-1,

    Accroding to your description, I suggest you could check your codes whather exist bootstrap.min.js.

    What the version of the bootstrap?I have used v4.4.1.

    More details,you could refer to below codes:

    <head runat="server">
        <meta charset="utf-8" />
        <meta name="description" content="Universal and confidential chat,<br> where you can communicate with others, privately or publicly">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <script src="Scripts/jquery-3.0.0.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <title>ApplesChat</title>
        <link rel="icon" sizes="57x57" href="https://imgur.com/57AweD4" />
        <link rel=" shortcut icon" href="https://imgur.com/57AweD4.png" />
    
        <style>
            .banner {
                width: 100%;
                height: 50px;
                background-color: #0daeeb;
                ;
            }
    
            .userInfoDiv {
                margin: auto;
                border: 3px solid red;
                padding: 5px;
                width: 320px;
                height: 250px;
                background-color: lightblue;
                box-shadow: 10px 10px 8px red;
            }
    
            .changeBottun {
                text-align: center;
            }
    
            #avatar {
                vertical-align: middle;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: block;
                margin-left: auto;
                margin-right: auto;
                z-index: 1;
                ;
            }
    
            #myUserName {
                color: red;
                border: 2px solid blue;
                border-radius: 4px;
            }
    
            #status {
                color: #000;
                border: 2px solid blue;
                border-radius: 4px;
            }
    
            .EnterChatBottun {
                text-align: center;
            }
        </style>
        <link rel=" shortcut icon" href="image/image5.jpg" />
    </head>
    <body>
        <form id="form1" runat="server">
    
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <asp:Label ID="Label1" runat="server" Text="ApplesChat" CssClass="lb"></asp:Label>
                                </a>
                                <!-- Here's the magic. Add the .animate and .slide-in classes to your .dropdown-menu and you're all set! -->
                                <div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
                <div class="snippet-code"></div>
            </div>
            <div>
                <img style="display: block; margin: auto; width: 200px; height: 200px;"
                    src="image/image5.jpg"
                    alt=".." />
            </div>
            <p style="color: blue; text-align: center; font-family: Times New Roman">Universal and confidential chat.</p>
            <div class=" EnterChatBottun">
                <button onclick=" checkUsername()">
                    <img src='image/image5.jpg' style="width: 20px; height: 20px" alt="..">
                    Enter ApplesChat</button>
            </div>
            <div class=" EnterChatBottun">
                <button onclick=" checkUsernameForOnlineUsers()">
                    <img src='image/image5.jpg' style="width: 20px; height: 20px" alt="..">
                    Online Users</button>
            </div>
            <br />
    
            <div class=" userInfoDiv">
                <img alt="Avatar"
                    id="avatar"
                    src='image/image5.jpg'>
                <div class=" changeBottun">
                    <input id="fileInput"
                        type="file"
                        style="display: none" />
                    <input type="button"
                        style="display: inline"
                        value="Change Avatar!"
                        onclick="document.getElementById('fileInput').click()" />
    
                    <button
                        onclick="document.getElementById('avatar').src='Media/Images/ah.png'">
                        <img id="btnImg" src='image/image5.jpg' style="width: 20px; height: 20px" alt=".." />
                        Use Default
                    </button>
                </div>
                Username:
       <div class=" UsernameLabelDiv">
           <input id="myUserName"
               type="text"
               style="width: 280px"
               placeholder="Username"
               maxlength="15"
               onkeyup="saveValue(this)"
               onkeypress="return AvoidSpace(event)" />
       </div>
                Status:
     <input id="status"
         type="text"
         style="width: 280px"
         placeholder="Write Your Status"
         maxlength="25"
         onkeyup="saveValue2(this)" />
            </div>
    
            <br />
            <div class=" EnterChatBottun">
                <button onclick=" checkUsername()">
                    <img src="https://imgur.com/u82MtgI.png" style="width: 20px; height: 20px" alt="..">
                    Enter ApplesChat</button>
                <br />
                <br />
                <!--To save image in the localStorage after browsing for it and keep it even after refreshing the page.-->
                <script>
                    window.onload = function () {
                        if (localStorage.getItem("imgData") === null) {
                            var avatarImage = document.getElementById("avatar");
                            avatarImgData = getBase64Image(avatarImage);
                            localStorage.setItem("avatarImgData", avatarImgData);
    
                        }
                        else {
                            var dataImage = localStorage.getItem('avatarImgData');
                            storyImg = document.getElementById('avatar');
                            storyImg.src = dataImage;
                        }
                        document.getElementById("fileInput").onchange = function () {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                document.getElementById("avatar").src = e.target.result;
                                storyImgData = (e.target.result);
                                localStorage.setItem("avatarImgData", storyImgData);
                            }
    
                            reader.readAsDataURL(this.files[0]);
    
                        }
    
                    }
    
                    function getBase64Image(img) {
                        //save the image as a Base64.
                        var canvas = document.createElement("canvas");
                        canvas.width = img.width;
                        canvas.height = img.height;
    
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0);
    
                        var dataURL = canvas.toDataURL("image/png");
    
                        return dataURL;
                    }
                </script>
    
                <!--To remove spaces from the beginning , the ending and between letters and words inside myUserName input text.-->
                <script> 
                    function AvoidSpace(event) {
                        var k = event ? event.which : window.event.keyCode;
                        if (k == 32) return false;
                    }
                </script>
                <!--To save myUserName text even after refreshing the page and to transfer it to another page.-->
                <script type="text/javascript"> 
                    document.getElementById("myUserName").value = getSavedValue("myUserName"); function saveValue(e) {
                        var id = e.id;
                        var val = e.value;
                        localStorage.setItem(id, val);
                    }
                    function getSavedValue(v) {
                        if (localStorage.getItem(v) === null) {
                            return "";
                        }
                        return localStorage.getItem(v);
                    }
                </script>
                <!--To save status text even after refreshing the page and to transfer it to another page.-->
                <script type="text/javascript"> 
                    document.getElementById("status").value = getSavedValue("status");
                    function saveValue2(e) {
                        var id = e.id;
                        var val = e.value;
                        localStorage.setItem(id, val);
                    }
                    function getSavedValue2(v) {
                        if (localStorage.getItem(v) === null) {
                            return "";
                        }
                        return localStorage.getItem(v);
                    }
                </script>
                <!--To check username field -->
                <script>
                    function checkUsername() {
                        var userName = document.getElementById("myUserName").value;
                        var regex = new RegExp("^[A-Za-z0-9]+$");
                        if (regex.test(userName) & userName != "") {
                            window.location.href = "ApplesChat.html";
                        } else {
                            alert("Please Enter Your Username To Start Chat,Only English Letters              And Numbers are Allowed Without Spaces Between Them.");
                            document.getElementById("myUserName").value = "";
                            document.getElementById("myUserName").focus();
                        }
                    }
                </script>
                <script>
                    function checkUsernameForOnlineUsers() {
                        var userName = document.getElementById("myUserName").value;
                        var regex = new RegExp("^[A-Za-z0-9]+$");
                        if (regex.test(userName) & userName != "") {
                            window.location.href = "OnlineUsers.html";
                        } else {
                            alert("Please Enter Your Username To Start Chat,Only English Letters              And Numbers are Allowed Without Spaces Between Them.");
                            document.getElementById("myUserName").value = "";
                            document.getElementById("myUserName").focus();
                        }
                    }
                </script>
                <!--==========================================================-->
                <p>Send us Feedback on</p>
                <div class="container">
                    <a href="https://twitter.com/omanxp45/status/1152591452280688641?s=19">
                        <button type="button" class="btn btn-outline-info">Twitter</button></a>
                    <!--==========================================================-->
                    <a href="https://www.facebook.com/695139910599253/posts/2304514852995076/">
                        <button type="button" class="btn btn-outline-primary">Facebook</button></a>
                    <!--==========================================================-->
                    <a href="https://www.snapchat.com/add/omanxp45">
                        <button type="button" class="btn btn-outline-warning">Snapchat</button></a>
                    <!--==========================================================-->
                    <a href="https://wa.me/+96899420026">
                        <button type="button" class="btn btn-outline-success">WhatsApp</button></a>
                    <!--==========================================================-->
                </div>
            </div>
            <!--Page Views-->
            <div style="text-align: center;">
                Page Views
              <br />
                <a href="http://www.hitwebcounter.com" target="_blank">
                    <img src="http://hitwebcounter.com/counter/counter.php?page=7108744&style=0005&nbdigits=9&type=page&initCount=0" title=""
                        alt="Page Views">
                </a>
    
            </div>
     </form>
    </body>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 2, 2020 9:35 AM