I am not Getting Any Errors but When i am trying to click on Form my form Type Mouse does not appear Ask Question

My form is Getting no Errors on Chrome Developers Error code but i am not getting and Text field or anything in my forms it is a very easy task but it had become a headache for me i will be very Helpfull if you help me with this

 <section class="reservation">
        <img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
        <div class="wrapper">
            <div class="container-fluid">
                <div class=" section-content">
                    <div class="row">
                        <div class="col-md-5 col-sm-6">
                            <form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
                                      {{ csrf_field() }}

                                <div class="row">
                                    <div class="col-md-6 col-sm-6">

                                    <div class="form-group">
                                        <input type="text" class="form-control reserve-form empty iconified" name="name" id="name"
                                               placeholder="    Name">
                                    </div>
                                    <div class="form-group">
                                        <input type="email" name="email" class="form-control reserve-form empty iconified" id="email"  placeholder="    e-mail">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone"  placeholder="    Phone">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder="  Time">
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3"  placeholder="    We're listening"></textarea>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <button type="submit" id="submit" name="submit" class="btn btn-reservation">
                                        <span><i class="fa fa-check-circle-o"></i></span>
                                        Make a reservation
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

Background image with react js – not displaying full screen Ask Question

I’m used to react native and trying my hand at reactjs, however I’m getting really frustrated with myself as I understand a lot of how react works from using react native but I can’t style my components properly as I’m not used to css.

I’m using the ant design UI framework to help me build a small web application, and as of now I have my nav bar along the top of the app but want to set an image below that takes up 100% of the screen and have the height auto set to the aspect ratio.

I’m currently trying this but it doesn’t work.

<div className="background">
</div>

//In App.css

.background {
  background-image: url('./assets/main-image.jpg');
  background-size: 'contain';
  width: 100%;
  height: auto;
}

I’ve tried the above but and a few other methods but nothing is working. It appears that the height is dependent upon whatever the content inside the div is. For example, if I place a h1 tag inside the div then I can see the image but only a few pixels in height.

My image is 4000px in width and is landscape. I just want to be able to dynamically display the image depending on screen resolution.

Can someone point me in the right direction?

Thanks

Edit: I’ve now set my css background class to this and it’s nearly there.

  background-image: url('./assets/main-image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;

The only issue is now I’m left with a decent size of padding below the image due to it rendering the full height of my view port

Jquery on window resize append one time error Ask Question

i have a problem on window resize. I should to append one time on resize an element to anather div but it appedn more times. How can i fix it ?
Here you can find an example, resize window more time and after that click on first div and you will see the problem :

$(window).on('resize', function() {
    var windowW = $(window).width();

console.log(windowW);
        if(windowW <= 670){
          
           $('.take').on('click touchstart', function(){
                var info = $(this).text();
                $('.add').append('<p>Inormation :'+info+'</p>');
                });

          } else {
            $('.add').empty();

        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="take">Some information </div>
<div class="add"> </div>

drop down hamburger not working Ask Question

I am just not sure what i am missing on this drop down hamburger iam pretty sure my data-target is right

   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
          <div class="navbar-brand">T<span> - </span>C<!--<img src="#">--></div>
        </div>

        <div class="navbar-collapse collapse" id="myNav">
          <ul class="nav navbar-nav navbar-right">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#employment">Employment</a></li>
            <li><a href="#connect">Contact</a></li>
          </ul>
        </div>
      </div>

    </nav>

DIV popping into existence instead of slideDown() method occurring Ask Question

I have an issue similar to the one found in this thread. The difference with mine however is that I have a width set in the CSS. With my code, there are two divs using slideDown() in sequence in order to create a smooth transition effect. The first div tail works exactly as expected, but on the second head, it simply pops into existence, no matter what time I add to it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('.tail').hide();
    $('.head').hide()
    $("#button265764").click(function() {
      $(".tail").slideUp().delay(0).slideDown(2000, "swing");
      $(".head").slideUp().delay(2000).slideDown(1000, "swing");
      $('#button265764').unbind('click');
    });
  });
</script>

<style>
  <!-- not used in this transition) -->
  .h_tail {
    position: relative;
    margin-top: 10px;
    height: 10px;
    width: 100px;
    background-color: #73aae7;
    margin-left: 5px;
    transform: translateX(75px);
  }
  
  .tail {
    position: relative;
    width: 10px;
    height: 50px;
    background-color: #73aae7;
    margin-left: 5px;
  }
  
  .head {
    position: relative;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #73aae7;
    margin-left: 0;
  }
</style>
<!--Stand-in, actual button is elsewhere-->
<div id="button265764">click me
</div>
<div class="tail">
</div>

<div class="head">
</div>

swiper.min.js scrollbar: Force scrollbar Ask Question

I have used swiper.min.js in my website. However, I need a scrollbar to appear on the right side of my website, because majority of my target audience will be using laptops without mousewheel, and it will be impossible for them to scroll without difficulty.

I already tried adding the following:

<div class="swiper-scrollbar"></div>

and instantiating it as follows from my HTML file:

 <script>
   var swiper = new Swiper('.swiper-container', {
     scrollbar: {
       el: '.swiper-scrollbar',
       hide: true,
     },
   });
 </script>

None of this works. A scrollbar momentarily appears and it instantly disappears. I have checked swiper.min.js documentation, but it doesn’t work. How can I force a scrollbar with proper scroll functionality on my website?

Automatically resize fixed image, to fit under content Ask Question

Okay, so I have a simple one page website, that has content in div at top, and then an image at bottom. This image needs to be fixed to bottom, and it needs to automatically resize to fit under the div above.

Any ideas on what would be a good way to do this? If I just set the image to:

img {
    position: fixed;
    bottom: 0px;
}

it works at first, but on smaller screens, the image just covers the div above.
Setting max-height on image doesnt work either, as the div above the image sometimes covers 40% of the screens, and other times it covers 80% of screen.

Any ideas at all on what else I can try?