Add a floating div in a popup

See also questions close to this topic

• Form action and method in ejs

  Very new to node.js and using ejs. After converting html files to ejs for using partials my 'search button' is no longer longer running the js which is linked to it's id. After researching I presume it has something to not having:

  <form action="" method="">
  

  However I am unsure how these work. Below is the ejs code:

  <form class="form-inline my-2 my-lg-0">
    <input id="sbar"class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button id="drinkSearch"class="btn btn-outline-success my-2 my-sm-0" type="button">Search</button>
  </form>
  

  And the start of js using this (file name: main.js):

     $('#drinkSearch').click(function(){
  console.log("this works");
  //Gather searchterms
  var word = document.getElementById("sbar").value;
  //Show results div, hide default main page
  $( "#mainPage").toggle(false);
  $( "#resultsbox").toggle(true);
  
  //Stop button from refreshing page (default function)
  event.preventDefault();
  console.log(word)
  
  //Get API response using searchterms
    $.getJSON("https://www.thecocktaildb.com/api/json/v1/1/search.php?s="+ word, function(Result) {
      console.log(Result)
  
  
  
  
      Result.drinks.forEach((drink) => {
        var drinkName = drink.strDrink;
        console.log(drinkName);
  const drinkEntries = Object.entries(drink),
    //Build arrays out of the two sets of keys
    [
      ingredientsArray,
      measuresArray
    ] = [
      "strIngredient",
      "strMeasure"
    ].map((keyName) => Object.assign([], ...drinkEntries
        .filter(([key, value]) => key.startsWith(keyName))
        .map(([key, value]) => ({[parseInt(key.slice(keyName.length))]: value})))),
  
    // Filters empty values based on the ingredients
    {
      finalIngredients,
      finalMeasures
    } = ingredientsArray.reduce((results, value, index) => {
      if(value && value.trim() || measuresArray[index] && measuresArray[index].trim()){
        results.finalIngredients.push(value);
        results.finalMeasures.push(measuresArray[index]);
      }
  
      return results;
    }, {
      finalIngredients: [],
      finalMeasures: []
    }),
  
    // zip both arrays
    ingredientsWithMeasures = finalIngredients
      .map((value, index) => [finalMeasures[index], value]);
  
  // Output
  console.log("Ingredients:", finalIngredients);
  console.log("Measures:", finalMeasures);
  
  $('#resultsTable > tbody:last').append( "<tr><td>"+ drinkName + "</td> + <td>"+ ingredientsWithMeasures + "</td></tr>" );
  
  
  console.log("All ingredients and measures:\n", ingredientsWithMeasures
    .map(([measure, ingredient]) => `${(measure || "").trim()} ${(ingredient || "").trim()}`)
    .join("\n"));
  });
  
     });
  
  });
  

  Any help for solutions to get the js method running and understanding the use of forms within node and ejs would be very helpful.
• How can I add black navbar to the existing transparent navbar?

  Does anyone have an idea how can I add black navbar below "some text" in navbar shown below? It doesn't matter how this navbar will look like I would like to have it just across the entire width of the screen below the string Some text. Any ideas?

  <nav class="navbar navbar-expand-lg fixed-top navbar-transparent" color-on-scroll="500">
    <div class="container">
      <div class="navbar-translate">
        <button class="navbar-toggler navbar-burger" type="button" data-toggle="collapse" data-target="#navbarToggler"
                aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"
                (click)="sidebarToggle()">
          <span class="navbar-toggler-bar"></span>
          <span class="navbar-toggler-bar"></span>
          <span class="navbar-toggler-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="navbarToggler">
  
  
        <div class="outer">
          <div class="middle">
            <div class="inner">
  
                <h6 align="center">Some text</h6>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  
• How to change a predeterminate underline color in an Input with Materialize w/Ruby on Rails

  I really try so hard to change the underline color but I can't, I don't know where do that, please help me! 🙏🙏

  

        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            <%= form_for(:session, url: login_path) do |f| %>
  
            <%= f.label :email %>
            <%= f.email_field :email, class: 'form-control white-text' %>
            <br>
            <%= f.label :password %>
            <%= f.password_field :password, class: 'form-control white-text' %>
            <br>
  
  
            <%= f.submit "Log in", class: "btn" ,style:"color:white;background-color: #EEB756;" %>
            <% end %>
  
          </div>
        </div>
  
