CODEWITHSUNDEEP
javascripthtmlcss
ohnenummer
ohnenummer

Reputation: 23

javascript hidden element visible at pageload

my html page contains this code:

function getUrlVars() {
  var vars = {};
  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
  });
  return vars;
}

var number = getUrlVars()["login"];

if (number == 'success') {
  $('.success_box').css("visibility" , "visible");
  setTimeout('$(".success_box").css("visibility" , "hidden")', 5000);
} else {
  $('.success_box').css("visibility" , "hidden");
}
.success_box {
  width: 275px;
  background-color: #333;
  height: 50px;
  border-radius: 10px;
  position: absolute;
  right: 10px;
  top: 60px;
  vertical-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success_box_text {
  display: inline-block;
  color: rgb(228, 23, 23);
  text-decoration: none;

}

.success_box_text_color {
  color: #33cc33;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="success_box">
   <div class="success_box_text">
     Login <span class="success_box_text_color">completed ✔</span>
   </div>
 </div>

Javascript is triggered by url parameter: http://localhost/scarface-master/scarface/index.html?login=success problem: at page load the success_box is visible for 2 sec although the parameter is not set. After two seconds the success_box switches to hidden. Desired behavior: Box is not visible without parameter. Any tips to get rid of this?

Upvotes: 1

Views: 479

Answers (2)

Lorem Ipsum
Lorem Ipsum

Reputation: 357

Add this extra rule for class success_box to your CSS

.success_box {
    display:none
}

and replace your JS code with this

if (number == 'success') {
    $('.success_box').show();
    setTimeout('$(".success_box").hide()', 5000);
}

The problem is it takes JS file some time to load. So you must set the default display state of the box to none

Upvotes: 1

Internet User
Internet User

Reputation: 36

hide as default this element in CSS. Your jquery code runs with delay.

function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
});
return vars;
}
var number = 'success';


if (number == 'success') {
$('.success_box').css("visibility" , "visible");
setTimeout('$(".success_box").css("visibility" , "hidden")', 5000);
} else {
$('.success_box').css("visibility" , "hidden");
}
.success_box {
  visibility: hidden;
  width: 275px;
  background-color: #333;
  height: 50px;
  border-radius: 10px;
  position: absolute;
  right: 10px;
  top: 60px;
  vertical-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success_box_text {
  display: inline-block;
  color: rgb(228, 23, 23);
  text-decoration: none;
}

.success_box_text_color {
  color: #33cc33;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<div class="success_box">
   <div class="success_box_text">
     Login <span class="success_box_text_color">completed ✔</span>
   </div>
 </div>

` just add .success_box { visibility: hidden; ... in css

Upvotes: 1

Related Questions