CODEWITHSUNDEEP
javascriptjqueryhtmleventsevent-handling
robert derwwe
robert derwwe

Reputation: 61

How to alert when scroll page only first time using javascript?

How to alert when scroll page only first time using javascript ?

I want to alert only first scroll page, How can i do that ?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(window).scroll(function() {
    var xxx;
    if (xxx === '') {
      var xxx = "test";
      var div = $("#myDiv");
      alert(div.height());
    }
  });
</script>
<DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Upvotes: 3

Views: 2314

Answers (4)

topsoftwarepro
topsoftwarepro

Reputation: 822

This code will only alert on the first scroll the user makes on the page.

var scrolled = false;
$(window).scroll(function() { if (scrolled == false) { alert("You Have Just Scrolled"); scrolled = true; } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>
<div>This is some text</div>

Upvotes: 0

Andreas
Andreas

Reputation: 21881

Use .one()

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

$(window).one("scroll", function() {
    console.log("foo");
});

Code snippet:

$(window).one("scroll", function() {
  console.log("foo");
});
div {
  height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>foo</div>

Upvotes: 3

vinayakj
vinayakj

Reputation: 5681

   onscroll = function () {
          var xxx = "test";
          var div = $("#myDiv");
          alert(div.height());
      
        onscroll = null; // remove function so wont get called next time
   };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Upvotes: 0

KAD
KAD

Reputation: 11112

Put you variable as global and use boolean instead of string which is a better practice when using code flags.Besides, no need to re-define you variable when setting it within the scroll function.

var xxx; 

$(window).scroll(function () {

if(!xxx)
{
    xxx = true;
    var div = $("#myDiv");
    alert(div.height());
}
  });
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Upvotes: 0

Related Questions