• Randomizing animation delays

  I have a bunch of radar blips that I have created and placed on a "map". At the moment they all appear at the same time. I was wondering if there was a way to give them all individual animation-delay while still preserving the 1.6 second animation delay on .delayedBlip.

  .table {
    width: 600px;
    height: 450px;
    background: url('https://i.imgur.com/6QPG66E.jpg');
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: #133342;
    border: solid 3px rgba(127, 222, 254, 0.2);
    border-radius: 15px;
    transform: rotateX(70deg) rotateZ(0deg) rotateY(0deg) !important;
    margin-top: 200px;
    opacity: 0.8;
    margin-left: 15%;
    overflow: hidden;
  }
  
  #radarline {
    background: -webkit-linear-gradient(left, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
    background: -o-linear-gradient(left, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
    background: linear-gradient(to right, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001db9e0', endColorstr='#001db9e0', GradientType=1);
    /* IE6-9 */
    width: 30px;
    height: 1400px;
    transform: rotateX(70deg) rotateZ(0deg) rotateY(0deg) !important;
    margin-top: -475px;
    margin-left: 0;
    animation-name: radarline;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  @keyframes radarline {
    from {
      margin-left: -30px;
    }
    to {
      margin-left: 630px;
    }
  }
  
  .blip {
    margin: 0 0;
    position: absolute;
    border-radius: 50%;
    background-color: rgba(0, 211, 255, 1.00);
    opacity: 1;
    width: 25px;
    height: 25px;
  }
  
  .blipping {
    border-radius: 50%;
    -webkit-animation: scaleUp 2.3s infinite linear;
    animation: scaleUp 2.3s infinite linear;
  }
  
  .delayedBlip {
    -webkit-animation-delay: -1.6s;
    animation-delay: -1.6s;
  }
  
  @keyframes scaleUp {
    0% {
      opacity: 1;
      transform: scale(0);
    }
    40% {
      opacity: 0.5;
      transform: scale(0.5);
    }
    100% {
      opacity: 0;
      transform: scale(1.0);
    }
  }
  
  @-moz-keyframes scaleUp {
    0% {
      opacity: 1;
      -moz-transform: scale(0);
    }
    40% {
      opacity: 0.5;
      -moz-transform: scale(0.5);
    }
    100% {
      opacity: 0;
      -moz-transform: scale(1.0);
    }
  }
  
  @-webkit-keyframes scaleUp {
    0% {
      opacity: 1;
      -webkit-transform: scale(0);
    }
    40% {
      opacity: 0.5;
      -webkit-transform: scale(0.5);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.0);
    }
  }

  <div class="table">
    <div id="radarline"></div>
    <div class="blips">
      <div class="blipping blip" style="margin-left: 300px; top: 300px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 300px; top: 300px;"></div>
      <div class="blipping blip" style="margin-left: 200px; top: 100px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 200px; top: 100px;"></div>
      <div class="blipping blip" style="margin-left: 100px; top: 30px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 100px; top: 30px;"></div>
      <div class="blipping blip" style="margin-left: 400px; top: 250px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 400px; top: 250px;"></div>
      <div class="blipping blip" style="margin-left: 120px; top: 280px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 120px; top: 280px;"></div>
      <div class="blipping blip" style="margin-left: 260px; top: 320px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 260px; top: 320px;"></div>
      <div class="blipping blip" style="margin-left: 280px; top: 400px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 280px; top: 400px;"></div>
      <div class="blipping blip" style="margin-left: 400px; top: 350px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 400px; top: 350px;"></div>
      <div class="blipping blip" style="margin-left: 380px; top: 30px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 380px; top: 30px;"></div>
      <div class="blipping blip" style="margin-left: 170px; top: 200px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 170px; top: 200px;"></div>
      <div class="blipping blip" style="margin-left: 420px; top: 120px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 420px; top: 120px;"></div>
      <div class="blipping blip" style="margin-left: 280px; top: 170px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 280px; top: 170px;"></div>
      <div class="blipping blip" style="margin-left: 350px; top: 210px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 350px; top: 210px;"></div>
      <div class="blipping blip" style="margin-left: 220px; top: 240px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 220px; top: 240px;"></div>
      <div class="blipping blip" style="margin-left: 280px; top: 40px;"></div>
      <div class="blipping blip delayedBlip" style="margin-left: 280px; top: 40px;"></div>
    </div>
  </div>
• AspNet bundles trying load css files in wrong folder

  I created bundles to load styles and scripts need to use datepicker in aspnet application:

  //Datepicker
          bundles.Add(new StyleBundle("~/Content/all_themes").Include(
                     "~/Content/themes/base/all.css"));
  
          bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                      "~/Scripts/jquery-ui-1.12.1.min.js"));
  

  Content and Scripts folder have this libraries:

  

  In the screen this bundles are load:

  <!-- DatePicker-->
      @Styles.Render("~/Content/all_themes")
      @Scripts.Render("~/bundles/jqueryui")
  

  all.css style import others:

  /*!
   * jQuery UI CSS Framework 1.11.4
   * http://jqueryui.com
   *
   * Copyright jQuery Foundation and other contributors
   * Released under the MIT license.
   * http://jquery.org/license
   *
   * http://api.jqueryui.com/category/theming/
   */
  @import "base.css";
  @import "theme.css";
  

  But the page doesnt found and are searching in a wrong place:

  GET https://xxxxxxx-xxxxx.umbler.net/Content/base.css net::ERR_ABORTED
  GET https://xxxxxxx-xxxxx.umbler.net/Content/theme.css net::ERR_ABORTED
  

  The import should be looking in the same folder as the all.css file but it is searching in the Content root
