Vongretchenmelissa's Profile

250
Points

Questions
48

Answers
45

  • RE : Get content from certain tags with certain attributes using BS4
    Asked on July 16, 2020 in CSS. 
    page = BeautifulSoup(text, 'html.parser') names = page.find_all('span' , class_ = 'h6 m-0')

    Without knowing your use case I don’t know if this will work.

    • 300 views
    • 2 answers
    • 0 votes
  • RE : Overflow hidden scroll-y cutting off content
    Asked on July 16, 2020 in CSS.

    Well, height: 100%; on the .content plus the height of the .title element will be cut off in a parent that hides overflow and is 100% high – just because 100% plus anything else adds up to more than 100% => causing an overflow, which will be cut off due to overflow: hidden.

    • 352 views
    • 5 answers
    • 0 votes
  • RE : Bootstrap Horizontal Form – class="form-group" not working
    Asked on July 16, 2020 in AngularJS.

    Try this, it might not have worked for you because you didn’t have the bootstrap embed with it.

    <html>   <head>     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">      <title>Bootstrap Horizontal Form</title>   </head>   <body style="padding: 50px;">      <form>       <div class="form-group row">         <label for="inputEmail3" class="col-sm-2 col-form-label">Name</label>         <div class="col-sm-10">           <input type="name" class="form-control" id="name" placeholder="Name">         </div>       </div>       <fieldset class="form-group">         <div class="row">           <legend class="col-form-label col-sm-2 pt-0">Choose</legend>           <div class="col-sm-10">             <div class="form-check">               <input class="form-check-input" type="radio" name="gridRadios" id="option1" value="option1">               <label class="form-check-label" for="gridRadios1">                 Option 1               </label>             </div>             <div class="form-check">               <input class="form-check-input" type="radio" name="gridRadios" id="option2" value="option2">               <label class="form-check-label" for="gridRadios2">                 Option 2               </label>             </div>             <div class="form-check disabled">               <input class="form-check-input" type="radio" name="gridRadios" id="option3" value="option3">               <label class="form-check-label" for="gridRadios3">                 Option 3               </label>             </div>           </div>         </div><br>       </fieldset>       <div class="form-group row">         <div class="col-sm-2">Select Names</div>         <div class="col-sm-10">           <div class="form-check">             <input class="form-check-input" type="checkbox" id="name1">             <label class="form-check-label" for="name1">               Name 1             </label><br>             <input class="form-check-input" type="checkbox" id="name2">             <label class="form-check-label" for="name2">               Name 2             </label><br>             <input class="form-check-input" type="checkbox" id="name3">             <label class="form-check-label" for="name3">               Name 3             </label><br>           </div>         </div>       </div>       <div class="col-md-3 mb-3">         <label for="validationCustom05">Start Date</label>         <input type="date" class="form-control" id="start-date" name="start-date">       </div>       <div class="col-md-3 mb-3">         <label for="validationCustom05">End Date</label>         <input type="date" class="form-control" id="end-date" name="end-date">       </div>       <div class="form-group">         <label for="message">Message</label>         <textarea class="form-control" id="message" rows="3" name="message" placeholder="Message"></textarea>       </div>       <div class="form-group row">         <div class="col-sm-10">           <button style="width: 122.5%;" type="submit" class="btn btn-primary">Sign in</button>         </div>       </div>     </form>      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>   </body> </html>

    • 402 views
    • 1 answers
    • 0 votes
  • RE : If statement not working with document.querySelector
    Asked on July 16, 2020 in CSS.

    Every time you click on the hamburger, drop() function fires and inside this function you set style.display property of "cross" element to flex. But the code inside if statement will be executed only when style.display property of "cross" element is set to none, but it happens never. You can just use any additional class, for example, "hidden" and toggle it every time you click on menu: when bar has class "hidden" – cross should have this class and vice versa . And in the css file class "hidden" should have display: none property.

    • 326 views
    • 2 answers
    • 0 votes
  • RE : adding text to an image, no canvas, vanilla javascript
    Asked on July 16, 2020 in CSS.

    Since this isn’t about saving the images but just for display purposes, I got it working.

    The main problem that you were having is your approach seemed to focus more on the javascript side of things but missed out on the CSS part of it.

    There are multiple ways to put images behind text, the most common two are:

    1. Setting the images as a background image on the parent element (ie div) then just setting the text within that element
    2. Using CSS to absolute position the text on the image and use z-index to layer them

    For my answer I chose #2.

    Besides misc code clean ups, the main function that I did was:

    1. I created a div, and gave it a class of meme
    2. I added the image to that div
    3. I added the top and bottom text to their own divs and append those to the meme div
    4. Using CSS, I positioned the top and bottom text above the image

    A few other things, when adding an eventListeners unless it is absolutely needed, I recommend tying them to a specific element and not just the document (or nothing at all which I believe is document anyway). By applying it to the document, any click will be processed, but by tying it to the element, only clicks on that element will be processed.

    console.log('Currentfile: memegenerator'); let img = document.getElementsByTagName('img'); let form = document.querySelector('form');  form.addEventListener('submit', function(e) {       e.preventDefault();       let meme = document.createElement("div");       let top_text = document.createElement("div");       let bottom_text = document.createElement("div");       let img = document.createElement("img");              let btn = document.createElement("button");       btn.setAttribute("type","button");              img.src = document.getElementById('picurl').value;       top_text.classList.add("top_text");       top_text.innerHTML = document.getElementById('text_top').value;              bottom_text.classList.add("bottom_text");       bottom_text.innerHTML = document.getElementById('text_lower').value;              btn.innerHTML = "REMOVE";              meme.classList.add("meme");       meme.appendChild(top_text);       meme.appendChild(bottom_text);       meme.appendChild(img);       meme.appendChild(btn);              let memeLocation = document.getElementById('location');       memeLocation.appendChild(meme);        document.getElementById('picurl').value = "";       document.getElementById('text_top').value = "";       document.getElementById('text_lower').value = "";        btn.addEventListener('click', function(e) {           meme.remove();       }) });
    h1 {   color: navy; }  .center {   text-align: center; }  .main {   width: 50%;   margin: 0 auto;   background-color: lightblue;   border-radius: 0.5rem;   border: 0.08rem solid black;   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);   transition: 0.3s; }  .meme {   width: 99%;   /* margin: 2 auto; */   justify-content: center;   border-radius: 0.5rem;   border: 0.08rem solid black;   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);   transition: 0.3s;   position:relative; }  .top_text{ position:absolute; top:10px; left:30px; color:#ffffff; z-index:3 }  .bottom_text{ position:absolute; bottom:20px; left:30px; color:#ffffff; z-index:3 }  .meme img{ max-width:100%; z-index:2 }  main:hover {   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }  meme:hover {   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }  body {   background-color: #f0feff; }  .button {   float: right; }   /* divider styles */  hr.rounded {   border-top: 2px solid #bbb;   border-radius: 5px;   width: 90%; }  .border_lower {   border-bottom: 1px solid #bbb;   border-radius: 5px;   width: 90%; }   /* form styles */  form {   width: 60%;   margin: 0 auto; }  form input {   margin: 2px; }  form label {   margin: 2px; }   /* Container holding the image and the text */  .container {   position: relative;   text-align: center;   color: white; }   /* Bottom left text */  .bottom-left {   position: absolute;   bottom: 8px;   left: 16px; }   /* Top left text */  .location {   position: absolute;   top: 8px;   left: 16px; }
    <main class="main">   <h1 class="center">MEME GENERATOR!</h1>   <hr class="rounded" />   <form action="#" class="form">     <label for="text_top">Text Upper:</label>     <input type="text" name="text_top" id="text_top" /><br />     <label for="text_lower">Text Lower:</label>     <input type="text" name="text_lower" id="text_lower" /><br />     <label for="picturl">Picture:</label>     <input type="url" name="picurl" value="https://www.fillmurray.com/640/360" id="picurl" /><br /><br /><br />     <input type="submit" value="Add Meme:" /><br />     <hr />   </form>   <div id="location"></div>   <hr class="border_lower" />   <p class="center"><small>Thanks for visiting!</small></p> </main>

    • 367 views
    • 1 answers
    • 0 votes
  • RE : How can I make a relative object always be on the bottom of a div [HTML/CSS]
    Asked on July 16, 2020 in CSS.

    Giving the parent element position: relative and the child element position: absolute; bottom: 0; should do the trick.

    • 252 views
    • 1 answers
    • 0 votes
  • RE : How can I vertically center all the text in a grid?
    Asked on July 16, 2020 in CSS.

    Change your grid-template-areas with

    ". img" "h1 img" "h2 img" "p img" ". img";

    and add align-content:center

    h1 {   grid-area: h1; }  h2 {   grid-area: h2; }  p {   grid-area: p; }  img {   grid-area: img; }  .grid {   display: grid;   grid-template-columns: 1fr 1fr;   grid-template-areas: ". img" "h1 img" "h2 img" "p img" ". img";   text-align: center;   align-content: center; }  .grid>* {   padding: 0;   margin: 0;   border: solid red; }
    <div class="grid">   <h1>Header</h1>   <h2>Subheader</h2>   <img src="https://images.unsplash.com/photo-1594041221013-7f4944a487cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" />   <p>some paragraph text...</p> </div>

    • 279 views
    • 2 answers
    • 0 votes
  • RE : how to center a button inside a form using bootstrap 4
    Asked on July 16, 2020 in CSS.

    I would try adding these two lines to your CSS for button.standard:

    margin-left:auto; margin-right:auto;

    This often works for me.

    • 317 views
    • 4 answers
    • 0 votes
  • RE : How to change font-width in javascript for every on change
    Asked on July 16, 2020 in CSS.

    You should define how many letter you want to show your text with weight 900. Per example, if you want your text for 100 characters, you can use a code likes this:

    var myInput = document.getElementById("testarea"); var relation = myInput.innerText.length / 100; if(relation < 1){    myInput.style.fontWeight = 100 + (relation*800); }else{    myInput.style.fontWeight = "900"; }
    • 311 views
    • 1 answers
    • 0 votes
  • RE : Only detect click event on pseudo-element
    Asked on July 16, 2020 in CSS.

    Actually, it is possible. You can check if the clicked position was outside of the element, since this will only happen if ::before or ::after was clicked.

    This example only checks the element to the right but that should work in your case.

    span = document.querySelector('span');    span.addEventListener('click', function (e) {      if (e.offsetX > span.offsetWidth) {          span.className = 'c2';      } else {          span.className = 'c1';      }  });
    div { margin: 20px; }  span:after { content: 'AFTER'; position: absolute; }    span.c1 { background: yellow; }  span.c2:after { background: yellow; }
    <div><span>ELEMENT</span></div>

    JSFiddle

    • 315 views
    • 10 answers
    • 0 votes