Joncoragladys's Profile

185
Points

Questions
35

Answers
43

  • RE : CSS and HTML dropdown with wrong z-index compared to parents
    Asked on July 16, 2020 in CSS.

    UPDATED

    Added extra cover div with class headBannerIn to separate it form being parent of .dropdown so now we can use z-index for both separately. And changed z-index: 3 in #financeChoice

    body {     background-color: #F2F2F2;     background-size: cover; }  .headBanner {     height: 10vh;     width: 100%;     clear: top;     position: fixed;     z-index: 100; }  /* added the, with z-index: 2 */ .headBannerIn {     height: 100%;     width: 100%;     background-color: #007AFF;     position: absolute;     z-index: 2; }  .dropdown-content {     visibility: hidden;   display: block;   position: relative;   background-color: #8FC4FF;   min-width: 160px;   z-index: 1;   top: 100%;   width: 100%;   height: 30vh;   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);     padding: 12px 16px;     opacity: 0; }  .dropdown:hover .dropdown-content {     display: block;     animation: bannerFadeIn 1s linear forwards;     visibility: visible;     opacity: 1;     z-index: -1;     position: absolute;     top: 100%; }  @keyframes bannerFadeIn {   from {     opacity: 0;      transform: translateY(-300px);   }   to {     opacity: 1;     transform: translateY(0);   } }  #innerSpace1 {     position: absolute;     height: 80%;     width: 17.25%;     background-color: transparent;     top: 10%;     left: 14%;     border-right: 3px solid;  }  #innerSpace2 {     position: absolute;     height: 80%;     width: 13%;     left: 31.5%;     background-color: transparent;     top: 10%;     border-right: 3px solid; }  #innerSpace3 {     position: absolute;     height: 80%;     width: 15%;     left: 44.9%;     background-color: transparent;     top: 10%; }  #innerSpace4 {     position: absolute;     height: 100%;     width: 20%;     left: 59.25%;     background-color: transparent;     top: 0%; }  #coursesHead {     position: absolute;     font-family: 'Roboto';font-size: 2vw; color: white;     top: 6%;     left: 27%;     text-decoration: underline; }  #coursesList {     position: absolute;     font-family: 'Roboto';font-size: 1vw; color: white;     top: 28%;     left: 29%;     font-weight: bold;     line-height: 170%;     cursor: pointer; }  #toolsHead {     text-align: center;     position: absolute;     font-family: 'Roboto';font-size: 2vw; color: white;     width: 60%;     height: 30%;     top: 50%;     left: 50%;     margin-left: -30%;     margin-top: -15%;     cursor: pointer; }  #articlesHead {     position: absolute;     font-family: 'Roboto';font-size: 2vw; color: white;     top: 6%;     left: 30%;     text-decoration: underline; }  * {     padding: 0;     margin: 0; }  #logo {     bottom: 10%;     top: 10%;     width: 4%;     left: 20%;     height: 80%;     position: absolute;     background-image: url("blue logo.png");     background-position: center; /* Center the image */     background-repeat: no-repeat; /* Do not repeat the image */     background-size: cover;     display: inline-block; }  #financeChoice {     width: 9.8%;     height: 10vh;     top: 0%;     bottom: 0%;     left: 24.8%;     display: inline-block;     position: relative;     font-family: 'Roboto';font-size: 2vw; color: white;     background-color: transparent;     border: none;     z-index: 3; /* changed form 2 to 3, so it fill be over the menu */     cursor: pointer; }  #choice2 {     width: 9.8%;     height: 90%;     top: 5%;     bottom: 5%;     left: 34.8%;     display: inline-block;     position: absolute;     font-family: 'Roboto';font-size: 2vw; color: white;     background-color: transparent;     border: none; }  #choice3 {     width: 9.8%;     height: 90%;     top: 5%;     bottom: 5%;     left: 44.8%;     display: inline-block;     position: absolute;     font-family: 'Roboto';font-size: 2vw; color: white;     background-color: transparent;     border: none; }  #choice4 {     width: 9.8%;     height: 90%;     top: 5%;     bottom: 5%;     left: 54.8%;     display: inline-block;     position: absolute;     font-family: 'Roboto';font-size: 1.7vw; color: white;     background-color: transparent;     border: none; }  #choice5 {     width: 9.8%;     height: 90%;     top: 5%;     bottom: 5%;     left: 64.8%;     display: inline-block;     position: absolute;     font-family: 'Roboto';font-size: 1.7vw; color: white;     background-color: transparent;     border: none; }  #loginButton {     width: 5vh;     height: 5vh;     top: 20%;     bottom: 20%;     left: 75%;     display: inline-block;     position: absolute;     background-image: url("google login.jpg");     background-position: center; /* Center the image */     background-repeat: no-repeat; /* Do not repeat the image */     background-size: cover;     border-radius: 50%; }  #tab1 {     width: 4.9%;     height: 10%;     top: 90%;     left: 27.25%;     display: inline-block;     position: absolute;     background-color: #1DBF2D;     z-index: 0; }  #tab2 {     width: 4.9%;     height: 10%;     top: 90%;     left: 37.25%;     display: inline-block;     position: absolute;     background-color: #1DBF2D; }  #tab3 {     width: 4.9%;     height: 10%;     top: 90%;     left: 47.25%;     display: inline-block;     position: absolute;     background-color: #1DBF2D; }  #tab4 {     width: 4.9%;     height: 10%;     top: 90%;     left: 57.25%;     display: inline-block;     position: absolute;     background-color: #1DBF2D; }  #tab5 {     width: 4.9%;     height: 10%;     top: 90%;     left: 67.25%;     display: inline-block;     position: absolute;     background-color: #1DBF2D; }
    <!DOCTYPE html> <html lang="en">     <title>         Welcome Page         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, initial-scale=1">     </title>     <body>         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>         <link rel="stylesheet" href="C:\Users\rzemi\OneDrive\Desktop\web\cssPages\WelcomeStyle.css">         <link rel="stylesheet" href="C:\Users\rzemi\OneDrive\Desktop\web\cssPages\banner.css">         <div class="headBanner" id="headBanner">       <!-- added extra cover -->       <div class="headBannerIn">         <div id="logo" onclick="location.href = 'Welcome.html';"></div>         <button type="button" id="choice2" onclick="location.href = 'InvestingHome.html';">Investing</button>         <button type="button" id="choice3" onclick="location.href = 'EarlyStartHome.html';">Early Start</button>         <button type="button" id="choice4" onclick="location.href = 'RetirementHome.html';">Retirement</button>         <button type="button" id="choice5">Community</button>         <div id="tab1"></div>         <div id="tab2"></div>         <div id="tab3"></div>         <div id="tab4"></div>         <div id="tab5"></div>         <button type="button" id="loginButton"></button>       </div>             <div class="dropdown" id="dropdown">                 <button class="dropbtn" type="button" id="financeChoice" onclick="location.href = 'FinancesHome.html';">                     Finance                     <i class="fa fa-caret-down"></i>                 </button>                 <div class="dropdown-content">                     <div id="topDropdown">                         <div class="innerSpace" id="innerSpace1">                             <h2 id="coursesHead">Courses</h2>                             <ol id="coursesList">                                 <li onclick="location.href = 'Finances-intro1-Course.html';">Introduction</li>                                 <li onclick="location.href = 'Finances-TandP1-Course.html';">Tracking And Planning</li>                                 <li onclick="location.href = 'Finances-CDB1-Course.html';">Credit, Debt and Banking</li>                                 <li onclick="location.href = 'Finances-Savings1-Course.html';">Saving</li>                                 <li onclick="location.href = 'Finances-Taxes1-Course.html';">Taxes</li>                             </ol>                         </div>                         <div class="innerSpace" id="innerSpace2">                             <h2 id="toolsHead" onclick="location.href = 'financeToolOverview.html';">Financial Tool</h2>                         </div>                         <div class="innerSpace" id="innerSpace3">                             <h2 id="articlesHead">Articles</h2>                         </div>                     </div>                 </div>             </div>         </div>         <div id="topWelcome">             <div id="topWelcomeWriting">Hey guys, you ready to get you're finincial freedom on its way? <br>...</div>             <div id="topSemi"></div>             <div id="bottomSemi"></div>         </div>     </body> </html>

    • 394 views
    • 1 answers
    • 0 votes
  • RE : Adding hovering effects with a timeout in React
    Asked on July 16, 2020 in CSS.

    You should add a mouse out event that will hide the modal.

    Call a funtion on ‘mouseout’ event listener and set the showModal to false. In that way, it will hide the modal if you move your mouse any time.

    setShowModal(false)

    Updated: Can you also set timeout to a variable and then on mouseout fire clearTimeout(variable_that_set_to_timeout)

     React.useEffect(() => {     const divNode = divRef.current;     let timeout = null;      const handleEvent = (event: Event): void => {       if (divNode) {         if (divNode.contains(event.target as Node)) {           timeout = setTimeout(() => setShowModal(true), 1000);         } else {           setShowModal(false);         }       }     };      const hideModal = (event: Event): void => {       clearTimeout(timeout);       setShowModal(false);     };      divNode.addEventListener("mouseover", handleEvent);      divNode.addEventListener("mouseout", hideModal);      return () => {       document.removeEventListener("mouseover", handleEvent);     };   }, [divRef]);

    Link of sandbox

    • 326 views
    • 2 answers
    • 0 votes
  • RE : On a `ul`, Desktop vertical scroll works but mobile's touch scroll doesn't
    Asked on July 16, 2020 in CSS.

    Found fix myself.

    Issue was: Scroll was blocked with preventDefault() somewhere in my code.

    Debugging: Found issue by adding "touchmove" event to my div container. Logged event data when I scrolled from my phone (via USB debugging on desktop). It showed me defaultPrevented: true. Thats where I realized preventDefault might be causing it. Looked for it in my code, and found that I had applied preventDefault on touchmove event at one place.

    Removed that preventDefault and tried again and it worked.

    Lesson learned:

    1. If UI can be scrolled in desktop, it will be too in mobile unless blunder like above. No separate css or JS needed for scroll on mobiles.
    2. If CSS is not giving away anything, go and look in JS too and don’t ignore it thinking what JS has to do with touch screen.
    • 267 views
    • 1 answers
    • 0 votes
  • RE : CSS Bootstrap input text transparent with bottom border only (Chrome)
    Asked on July 16, 2020 in CSS.

    if you have an id to the input field the input[type=text] is not relevant because there will be only one field with that id

    so try this:

     #login { border: 0; outline: 0; background: transparent; border-bottom: 1px solid #e5e5e5; }
    • 292 views
    • 1 answers
    • 0 votes
  • RE : Radio button text covers options below
    Asked on July 16, 2020 in CSS.

    There are several ways available to fix the issue of long option texts covering the rest of the options.

    The first option is to change the width of the continput class to a higher value so that more text can fit inside of the labels. The labels are being constrained by the margin and padding enabled by the list and list items the radio buttons are put inside of. Hence a wider width will mean that more option text can be neatly displayed.

    The second option is to set the overflow property of the list items to hidden, like this (new property at the bottom of the definition):

    li {   position: relative;   padding: 10px;   padding-left: 40px;   height: 30px;   overflow: hidden; }

    This way, text that cannot be displayed without overflowing from the list items will be hidden and not cover text belonging to radio buttons further down. There are also more options for the overflow setting; the Mozilla MDN web docs has a short article on the property: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

    The third option is a combination of these options above. This should result in something that looks and works in a way that suits your needs. If you haven’t started inspecting and experimenting with your own content using something like Google Chrome’s Inspect function yet, I recommend you to read a tutorial for the browser you are using. Zapier has an in-depth tutorial for Google Chrome here and I see that Microsoft have incorporated the same tools that are available in Google Chrome into their updated Microsoft Edge (with the blue and green logo).

    • 323 views
    • 2 answers
    • 0 votes
  • RE : Counting the characters of a text with multiple lines
    Asked on July 16, 2020 in Java.

    New lines can be represented using different Control characters \ Escape sequence. Your code doesn’t work properly as it only takes \n into account which denotes line feed. Carriage return is represented by \r. You can fix your code by checking for carriage return as well by changing

    if ( !str.equals(" ") && !str.equals("\n") )

    to

    if ( !str.equals(" ") && !str.equals("\n") && !str.equals("\r") )

    This way, you will be handling for both CR and LF control characters. If you are interested in learning more about this, check this Wikipedia article: https://en.wikipedia.org/wiki/Newline

    • 292 views
    • 2 answers
    • 0 votes
  • RE : SimpleRetryPolicy Spring
    Asked on July 16, 2020 in Java.

    Exactly where did you find that documentation?

    See the javadocs for SimpleRetryPolicy…

        /**      * Create a {@link SimpleRetryPolicy} with the specified number of retry attempts. If      * traverseCauses is true, the exception causes will be traversed until a match is      * found. The default value indicates whether to retry or not for exceptions (or super      * classes) are not found in the map.      * @param maxAttempts the maximum number of attempts      * @param retryableExceptions the map of exceptions that are retryable based on the      * map value (true/false).      * @param traverseCauses is this clause traversable      * @param defaultValue the default action.      */     public SimpleRetryPolicy(int maxAttempts, Map<Class<? extends Throwable>, Boolean> retryableExceptions,             boolean traverseCauses, boolean defaultValue) {         super();         this.maxAttempts = maxAttempts;         this.retryableClassifier = new BinaryExceptionClassifier(retryableExceptions, defaultValue);         this.retryableClassifier.setTraverseCauses(traverseCauses);     }

    You add retryable/not retryable exceptions and determine whether we should traverse the cause tree until we find a match (there are also constructors with fewer parameters if you want to take the defaults).

    • 284 views
    • 1 answers
    • 0 votes
  • RE : Keep only date part when using pandas.to_datetime
    Asked on July 16, 2020 in Python.

    Simple Solution:

    df['date_only'] = df['date_time_column'].dt.date
    • 325 views
    • 9 answers
    • 0 votes
  • RE : Why does my code only replace certain characters with the string replace method?
    Asked on July 16, 2020 in Java.

    In the alphabet we have 26 letters, from a to z. In java if we convert a character to an int, we get a number, from 97 to 122.

    enter image description here

    String str = "abc zyx";     char[] ch = str.toCharArray();     int a = 97;     int z = 122;      LOOP:for (int i =0; i< ch.length; i++) {         int no = ch[i];          // if we don't find an alphabetic character, continue iteration         if ((no < 97) || (no > 122)) continue LOOP;          // if character is less than half of the alphabet         // we switch the characters         if (no <= 109) {             int findDif = z - no;             int findLetter = a + findDif;             char replacedLetter = (char)findLetter;             ch[i] = replacedLetter;             continue LOOP;          }          // and the other side         if (no >= 110) {             int findDif = z - no;             int findLetter = a + findDif;             char replacedLetter = (char)findLetter;             ch[i] = replacedLetter;             continue LOOP;         }     }      String converted = new String(ch);     System.out.println(converted);    // [z,y,x, , a,b,c]
    • 313 views
    • 6 answers
    • 0 votes
  • RE : Authentication manager missing in custom security class
    Asked on July 16, 2020 in Java.
    • As per your error, CustomSecurityFilter is supposed to have authenticationManager injected. But it is created without authenticationManager as below.
       @Bean    public CustomSecurityFilter customSecurityFilter() {     return new CustomSecurityFilter();    }
    • If you can modify BasicSecurityConfig, then update the method as follows:
       @Bean    public CustomSecurityFilter customSecurityFilter() {       //If it has a constructor which accept AuthenticationManager       return new CustomSecurityFilter(authenticationManagerBean());       //If it has a setter for AuthenticationManager instead       CustomSecurityFilter filter = new CustomSecurityFilter();       filter.setAuthenticationManager(authenticationManagerBean())       return filter;    }
    • If you cannot modify BasicSecurityConfig, then create it in SecurityConfiguration with Primary
       @Bean    @Primary    public CustomSecurityFilter customSecurityFilter() {       //If it has a constructor which accept AuthenticationManager       return new CustomSecurityFilter(authenticationManagerBean());       //If it has a setter for AuthenticationManager instead       CustomSecurityFilter filter = new CustomSecurityFilter();       filter.setAuthenticationManager(authenticationManagerBean())       return filter;    }
    • 354 views
    • 1 answers
    • 0 votes