• How do i improve the ui of my website using bootstrap

  Changing my Website Interface
  Hello good day, i'm a self trained developer, trying to make a living out of something, I'm also a sport analyst, so i opened up a football prediction site, where i post my sure football games, daily. all my codes are working well on the website, but i still feel that the User Interface is a bit jerky, please i need help on how to tidy things up or if possible how to change the outlook entirely, the address is https://visionpredict.com.ng
• Bootstrap modal window automatically receiving content of AJAX

  I am trying to create a bootstrap modal which contains the result of an AJAX request.

  my bootstrap code is as follows

  {{--Bootstrap modal--}}
  <div id="exampleModal" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title">Electronic mail title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-body">
                  <p>Electronic mail body text goes here.</p>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-primary">Save changes</button>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              </div>
          </div>
      </div>
  </div>
  

  There is also a button, as you can see its HREF attribute makes a call to the route which is intended to be called via AJAX.

  <a href="api/myroute/someID" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Preview Reminder</a>
  

  I have written the back end code which returns content from api/myroute/someID

  So far the front end code is sample code copy/pasted from bootstraps documentation and the back end code is my own.

  The next step is to write some Javascript which takes the content of the AJAX call to api/myroute/someID and place it in the modal window.

  The problem is that although I have NOT YET WROTE THIS CODE The content returned from this route is getting placed in the modal window automatically.

  However this only works correctly once. Opening a second modal window and putting a different "someID" on the end of the route (so it returns different data) results in a modal window that contains the result of the first AJAX call.

  I have 2 questions.

  1) How is this working? 2) How do i make it refresh the content of the modal each time it is opened
• Make a custom grid structure for bootstrap?

  First of all my english not perfect, sorry about that.

  I'm using bootstrap 3.3.7 and trying to custom grid, but I can't. I use a code structure like that but I don't know how to do inside ".container" > ".col-md-6" full width.

  I also add an image, thinking that I can't explain my problem. > IMAGE EXAMPLE

  <div class="container">
    <div class="row">
      <div class="col-md-5">Some content</div>
      <div class="col-md-1">Empty</div>
      <div class="col-md-6">Carousel</div>
    </div>
  </div>
• What's is the best way to reproduce excel smartart schemas in react?

  I want to build a conditional schema in my react app like the ones in excel:

  Simple process with chevrons

  Complex process

  What's the best way to do that in react? Do you have existing examples of this type of UI?

  My ideas:

  • Use a library (which one ?)
  • Build a conditional SVG object
  • Build custom components (one for each chevron for example)..

  Ideally it'd be responsive.
• Not able to install gulp-cli globally on Mac

  I am trying to install gulp-cli globally on my Mac but still now working after several tries. It's saying "-bash: gulp: command not found" Also, don't know why its always targetting node v6.11.1 even I remove that version too. Can anyone please help here?

  Mac OS - High Sierra - Version - 10.13.3 After running "sudo npm install gulp-cli -g" I am getting the below stuffs

  /Users/username/.nvm/versions/node/v6.11.1/bin/gulp -> /Users/username/.nvm/versions/node/v6.11.1/lib/node_modules/gulp-cli/bin/gulp.js
  + gulp-cli@2.0.1
  updated 1 package in 18.966s
  :~ username$ gulp -v
  -bash: gulp: command not found
  

  Thanks
• ReactJS: Ref React Element's width onComponentDidMount is wrong number

  Rendering and element, and adding a ref to that div element to get the width at the onComponentDidMount lifecycle stage. In componentDidMount, I print the ref element's scrollwidth and offsetwidth and they are not the exact numbers. But when I force re-render that page, the width is correct on componentDidUpdate.

  I am using ref callback and not ref string.